HTML语义化 以及HTML5新的语义化标签
什么是语义化?
语义化就是用有一定语义的英文字母(标签)表示,尽量使用官方的有语义的标签。
为什么要语义化?
1、呈现好的内容结构和代码结构
2、提高用户体验(title、alt)
3、利用SEO,语义化能和搜索引擎建立良好的联系,有利于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键词的权重
4、方便其他设备解析以语义的方式来渲染网页
5、语义化更具可读性,遵循W3C标准,规范
构建页面要那些注意?
1、减少使用无语义的标签div和span
2、语义不明时,尽量用p(p默认有上下边距,可以兼容特殊终端)
3、不要使用纯样式的标签(b、font、u)改用css设置
4、需要强调的文本,包含在strong或者em(斜体)标签中(浏览器预设样式,能用CSS就不用它们)
5、使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
6、表单域要用fieldset标签包起来,并用legend标签说明表单的用途(fieldset 元素可将表单内的相关元素分组);
使用form表单中自带的fieldset与legend标签:
<form method="post">
<fieldset>
<legend><b>第一题</b></legend>
<p>题目题目题目</p>
<ul>
<li><input type="radio" value="1" checked="checked" />一选项</li>
<li><input type="radio" value="2" />二选项</li>
<li><input type="radio" value="3" />三选项</li>
</ul>
</fieldset>
<fieldset>
<legend><b>第二题</b></legend>
<p>题目题目题目</p>
<ul>
<li><input type="radio" value="1" checked="checked" />一选项</li>
<li><input type="radio" value="2" />二选项</li>
<li><input type="radio" value="3"/>三选项</li>
</ul>
</fieldset>
</form>
7、每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
HTML新增的语义标签:
1、header 标签定义文档的页眉(网站标志、主导航、全站连接、搜索框)
2、nav
定义外部的内容 (外部的文章,文本)
4、footer
<section>
<header></header>
</section>
<section>
<footer></footer>
</section>
7、main
显示页面的主题内容。每个页面只能包含一个main标签,main标签中不能包含网站标题、logo、主导航、版权声明等信息。
<main>
<article>
文章内容
</article>
<article>
文章内容
</article>
</main>
8、figure 用于对元素进行组合
9、
上一篇: PHP计算节日、节气、农阳历互换的代码
下一篇: HTML(二)