什么是语义化
就是用合理、正确的标签来展示内容
语义化的好处
- 代码结构清晰，方便阅读，有利于团队合作开发
- 有利于搜索引擎优化（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来说明
网友评论