之前一直是开发后台的,这段时间由于公司项目的关系,开始前端的开发,同时前端也是自己一个比较感兴趣的内容。之前对于前端,可谓样样都懂点,样样又都不懂。
《编写高质量代码-web前端开发修炼之道》这本书没有讲太多的理论知识,而是通过大量的实践和技巧来帮助你对web前端的修炼,值得一读。本系列博客也主要会分成三部分:HTML,CSS,JavaScript。
高质量的HTML篇
HTML的标签从设计之初就考虑到了语义,而不是像下面这个例子一样,毫无语义可言:
1 <div class="header"> 2 <div>logo</div> 3 <div class="menu"> 4 <div>菜单一</div> 5 <div>菜单二</div> 6 <div>菜单三</div> 7 </div> 8 <div> 9 <div class="main">......</div> 10 <div class="footer"> 11 <div>xxx版权所有</div> 12 <div>关于我们</div> 13 ..... 14 </div>
整个篇幅都是div,虽然说显示出来的后的美观程度可能并不受影响,但是,其一,搜索引擎看不到视觉效果,看到的都是网页的代码,而搜索引擎会通过标签来判断内容的语义;其二,这可能对以后前端的重构带来麻烦;其三,这完全不是一个编写高质量代码的人写出来的代码。
下面是一些容易被忽略的标签语义对照,其他常用的可以去w3school上查询:
标签名 | 中文对照 |
dl | 定义列表 |
dt | 定义术语 |
dd | 定义描述 |
address | 地址 |
var | 变量 |
em | 加重 |
b | 粗体 |
i | 斜体 |
那么,虽然我们知道了各种标签的语义,在编写HTML时,怎么才知道真正的使用合理了呢?
去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。
换句话就是说,可以通过某些工具,去掉网页中全部的CSS样式,在查看网页时,结构依然清晰。这个工具,推荐大家使用FireFox中的web developer,安装好后就是如下效果了:
就以百度首页为例,再去除了所有CSS后,展示情况依然看到比较清晰的结构信息,标签的使用上也绝不是依靠div堆砌出来的,而是灵活运用了诸如p、span、ul等的标签:
在语义化标签使用时应该注意的一些其他问题
- 尽可能少地使用无语义标签div和span,这样有利于整体网页的展示速度;
- 在语义不明显,即可使用p也可以使用div的地方,尽量使用p,因为p默认情况下有上下间距,去掉样式后可读性好,对兼容性特殊的终端有利;
- 不要使用纯样式标签,例如b、font和u等,改用CSS来设置。语义上强调的文本可以包括在strong或者em标签里,strong和em都有“强调”的语义,其中strong默认样式是加粗,em则是斜体;
- 块级元素不要包含在内联元素中。
比如说这种情况就是错误的(span为内联元素,div为块级元素) <span>……<div>……</div></span>
随着HTML5的普及,语义化标签也显得越来越重要,例如最开始那个用div堆砌出来的HTML经过改造,以至于从肉眼上,我们就能够看到语义,O(∩_∩)O~
<header> <h1> <a href="xxx"><img alt="xxx" src="xxx">logo</a> </h1> <nav> <a href="xxx"></a> <a href="xxx"></a> …… </nav> </header> <section>……</section> <footer>……</footer>
下一篇将带来高质量CSS方面的知识,敬请期待……