Html - 行内元素、块元素和空元素

总结一下行内元素、块元素以及空元素。(因为太多了只列举常见的)

一. 常见行内元素

  • 与其他行内元素并排,无法设置width和height。
  • 宽高根据内容变化。
  • 一般情况下,行内元素只能包含数据和其他行内元素。
标签名 描述
i 斜体
em 着重强调,斜体
a 锚点
br 换行符
span 短语内容的通用行内容器
sub / sup sub(下标)、sup(上标)
label 表示用户界面中某个元素的说明
strong 表示文本十分重要,一般用粗体显示

二. 行内替换元素

  • 属于行内元素,同时也属于替换元素,可以设置width和height属性
    inputimgtextarea

三. 常见块元素

  • 独占一行,可以设置width和height。
  • 如果不设置宽度,那么宽度将默认变为父级的100%。
  • 块级元素可以包含行内元素和其他块级元素。
  • 大部分HTML5新元素都是块级元素。
标签名 描述
address 提供联系信息
article HTML5 文章区域
aside HTML5 页面的侧边栏
audio / video HTML5 audio(音频)、video(视频)
canvas HTML5 画布
div 通用型的流内容容器
fieldset 对表单中的控制元素进行分组(也包括 label 元素)
figure / figcaption HTML5 figure(独立的流内容)、figcaption(figure的标题)
header / footer HTML5 header(文档的头部区域)、footer( section 或 document 的页脚)
form 表单
h1 - h6 / hgroup h1-h6(标题)、hgroup(标题组)
hr 分割线
ol / ul / dl ol(有序列表)、ul(无序列表)、dl(定义列表)
output HTML5 定义不同类型的输出,比如脚本的输出
p 段落
section HTML5
table 表格

三. 常见空元素

  • 没有内容的元素,也就是说一般直接闭合。
标签名 描述
br 换行符
meta 元数据信息
hr 分割线
source audio和video的媒体来源
link 外部资源链接
input 输入框
img 图片
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容