time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 《web前端开发修炼之道》之高质量的HTML读书笔记

《web前端开发修炼之道》之高质量的HTML读书笔记

时间:2012-11-15 22:55 点击:1438次 字体:[ ]




 高质量的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前端开发修炼之道》之高质量的HTML读书笔记_www.fengfly.com

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

  

《web前端开发修炼之道》之高质量的HTML读书笔记_www.fengfly.com


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

  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~

 

  1. <header> 
  2.       <h1> 
  3.       <a href="xxx"><img alt="xxx" src="xxx">logo</a> 
  4.      </h1> 
  5.     <nav> 
  6.       <a href="xxx"></a> 
  7.       <a href="xxx"></a> 
  8.       …… 
  9.     </nav> 
  10. </header> 
  11. <section>……</section> 
  12. <footer>……</footer> 

 



本文地址 : http://www.fengfly.com/plus/view-210270-1.html
标签: Web html
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: