Web语义化

1.什么是web语义化：

　　　@语义化概念：语义可以简单的看做是数据所对应的现实世界中事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释与逻辑表示；

　　@拆字理解：用特定的语言来定义特定的事物。

　　@web语义化概念：使用语义恰当的标签，使页面有良好的结构，使页面元素有含义，能够让人和搜索引擎都容易理解。

　　@误区：刚学html的walker是都会对Div+CSS非常感兴趣，认为其非常穷大甚至无所不能，只要是个网页都能用这个搭配写出来，事实却是如此，运用Div+Css可以写出大部分页面的效果，但是Walkers忽略了其他标签、忽略了html，严重只有Div。即用Div+CSS来创造已经存在的标签的效果。存在即合理，其他标签不会创出来却用不到，二者就设计到web语义化或者说html语义化。

　　@例子：（1）先用div显示一个列表如下：

　　　　　　<div id="list">

　　　　　　　　标题<br />

　　　　　　　　内容<br />

　　　　　　　　结尾<br />

　　　　　　</div>

　　　　　　但我们有专门显示列表的标签ul（无序列表），ol（有序列表），dl（定义列表），而且用这样的标签写列表更加规范，更加语义，浏览器更好理解。

　　　　　　(2)当我们显示标题时，可能有的walker会想到用Div显示内容，再用CSS加粗、放大字体。但是我们有专门的标题标签Hx（h1--h6），这样写出来的页面语义明确，结构清晰，搜索引擎也可以那些事页面重要内容从而分配较大权值。

　　　@建议：写一个页面时先看看有什么合适的语义标签来形成该页面的效果，例如导航用nav，列表用ul、ol、dl，标题用h1--h6扥等。

　　　@一些常用标签的语义:

　　　　

标签	语义
h1~h6	标题
th	table的header
p	段落
ul	无序列表
ol	有序列表
dl	定义列表
dt	定义名称
dd	定义描述
em	局部强调，段落内强调
strong	更强烈的强调，全文强调

 

　　　

　

　　 

 

 

 

 

 

　　@结构命名的语义化：结构即html代码，明明即class或id的取名。

　　@误区exmple：

　　　　　　　结构：<div id="left"></div>

 

　　　　　　　　　　<div id="right"></div>

 

　　　　　　　Css：#left{float：left；}

　　　　　　　　　 #right{float：right;}

 

　　　　　　　显示结果： id为left的内容显示在左边；id为right的显示在右边；

 

　　　　　　　缺点：但若当我维护更改，想将id为left的内容显示在右边，id为right的内容显示在右边。

 

　　　　　　　　　　  更改后CSS代码如下：

　　　　　　　　　　　　　　　　　　　　#left{float：right；}

 　　　　　　　　　　　　　　　　　　　　#right{float：left;}

　　　　　　　　　　明显看起来左右不对称，令人别扭。

　　　　　　　　　　　修改：若我们将id为left的id改为content，另一个的id改为sidebar（边栏），这样无论怎么样改float的riht和left看起来都挺合理，而不会别扭。

 

 

总结：1.合理选择标签，不要滥用div+Css。这样维护起来更容易，简单。

　　　　 2.id和class命名要合理，及语义化，从而造成代码易维护，易理解，搜索引擎也容易看懂的目的。