[原]《Web前端開發修煉之道》-讀書筆記HTML部分


讀書小記

《編寫高質量代碼-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必備知識系列

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM