HTML语义化

语义化标签有哪些

结构

header、main、ul、ol、li、footer、nav、article、section、aside、

• dl、dt、dd

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>

列表标题

列表内容

列表内容

列表标题

列表内容

列表内容

• table

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Monthly savings

Month	Savings
January	$100
February	$50

• fieldset:可以将表单内的相关元素分组。

• legend:为 <fieldset> 元素定义标题。

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

表单

input、textarea、

突出强调

• em： 强调（斜体）

• strong 更强烈的强调

• mark

• ins 定义已经被插入文档中的文本(下划线)

• del 定义文档中已删除的文本。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

My favorite color is blue red!

引用

• q 单行引用

• blockquote

标签的语义为用来标记那些 一段或者好几段的长篇引用。 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxbaidu.com

• cite:标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。

<img src="https://www.runoob.com/try/demo_source/img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

• datalist

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

• figure: 用于包含与主要文本相关的图像、表格、图表等
• figcaption:提供相关的标题

<figure>
  <img src="https://www.runoob.com/try/demo_source/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

• time

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>
<p><strong>注意：</strong>Internet Explorer 8 及更早版本不支持  time 标签。</p>

我们在每天早上 9:00 开始营业。

我在 情人节 有个约会。

注意：Internet Explorer 8 及更早版本不支持 time 标签。

• a:不仅仅可以跳转链接，还可以跳转电话，email 等

其他

button、 、time、label、

好处

• 便于团队开发和维护，语义化更具可读性
• 有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
• 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页。
• css加载失败的时候可以看清楚结构

参考

• MDN:Semantics（语义）
• 幕课双越《面试全家桶》
• HTML语义化标签总结
• HTML dl dt dd 标签