前端编程之路一一HTML标签分类
2020-12-09 本文已影响0人
前端王祖蓝
HTML标签分类
HTML标签有更多种，不仅限于以下标签，仅作记录。
块级元素
块级元素（block level element）
可容纳内联元素和块状元素，宽度和高度起作用
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
宽度没有设置时，默认为100%
可以包含某些块级元素和内联元素
| 标签名 | 标签作用 | 主要属性 | 说明 |
|---|---|---|---|
| address | 定义文档或文章的作者/拥有者的联系信息 | 类似于 acronym标签，H5不支持 | |
| article | 定义文章 | H5新增元素 | |
| aside | 定义其所处内容之外的内容可用作文章的侧栏 | H5新增 | |
| audio | 声音内容 | autoplay : 音频就绪后自动播放、controls : 向用户显示控件、loop : 结束后重新播放、muted : 静音播放、preload : 加载页面时加载，预备播放，与autoplay属性冲突、src : 音频地址 | H5新增 |
| blockquote | 定义块引用 | ||
| center | 居中对齐块 | 不推荐使用 | |
| dir | 目录列表 | 不推荐使用 | |
| div | 定义节 | ||
| dl | 定义列表 | ||
| fieldset | 定义围绕表单中元素的边框 | ||
| footer | 定义文档或节的页脚 | H5新增 | |
| form | 定义供用户输入的 HTML 表单 | ||
| hr | 水平分隔线 | ||
| h1 - h6 | 定义 HTML 标题 | ||
| header | 定义 section 或 page 的页眉 | H5新增 | |
| iframe | 定义内联框架 | ||
| nav | 定义导航链接 | H5新增 | |
| noframes | 不支持框架的用户的替代内容 | ||
| noscript | 不支持客户端脚本的用户的替代内容 | ||
| section | 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分 | ||
| ol | 排序列表 | ||
| ul | 非排序列表 | ||
| p | 段落 | ||
| pre | 格式化文本 | ||
| table | 表格 |
内联元素
内联元素（inline element）
只能容纳文本或其它内联元素，宽度和高度不起作用
内联元素允许其他内联元素与其位于同一行
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变
宽高就是内容的高度，不可以改变
只能内联元素，不能包含块级元素
| 标签名 | 作用 | 属性 | 说明 |
|---|---|---|---|
| a | 锚点定义超链接，用于从一张页面链接到另一张页面 | href : 指向链接目标、target : 打开链接的方式、- _blank 打开新标签页、- _parent 覆盖父页面、- _self 当前标签页、- _top 覆盖当前页面、- framename | |
| abbr | 缩写通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息 | 类似于 acronym标签，H5不支持 | |
| b | 粗体字 | 不推荐 | |
| bdo | 覆盖默认的文本方向，设置文字方向 | dir : 定义文字方向、- ltr left to right、- rtl left to right、- auto | |
| big | 大号字体 | ||
| br | 换行 | ||
| cite | 定义引用 | ||
| code | 定义计算机代码 | ||
| dfn | 定义项目 | ||
| em | 强调文本 | ||
| img | 图片 | ||
| input | 定义输入控件 | ||
| meter | 度量 | high : 被视作高的值的范围、low : 被视作低的值的范围、max : 范围的最大值、min : 范围的最小值、optimum : 度量的优化值、value : 度量的当前值 | H5新增 |
| progress | 标示任务的进度（进程） | max : 总值、value : 当前值 | H5新增 |
| span | 常用内联容器，定义文本内区块 |
其他元素
由于有一些元素需要一些其他文件的支持，无法测试其分类
| 标签名 | 作用 | 属性 | 说明 |
|---|---|---|---|
| area | 带有可点击区域的图像映射 | ||
嵌套在 <map> 标签中 |
coords : 定义可点击区域的坐标、shape : 定义区域的相状、- default- rect 矩形(左上角右下角坐标)、- circle 圆形(圆心坐标半径长度)、- poly 多边形(多边形各项顶点的坐标值) |
<img> 标签中的 usemap 属性与 map 标签 name 属性相关联 |
|
| applet | 定义嵌入的 applet | code : 指向java applet的文件名 | 使用object代替，H5不支持 |
| base | 为页面上的所有链接规定默认地址或默认目标 | ||
| basefont | 定义基准字体 | 没有浏览器支持，不推荐使用 | |
| canvas | 定义图形，比如图表和其他图像 | H5新增 | |
| bdi | 设置一段文本，使其脱离其父元素的文本方向设置 | dir : 定义文本方向、- ltr left to right、- rtl left to right、- auto | H5新增,Firefox、Google支持 |
| button | 定义按钮 | H5新增了一些属性 | |
| caption | 定义表格标题 | 紧随 table 标签之后 | |
| datalist | 定义选项列表 | ||
| dialog | 定义对话框或窗口 | ||
| embed | 定义嵌入的内容，比如插件 | H5新增 | |
| figure | 规定独立的流内容 | H5新增 | |
| figcaption | 定义 figure元素的标题 | H5新增 | |
| frame | frameset 中的一个特定的窗口（框架） | ||
| frameset | 定义框架集 | ||
| legend | 定义 fieldset 元素的标题 | ||
| map | 定义图像映射 | ||
| mark | 定义有记号的文本 | H5新增 |
