现在的位置: 首页 > 综合 > 正文

[原]《Web前端开发修炼之道》-读书笔记HTML部分

2012年08月10日 ⁄ 综合 ⁄ 共 1693字 ⁄ 字号 评论关闭

读书小记

《编写高质量代码-Web前端开发修炼之道》,用了一天的时间,略带着兴奋的感觉给看完了,好久都没这样看过一本书了。看的虽快,但收获颇多。特别是在看到HTML和CSS部分的时候,发现HTML原来要这样写,CSS原来可以这样写。由于对JS部分期望比较大,整书也先看的这一部分,感觉没有前两部分读的那么爽,内容基本都熟悉,而且有些写法还比较老,比方说判断类型书中还是用的typeof,而现在基本都是用的Object.prototype.toString(),但是也有不少收获,特别是如何在团队中更好的协作开发,都是经验之谈值得学习。

整本书感觉,结构清晰,知识点充实而不枯燥,任何前后端的开发人员都值得一看。

摘一些重要的,感兴趣的知识点作为回顾。

HTML-语义标签化

语义化标签存在的意义

  • 和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,比如h1~h6、strong用于不同权重的标题;隐藏文本等等
  • 提升用户体验 例如title、alt用于解释名词或解释图片信息、例如label标签的活用;
  • 代码可读、便于维护、提高开发效率、快速达成共识,
  • 行业机构对语义化标签的扩展和浏览器厂商在技术上的支持力度逐渐提升,例如web标准化组织刚刚开始推广的html5,其中新增了许多语义化的标签,例如header、aside、nav、section等等,在Chrome、opera、safari、firefox等浏览器中均得到很好支持。

选择合适的标签

  • <Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

  • <P>

段 落标记,知道了 p 作为段落,你就不会再使用<br />来换行了,而且不需要<br /> 来区分段落与段落。p中的文字会自动换行,而且换行的效果优于<br />。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。

  • <ul>、<ol>、<li>

<ul> 无序列表,这个被大家广泛的使用,<ol>有序列表也挺常用。在web标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持CSS的时候,导航链接仍然很好使,只是美观方面差了一点而 已。

  • <dl>、<dt>、<dd>

dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

  • <em>、< strong >

<em> 是用作强调的,strong是用作重点强调的。

  • <table>、<td>、<th>、< caption >、 summary

XHTML 中的表格不再是用来布局。如果是为了标记列表的数据,就应该使用表格了。<th>为表格标题,属性summar为摘要(要想提高搜索的排名这 个绝对不应该少),<caption>标签为首部说明,<thead>标签为表格头部,<tbody>标签为表格主 体内容,<tfoot>标签为表格尾部。

  • <ins>, <del>

知道del,就不要再用<s>做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。

  • <abbr>、<acronym>

<abbr>标签是表示web页面上的简称,<acronym>标签为取首字母缩写。

  • alt属性和title属性

title属性用来为元素提供额外说明信息,但是并不是必须的。

alt属性为不能显示图像、窗体或applets的用户代理(UA),指定替换文字。替换文字的语言由lang属性指定。

如何判断是否合适

去掉或样式丢失的时候能让页面呈现清晰的结构:HTML 本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的, 不要误会这是HTML的表现,这些其实是HTML默认的CSS样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

CSS裸体日

系列知识链接

[原]《Web前端开发修炼之道》-读书笔记CSS部分

[原]《Web前端开发修炼之道》-读书笔记JavaScript部分

[原]JavaScript必备知识系列

 

抱歉!评论已关闭.