JSON

1. JSON Viewer Pro

JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：

支持將JSON數(shù)據(jù)進行格式化，并使用屬性或者圖表進行展示；
使用面包屑深入遍歷 JSON 屬性；
在輸入?yún)^(qū)寫入自定義 JSON；
導入本地 JSON 文件；
使用上下文菜單下載 JSON 文件；
網(wǎng)址過濾器；
改變主題；
自定義 CSS ；
復制屬性和值；

輸入界面如下：

格式化之后：

2. JSONVue

JSONVue 是一個JSON數(shù)據(jù)查看器，主要用來格式化JSON數(shù)據(jù)：

網(wǎng)站技術

3. Library Sniffer

Library Sniffer 是一款給開發(fā)者使用的工具，能夠探測當前網(wǎng)頁所使用的類庫、框架和服務器環(huán)境，為開發(fā)者提供了方便。

4. Wappalyzer

Wappalyzer 擴展可以用來識別網(wǎng)站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫等。

5. WhatRuns

WhatRuns 擴展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術。

開發(fā)調(diào)試

6. PerfectPixel by WellDoneCode

使用PerfectPixel插件可以將設計圖加載至網(wǎng)頁中，與已成型的網(wǎng)頁進行重疊對比，以幫助開發(fā)和設計人員規(guī)范網(wǎng)頁像素精度。這是一款可以優(yōu)化前端頁面顯示的Chrome插件。

7. Clear Cache

可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數(shù)據(jù)和數(shù)量，包括：應用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫、本地存儲、插件數(shù)據(jù)、密碼和 WebSQL。

8. VisBug

VisBug 是一個使用 JavaScript 構建的開源網(wǎng)頁設計調(diào)試工具，它可以讓用戶使用點擊式和拖放式界面來查看網(wǎng)站的元素。

9. Debug CSS

Debug CSS 是一個幫助調(diào)試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：

10. CSS Viewer

CSS Viewer 是一款適用于 Web 開發(fā)人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網(wǎng)頁上的元素的 CSS 屬性。

11. EditThisCookie

EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。

12. React Developer Tools

React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發(fā)者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：

Components 選項卡顯示了在頁面上呈現(xiàn)的根 React 組件，以及它們最終呈現(xiàn)的子組件；
Profiler 選項卡用來記錄性能信息。

13. Vue.js devtools

Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應用程序的插件，可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對DOM結構數(shù)據(jù)結構進行解析和調(diào)試功能。

14. Augury

Augury 可以幫助開發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應用程序。

15. Firebug Lite for Google Chrome

Firebug Lite是火狐瀏覽器中著名的開發(fā)者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調(diào)試網(wǎng)頁內(nèi)容，其包含了基本的HTML、CSS以及Javascript的調(diào)試功能，用于幫助網(wǎng)頁前端開發(fā)工程師快速地調(diào)試網(wǎng)頁，以便及時地找到網(wǎng)頁中的BUG并及時修復。

16. HTML Validator

HTML Validator 在 Chrome 的開發(fā)者工具中添加了 HTML Validator。HTML 頁面的錯誤數(shù)通過瀏覽器狀態(tài)欄中的圖標顯示，詳細信息可以在瀏覽器的開發(fā)者工具中查看。

17. Web Developer

Web Developer 擴展為帶有各種 Web 開發(fā)工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。

18. Requestly

Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發(fā)、修改HTTP請求和結果、插入腳本等功能。

19. Window Resizer

Window Resizer 主要用來調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。

20. Responsive Viewer

Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發(fā)人員在開發(fā)響應式網(wǎng)站/應用程序時測試多個屏幕。

21. Moesif Origin & CORS Changer

此插件允許直接從瀏覽器發(fā)送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.

22. ColorPick Eyedropper

ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網(wǎng)頁等中選擇顏色值。

23. CSSPeeper

CSS Peeper 用于檢查和復制元素樣式的優(yōu)秀工具，使用 CSSPeeper 可以將鼠標懸停在網(wǎng)頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。

24. Dimensions

Dimensions是一款能幫助使用者對網(wǎng)頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。

25. Site Palette

Site Palette 用于生成調(diào)色板。設計師和前端開發(fā)人員必備的工具。可以通過這款插件輕松獲取網(wǎng)站的配色方案。

26. ColorZilla

ColorZilla 是一款功能強大地提取網(wǎng)頁色彩的工具；也是個快速的對顏色進行調(diào)節(jié)的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產(chǎn)css顏色的代碼等。

