HTML语义化

什么是HTML语义化呢?

根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读,写出优雅的代码的同时让浏览器的爬虫更好的解析

语义化标签的优势:

1)代码结构清晰,方便阅读

2)有利于搜索引擎优化

3)方便其他设备解析,以语义的方式来渲染网页

选择标签写代码时候需要遵循的:

1、尽可能少的使用无语义的标签div和span

2、在语义不明显时,既可以使用div或者p时,尽量用p(因为p在默认情况下有上下间距,对兼容特殊终端有利)

3、不要使用纯样式标签,如:b、font、u等,改用css设置

4、需要强调的文本,可以包含在strong或者em标签中。strong默认样式是加粗(不要用b),em是斜体(不用i)

5、使用表格时,标题要用caption,表头用thead(表头和一般单元格要区分开,表头用th,单元格用td)

6、表单域要用fieldset标签包起来,并用legend标签说明表单的用途

7、每个input标签对应的说明文本都需要使用label标签

常见的语义化标签:

<title>    页面主体内容
<h1-h6>    分级标题
<header>    通常包括网站标志、主导航、全站链接以及搜索框
<nav>    标记导航
<main>    页面主要内容,一个页面只能使用一次
<article>    定义外部的内容,其中的内容独立于文档的其余部分
<section>   定义文档中的节(section、区段)
<aside>    定义其所处内容之外的内容
<footer>    定义页脚
<small>    呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权
<strong>    用于强调文本,但它强调的程度更强一些
<em>    将其中的文本表示为强调的内容,表现为斜体
<figure>    规定独立的流内容(图像、图表、照片、代码等等)
<figcaption>    定义 figure 元素的标题
<cite>    表示所包含的文本对某个参考文献的引用
<time>    datetime属性遵循特定格式
<address>    作者、相关人士或组织的联系信息
<progress>    定义运行中的进度

 

posted @ 2019-01-27 12:39  紫诺花开  阅读(208)  评论(0编辑  收藏  举报