你真的懂HTML5的语义化吗

2020-02-18 本文已影响0人 adiu

什么是语义化

就是用合理、正确的标签来展示内容

语义化的好处

代码结构清晰，方便阅读，有利于团队合作开发
有利于搜索引擎优化（SEO）

语义化内容标签

标题

h1 一个页面只可有一个，多用于包含logo

h2 模块标题

h3 段落的小节标题

h4, h5, h6 不常用
强调内容的重要性
```
<strong>智能定制</strong>
```
strong和em都表示强调，strong显示为粗体，em显示为斜体，且strong的强调程度要比em更高
视觉上突出显示文本
```
<mark></mark>
```
如：搜索结果中高亮的关键词（百度关键词搜索参照）

时间

<p>文章发表于<time datetime="2019-08-28 20:00">2019-08-28</time></p>

定义联系信息
```
<address></address>
```
可定义article元素的作者信息，但不适用于嵌套的article元素
代表一段独立的内容，经常与说明配合使用
```
<figure>
  
  <figcaption>标题/说明</figcaption>
</figure>
```
figcaption元素必须是figure元素的第一个或者最后一个子元素

语义化结构标签

section使用场景

对页面中的内容进行分块，一个section元素通常由标题以及内容组成

<header></header>
<section>
  <h2>标题</h2>
  <p>段落内容</p>
</section>
<section>
  <h2>标题</h2>
  <img src="./img/product.jpg" alt="图片说明">
</section>
<section>
  <h2>标题</h2>
  <p>段落内容</p>
</section>
<footer></footer>

注：不推荐为那些没有标题的内容使用section标签

article使用场景

它比section具有更明确的语义，代表一个独立的、完整的相关内容块，可以包含一个或多个section

<article>
  <header>
    <h2>标题</h2>
    <p>发表日期：<time datetime="2019-08-28 20:00">2019-08-28</time></p>
  </header>
  <p>文章内容段</p>
  <p>文章内容段</p>
</article>

aside使用场景

独立于内容的一部分，且可以被单独的拆分出来而不会使整体受影响，常用于定义页面侧边栏
```
<aside>
  <h2></h2>
  <ul>
    <li></li>
    <li></li>
  </ul>
</aside>
```
main使用场景

用来呈现文档或应用的主体部分，一个页面只能有一个main标签
```
<main></main>
```

header使用场景

页面中的header

<header>
  <h1 role="logo">
    <a href="/">梦创</a>
  </h1>
  <nav>
    <a href="/">首页</a>
    <a href="/product">产品介绍</a>
    <a href="/about">关于我们</a>
  </nav>
</header>

分块中的header

<section>
  <header>
    <h2>标题</h2>
    <p>信息介绍</p>
  </header>
  <p>分块内容段</p>
</section>

文章中的header

<article>
  <header>
    <h2>标题</h2>
    <p>发表日期：<time datetime="2019-08-28 18:00">2019-08-28</time></p>
  </header>
  <p>文章内容段</p>
</article>

注：article、section、aside、nav都可以拥有自己的header和footer

role属性的使用场景

用来增强语义性，当现有的HTML标签不能充分表达语义的时候，可以借助role来说明

你真的懂HTML5的语义化吗

什么是语义化

语义化的好处

语义化内容标签

语义化结构标签

猜你喜欢

热点阅读