html所有的块级标签和行级标签有哪些

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:
  (1)display:inline;转换为行内元素

  (2)display:block;转换为块状元素

  (3)display:inline-block;转换为行内块状元素

块级元素

特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。

   2.元素的高度、宽度、行高和顶底边距都是可以设置的。  

   3.元素的宽度如果不设置的话,默认为父元素的宽度。

常见的块级元素:

...

      、、

      行级元素

      特点:1.可以和其他元素处于一行,不用必须另起一行。

         2.元素的高度、宽度及顶部和底部边距不可设置。

         3.元素的宽度就是它包含的文字、图片的宽度,不可改变。

                 4.对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间,行内元素尺寸由内含的内容决定,盒模型中 padding, border 与块级元素并无差异,都是标准的盒模型,但是 margin却只有水平方向的值,垂直方向并没有起作用。行内元素的水平方向的padding-left,padding-right,margin- left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。padding设置上下左右都有效,即会撑大空间但是不会产生边距效果。
       

      块元素(block element) HTML标签分类明细
      * address - 地址
      * blockquote - 块引用
      * center - 举中对齐块
      * dir - 目录列表
      * div - 常用块级容易,也是css layout的主要标签
      * dl - 定义列表
      * fieldset - form控制组
      * form - 交互表单 (只能用来容纳其它块元素)
      * h1 - 大标题
      * h2 - 副标题
      * h3 - 3级标题
      * h4 - 4级标题
      * h5 - 5级标题
      * h6 - 6级标题
      * hr - 水平分隔线
      * isindex - input prompt
      * menu - 菜单列表
      * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
      * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
      * ol - 排序表单
      * p - 段落
      * pre - 格式化文本
      * table - 表格
      * ul - 非排序列表

      内联元素(inline element) HTML标签分类明细
      * a - 锚点
      * abbr - 缩写
      * acronym - 首字
      * b - 粗体(不推荐)
      * bdo - bidi override
      * big - 大字体
      * br - 换行
      * cite - 引用
      * code - 计算机代码(在引用源码的时候需要)
      * dfn - 定义字段
      * em - 强调
      * font - 字体设定(不推荐)
      * i - 斜体
      * img - 图片
      * input - 输入框
      * kbd - 定义键盘文本
      * label - 表格标签
      * q - 短引用
      * s - 中划线(不推荐)
      * samp - 定义范例计算机代码
      * select - 项目选择
      * small - 小字体文本
      * span - 常用内联容器,定义文本内区块
      * strike - 中划线
      * strong - 粗体强调
      * sub - 下标
      * sup - 上标
      * textarea - 多行文本输入框
      * tt - 电传文本
      * u - 下划线
      * var - 定义变量

      可变元素 HTML标签分类明细
      * applet - java applet  
      * button - 按钮  
      * del - 删除文本  
      * iframe - inline frame  
      * ins - 插入的文本  
      * map - 图片区块(map)  
      * object - object对象  
      * script - 客户端脚本

      总结:1.块级元素 block 如 div h1 p ul li等 会换行 想在同一行显示
      需浮动或者display: inline

      2.行级元素 inline 如 a span b 多个可以并排显示 默认设置宽度是不起作用
      需设置 display: inline-block或者block才行

       

      你可能感兴趣的:(HTML)