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语义化理解

最新文章

热门文章