HTML5中的行级标签和块级标签

块级标签(block element)

1.独占一行,不和其他元素待在同一行,宽度自动填满父元素宽度。

2.可设置宽高(width,height)、内外边距属性(margin,padding)。

有div,p,h1-h6,ul,li,dl(定义列表,跟ul…li类似),dt(定义了定义列表中的项目),dd(定义描述项目的内容,跟dt一起搭配)

3.常见的块级元素

       * 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)

1.行级标签又称为内联标签,行级标签不会单独占据一行,设置宽高(width,height)无效。

2.行内内部可以容纳其他行内元素,但不可以容纳块元素。
有span、strong、em、b、i、input、a、img、u(下划线),em(强调),i(斜体),sub(下标),sup(上标)等。

3.行内元素的水平方向的padding-left和padding-right都会产生边距效果,但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

4.常见的行级标签有span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite。

行内块标签(inline-block element)

1、能和其他元素待在一行

2、能设置宽高

有<img>,<input>,<textarea>等

a - 锚点
b - 粗体(不推荐)
br - 换行
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线

行块级标签相互转化

通过css样式中的displiay属性对行块级标签进行相互转换,属性值中inline(元素以行内标签进行展示),block(元素以块级标签进行展示),inline-block(元素以行内块级标签进行展示)。

 display属性

可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

参考文章:

https://www.cnblogs.com/Jackie0714/p/4923639.html

https://blog.csdn.net/natalie86/article/details/42584321?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param

https://blog.csdn.net/nanjinzhu/article/details/82716522

转载文章链接已标明,如有侵权请告知。文章仅作为知识记忆所用,如有错误,敬请指正。
原文地址:https://www.cnblogs.com/YorkZhangYang/p/12334574.html