曾几何时，一个人出设计稿，出完设计稿打开DW用拖出一个页面，再苦逼一点拖完页面后自己还要写后台，武林人称：美工。
以下讨论的是和html5 语义化 相关的详解html5语义化css代码的体验及剖析教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：
开篇前的一些YY曾几何时，一个人出设计稿，出完设计稿打开DW用拖出一个页面，再苦逼一点拖完页面后自己还要写后台，武林人称：美工。更苦逼的是当每一次需求变更后，去修改一大堆发麻的
，于是div+css被搬上了互联网时代的舞台，一夜间N多的《DIV+CSS》葵花宝典横空出世，那时，我们活在了div+css的年代，那时，我们用上了
之后，腰不酸，腿不痛，加班也带劲了。
YY结束，切入正题Ghost曾在2年前就以《页面重构中的语义化》一文对语义化做过讲解，还有码头的《语义化的HTML结构到底有什么好处？》
重构历经7年，也许时至今日，我们可以熟练地写出一个页面，但对于写好一个页面又谈何容易？让我们梳理一下思路，重温下基础，并结合现在的趋势，再来谈一下语义化这个话题，神马是语义化？为何要语义化？
重构中的语义化基本可以分为2块：(x)html标签的语义化和css命名的语义化。
不废话上案例：
(图1)
图1非语义化的实现方式：no_emantic_html 语义化的实现方式：emantic_html
你对
情有独钟吗？拿到一个设计稿之后，不经意间无数的 已经在你的弹指神功下落在屏幕？如 果是no_emantic_html那 样，恭喜你得了恋 癖。
用合理HTML标记以及其特有的属性去格式化文档内容—这是舒克对语义化标签的解释，能不用
的地方不用 ，因为 是无语义的标签，原本单词是division，为分隔、区块的意思，一般只用在架构html的地方，在(x)html以前的版本。
不过怎样才能写出语义化的标签？从基础入手吧，每天跟我们打交道的最多的就是div h1-h6 ul-li p之类的标签了 ，不知大家有没有对这些标签做过深入的理解，来看下面这张表
| 标签 | 原单词 | 说明 | 语义化(Y/N) |
|---|---|---|---|
| h1-h6 | head | 定义 HTML 标题 | Y |
| p | paragraph | 定义段落 | Y |
| ul | unordered list | 定义无序列表 | Y |
| ol | ordered list | 定义有序列表 | Y |
| li | list item | 定义列表的项目 | Y |
| dl | definition list | 定义定义列表 | Y |
| dt | definition term | 定义定义列表中的项目 | Y |
| dd | definition description | 定义定义列表中项目的描述 | Y |
| table | table | 定义表格 | Y |
| thead | table head | 定义表格中的表头内容 | Y |
| tbody | table body | 定义表格中的主体内容 | Y |
| th | table head cell | 定义表格中的表头单元格 | Y |
| tr | table row | 定义表格中的行 | Y |
| td | table data cell | 定义表格中的单元 | Y |
| a | anchor | 定义锚 | Y |
| img | image | 定义图像 | Y |
| div | division | 定义文档中的节 | N |
| span | span | 定义文档中的节 | N |
以上只是列出了我们常用的一些标签，更多的标签请查阅w3c ，基本所有的html标签都是一个单词或者词组的缩写，这样其实本意是更便于我们对语义化的理解。其实所有的(x)html标签中，除了
和2个无语义的标签，其他标签都有它存在的意义，只有知道有哪些标签，以及对各个标签的本义做一个了解才能知道去用它。你不知道何时用
如果在一个页面中看到的基本全是div，那么说明你对语义化标签的使用还不是很明白：明明是一个标题，可以用标签来实现，却非要用无语义的
标签来实现，又或者一个段落，用标签是否更语义？
大家都知道每年的CSS裸奔节吧？如果选用的标签几乎全是不带语义的，那么在去样式后网页中几乎看不到任何结构信息，可读性非常差；如果选用的都是语义适合的标签，去样式后网页依然具有非常好的可读性；各个浏览器有自己的默认样式，默认的样式给予了各个标签不同的显示，标签使用的正确与否能体现网站的可用性，这也是检验一个网站可用性的最简单的方法之一。
这个推荐大家去看W3C官网的标签的使用，用web developer禁掉它的CSS看看如何？
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范，只有在团队的规范的基础之上进行更好的语义化命名才是王道。
在我的理解，一个语义化的CSS命名至少应遵守如下约定：
尽量规避拼音命名，用英文单词去命名
单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范，但个人建议不要同时使用2种以上的连接方法同时命名
单词后不要跟无意义的数字，如logo1234 (团队约定好的除外)
对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂
一些约定好的单词可以迅速的帮助大家命名：
头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column登录条：loginbar标志：logo广告：banner轮转：promo页面主体：main热点：hot新闻：news 下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink版权copyright这个太多了，这里就不一一列出了，遇到不会的单词大家再去补一下英文哈！
[1][2]下一页