明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺!

HTML中編碼規(guī)范的總結(jié)

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關(guān)于HTML中編碼規(guī)范的總結(jié),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。1.img標簽要寫alt標簽 2.單標簽不要寫閉合標簽(img、link、input、hr、br) 3.自定義屬性要以data- 開頭 4.td要在tr里面,li要在ul/ol里面...

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于HTML中編碼規(guī)范的總結(jié),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

1.img標簽要寫alt標簽
2.單標簽不要寫閉合標簽(img、link、input、hr、br)
3.自定義屬性要以data- 開頭
4.td要在tr里面,li要在ul/ol里面
5.ul/ol的直接子元素只能是li
6.section里面要有標題標簽
7.使用section標簽增強SEO(搜索引擎優(yōu)化)
8.行內(nèi)元素里面不可使用塊級元素(a標簽里面不能放p)
9.每個頁面要寫
10.要用table布局寫郵件模板
11.html要保持簡潔,不要套太多層
12.特殊情況下才在html里面寫script和style
13.樣式要寫在head標簽里
14.html要加上lang的屬性

    <html lang="en">
    <html lang="zh-CN">

15.要在head標簽靠前位置寫上charset和meta標簽

16.特殊符號使用html實體

? &copy;
¥ &yen;
? &reg;
> &gt;
< &lt;
& &amp;

17.img空src的問題

<img src="about:blank" alt><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

18.關(guān)于行內(nèi)元素空格和換行的影響
19.類的命名使用小寫字母加中劃線(hello-world)
20.不推薦使用自定義標簽
21.重復(fù)雜id和重復(fù)屬性
22.不推薦使用屬性設(shè)置樣式(canvas width height 需要寫)
23.使用合適的標簽
(1)如果內(nèi)容是表格就使用table,table有自適應(yīng)的優(yōu)點;如果是一個列表就使用ol/ul標簽,擴展性比較好
(2)如果是輸入框就使用input,而不是寫一個p標簽,然后設(shè)置contenteditable=true,因為這個在IOS Safari上光標定位容易出現(xiàn)問題。如果需要做特殊效果除外
(3)如果是粗體就使用b/strong,而不是自己設(shè)置font-weight
(4)如果是表單就使用form標簽,注意form里面不能套form
(5)如果是跳鏈就使用a標簽,而不是自己寫onclick跳轉(zhuǎn)。a標簽里面不能套a標簽
(6)使用html5語義化標簽,如導(dǎo)航使用nav,側(cè)邊欄使用aside,頂部和尾部使用header/footer,頁面比較獨立的部分可以使用article,如用戶的評論。
(7)如果是按鈕就應(yīng)該寫一個button或者<input type="button">,而不是寫一個a標簽設(shè)置樣式,因為使用button可以設(shè)置disabled,然后使用CSS的:disabled,還有:active等偽類使用,例如在:active的時候設(shè)置按鈕被按下去的感覺
(8)如果是標題就應(yīng)該使用標題標簽h1/h2/h3,而不是自己寫一個<p class="title"></p>,相反如果內(nèi)容不是標題就不要使用標題標簽了
(9)在手機上使用select標簽,會有原生的下拉控件,手機上原生select的下拉效果體驗往往比較好,不管是IOS還是android,而使用<input type="tel">在手機上會彈一個電話號碼的鍵盤,<input type="number"> <input type="email">都會彈相應(yīng)的鍵盤
(10)如果是分隔線就使用hr標簽,而不是自己寫一個border-bottom的樣式,使用hr容易進行檢查
(11)如果是換行文本就應(yīng)該使用p標簽,而不是寫br,因為p標簽可以用margin設(shè)置行間距,但是如果是長文本的話使用p,因為p標簽里面不能有p標簽,特別是當數(shù)據(jù)是后端給的,可能會帶有p標簽,所以這時容器不能使用p標簽。
24.不要在https的鏈接里寫http的圖片

<img src=”//static.chimeroi.com/hello-world.jpg”>

相關(guān)推薦:

html的基礎(chǔ)元素,讓你零基礎(chǔ)學(xué)習(xí)HTML

html頁面中友情鏈接怎么進行添加設(shè)置?(代碼示例)

以上就是HTML中編碼規(guī)范的總結(jié)的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!


網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。