HTML5语义化，你了解多少？
一、介绍
很多时候我们写HTML，为了方便都会直接使用div和span标签，再通过class来确定具体样式。网站哪—部分为标题，哪一部分为导航，哪—部分为头部和底部，都只能通过class进行确定。
但class命名规范却又没有一套统一的标准，因此导致很多时候无法确定整体网站的结构。
因此，在HTML5出现后，添加了关于页面布局结构的新标签。而在HTML书写过程中，根据不同的内容使用合适的标签进行开发，即为语义化。
在编程中，语义指的是一段代码的含义(这个HTML的元素有什么作用，扮演了什么样的角色)。HTML语义元素清楚地向浏览器和开发者描述其意义，例如<form> 、<table> 以及<img>等。
二、优点
对搜索引擎友好，有了良好的结构和语义，网页内容自然容易被搜索引擎抓取。
三、为什么要语义化
1、其他开发者便于阅读代码，通过不同标签明白每个模块的作用何区别;
2、结构明确、语义清晰的页面能有更好的用户体验，在样式(css）没有加载前也有较为明确的结构，更如img这一类的，在图片无法加载的情况下有alt标签告知用户此处图片的具体内容;
3、利于SEO，语义化便于搜索引擎爬虫理解，和搜索引擎建立良好的沟通，能让爬虫爬去更多关键有效的信息;
4、方便其他设备阅读(如屏幕阅读器，盲人设备和移动设备等)。
四、html5新增语义元素以及使用
1、header:标签定义“网页”或“section”的页眉。通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
2、footer标签:代表“网页”或“section”的页脚。通常含有该节的一些基本信息，如:作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
<!DOCTYPE html>
<html>
<body>
<footer>
作者：xxx<br>
Copyright©xxx.rights
</footer>
</body>
</html>
3、<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<!DOCTYPE html>
<html>
<body>
<section>
<h1>xxx</h1>
<p>
xxxxx
</p>
</section>
<section>
<h1>xxx</h1>
<p>
xxxxxx
</p>
</section>
</body>
</html>
4、article 定义文章。 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
article 元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论
<!DOCTYPE html>
<html>
<body>
<article>
<h1>xxx</h1>
<p>哈哈哈哈哈哈啊哈哈哈哈哈哈</p>
</article>
</body>
</html>
5、aside定义页面内容之外的内容。标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
aside标签:表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。
1）用于article标签之内，此时表示的是该独立内容的附属信息部分;
<article>
<p>article内容区</p>
<aside>
<span>附属信息1</span>
<span>附属信息2</span>
<span>附属信息3</span>
</aside>
</article>
2）用于article标签之外，此时作为页面或站点全局的附属信息部分。
<aside>
<h1>附属信息标题</h1>
<a href="#">附属信息...</a>
<a href="#">附属信息...</a>
<a href="#">附属信息...</a>
</aside>
6、details定义元素的细节。用于描述文档或文档某个部分的细节。
<!DOCTYPE HTML>
<html>
<body>
<details>
<summary>嘻嘻嘻嘻嘻嘻嘻</summary>
<p>哈哈哈哈哈哈啊哈哈哈哈哈哈</p>
</details>
</body>
</html>
7、summary为 details元素定义可见的标题。标签包含 details 元素的标题，“details” 元素用于描述有关文档或文档片段的详细信息。
8、nav 标签定义导航链接的部分
用在整个页面主要导航部分上，不合适就不要用nav元素;可用作页面导航的链接组，并不是所有的链接组都要放进nav元素中，只需将主要、基本的链接组放进其中;
注意:例如，在页脚中通过会有一组链接，包括服务条款，首页，版权声明等，使用footer元素是最恰当的。
具体用途:传统导航条、侧边栏导航、业内导航、翻页操作等
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
9、datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
<!DOCTYPE HTML>
<html>
<body>
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</body>
</html>
10、mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <m >标签。
<!DOCTYPE HTML>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
五、来一个综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化结构标签</title>
<style type="text/css">
header {
height: 50px;
line-height: 50px;
background-color: pink;
}
header span {
height: 20px;
font-size: 20px;
}
header span,div,nav {
float: left;
margin-left: 40px;
}
section {
position: relative;
margin-top: 30px;
height: 200px;
background-color: powderblue;
}
hgroup {
position: absolute;
right: 500px;
background-color: rebeccapurple;
}
aside {
display: flex;
flex-direction: column;
position: absolute;
left: 0;
background-color: rosybrown;
}
article {
position: absolute;
bottom: 0;
width: 100%;
background-color: saddlebrown;
}
footer {
height: 50px;
background: #abcdef;
line-height: 50px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #696969;
}
</style>
</head>
<body>
<header>
<span>头部标签</span>
<div>Logo</div>
<!-- 导航条 -->
<nav>
<a href="index.html">首页</a>
<a href="#">介绍</a>
<a href="#">案例</a>
<a href="#">链接</a>
<a href="#">关于</a>
</nav>
</header>
<!-- 定义块状区域 -->
<section>
<!-- 用于包裹标题标签，可以直观了解到这是一个标题集合 -->
<hgroup>
<h1>哈哈哈哈哈哈哈</h1>
<h3>哈哈哈哈哈哈哈</h3>
<h4>哈哈哈哈啊哈哈哈……</h4>
</hgroup>
<!-- 可以用于文章侧栏目 -->
<aside>
<a href="#se1">Section One</a>
<a href="#se2">Section Two</a>
<a href="#se3">Section Three</a>
</aside>
<!-- 文章 -->
<article>
文章内容区域
</article>
</section>
<section>
<!-- 多媒体并可附带标题 -->
<figure>
<figcaption>标题</figcaption>
<div class="video">...</div>
</figure>
</section>
<section>
<!-- 用于下拉框 -->
<input type="text" list="car">
<datalist id="car">
<option value="bmw">
<option value="ford">
<option value="volvo">
</datalist>
</section>
<footer>
用于尾部,Copyright,,,,,
</footer>
</body>
</html>
本篇博客是自己学习笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：1105810790