吸管器-獲取頁面上任何像素或區(qū)域的顏色；
一個先進的顏色選擇器類似于可以在Photoshop和Paint Shop Pro中找到的；
網(wǎng)頁顏色分析器-分析任何網(wǎng)頁上的DOM元素顏色，找到相應的元素；
終極CSS梯度發(fā)生器；
調(diào)色板查看器與7預先安裝調(diào)色板；
顏色歷史最近挑選的顏色；
顯示標簽名稱，類別，編號，大小等元素信息；
光標下的輪廓元素；
自動將生成或采樣的顏色復制到CSS RGB，Hex和其他格式的剪貼板；
使用鍵盤快速采樣頁面顏色的鍵盤快捷鍵。

字體

27. WhatFont

當我們想查看網(wǎng)頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網(wǎng)頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：

28. Fonts Ninja

Fonts Ninja 可以從任何網(wǎng)站識別字體、添加書簽、試用并購買它們。

標簽頁

29. BrowserStack

使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現(xiàn)快速訪問并最大限度地減少切換瀏覽器所花費的時間。

30. Toby

Toby 是一款 Chrome 新標簽頁工具，能夠?qū)⑽醋x的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。

31. daily.dev

該擴展提供了每日熱門開發(fā)者新聞，不需要再浪費時間搜索高質(zhì)量的文章了。

32. Momentum

Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。

33. The Great Suspender

The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內(nèi)存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內(nèi)存和 CPU。

34. Session Buddy

Session Buddy是一個可以幫助用戶查看、新增、編輯當前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當前的狀態(tài)以便在關閉Chrome或關閉計算機后恢復，從而達到節(jié)省內(nèi)存的作用。

Github

35. Octotree

Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。

1_EKF88oqIyX6FzgueCKdtXg.gif

36. File Icons for GitHub and GitLab

File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。

網(wǎng)頁測試

37. axe DevTools

ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發(fā)的世界上最值得信賴的可訪問性測試引擎 axe-core 驅(qū)動。使用 ax DevTools 在網(wǎng)站開發(fā)過程中查找并修復更多可訪問性問題。

38. OctoLinker

OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。

39. Web Developer Checklist

此擴展可幫助 Web 開發(fā)人員分析網(wǎng)頁是否違反最佳實踐。

40. Check My Links

Check My Links 是一個鏈接檢查器，它可以抓取網(wǎng)頁并查找損壞的鏈接。

41. Checkbot

Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創(chuàng)建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。

42. PageSpeed Insights

Google Page Speed Insighs 是一款旨在優(yōu)化所有設備上的網(wǎng)頁、提高網(wǎng)頁加載速度的工具。

43. Meta SEO Inspector

META SEO inspector是一款可以幫助用戶分析網(wǎng)頁的meta信息并得到SEO評估的谷歌瀏覽器插件。

隱私廣告

44. Ghostery

Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：

攔截廣告：Ghostery 內(nèi)置的廣告攔截工具可以移除網(wǎng)頁上的廣告，防止網(wǎng)頁雜亂無章，讓你專注于想看的內(nèi)容。
保護隱私：利用 Ghostery 可以查看和攔截所瀏覽的網(wǎng)站上的跟蹤器，控制收集數(shù)據(jù)的跟蹤器。增強反跟蹤功能還能將數(shù)據(jù)匿名化，進一步保護隱私。
提高瀏覽速度：Ghostery 的智能攔截功能可以自動攔截和取消攔截跟蹤器來滿足網(wǎng)頁質(zhì)量標準，提高網(wǎng)頁加載速度，優(yōu)化網(wǎng)頁性能。

45. AdBlock

AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網(wǎng)站上攔截廣告和彈窗。

效率工具

46. Marinara

番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統(tǒng)計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效

47. Loom

Loom 可以用來快速錄制視頻，并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。

48. GoFullPage

GoFullPage 是一款全屏截圖插件（整個網(wǎng)頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸?shù)狡聊豢煺盏男聵撕烅撝校梢栽谄渲袑⑵湎螺d為圖像或PDF，甚至只需拖動即可，保存到桌面。

49. BetterViewer

BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。

50. svg-grabber

svg-grabber 是一個快速預覽并從網(wǎng)站獲取所有 svg 的工具。可以用來預覽、下載和復制網(wǎng)站中所有 SVG 圖標和插圖的代碼。

語言網(wǎng)站為了讓谷歌收錄，更好的服務某語言本地客戶搜索，可以有幾種方法讓谷歌收錄。這集中方法包括HTML、HTTP 標頭和站點地圖。

