html语义化的一些理解

1.什么是html语义化?

大概即为让机器也读懂网页内容,是通过代码的不同标签来实现,而不是通过css样式的可视化来实现

2.为什么要做到语义化?

1.有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性。
3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。
4.支持多终端设备的浏览器渲染。

3.写语义化的网页需要做到什么?

1.尽量少使用无语义化的标签如div,span等
2.在看到内容的时候,能够想到相应的标签来描述内容,例如在写文章内容时,可以用div和p标签,尽量选择使用p标签来描述
3.使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

4.常用的一些语义化标签有哪些?


 - <h1>~<h6> ,作为标题使用,并且依据重要性递减,<h1> 是最高的等级。
 - <p>段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br /> 来区分段落与段落。<p>
   中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。
 - <ul>、<ol>、<li>,<ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表不常用。在 Web 标准化过程中,<ul>
   还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS
   的时候,导航链接仍然很好使,只是美观方面差了一点而已。
 - <dl>、<dt>、<dd>,<dl>
   就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。dl不单独使用,它通常与dt和dd一起使用。dl开启一个定义列表,dt表示要定义的项目名称,dd表示对dt的项目的描述。
 - <em>、<strong>,<em> 是用作强调,<strong> 是用作重点强调。
   <table>、<thead>、<tbody>、<td>、<th>、<caption>, 就是用来做表格不要用来布局

5.html5新增的语义化标签

1、header
<header> 标签定义文档的页眉(介绍信息)。
2、nav
<nav> 标签定义导航链接的部分。
3、article
<article> 标签定义外部的内容。
外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
4、footer
<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
5、aside
使用例子:页面侧边栏、广告、友情链接、文章引语(内容摘要)。
6、section
一个主题性的内容分组,通常包含一个头部(header),可能还包含一个尾部(footer)。
div与section的比较:div应用更广泛,只要你想为一个区域定义一个样式,就可以使用div标签,section包含的内容是一个更明确的主题,通常有标题区域。
7、main
显示页面的主体内容,每个页面只能包含一个main标签main标签中不包含网站标题、logo、主导航、版权声明等信息。
8、figure
用于对元素进行组合
9、<figcaption> 标签定义 figure 元素的标题,"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

猜你喜欢

转载自blog.csdn.net/Gainsense/article/details/85038656