當前位置:成語大全網 - 英語詞典 - 如何寫出標準、靈活、穩定、高質量的HTML和css代碼——我口袋裏有糖。

如何寫出標準、靈活、穩定、高質量的HTML和css代碼——我口袋裏有糖。

黃金定律

始終遵循相同的編碼標準,無論有多少人參與同壹個項目,都要確保每壹行代碼看起來都是由同壹個人編寫的。

語法:

1.用兩個空格替換制表符;2.嵌套元素應該縮進壹次(兩個空格);3.對於屬性的定義,壹定要用雙引號,千萬不要用單引號;4.不要在自結束元素-HTML 5規範(/we b-foundations/ISO-2-letter-language-codes/

IE兼容模式:

IE支持通過特定的標簽來確定當前收據頁面應該使用的IE版本。除非有很強的需求,否則最好設置為邊緣模式,這樣IE就可以采用其支持的最新模式。

字符編碼:

通過聲明字符編碼,可以保證瀏覽器快速簡便地判斷頁面內容的呈現方式,可以避免在HTML中使用字符實體標簽,從而與文檔編碼保持壹致。

css和JavaScript文件簡介:

根據HTML5規範,導入css和JavaScript文件時壹般不需要指定type屬性,因為text/css和text/javascript分別是它們的默認值。

實用為王:

盡量遵循HTML標準和語義,但不要犧牲實用性。嘗試使用盡可能少的標簽,並始終保持最低的復雜度。

屬性順序:

HTML屬性應按以下順序排列,以確保代碼的可讀性:

1.class2.id,name3.data-* 4.src,for,type,href 5.title,alt 6.aria,role class是用來標識高復用組件的,所以應該排在第壹位。

減少標簽的數量

編寫HTML代碼時,盡量避免冗余的父元素。很多時候,這需要叠代和重構。

JavaScript生成的標簽

JavaScript生成的標簽使得內容難以查找和編輯,這種情況是以性能為導向的。

CSS語法:

1.用兩個空格替換制表符;2.將選擇器分組時,將單個選擇器放在壹行中;3.為了代碼的可讀性,在每個聲明塊的左花括號中加壹個空格;4.聲明塊的右大括號應該在單獨的壹行中;5.應該在每個語句的:後面插入壹個空格;6.為了獲得更準確的錯誤報告,每條語句都應該各占壹行;7.所有聲明語句都要以分號結尾,最後壹個聲明語句後面的分號是可選的,但是如果省略這個分號,代碼可能更容易輸出;8.對於用逗號分隔的屬性值,應在每個逗號後插入壹個空格;9.對於屬性值或顏色參數,省略小於1的小數前的0(例如0.5代替0.5);10.十六進制值應該全部小寫,比如#fff。盡量使用短格式的十六進制值,如#fff而不是# ffffff11.為選中的屬性添加雙引號,如input[type = " text "];12.避免為0值指定單位,例如,用margin: 0替換margin:0px。

申報順序:

相關的屬性聲明應該組合在壹起,並按以下順序排列:

1 .定位(位置:絕對;top:0;底部:0;右:0;左:0;z指數:100;);2 .箱式模型(顯示器:block浮動:左;寬度:100 px;身高:100 px;);3 .排版(字體:normal 13px“微軟雅黑”;行高:1.5 em;顏色:# 333;文本對齊:居中;);4 .視覺(背景:黃色;邊框:1px實心# c00邊框半徑:3px不透明度:1;);因為定位可以從正常的文檔流中移除元素,並且還可以覆蓋與盒子模型相關的樣式,所以它排在第壹位。箱式模型排在第二位,因為它決定了建築物的大小和位置。其他屬性知識影響到了構建內部或者不影響前兩組屬性,所以排在後面。參考/文檔/代碼指南/