关键词:块级元素  行级元素 行内块元素
 

一、 概述

 
        HTML(Hyper Text Markup Language )作为一种标记语言,网页所有的内容均书写在标签内部,标签是组成Html页面的基本元素,因此对标签特性的理解在HTML的学习过程中比较重要。

二、基本分类

     HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签,其他少数为空标签,常见的空标签有<input />、 <img />、  <area />、 <base />、 <link />等。
 
      HTML中对标签另一种分类方式,是根据标签在文档中的位置特性进行分类的,它将元素分为三类:块级元素,行内元素,行级块元素(也称块级行元素)。
 
      1.块级元素(block)
         特点: (1)可以设置宽高、内、外边距;
                (2)独占一行(即前后均有换行);
                (3)块级元素如果不设置宽度和高度,则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。
          常见的块级元素: div、p、h1、h2......hn,ol、ul、dl、li、form、table
         
     2.行级元素(inline)
          特点: (1)不可设置宽高、上下内、外边距。(左右内、外边距设置有效)
                     (2)其宽度和高度由其内容自动填充。
                     (2)其他行级元素共处一行
           常见的行级元素:a、span、i、lable等
 
      3.行内块元素(inline-block)
            特点:(1)可以设置宽高、内外边距;
                       (2)可以与其他行内元素、内联元素共处一行;
            常见的内联元素:input、img
 
       4.元素之间的转化
               可以在行内样式或css样式中改变元素的display将三种元素进行转换。
               display:block;(将元素变为块级元素)
               display:inline;  (将元素变为行级元素)
               display:inline-block;(将元素变为行级块元素)
 
 
                
                    
        
              
               
              
               
 
 
 

HTML标签类型及特点的更多相关文章

  1. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  2. 第五篇、HTML标签类型

    <!--1.块级标签 独占一行,可以设置高度和宽度 如:div p h ul li  -----display: none(隐藏标签) block(让行内标签变块级标签) inline(让块级标 ...

  3. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  4. 创建标签的两种方法insertAdjacentHTML 和 createElement 创建标签 setAttribute 赋予标签类型 appendChild 插入标签

    1. 建立字符串和insertAdjacentHTML('beforeEnd', ) 2. 通过createElement 创建标签  setAttribute 赋予标签类型 appendChild ...

  5. NFC 标签类型

    NFC 标签类型 Type 1:Type 1 Tag is based on ISO/IEC 14443A. This tag type is read and re-write capable. T ...

  6. 伪类的格式重点:父标签层级 & 当前标签类型

    伪类的格式重点:父标签层级 & 当前标签类型 通过例子说明: css1: span:nth-of-type(2){color: red;} css2: span :nth-of-type(2) ...

  7. CSS3新增特性\HTML标签类型

    RGBA:透明度      作用: 设置透明度(R G B A)   opacity:不透明度     文字也会被设置不透明度   圆角      border-radius:圆角{左上角,右上角.. ...

  8. CSS的标签类型

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. mybatis <collection>标签 类型为string时无法获取重复数据错误

    1.场景: fyq_share_house 表 和 fyq_sh_tag 表 两张表是一对多的关系, 一个楼盘对应多个标签,在实体类ShareHouse中使用 /** * 楼盘标签 */ privat ...

随机推荐

  1. 仿QQ空间和微信朋友圈,高解耦高复用高灵活

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...

  2. 在ASP dot Net Core MVC中用Controllers调用你的Asp dotnet Core Web API 实现CRUD到远程数据库中,构建你的分布式应用(附Git地址)

    本文所有的东西都是在dot Net Core 1.1环境+VS2017保证测试通过. 本文接着上次文章接着写的,不了解上篇文章的可能看着有点吃力.我尽量让大家都能看懂.这是上篇文章的连接http:// ...

  3. Angular2快速起步——构建一个简单的应用

    构建此应用,分为如下几步: 1.环境准备:安装Node.js和npm: 2.创建并配置此项目: 3.创建应用: 4.创建组件并添加到应用程序中: 5.启动应用程序: 6.定义作为该应用的宿主页面: 7 ...

  4. springmvc 导出excel

    1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  5. Python简要学习笔记

    1.搭建学习环境 推荐ActivePython,虽然此乃为商业产品,却是一个有自由软件版权保证的完善的Python开发环境,关键是文档以及相关模块的预设都非常齐备. ActivePython下载地址: ...

  6. Docker - 容器直连

    本文是在原文基础上的实际操作验证记录和细节补充. 默认情况下,容器连接到虚拟网桥docker0提供的虚拟子网中,容器之间通过默认网关(虚拟网桥docker0接口地址)建立连接. 如果不使用虚拟网桥,用 ...

  7. PHP实现二维数组排序(按照数组中的某个字段)

    亲测可行

  8. c++ STL stack & queue

    Stack 主要的方法有如下: empty() 堆栈为空则返回真                  pop() 移除栈顶元素(不会返回栈顶元素的值)                  push() 在 ...

  9. poj 1056 IMMEDIATE DECODABILITY 字典树

    题目链接:http://poj.org/problem?id=1056 思路: 字典树的简单应用,就是判断当前所有的单词中有木有一个是另一个的前缀,直接套用模板再在Tire定义中加一个bool类型的变 ...

  10. Windows下安装虚拟机和Linux

    首先必须开启BIOS中的虚拟化 常见计算机BIOS快捷键: 联想E431 F1dell F2微星 DELETE 默认是开启HP pavilion notebook 15-ab527TX F9和F10m ...