整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML編碼規(guī)范

          版規(guī)則

          縮進

          使用2個空格縮進

          <ul>
            <li>Fantastic</li>
            <li>Great</li>
          </ul>
          .example {
            color: blue;
          }

          大小寫

          只允許使用小寫。

          所有的代碼都用小寫字母:適用于元素名,屬性,屬性值(除了文本和CDATA), 選擇器,特性,特性值(除了字符串)。

          <!-- 不推薦 -->
          <A HREF="/">Home</A>
          <!-- 推薦 -->
          <img src="google.png"
          alt="Google">

          行為空格

          建議刪除行尾白空格。

          <!-- 不推薦 -->
          <p>What?  </p>
          <!-- 推薦 -->
          <p>Yes please.</p>

          常規(guī)Meta規(guī)則

          編碼

          如果沒有特殊需求,一般采用utf-8編碼。如果是cms站點,則遵守該站點的編碼規(guī)則。

          <!-- 網(wǎng)頁編碼 -->
          <meta charset="utf-8">

          注釋

          盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

          注釋是否需要詳盡,取決于項目的復雜程度。

          一般單行注釋:

          <!-- col -->

          模塊間注釋:

          <!-- news -->
          <div class="news">
            <h2>News</h2>
            <p>...</p>
          </div>
          <!--/ news -->

          循環(huán)注釋:

          <ul>
            <!-- loop: new list -->
            <li>new's title 1</li>
            <li>new's title 2</li>
            <li>new's title 3</li>
            <li>new's title 4</li>
            <li>new's title 5</li>
            <!-- /loop: new list -->
          </ul>

          cms輸出注釋:

          <!-- cms: news list -->
          <ul>
            <li>new's title 1</li>
            <li>new's title 2</li>
            <li>new's title 3</li>
            <li>new's title 4</li>
            <li>new's title 5</li>
          </ul>
          <!-- /cms: news list -->

          Tab選項卡內容注釋:

          <!-- tab: news list -->
          <div class="tab"></div>
          <!-- /tab: news list -->

          常規(guī)HTML設計規(guī)則

          文檔類型

          使用html5文檔聲明,不再使用XHTML(application/xhtml+xml)。

          HTML5是目前所有HTML文檔類型中的首選:

          <!DOCTYPE html>

          HTML 的正確性

          編寫有效、正確的HTML代碼,否則很難達到性能上的提升。

          可以使用一些工具驗證你的代碼,如 W3C HTML validator

          HTML 的語義性

          根據(jù)HTML各個元素的用途而去使用它們。

          <!-- 不推薦 -->
          <div class="col">
            <div class="title">
          news</div>
            <p>list1</p>
            <p>list2</p>
            <p>list3</p>
          </div>
          <!-- 推薦 -->
          <div class="col">
            <h2 class="title">
          news</h2>
            <p>list1</p>
            <p>list2</p>
            <p>list3</p>
          </div>

          部分標簽說明:

          • div 主要用于布局,分割頁面的結構;
          • ul/ol 主要用于無序/有序列表;
          • dl/dt/dd 當頁面中出現(xiàn)第一行為類似標題/簡述,然后下面為詳細描述的內容時應該使用該標簽;
          • span 沒有特殊的意義,可以用作排版的輔助,然后在css中定義span;
          • h1-h6 標題, 根據(jù)重要性依次遞減;
          • h1 最重要的標題;
          • label 使表單更有親和力而且能輔助表單排版;

          不推薦使用的標簽:

          • font 文字的外觀,大小和顏色;
          • u 文本下劃線;
          • center 居中對齊;
          • s 刪除線;
          • strike 刪除線;
          • noframes 無視框時的內容;
          • iframe 定義嵌入視圖;
          • isindex 不建議使用(可搜尋,使用input代替);
          • dir 目錄式列舉;
          • menu 菜單列表;
          • basefont 定義基本字體;
          • applet 定義java程序;
          • frame 定義個別視框;
          • frameset 視框格式總定義;

          多媒體元素降級處理

          給多媒體元素,比如canvas、videos、 images增加alt屬性,提高可用性(特別是常用的img標簽,盡可量得加上alt屬性,提供圖片的描述信息)。

          <!-- 不推薦 -->
          <img src="world.jpg">
          <!-- 推薦 -->
          <img src="world.jpg"
          alt="our world images">

          type屬性

          在樣式表和腳本的標簽中忽略type屬性。

          HTML5默認type為text/css和text/javascript類型,所以沒必要指定。即便是老瀏覽器也是支持的。

          <!-- 不推薦 -->
          <link rel="stylesheet"
           href="//www.google.com/css/maia.css"
           type="text/css">
          <script src="
           //www.google.com/
           js/gweb/analytics/autotrack.js"
           type="text/javascript">
           </script>
          <!-- 推薦 -->
          <link rel="stylesheet"
           href="//www.google.com/css/maia.css">
          <script src="
           //www.google.com/
           js/gweb/analytics/autotrack.js">
           </script>

          HTML代碼格式規(guī)則

          每個塊元素、列表元素或表格元素都獨占一行,每個子元素都相對于父元素進行縮進。按設計稿劃分模塊,盡量使頁面模塊化,模塊與模塊之前要有清晰的注釋。

          如上面頁面框架,推薦寫法:

          <!-- hader -->
          <div class="header">header</div>
          <!-- /hader -->
          <!-- nav -->
          <div class="nav">nav</div>
          <!-- /nav -->
          <!-- main -->
          <div class="main">
            <!-- container -->
            <div class="container">
              <!--news-->
              <div class="news">
                <h2>news<h2>
                <p>...</p>
              </div>
              <!--news-->
            </div>
            <!--/container-->
            <!--sidebar-->
            <div class="sidebar">
          sidebar</div>
            <!--sidebar-->
          </div>
          <!--/main-->
          <!--footer-->
          <div class="footer">
          footer</div>
          <!--/footer-->

          HTML與SEO

          頁面良好層次

          保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

          <!-- 不推薦 -->
          <div class="logo">My Site</div>
          <div class="nav">
            <a href="#">Home</a>
            <a href="#">News</a>
            <a href="#">Mobile</a>
          </div>
          <div class="news">
            <div>News</div>
            <a href="#">
          news list 1</a>
            <a href="#">
          news list 2</a>
            <a href="#">
          news list 3</a>
          </div>
          <!-- 推薦 -->
          <h1 class="logo">My Site</h1>
          <ul class="nav">
            <li><a href="#">
          Home</a></li>
            <li><a href="#">
          News</a></li>
            <li><a href="#">
          Mobile</a></li>
          </ul>
          <div class="news">
            <h2>News</h2>
            <ul>
              <li><a href="#">
          news list 1</a>
          </li>
              <li><a href="#">
          news list 2</a>
          </li>
              <li><a href="#">
          news list 3</a>
          </li>
            </ul>
          </div>

          權重標簽使用

          H標簽使用

          • h1 權重高,體現(xiàn)當前網(wǎng)頁中相對比較重要的信息,但不宜過多,建議一個頁面只放一個;
          • h2 可以做副標題;
          • h3 可以做新聞列表;
          • h4-h6 可做相關新聞的列表標簽屬性完整;

          strong、b使用

          將需要加粗的文字使用b標簽來顯示。

          將需要強調的文字(主要指包含關鍵詞的信息)使用strong標簽來強調主要內容。

          注:b是粗體標簽,屬于實體標簽,它所包圍的字符將被設為bold(粗體);strong 是加重語氣標簽,屬于邏輯標簽,它的作用是加強字符語氣。

          標簽屬性使用

          在很多情況下,a都要使用title來說明該鏈接的相關說明或目的意義。

          例如:當使用overflow隱藏掉a中的溢出文字時,該a中的title是必不可少的,它可以告訴用戶被隱藏掉的文字內容是什么;又或者當一個圖片型鏈接出現(xiàn)時,該a中的title同樣是必不可少的,它可以告訴用戶這個圖片鏈接是做什么用的。

          注:僅在img里添加alt標簽在火狐提示文字是出不來的,alt是圖片加載失敗或未加載完全時顯示出來的提示文字,要想鼠標移上去顯示提示信息應該用title,嚴謹?shù)膶懛ㄊ莍mg里加入alt和title這兩個標簽。

          精簡代碼

          代碼保持精簡,最優(yōu)化,這樣搜索引擎才更喜歡。

          TML 符號實體

          HTML 符號是不呈現(xiàn)在標準的鍵盤上,比如數(shù)學運算符、箭頭符號、技術符號和形狀。

          如需向 HTML 頁面添加這些符號,您可以使用 HTML 實體名稱。

          如果不存在實體名稱,您可以使用實體編號。

          如果字符沒有實體名稱,您可以使用十進制(或十六進制)引用。

          實例

          <p>我將顯示 &euro;</p>

          <p>我將顯示 &#8364;</p>

          <p>我將顯示 &#x20AC;</p>

          結果如下:

          我將顯示 €

          我將顯示 €

          我將顯示 €


          HTML 支持的數(shù)學符號

          如果您使用的是一個 HTML 實體名稱或一個十六進制編號,字符總是能正確顯示。

          這是與您頁面使用的字符集相互獨立的!

          字符編號實體描述
          ?&#8704;&forall;所有(for all)
          ?&#8706;&part;部分(part)
          ?&#8707;&exist;存在(exists)
          ?&#8709;&empty;空(empty)
          ?&#8711;&nabla;倒三角(nabla)
          &#8712;&isin;屬于(isin)
          ?&#8713;&notin;不屬于(notin)
          ?&#8715;&ni;包含的成員(ni)
          &#8719;&prod;連乘(prod)
          &#8721;&sum;總和(sum)

          完整的數(shù)學(Math)參考手冊


          HTML 支持的希臘字母

          字符編號實體描述
          Α&#913;&Alpha;Alpha(中文注音:阿耳法)
          Β&#914;&Beta;Beta(中文注音:貝塔)
          Γ&#915;&Gamma;Gamma(中文注音:伽馬)
          Δ&#916;&Delta;Delta(中文注音:德耳塔)
          Ε&#917;&Epsilon;Epsilon(中文注音:艾普西?。?/td>
          Ζ&#918;&Zeta;Zeta(中文注音:截塔)

          完整的希臘(Greek)參考手冊


          HTML 支持的其他實體

          字符編號實體描述
          ?&#169;&copy;版權所有(REGISTERED SIGN)
          ?&#174;&reg;注冊商標(REGISTERED SIGN)
          &#8364;&euro;歐元符號(EURO SIGN)
          ?&#8482;&trade;商標(trademark)
          &#8592;&larr;向左箭頭(LEFTWARDS ARROW)
          &#8593;&uarr;向上箭頭(UPWARDS ARROW)
          &#8594;&rarr;向右箭頭(RIGHTWARDS ARROW)
          &#8595;&darr;向下箭頭(DOWNWARDS ARROW)
          ?&#9824;&spades;黑桃(BLACK SPADE SUIT)
          ?&#9827;&clubs;黑梅花(BLACK CLUB SUIT)
          ?&#9829;&hearts;黑心(BLACK HEART SUIT)
          ?&#9830;&diams;黑方塊(BLACK DIAMOND SUIT)

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          • 縮進使用soft tab(4個空格);
          • 嵌套的節(jié)點應該縮進;
          • 在屬性上,使用雙引號,不要使用單引號;
          • 屬性名全小寫,用中劃線做分隔符;
          • 不要在自動閉合標簽結尾處使用斜線(HTML5 規(guī)范 指出他們是可選的);
          • 不要忽略可選的關閉標簽,例:


          <!DOCTYPE html>
           <html>
           	<head>
           		<title>Page title</title>
           	</head>
           	<body> <img src="images/company_logo.png" alt="Company">
           		<h1 class="hello-world">Hello, world!</h1>
           	</body>
           </html>

          HTML5 doctype在頁面開頭使用這個簡單地doctype來啟用標準模式,使其在每個瀏覽器中盡可能一致的展現(xiàn);雖然doctype不區(qū)分大小寫,但是按照慣例,doctype大寫 (關于html屬性,大寫還是小寫)。<!DOCTYPE html> <html> ... </html> lang屬性根據(jù)HTML5規(guī)范:應在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助,告訴它們應當怎么去發(fā)音和翻譯。
          更多關于 lang 屬性的說明在這里;在sitepoint上可以查到語言列表;
          但sitepoint只是給出了語言的大類,例如中文只給出了zh,但是沒有區(qū)分香港,臺灣,大陸。而微軟給出了一份更加詳細的語言列表.aspx),其中細分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過聲明一個明確的字符編碼,讓瀏覽器輕松、快速的確定適合網(wǎng)頁內容的渲染方式,通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標簽可以指定頁面應該用什么版本的IE來渲染;<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據(jù)HTML5規(guī)范, 通常在引入CSS和JS時不需要指明 type,因為 text/css 和 text/javascript 分別是他們的默認值。HTML5 規(guī)范鏈接使用link
          使用style
          使用script<!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script> 屬性順序屬性應該按照特定的順序出現(xiàn)以保證易讀性;

          • class
          • id
          • name
          • data-*
          • src, for, type, href, value , max-length, max, min, pattern
          • placeholder, title, alt
          • aria-*, role
          • required, readonly, disabled

          class是為高可復用組件設計的,所以應處在第一位;
          id更加具體且應該盡量少使用,所以將它放在第二位。

          <a class="..." id="..." data-modal="toggle" href="#">Example link</a>
          
          <input class="form-control" type="text">
          
          <img src="..." alt="...">
          

          boolean屬性

          boolean屬性指不需要聲明取值的屬性,XHTML需要每個屬性聲明取值,但是HTML5并不需要;
          更多內容可以參考 WhatWG section on boolean attributes:
          boolean屬性的存在表示取值為true,不存在則表示取值為false。

          <input type="text" disabled>
          
          <input type="checkbox" value="1" checked>
          
          <select>
              <option value="1" selected>1</option>
          </select>
          

          JS生成標簽

          在JS文件中生成標簽讓內容變得更難查找,更難編輯,性能更差。應該盡量避免這種情況的出現(xiàn)。

          減少標簽數(shù)量

          在編寫HTML代碼時,需要盡量避免多余的父節(jié)點;很多時候,需要通過迭代和重構來使HTML變得更少。

          <!-- Not well -->
          <span class="avatar">
              <img src="...">
          </span>
          
          <!-- Better -->
          <img class="avatar" src="...">
          

          實用高于完美

          盡量遵循HTML標準和語義,但是不應該以浪費實用性作為代價;任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。


          主站蜘蛛池模板: 久夜色精品国产一区二区三区| 狠狠爱无码一区二区三区| 亚洲熟妇av一区二区三区| 亚洲无人区一区二区三区| 久久婷婷色一区二区三区| 国产福利微拍精品一区二区| 国产午夜精品片一区二区三区| 理论亚洲区美一区二区三区| 亚洲国产综合无码一区二区二三区 | 中文字幕日韩人妻不卡一区| 久久久久人妻一区精品色 | 久久AAAA片一区二区| 亚洲国产美国国产综合一区二区 | 国产精品毛片a∨一区二区三区| 美女福利视频一区| 国产一区在线观看免费| 日韩内射美女人妻一区二区三区 | 日本福利一区二区| 伊人久久大香线蕉av一区| 无码少妇A片一区二区三区| 人妻内射一区二区在线视频| 亚洲香蕉久久一区二区| 国产一区二区三区免费在线观看| 国产日韩一区二区三区在线观看| 亚洲日韩中文字幕无码一区| 中文字幕在线一区二区三区| 国产免费一区二区三区| 国产av成人一区二区三区| 日韩伦理一区二区| 麻豆一区二区99久久久久| 久久99国产一区二区三区| 日韩一区二区免费视频| 精品无码人妻一区二区三区品| 一区二区三区免费看| 国产精品无码一区二区三区不卡| 久久久精品人妻一区亚美研究所| 一区二区三区内射美女毛片| 在线|一区二区三区四区| 精品福利一区二区三区免费视频| 成人无码AV一区二区| 久夜色精品国产一区二区三区|