編碼規范-html.md

tomlingtm 發布于2019-08-01 17:22 / 371人閱讀

摘要：寫在前面對于不同的編程語言來說，具體的編碼規范各不相同，但是其宗旨都是一致的，就是保證代碼在高質量完成需求的同時具備良好的可讀性可維護性。減少標簽的數量編寫代碼時，盡量避免多余的父元素。

寫在前面

對于不同的編程語言來說，具體的編碼規范各不相同，但是其宗旨都是一致的，就是保證代碼在高質量完成需求的同時具備良好的可讀性、可維護性。

本文大部分內容來自網上，僅供個人參考學習！

網絡上的知識浩如煙海，而學到了才是自己的！！
然后，老規矩，帶上我們可愛的小伙伴...

語法

用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。

嵌套元素應當縮進一次（即兩個空格）。

對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。

不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規范中明確說明這是可選的。

不要省略可選的結束標簽（closing tag）（例如，或）。

doctype

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。

HTML5 doctype

HTML 4 doctype

Tips:
聲明不是 HTML 標簽
告訴瀏覽器HTML文檔類型

文件兼容性模式

文件兼容性用于定義讓瀏覽器如何編譯你的網頁。此文件解釋文件兼容性，如何指定你網站的文件兼容性模式以及如何判斷一個網頁該使用的文件模式。

IE兼容行

說明:IE=Edge設置通知IE以最高級別模式加載文檔;其他的有:11/10/9/8/7/5/EmulateIE11/EmulateIE10

chrome 優先

說明:優先使用最新版本的IE 和 Chrome 內核

360極速模式優先

說明:優先使用webkit內核,IE兼容內核,IE標準內核

馬丹寫在最后

瀏覽器從前往后選擇,但是太麻煩了,改用IE=edge,為了兼容chrome使用chrome=1觸發Google Chrome Frame;但是馬丹,chrome最新版本已經拋棄Google Chrome Frame了,所以最終使用IE=edge搞定.

瀏覽器內核

Trident內核
又稱其為IE內核，是微軟開發的一種排版引擎。
瀏覽器產品: IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等

Gecko內核
開源,以C++編寫的網頁排版引擎。
瀏覽器產品:Firefox、Netscape6至9

WebKit內核
開源,目前流行的瀏覽器內核,常見于Google和Mac的產品中.
瀏覽器產品:Safari、Chrome、傲游3、國內各種瀏覽器

Presto內核
Opera Software開發的瀏覽器排版引擎
瀏覽器產品:Opera 7.0以上

Tips : CSS3中各個瀏覽器內核兼容的設置

- -moz-：代表FireFox瀏覽器私有屬性  
- -ms-：代表IE瀏覽器私有屬性  
- -webkit-：代表safari、chrome瀏覽器私有屬性  
- -o-：代表opera瀏覽器私有屬性

    .class{
      border-radius:20px 40px 10px;
      -webkit-border-radius:20px 40px 10px;
      -moz-border-radius:20px 40px 10px;
      -ms-border-radius:20px 40px 10px;
      -o-border-radius:20px 40px 10px;
    }

sublime有插件可以自動生成:Autoprefixer

Tips : JS各個瀏覽器內核兼性

其他問題

文件編碼格式
編寫文件時全部使用無BOM UTF-8模式,并指定瀏覽器文檔編碼方式.

引入 CSS 和 JavaScript 文件
根據HTML5規范,在引入CSS和JavaScript文件時一般不需要指定type屬性，因為text/css和text/javascript分別是它們的默認值。非H5的加!

說明:js放文件底部,css放文件head

標簽語義化
盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。

減少標簽的數量
編寫 HTML 代碼時，盡量避免多余的父元素。

少用JavaScript 生成的標簽
通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

云服務器 GPU云服務器規范編碼編碼規范 php編碼規范 js安全編碼規范

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51128.html

roadhog 生產環境支持靜態文件名加 hash 和 CDN 配置

摘要：問題來源于思路使用來給文件加使用插件來給文件加使用插件來自動根據加的來引入對應的和并生成文件安裝無需安裝因為已經帶了版，如果自己安裝了版反而可能出問題。問題來源于：https://github.com/sorrycc/ro... Workaround: 思路使用 webpack output 來給 js 文件加 hash 使用插件 extract-text-webpack-plu...

番茄西紅柿 2019-07-16 14:29 評論0 收藏0
roadhog 生產環境支持靜態文件名加 hash 和 CDN 配置

摘要：問題來源于思路使用來給文件加使用插件來給文件加使用插件來自動根據加的來引入對應的和并生成文件安裝無需安裝因為已經帶了版，如果自己安裝了版反而可能出問題。問題來源于：https://github.com/sorrycc/ro... Workaround: 思路使用 webpack output 來給 js 文件加 hash 使用插件 extract-text-webpack-plu...

jsummer 2019-08-20 16:20 評論0 收藏0
roadhog 生產環境支持靜態文件名加 hash 和 CDN 配置

摘要：問題來源于思路使用來給文件加使用插件來給文件加使用插件來自動根據加的來引入對應的和并生成文件安裝無需安裝因為已經帶了版，如果自己安裝了版反而可能出問題。問題來源于：https://github.com/sorrycc/ro... Workaround: 思路使用 webpack output 來給 js 文件加 hash 使用插件 extract-text-webpack-plu...

izhuhaodev 2019-06-21 16:10 評論0 收藏0
HTML5-焦點管理

摘要：移動的實質則是切換焦點，所以我們需要去理解什么焦點。元素能夠被聚焦的元素，比如接下來我們需要了解一下屬性，這個很重要，沒有它實現不了焦點管理。在開發TV web 應用時，發現在交互方式上和傳統web開發很不一樣。PC上的頁面上都是通過鼠標進行交互，而TV則不同，它是通過遙控器按鍵進行交互，它有點擊、移動(上下左右)、返回、主頁等操作。移動的實質則是切換焦點，所以我們需要去理解什么焦點。 f...

233jl 2019-05-23 16:23 評論0 收藏0
作為一個前端工程師也要掌握的幾種文件路徑知識

摘要：前言之前在做配置時候多次用到路徑相關內容，最近在寫項目的時候，有一個文件需要上傳到阿里云的功能，同時本地服務器也需要保留一個文件備份。如果返回的路徑字符串長度為零，那么他會返回一個，代表當前的文件夾。 showImg(https://segmentfault.com/img/bVbwElJ?w=480&h=204); 前言之前在做webpack配置時候多次用到路徑相關內容，最近在寫項...

wslongchen 2019-08-26 14:06 評論0 收藏0