所在的位置: html >> html前景 >> HTMLCSS理解html语义化,

HTMLCSS理解html语义化,

1)什么叫做标签语义化

说的通俗点就是:明白每个html标签的用法(在什么情况下使用此标签合理)比如,网页上的新闻列表可以使用列表标签,文章的标题可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em、strong等标签表示强调说明等等。

总的来说就是根据网页内容,选择合适的标签,便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2)为什么要标签语义化?

-有助于提升用户体验:例如合理的利用title、alt用于解释名词或解释图片信息让用户在访问浏览图片的时候可以查看到图片的主体信息;

-有利于网站的优化:良好的标签使用可以与搜索引擎建立良好沟通,有助于爬虫快速抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

-方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页,便于自动转码阅读;

-便于团队开发和维护,html标签语义化可以使更具可读性,让开发者能更快的切入重点,节省工作时间,遵循W3C标准,可以减少代码差异化,避免页面兼容性bug。

3)常见的语义化标签

title:页面主体内容,常用于文章的标题。

hn:h1~h6,分级标题,h1与title协调有利于搜索引擎优化。

ul:无序列表。

li:有序列表。

header:页眉通常包括网站标志、主导航、全站链接以及搜索框。

nav:标记导航,仅对文档中重要的链接群使用。

article:定义外部的内容,其中的内容独立于文档的其余部分。

section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

aside:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

footer:页脚,只有当父级是body时,才是整个页面的页脚。

small:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。

strong:和em标签一样,用于强调文本,但它强调的程度更强一些。

em:将其中的文本表示为强调的内容,表现为斜体。

figure:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。

figcaption:定义figure元素的标题,应该被置于figure元素的第一个或最后一个子元素的位置。

blockquoto:定义块引用,块引用拥有它们自己的空间。

pre/pre:预格式化文本。保留文本固有的换行和空格。

以上只是列举了一些常用的语义化标签,大家先简单了解下即可,后边的文章我们将详细介绍html每个标签的作用以及用法,大家记得


转载请注明:http://www.aierlanlan.com/cyrz/2099.html