《web前端开发修炼之道》读书笔记-HTML篇

    之前一直是开发后台的,这段时间由于公司项目的关系,开始前端的开发,同时前端也是自己一个比较感兴趣的内容。之前对于前端,可谓样样都懂点,样样又都不懂。

    《编写高质量代码-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,安装好后就是如下效果了:

web developer

     就以百度首页为例,再去除了所有CSS后,展示情况依然看到比较清晰的结构信息,标签的使用上也绝不是依靠div堆砌出来的,而是灵活运用了诸如p、span、ul等的标签:

  


   在语义化标签使用时应该注意的一些其他问题

  1. 尽可能少地使用无语义标签div和span,这样有利于整体网页的展示速度;
  2. 在语义不明显,即可使用p也可以使用div的地方,尽量使用p,因为p默认情况下有上下间距,去掉样式后可读性好,对兼容性特殊的终端有利;
  3. 不要使用纯样式标签,例如b、font和u等,改用CSS来设置。语义上强调的文本可以包括在strong或者em标签里,strong和em都有“强调”的语义,其中strong默认样式是加粗,em则是斜体;
  4. 块级元素不要包含在内联元素中。
比如说这种情况就是错误的(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方面的知识,敬请期待……

posted @ 2012-10-19 15:40 cuitsl 阅读(...) 评论(...) 编辑 收藏
友情博客:大熊的外星球