本文主要介紹用html標記的方式將網(wǎng)站內(nèi)容加入谷歌搜索收錄。下面是谷歌的官方方法介紹。

HTML 標記

您可以通過在網(wǎng)頁標頭中添加 <link rel="alternate" hreflang="lang_code"... > 元素，將網(wǎng)頁的所有語言和區(qū)域變體告知 Google。如果您沒有站點地圖或無法為您的網(wǎng)站指定 HTTP 響應標頭，此方法非常有用。

對于網(wǎng)頁的每個變體，您都應在 <head> 元素中添加一組 <link> 元素，并使每個網(wǎng)頁變體（包括網(wǎng)頁自身）分別對應一個鏈接。網(wǎng)頁的每個版本中，這組鏈接都應是相同的。查看其他準則。

以下是每個 link 元素的語法：

語法

lang_code 此網(wǎng)頁版本所針對的受支持的語言/區(qū)域代碼，或 x-default（以與該網(wǎng)頁上的 hreflang 標記未明確列出的任何語言匹配）。

url_of_page 此網(wǎng)頁的特定語言/區(qū)域版本對應的完全限定網(wǎng)址。

請將 <link> 標記放在 <head> 元素頂部附近。最起碼，<link> 標記必須位于格式正確的 <head> 部分內(nèi)，或位于可能會導致 <head> 過早結束的任何項目（例如 <p> 或跟蹤像素）前面。如果不確定，請將所呈現(xiàn)的網(wǎng)頁中的代碼粘貼到 HTML 驗證工具中，確保相關鏈接位于 <head> 元素內(nèi)。

示例

例如，Widgets, Inc 有一個面向美國、英國和德國境內(nèi)用戶的網(wǎng)站。以下網(wǎng)址包含的內(nèi)容大致相同，但具有區(qū)域性差異：

具有區(qū)域性差異的網(wǎng)址

http://en.example.com/page.html 通用英語版首頁，包含與從美國運至全球各地的運費相關的信息。

http://en-gb.example.com/page.html 英式英語版首頁，顯示以英鎊為單位的價格。

http://en-us.example.com/page.html 美式英語版首頁，顯示以美元為單位的價格。

http://de.example.com/page.html 德語首頁。

Example Domain 不針對任何語言或語言區(qū)域的默認頁；它具有選擇器，供用戶選擇自己的語言和區(qū)域。

請注意，Google 不會根據(jù)這些網(wǎng)址中針對特定語言的子網(wǎng)域（en、en-gb、en-us、de）確定網(wǎng)頁的目標受眾群體；您必須將網(wǎng)頁明確地關聯(lián)到對應的目標受眾群體。

您應將下面的 HTML 粘貼到上方列出的所有網(wǎng)頁的 <head> 部分中。這會將美式英語、英式英語、通用英語和德語用戶引導至對應的本地化網(wǎng)頁，并將所有其他用戶引導至通用首頁。Google 搜索會根據(jù)用戶的瀏覽器設置為他們返回適當?shù)慕Y果。

<head>

<title>Widgets, Inc</title>

href="http://en-gb.example.com/page.html" />

href="http://en-us.example.com/page.html" />

href="http://en.example.com/page.html" />

href="http://de.example.com/page.html" />

href="Example Domain" />

</head>

oogle HTML/CSS 規(guī)范

本文介紹了 Google 推薦的 HTML 和 CSS 編寫格式規(guī)范，以建立良好的個人編碼習慣。

通用樣式規(guī)范

省略圖片、樣式、腳本以及其他媒體文件 URL 的協(xié)議部分（http:,https:），除非文件在兩種協(xié)議下都不可用。這種方案稱為 protocol-relative URL，好處是無論你是使用 HTTPS 還是 HTTP 訪問頁面，瀏覽器都會以相同的協(xié)議請求頁面中的資源，同時可以節(jié)省一部分字節(jié)。

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

通用格式規(guī)范

縮進

一次縮進2個空格，不要使用 tab 或者混合 tab 和空格的縮進。

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

大小寫

以下都應該用小寫：HTML 元素名稱，屬性，屬性值（除非 text/CDATA），CSS 選擇器，屬性，屬性值。

<!-- 不推薦 -->
<A HREF="/">Home</A>
<!-- 推薦 -->
<img src="google.png" alt="Google">
/* 不推薦 */
color: #E5E5E5;
/* 推薦 */
color: #e5e5e5;

結尾空格

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

通用元規(guī)范

編碼

在 HTML 中通過 <meta charset="utf-8"> 指定編碼方式，CSS 中不需要指定，因為默認是 UTF-8。

