首頁 web前端 html教學 一些HTML程式碼的寫作風格建議小結

一些HTML程式碼的寫作風格建議小結

Feb 21, 2017 pm 01:43 PM
html 規範 風格

省略資源檔案的協定

建議省略掉圖片, 媒體檔案, 樣式和腳本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 檔案, 預設有程式碼如下.

<html>  
 <head>  
 </head>  
    
 <body>  
 </body>  
</html>
登入後複製

我們會將title, 外部CSS 和JavaScript 引用放在head 區域, 在頁面上展示的內容放在body 裡面, 但其實html, head 和body 都是可省略的標籤.

將這些可選標籤刪除之後, 看起來很怪, 但頁面顯示正常, W3C 檢測也能通過. 我已經在博客上這樣處理了. 但有一點需要注意的, 如果你希望用XHTML 編寫頁面, 那麼請保留html 標籤, 因為你仍需要下面這句代碼作為聲明.

<html xmlns="http://www.w3.org/1999/xhtml">
登入後複製

#b 標籤和i 標籤

很多人以為b 標籤和i 標籤的命運和u 標籤一樣, 被W3C 歸類為"不推薦使用標籤". 但HTML5 規範中, 這兩個標籤還是推薦使用的. 這一點我一直清楚, 還跟朋友為這事爭執過. 但我一直不明白HTML5 中如何定義它們.


hr 標籤

hr 是一條線, 分割內容的橫線. 我一直認為hr 是個蹩腳的東西, 畫出來的線用CSS 好不好處理, 毫無用處. 其實hr 在語意上是文章的分割線, 將文章上下文完全劃分開, 讓它們毫無關係.

其作用就像很多日誌類博客文章裡面出現的下圖的分割線, 只不過hr 在語義上也是如此, 爬蟲也能理解.


一些HTML程式碼的寫作風格建議小結

為什麼我們習慣用a 標籤做按鈕?

不是input type="button" 可以理解, 因為低版的IE 上看不到hover 效果. 但為什麼或者span, 而是a 標籤? a 標籤做成按鈕, 不帶href, 這種做法是對的嗎? 我還沒想好, 以前這麼做就像條件反射一樣.


一些HTML程式碼的寫作風格建議小結

後話

Google 的HTML/CSS 程式碼風格指南是一個短小精悍的建議性程式碼編寫手冊, 很有用, 但請不要迷信. 像裡面有一項, 建議使用兩個空格作為縮進, 在很多團隊可能不具有可行性, 我們團隊現在用的還是tab.

##該手冊中很多HTML 建議都是針對HTML5 的, 但這裡是用HTML 風格而非XHTML 風格, 很多地方為了省略代碼實際上削弱了代碼的可讀性, 大家應該對其取捨有所判斷.

更多一些HTML程式碼的寫風格建議小結相關文章請關注PHP中文網!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles