一些HTML代碼的編寫風格建議小結

2020-03-24 18:19:17

字體：大中小

來源：轉載

供稿：網友

省略資源文件的協議建議省略掉圖片, 媒體文件, 樣式和腳本 URL 中的協議部分 (http:, https:), 省略掉協議部分后, 資源文件將繼承頁面 URL 的協議. 不但可以防止內容混用的問題, 還可以減小頁面的尺寸. 比如: 引用一個 JavaScript 文件可以用下面建議的方式來寫.為什么 h4, h5, h6 標簽很少用到?標題標簽包括 h1 到 h6, 我們常用 h1, h2, h3, 但極少用到 h4, h5 和 h6.在一個合理語義化, 敢于裸奔 (不使用 CSS 進行布局) 的網站里面, 標題標簽除了語義化, 還帶有一些樣式作用. 但在 CSS 普及的今天, 用 h1 和 h6 其實沒有太大區別, 反正外觀也能隨便套.作為標題標簽, 有更牛逼的功能, 標題元素意味著頁面上高權值的關鍵詞, 所以 h1, h2 和 h3 被頻繁利用來為關鍵詞加權. 而 h4, h5 和 h6 的權值并不高, 甚至比不上 strong 和 em, 所以很少被用到. 估計他們權限層次如下:h1 h2 h3 strong em h4 h5 h6什么時候使用 thead, tbody 或 tfoot?我本來認為 thead 作為表頭用來放表格標題單元, 如 th; 而 tbody 是放表格內容, tfoot 是表格說明. 其實我的理解不太正確, 這幾個標簽其實是可有可無的.因為瀏覽器一般需要整個表格下載完才開始顯示, 在以 table 為布局的時代影響用戶閱讀. 所以這幾個標簽是用來將表格劃分成多個表格部分, 下載完成部分即可顯示. 另外, 也為了打印長表格時的時候表頭和表尾可以在每一頁出現.
省略掉可選的標簽用過 Dreamwave 的同學應該有印象, 當你創建一個 HTML 文件, 默認有代碼如下.XML/HTML Code復制內容到剪貼板
我們會將 title, 外部 CSS 和 JavaScript 引用放在 head 區域, 在頁面上展示的內容放在 body 里面, 但其實 html, head 和 body 都是可省略的標簽.將這些可選標簽刪除之后, 看起來很怪, 但頁面顯示正常, W3C 檢測也能通過. 我已經在博客上這樣處理了. 但有一點需要注意的, 如果你希望用 XHTML 編寫頁面, 那么請保留 html 標簽, 因為你仍需要下面這句代碼作為聲明.XML/HTML Code復制內容到剪貼板
b 標簽和 i 標簽很多人以為 b 標簽和 i 標簽的命運和 u 標簽一樣, 被 W3C 歸類為不推薦使用標簽 . 但 HTML5 規范中, 這兩個標簽還是推薦使用的. 這一點我一直清楚, 還跟朋友為這事爭執過. 但我一直不明白 HTML5 中如何定義它們.
hr 標簽hr 是一根線, 分割內容的橫線. 我一直認為 hr 是個蹩腳的東西, 畫出來的線用 CSS 好不好處理, 毫無用處. 其實 hr 在語義上是文章的分割線, 將文章上下文完全劃分開, 讓它們毫無關系.其作用就像很多日志類博客文章里面出現的下圖的分割線, 只不過 hr 在語義上也是如此, 爬蟲也能理解.
為什么我們習慣用 a 標簽做按鈕?不是 input type= button 可以理解, 因為低版本的 IE 上看不到 hover 效果. 但為什么或者 span, 而是 a 標簽? a 標簽做成按鈕, 不帶 href, 這種做法是對的嗎? 我還沒想好, 以前這么做就像是條件反射一樣.
后話Google 的 HTML/CSS 代碼風格指南是一個短小精悍的建議性代碼編寫手冊, 很有用, 但請不要迷信. 像里面有一項, 建議使用兩個空格作為縮進, 在很多團隊可能不具有可行性, 我們團隊現在用的還是 tab.該手冊中很多 HTML 建議都是針對 HTML5 的, 但這里是用 HTML 風格而非 XHTML 風格, 很多地方為了省略代碼實際上削弱了代碼的可讀性, 大家應該對其取舍有所判斷.html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：有關HTML5 Video對象的ontimeupdate事件(Chrome上無效)的問題

下一篇：html使用表單標簽與用戶交互的實例教程