【二】HTML语义：div和span够吗？
2019-01-24 本文已影响0人
alanwhy
HTML是典型的入门容易，精通困难的一部分知识。
HTML的标签可以分为很多种，如head中的元信息类标签，又比如img、video、audio之类的替换型媒体标签。这篇主要说下：语义类标签
语义类标签
- 特点：视觉表现上互相都差不多，主要在于表达了不同的语义，如
section、nav、p；
<section>
<h1>HTML 语义 </h1>
<p>balah balah balah balah</p>
<section>
<h1> 弱语义 </h1>
<p>balah balah</p>
</section>
<section>
<h1> 结构性元素 </h1>
<p>balah balah</p>
</section>
......
</section>
- 优点：对开发者友好，增强了可读性，就算没有CSS的情况下，也可以看出网页的结构，便于团队的开发和维护；同时也十分适合机器阅读，更适合于搜索引擎检索，有效提升网页的搜索量，也支持读屏软件，根据文章自动生成目录等；
例如：
<h1>HTML 语义 </h1>
<p>balah balah balah balah</p>
<h2> 弱语义 </h2>
<p>balah balah</p>
<h2> 结构性元素 </h2>
<p>balah balah</p>
......
- 缺点：会造成大量的冗余标签，错误的使用语义标签，会给机器阅读造成混淆，增加嵌套，给CSS编写增加负担；
- 作用：作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义
语义
说话表达的意思，多数的语义都是由文字来承载的；
作为整体结构的语义类标签
很多浏览器推出“阅读模式”，语义化的HTML适合机器阅读的特性变得越来越重要；
来个典型的body，正确使用整体结构类的语义标签，让页面对机器更友好。
<body>
<header>
<nav>
……
</nav>
</header>
<aside>
<nav>
……
</nav>
</aside>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>
<address>……</address>
</footer>
</body>
除此之外，还有article，它是一种特别的结构，具有一定独立性质的文章。
一个典型的场景是多篇新闻展示在同一个新闻专题页面中，很适合用article
<body>
<header>……</header>
<article>
<header>……</header>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>……</footer>
</article>
<article>
……
</article>
<article>
……
</article>
<footer>
<address></address>
</footer>
</body>
顺便介绍下一些新的标签
-
header，通常出现在前部，表示导航或者介绍性的内容； -
footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等； -
aside，表示跟文章主题不那么相关的部分，可能包含导航、广告等工具性质的内容
