下面请跟着图老师小编一起来了解下加深对HTML和CSS标签语义化的理解，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！
【 tulaoshi.com - Web开发 】
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
前两天参加了公司组织的一个WD培训，有一节课讲了标签语义化，听了之后感觉特别有用，更正了我以前对 HTML 和 CSS 的错误看法。
首先说明的一点是，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。 以前我真的没有怎么重视过搜索引擎，现在开始比较在意了，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。
以前以我对web开发的粗浅理解，觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，font等标签就行了，至于通篇都是div我也不会觉得有什么问题，因为CSS很强大。但是，所有的标签都是有自己的语义的，下面给出一部分标签的语义：
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）div 语义：Division（分隔）
span 语义：Span（范围）
ol 语义：Ordered List（排序列表）
ul 语义：Unordered List（不排序列表）
li 语义：List Item（列表项目）
如果无视标签语义和默认样式，所有标签都用div，其实也是可以写出来视觉效果很好的页面，只要你灵活运用CSS。但是那样的话虽然视觉上达到了要求，但是整个页面一点语义都没有，搜索引擎还是看不懂。所以，要记住：
结构(html)才是重点，样式(css)是用来修饰结构的。所以，要先确定html，确定标签，再来选用合适的css。
一般来说，所有的标签都会有一个默认的样式，所以一个简单的判断网页标签语义是否良好的方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。
另外，值得重点提及的是h标签，h标签的语意是标题，搜索引擎对这个标签比较敏感，特别是h1,和h2。一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，要h1,h2,h3,h4这样推下来，不要h1,h3,h4，漏掉h2。一个结构良好的网页，h标签可以组织起一个网页的大纲。
以上这些东西都是WD的工程师阿当讲的，我受益匪浅，加深了对html的理解。HTML 虽然很简单，但是要用好也是很不容易的。
来源:http://www.tulaoshi.com/n/20160219/1630073.html
看过《加深对HTML和CSS标签语义化的理解》的人还看了以下文章 更多>>