注釋

使用注釋來解釋代碼：包含的模塊，功能以及優(yōu)點。

任務項

用 TODO 來標記待辦事項，而不是用一些其他的標記，像 @@。

<!-- TODO: remove optional tags -->
<ul>
 <li>Apples</li>
 <li>Oranges</li>
</ul>

HTML 風格規(guī)范

文檔類型

HTML 文檔應使用 HTML5 的文檔類型：<!DOCTYPE html>。

孤立標簽無需封閉自身，<br> 不要寫成 <br />。

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>

語義化

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

多媒體元素降級

對于像圖片、視頻、canvas 動畫等多媒體元素，確保提供其他可訪問的內(nèi)容。圖片可以使用替代文本（alt），視頻和音頻可以使用文字版本。

<!-- 不推薦 -->
<img src="spreadsheet.png">
<!-- 推薦 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

關注分離

標記、樣式和腳本分離，確保相互耦合最小化。

實體引用

如果團隊中文件和編輯器使用同樣的編碼方式，就沒必要使用實體引用，如 —， ”，?，除了一些在 HTML 中有特殊含義的字符（如 < 和 &）以及不可見的字符（如空格）。

<!-- 不推薦 -->
The currency symbol for the Euro is “&eur;”.
<!-- 推薦 -->
The currency symbol for the Euro is “€”.

type 屬性

在引用樣式表和腳本時，不要指定 type 屬性，除非不是 CSS 或 JavaScript。

因為 HTML5 中已經(jīng)默認指定樣式變的 type 是 text/css，腳本的type 是 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 格式規(guī)范

HTML 引號

屬性值用雙引號。

<!-- 不推薦 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推薦 -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSS 風格規(guī)范

ID 和 Class 命名

使用有含義的 id 和 class 名稱。

/* 不推薦: 含義不明確 */
#yee-1901 {}
/* 不推薦: 按直覺來的 */
.button-green {}
.clear {}
/* 推薦: 指定含義 */
#gallery {}
#login {}
.video {}
/* 推薦: 通用 */
.aux {}
.alt {}

ID 和 Class 命名風格

id 和 class 應該盡量簡短，同時要容易理解。

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

選擇器

除非需要，否則不要在 id 或 class 前加元素名。

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

屬性簡寫

盡量使用 CSS 中可以簡寫的屬性 (如 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 時不用添加單位。

margin: 0;
padding: 0;

開頭的 0

值在 -1 和 1 之間時，不需要加 0。

font-size: .8em;

16進制表示法

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

前綴

使用帶前綴的命名空間可以防止命名沖突，同時提高代碼可維護性。

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

ID 和 Class 命名分隔符

選擇器中使用連字符可以提高可讀性。

/* 不推薦: “demo” 和 “image” 之間沒有分隔符 */
.demoimage {}
/* 不推薦: 使用下劃線 */
.error_status {}
/* 推薦 */
#video-id {}
.ads-sample {}

CSS 格式規(guī)范

書寫順序

按照屬性首字母順序書寫 CSS 易于閱讀和維護，排序時忽略帶有瀏覽器前綴的屬性。

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

塊級內(nèi)容縮進

為了反映層級關系和提高可讀性，塊級內(nèi)容都應縮進。

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

聲明結束

每行 CSS 都應以分號結尾。

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

屬性名結尾

屬性名和值之間都應有一個空格。

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

聲明樣式塊的分隔

在選擇器和 {} 之間用空格隔開。

/* Not recommended: missing space */
#video{
 margin-top: 1em;
}
/* Not recommended: unnecessary line break */
#video
{
 margin-top: 1em;
}
/* 推薦 */
#video {
 margin-top: 1em;
}

選擇器分隔

每個選擇器都另起一行。

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

規(guī)則分隔

規(guī)則之間都用空行隔開。

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

CSS 引號

屬性選擇器和屬性值用單引號，URI 的值不需要引號。

/* 不推薦 */
@import url("http://www.google.com/css/maia.css");
html {
 font-family: "open sans", arial, sans-serif;
}
/* 推薦 */
@import url(//www.google.com/css/maia.css);
html {
 font-family: 'open sans', arial, sans-serif;
}

CSS 元規(guī)則

分段注釋

用注釋把 CSS 分成各個部分。

在線咨詢

上一篇：HTML培訓：如何在HTML中更改文本大小
下一篇：程序員面試必備：動圖演示十大經(jīng)典排序算法及代碼實現(xiàn)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

推薦50個超實用的 Chrome 擴展，建議收藏