<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          HTML/CSS代碼風格指南(Google)

          時間:?2017-11-13閱讀:?1094標簽:?html

          背景

          本文檔定義了HTML/CSS的編寫格式和風格規則。它旨在提高合作和代碼質量,并使其支持基礎架構。適用于HTML/CSS文件,包括GSS文件。 只要代碼質量是可以被維護的,就能很好的被工具混淆、壓縮和合并。

          樣式規則

          協議

          嵌入式資源書寫省略協議頭

          省略圖像、媒體文件、樣式表和腳本等URL協議頭部聲明 ( http: , https: )。如果不是這兩個聲明的URL則不省略。

          省略協議聲明,使URL成相對地址,防止內容混淆問題和導致小文件重復下載。

          <!-- 不推薦 -->
          <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
          <!-- 推薦 --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
          /* 不推薦 */
          .example {
            background: url(http://www.google.com/images/example);
          }
          /* 推薦 */ .example { background: url(//www.google.com/images/example); }


          排版規則

          縮進

          每次縮進兩個空格。

          不要用TAB鍵或多個空格來進行縮進。

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


          大小寫

          只用小寫字母。

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

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


          行尾空格

          刪除行尾白空格。

          行尾空格沒必要存在。

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


          元數據規則

          編碼

          用不帶BOM頭的 UTF-8編碼。

          讓你的編輯器用沒有字節順序標記的UTF-8編碼格式進行編寫。

          在HTML模板和文件中指定編碼 <meta charset="utf-8"> . 不需要制定樣式表的編碼,它默認為UTF-8.

          (更多有關于編碼的信息和怎樣指定它,請查看 Character Sets & Encodings in XHTML, HTML and CSS。)

          注釋

          盡可能的去解釋你寫的代碼。

          用注釋來解釋代碼:它包括什么,它的目的是什么,它能做什么,為什么使用這個解決方案,還是說只是因為偏愛如此呢?

          (本規則可選,沒必要每份代碼都描述的很充分,它會增重HTML和CSS的代碼。這取決于該項目的復雜程度。)

          活動的條目

          用 TODO 標記代辦事項和正活動的條目

          只用 TODO 來強調代辦事項, 不要用其他的常見格式,例如 @@ 。

          附加聯系人(用戶名或電子郵件列表),用括號括起來,例如 TODO(contact) 。

          可在冒號之后附加活動條目說明等,例如 TODO: 活動條目說明 。

          {# TODO(cha.jn): 重新置中 #} <center>Test</center>
          <!-- TODO: 刪除可選元素 --> <ul> <li>Apples</li> <li>Oranges</li> </ul>

          HTML代碼風格規則

          文檔類型

          請使用HTML5標準。

          HTML5是目前所有HTML文檔類型中的首選: <!DOCTYPE html> .

          (推薦用HTML文本文檔格式,即 text/html . 不要用 XHTML。 XHTML格式,即 application/xhtml+xml , 有倆瀏覽器完全不支持,還比HTML用更多的存儲空間。)

          HTML代碼有效性

          盡量使用有效的HTML代碼。

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

          用類似這樣的工具 W3C HTML validator 來進行測試。

          HTML代碼有效性是重要的質量衡量標準,并可確保HTML代碼可以正確使用。

          <!-- 不推薦 -->
          <title>Test</title>
          <article>This is only a test.
          <!-- 推薦 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>


          語義

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

          使用元素 (有時候錯稱其為“標簽”) 要知道為什么去使用它們和是否正確。 例如,用heading元素構造標題, p 元素構造段落, a 元素構造錨點等。

          根據HTML各個元素的用途而去使用是很重要的,它涉及到文檔的可訪問性、重用和代碼效率等問題。

          <!-- 不推薦 -->
          <div onclick="goToRecommendations();">All recommendations</div>
          <!-- 推薦 --> <a href="recommendations/">All recommendations</a>


          多媒體后備方案

          為多媒體提供備選內容。

          對于多媒體,如圖像,視頻,通過 canvas 讀取的動畫元素,確保提供備選方案。 對于圖像使用有意義的備選文案( alt ) 對于視頻和音頻使用有效的副本和文案說明。

          提供備選內容是很重要的,原因:給盲人用戶以一些提示性的文字,用 @alt 告訴他這圖像是關于什么的,給可能沒理解視頻或音頻的內容的用戶以提示。

          (圖像的 alt 屬性會產生冗余,如果使用圖像只是為了不能立即用CSS而裝飾的 ,就不需要用備選文案了,可以寫 alt="" 。)

          <!-- 不推薦 -->
          <img src="spreadsheet.png">
          <!-- 推薦 --> <img src="spreadsheet.png" alt="電子表格截圖">


          關注點分離

          將表現和行為分開。

          嚴格保持結構 (標記),表現 (樣式),和行為 (腳本)分離, 并盡量讓這三者之間的交互保持最低限度。

          確保文檔和模板只包含HTML結構, 把所有表現都放到樣式表里,把所有行為都放到腳本里。

          此外,盡量使腳本和樣式表在文檔與模板中有最小接觸面積,即減少外鏈。

          將表現和行為分開維護是很重要滴,因為更改HTML文檔結構和模板會比更新樣式表和腳本更花費成本。

          <!-- 不推薦 -->
          <!DOCTYPE html>
          <title>HTML sucks</title>
          <link rel="stylesheet" href="base.css" media="screen">
          <link rel="stylesheet" href="grid.css" media="screen">
          <link rel="stylesheet" href="print.css" media="print">
          <h1>HTML sucks</h1>
          <p>I’ve read about this on a few sites but now I’m sure:
            <u>HTML is stupid!!1</u>
          <center>I can’t believe there’s no way to control the styling of
            my website without doing everything all over again!</center>
          <!-- 推薦 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It’s awesome!


          實體引用

          不要用實體引用。

          不需要使用類似 &mdash; 、 &rdquo; 和 &#x263a; 等的實體引用, 假定團隊之間所用的文件和編輯器是同一編碼(UTF-8)。

          在HTML文檔中具有特殊含義的字符(例如 < 和 & )為例外, 噢對了,還有 “不可見” 字符 (例如no-break空格)。

          <!-- 不推薦 -->
          歐元貨幣符號是 “&eur;”。
          <!-- 推薦 --> 歐元貨幣符號是 “€”。


          可選標簽

          省略可選標簽(可選)。

          出于優化文件大小和校驗, 可以考慮省略可選標簽,哪些是可選標簽可以參考 HTML5 specification

          (這種方法可能需要更精準的規范來制定,眾多的開發者對此的觀點也都不同。考慮到一致性和簡潔的原因,省略所有可選標記是有必要的。)

          <!-- 不推薦 -->
          <!DOCTYPE html>
          <html>
            <head>
              <title>Spending money, spending bytes</title>
            </head>
            <body>
              <p>Sic.</p>
            </body>
          </html>
          <!-- 推薦 --> <!DOCTYPE html> <title>Saving money, saving bytes</title> <p>Qed.


          type屬性

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

          在樣式表(除非不用 CSS)和腳本(除非不用 JavaScript)的標簽中 不寫 type 屬性。

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

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


          HTML代碼格式規則

          格式

          每個塊元素、列表元素或表格元素都獨占一行,每個子元素都相對于父元素進行縮進。

          獨立元素的樣式(as CSS allows elements to assume a different role per display property), 將塊元素、列表元素或表格元素都放在新行。

          另外,需要縮進塊元素、列表元素或表格元素的子元素。

          (如果出現了列表項左右空文本節點問題,可以試著將所有的 li 元素都放在一行。 A linter is encouraged to throw a warning instead of an error.)

          <blockquote> <p><em>Space</em>, the final frontier.</p> </blockquote>
          <ul> <li>Moe <li>Larry <li>Curly </ul>
          <table> <thead> <tr> <th scope="col">Income <th scope="col">Taxes <tbody> <tr> <td>$ 5.00 <td>$ 4.50 </table>


          CSS代碼風格規則

          CSS代碼有效性

          盡量使用有效的CSS代碼。

          使用有效的CSS代碼,除非是處理CSS校驗器程序錯誤或者需要專有語法。

          用類似W3C CSS validator 這樣的工具來進行有效性的測試。

          使用有效的CSS是重要的質量衡量標準,如果發現有的CSS代碼沒有任何效果的可以刪除,確保CSS用法適當。

          ID和class的命名

          為ID和class取通用且有意義的名字。

          應該從ID和class的名字上就能看出這元素是干嘛用的,而不是表象或模糊不清的命名。

          應該優先慮以這元素具體目來進行命名,這樣他就最容易理解,減少更新。

          通用名稱可以加在兄弟元素都不特殊或沒有個別意義的元素上,可以起名類似“helpers”這樣的泛。

          使用功能性或通用的名字會減少不必要的文檔或模板修改。

          /* 不推薦: 無意義 不易理解 */
          #yee-1901 {}
          /* 不推薦: 表達不具體 */
          .button-green {}
          .clear {}
          /* 推薦: 明確詳細 */ #gallery {} #login {} .video {} /* 推薦: 通用 */ .aux {} .alt {}


          ID和class命名風格

          非必要的情況下,ID和class的名稱應盡量簡短。

          簡要傳達ID或class是關于什么的。

          通過這種方式,似的代碼易懂且高效。

          /* 不推薦 */
          #navigation {}
          .atr {}
          /* 推薦 */ #nav {} .author {}


          類型選擇器

          避免使用CSS類型選擇器。

          非必要的情況下不要使用元素標簽名和ID或class進行組合。

          出于性能上的考慮避免使用父輩節點做選擇器 performance reasons.

          /* 不推薦 */
          ul#example {}
          div.error {}
          /* 推薦 */ #example {} .error {}


          屬性縮寫

          寫屬性值的時候盡量使用縮寫。

          CSS很多屬性都支持縮寫shorthand (例如 font ) 盡量使用縮寫,甚至只設置一個值。

          使用縮寫可以提高代碼的效率和方便理解。

          /* 不推薦 */
          border-top-style: none;
          font-family: palatino, georgia, serif;
          font-size: 100%;
          line-height: 1.6;
          padding-bottom: 2em;
          padding-left: 1em;
          padding-right: 1em;
          padding-top: 0;
          /* 推薦 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;


          0和單位

          省略0后面的單位。

          非必要的情況下 0 后面不用加單位。

          margin: 0; padding: 0;

          0開頭的小數

          省略0開頭小數點前面的0。

          值或長度在-1與1之間的小數,小數前的 0 可以忽略不寫。

          font-size: .8em;

          URI外的引號

          省略URI外的引號。

          不要在 url() 里用 ( "" , '' ) 。

          @import url(//www.google.com/css/go.css);

          十六進制

          十六進制盡可能使用3個字符。

          加顏色值時候會用到它,使用3個字符的十六進制更短與簡潔。

          /* 不推薦 */
          color: #eebbcc;
          /* 推薦 */ color: #ebc;


          前綴

          選擇器前面加上特殊應用標識的前綴(可選)。

          大型項目中最好在ID或class名字前加上這種標識性前綴(命名空間),使用短破折號鏈接。

          使用命名空間可以防止命名沖突,方便維護,比如在搜索和替換操作上。

          .adw-help {} /* AdWords */ #maia-note {} /* Maia */


          ID和class命名的定界符

          ID和class名字有多單詞組合的用短破折號“-”分開。

          別在選擇器名字里用短破折號“-”以外的連接詞(包括啥也沒有), 以增進對名字的理解和查找。

          /* 不推薦:“demo”和“image”中間沒加“-” */
          .demoimage {}
          
          /* 不推薦:用下劃線“_”是屌絲的風格 */
          .error_status {}
          /* 推薦 */ #video-id {} .ads-sample {}


          Hacks

          最好避免使用該死的CSS “hacks” —— 請先嘗試使用其他的解決方法。

          雖然它很有誘惑力,可以當作用戶代理檢測或特殊的CSS過濾器,但它的行為太過于頻繁,會長期傷害項目的效率和代碼管理,所以能用其他的解決方案就找其他的。

          CSS代碼格式規則

          聲明順序

          依字母順序進行聲明。

          都按字母順序聲明,很容易記住和維護。

          忽略瀏覽器的特定前綴排序,但多瀏覽器特定的某個CSS屬性前綴應相對保持排序(例如-moz前綴在-webkit前面)。

          background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;

          代碼塊內容縮進

          縮進所有代碼塊(“{}”之間)內容。

          縮進所有代碼塊的內容,它能夠提高層次結構的清晰度。

          @media screen, projection { html { background: #fff; color: #444; } }


          聲明完結

          所有聲明都要用“;”結尾。

          考慮到一致性和拓展性,請在每個聲明尾部都加上分號。

          /* 不推薦 */
          .test {
            display: block;
            height: 100px
          }
          /* 推薦 */ .test { display: block; height: 100px; }


          屬性名完結

          在屬性名冒號結束后加一個空字符。

          出于一致性的原因,在屬性名和值之間加一個空格(可不是屬性名和冒號之間噢)。

          /* 不推薦 */
          h3 {
            font-weight:bold;
          }
          /* 推薦 */ h3 { font-weight: bold; }


          選擇器和聲明分行

          將選擇器和聲明隔行。

          每個選擇器和聲明都要獨立新行。

          /* 不推薦 */
          a:focus, a:active {
            position: relative; top: 1px;
          }
          /* 推薦 */ h1, h2, h3 { font-weight: normal; line-height: 1.2; }


          規則分行

          每個規則獨立一行。

          兩個規則之間隔行。

          html { background: #fff; } body { margin: auto; width: 50%; }


          CSS元數據規則

          注釋部分

          按組寫注釋。(可選)

          如果可以,按照功能的類別來對一組樣式表寫統一注釋。獨立成行。

          /* Header */ #adw-header {} /* Footer */ #adw-footer {} /* Gallery */ .adw-gallery {}


          吐槽部分

          堅持一致原則

          如果你要編輯代碼,先花幾分鐘看看它的代碼風格,如果它這么做,那你也應該這么做。

          風格統一了,就有了一個共同思維的環境,參與者就可以專注的看你要說什么,而不是先想你是在說哪星球的語言。 雖然我們在這里提出統一樣式規則,但就只是想讓大家都知曉并借鑒而對自己的風格進行修正。 當然,保持自己獨有的風格也是很重要的。balabala……


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/90

          html包含html文件的方法

          我們在寫asp頁面的時候,常常使用include命令來包含公共文件。由于這個方法用起來非常方便,于是很多人在HTML頁面里嘗試使用include,但是發現根本就不起作用

          什么是XHTML?

          XHTML代表可擴展超文本標記語言(eXtensible HyperText Markup Language),是一種標記語言,表現方式與超文本標記語言(HTML)類似,不過語法上更加嚴格。XHTML是基于可擴展標記語言(XML),由萬維網聯盟(W3C)開發

          Js禁用html表單enter提交

          很多時候我們開發的前端頁面要考慮到用戶在進行輸入操作的時候回車只是為了跳到下一個輸入項,而不是保存提交注冊,為此需要禁用enter,從而就可以使用tab來行使enter的功能。所以就的使用js來控制html。

          html5和html的區別

          html5是對html的第五次重大修改。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準!html5繼承了html所有的語法,同時html5也會增加一些新的特性

          了解HTML及運行原理

          HTML(HyperText Marked Language)即超文本標記語言,是一種用來制作超文本文檔的簡單標記語言。我們在瀏覽網頁時看到的一些豐富的影像、文字、圖片等內容都是通過HTML表現出來的

          HTML發展歷程

          HTML是超文本標記語言的縮寫,不同于C或JAVA等編程語言,HTML由標簽組成。通過標簽可以在網頁中插入文字、圖片、鏈接、音頻、視頻等元素,進而描述網頁。和Windows一樣,隨著技術的發展,HTML經歷了多次版本更新

          VSCode中快捷輸入HTML代碼

          VSCode中有一些快捷編輯HTML的方法,能大大提高工作效率,在這記錄一些。文是在VSCode下編寫的,其他編輯器如Atom、Sublime Text都支持Emmet

          HTML的Doctype

          <!DOCTYPE> 聲明位于文檔中的最前面,處于 <html> 標簽之前。告知瀏覽器的解析器,用什么文檔類型 規范來解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以混雜(兼容)模式呈現。

          在html中做嵌套頁面_客戶端實現html頁面的嵌套

          如何在客戶端利用html、或js將一個html頁面嵌套在另一個頁面中,這篇文章主要講解以下幾種方式:IFrame引入 、<object>方式、Behavior的download方式 、使用JQuery的load方法

          KeyPress 和KeyDown 、KeUp之間的區別

          input 框在輸入查詢內容之后,按回車鍵居然有兩種不同的表現形式(input 框沒有綁定鍵盤事件),谷歌和火狐功能正常,但IE在按了回車鍵以后居然自動調用方法。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网