不过怎样才能写出语义化的标签?从基础入手吧,每天跟我们打交道的最多的就是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标签中,除了
如果在一个页面中看到的基本全是div,那么说明你对语义化标签的使用还不是很明白:明明是一个标题,可以用
标签是否更语义?
大家都知道每年的CSS裸奔节吧?如果选用的标签几乎全是不带语义的,那么在去样式后网页中几乎看不到任何结构信息,可读性非常差;如果选用的都是语义适合的标签,去样式后网页依然具有非常好的可读性;各个浏览器有自己的默认样式,默认的样式给予了各个标签不同的显示,标签使用的正确与否能体现网站的可用性,这也是检验一个网站可用性的最简单的方法之一。
这个推荐大家去看W3C官网的标签的使用,用web developer禁掉它的CSS看看如何?
CSS命名的语义化
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范,只有在团队的规范的基础之上进行更好的语义化命名才是王道。
在我的理解,一个语义化的CSS命名至少应遵守如下约定:
一些约定好的单词可以迅速的帮助大家命名:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
登录条:loginbar
标志:logo
广告:banner
轮转:promo
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
版权copyright
这个太多了,这里就不一一列出了,遇到不会的单词大家再去补一下英文哈
下面鄙人做的一个招聘页面大体架构命名,仅供各位拍砖
为神马要语义化?
在 森林的聚会 上被allan问到 做语义化到底为了什么? 我一时无言了,只是为了"祼奔"时好看?有多少用户会 看到"祼奔"的页面,并且看下去?
的确,我们不可能也不会仅仅为了"裸奔"时的好看而去做语义化,普通用户看不到你的网站"裸奔"时的样子也不想去看,不过从今天看来语义化的好处已逐渐明朗和开放开来:
以上总结的前4点只要针对的是(x)html的标签语义化使用,最后一点针对的是CSS样式的命名。
必须讲一下的其他东西