HTML标签目录整理

啥是个语义化？

语义化就是明白每个标签的用途，让人一看就懂，让搜索引擎便于解析，让屏幕阅读器便于阅读。比如标题我们可以用h标签，段落可以用p标签，当然我们可以用div代替，但别人不能一看就知道它是标题，又或者是段落，搜索引擎和屏幕阅读器也无法解析。

文本格式化标签

<strong></strong>加粗 <b></b>

<em></em>倾斜 <i></i>

<ins></ins>下划线 <u></u>

<del></del>删除线 <s></s>

<sup>上标

<sub>下标

p span{font-weight:bold;}字体加粗

P span{font-style:italic;}字体倾斜

P span{text-decoration:underline;}字体下划线

P span{text-decoration:through;}删除线

p{text-indent:2em;}段落开头空两个文字大小的距离

p{line-height:2em;}文字2倍行高

P{letter-spacing:20px;}文字间距20&英文字母间距

P{word-spacing:20px;}英文单词间距

组织内容

<p>定义一个段落

<hr>一根哄割线

<pre>代表其内容已经预先排版过，格式应当保留 。介绍大段代码可以用

<blockquote>引用长文本

<ol>有序列表

<ul>无序列表

<li>列表中的列表项

<dl>定义一个定义列表，会默认前后层级关系

<figure>代表一个和文档有关系的图例

<div>通用容器

文字形式

<a>超链

<em>强调文字

<strong>代表特别重要的文字

<small>代表注视，如免责声明、版权说明等

<s>代表不准确或者不相干的内容

<cite>可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

<q>引用一句话（给文本加个引号）

<dnf>地下城，哦不是，代表定义一个定义项目

<code>定义代码

<var>变量

<kdb>键盘文本

<mark> 元素用于高亮文本

<ruby> 注释（中文注音或字符），与<rt> 标签一同使用，浏览器不支持<ruby>时用<rp>

编辑

<ins> 定义插入文本。

<del> 定义移除文本，与<ins>标签一起使用，来描述对文档的更新和修正

嵌入内容

<img>插入图片

<iframe>内联框架

<embed>定义嵌入的外部资源，比如应用程序、交互文档、插件

<object>嵌入对象元素，代表一个外部资源。如图片（用img就行）、HTML子文档、插件

<video>视频

<audio>音频

<source>定义媒体源（比如上面那俩）

<tarck>为视频、音频指定字幕

<canvas>图形容器，用脚本来绘制图形

<map>用于定义客户端图像映射。图像映射指的是带有可点击区域的图像。

<area>map 元素包含若干area元素，定义图像映射中的可点击区域。

<svg>定义一个嵌入式矢量图。

<math>数学公式

表格

<table>表格数据

<caption>代表表格的标题

<colgroup>定义表格列

<col>同上

<tbody>表主体

<thead>表头

<tfoot>表尾

<tr>表格中的行

<td>单元格

<th>表格中的头部单元格

表单

form表单，由控件组成

<fieldset>控件组

<legend>控件组标题

<label>表单控件的标题

<input>定义输入域形态（text、password、checkbox、radio等）

<button>按钮

<select>下拉框

<datalist>代表提供给其他控件的一组预定义选项

<optgroup>代表一个选项分组

<option>代表一个<select>元素或<daralist>元素中的一个选项

<textarea>多行文本

<output>计算值

<progress>进度条

<meter>代表滑动条