web语义化理解

Posted liuxu_xrl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web语义化理解相关的知识,希望对你有一定的参考价值。

含义:

Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。


为什么要web语义化?
如今互联网都到了web2.0的时代了,html语言在不断的进化并发挥着越来越重要的地位;而我们制作网页也从当初的table表格嵌套发展到了 div+css,但经常看到这种代码整个网页大量的使用div标签进行分隔页面内容,有的甚至整个页面只有div一 种html标签存在,滥用现象使得网页制作似乎就只剩下了div。
首先,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。

 

语义化的优势:
1.语义化的代码更小,对搜索引擎更友好,下载也就更快了。
2.能够更加快速的帮助新的前端工程师理解我们的代码。

 

web语义化包含两个方面:

html语义化及css命名语义化。
结构(html)才是重点,样式(css)是用来修饰结构的。所以,要先确定html,确定标签,再来选用合适的css。


html语义化:
如<h1>h标签,<p>段落标签,ul-li,ol-li列表,<table>,<br />,<span>,<lable>,<strong>header、footer、sidebar、article等h5标签
HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。

 

css语义化:
有两种CSS的命名方式:
1、结构化命名法;(根据位置命名),但这种结构出现变化时不容易维护。
2、语义化命名法。 ( 根据功能命名 )根据页面中模块的功能而命名,如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList等等,这样整个页面看起来就比较清晰了,维护起来也比较方便


css语义命名法有三种:驼峰命名法;下划线命名法;中划线命名法?可三种结合使用。

e.g strong 和font-weight: bold区别:
语义化:font-weight:bold是单纯的加粗,而strong它起到突出、强调的作用。
1、适应排版的美观而加粗的,无特别意义而对文档的加粗,应该使用font-weight:bold;
2、对于重要的标题、或者是关键字的加粗,可以使用strong(hx更适合标题)。

 

















以上是关于web语义化理解的主要内容,如果未能解决你的问题,请参考以下文章

web语义话

什么是Web语义化

什么是Web语义化

web标准和语义化

什么是语义化? 语义化有什么好处吗?

请问大家常说的对HTML语义化的理解是啥?