Html - 行内元素、块元素和空元素
2019-10-28 本文已影响0人
ElricTang
总结一下行内元素、块元素以及空元素。（因为太多了只列举常见的）
一. 常见行内元素
- 与其他行内元素并排，无法设置width和height。
- 宽高根据内容变化。
- 一般情况下，行内元素只能包含数据和其他行内元素。
| 标签名 | 描述 |
|---|---|
| i | 斜体 |
| em | 着重强调，斜体 |
| a | 锚点 |
| br | 换行符 |
| span | 短语内容的通用行内容器 |
| sub / sup | sub（下标）、sup（上标） |
| label | 表示用户界面中某个元素的说明 |
| strong | 表示文本十分重要，一般用粗体显示 |
二. 行内替换元素
- 属于行内元素，同时也属于替换元素，可以设置width和height属性
input、img、textarea
三. 常见块元素
- 独占一行，可以设置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 | 图片 |
