學習筆記：MDN的HTML

時間 2019-12-10

標籤學習筆記 mdn html 欄目 HTML 简体版

原文原文鏈接

1、 HTML介紹：html

HTML —— 用於定義一個網頁的結構的基本技術。前端

元素（Element）：開始標記，加結束標記，加內容，等於元素。java

兩種重要的元素類別，塊級元素和內聯元素：web

塊級元素在頁面中以塊的形式展示 —— 相對與其前面的內容它會出如今新的一行，其後的內容也會被擠到下一行展示。一個以block形式展示的塊級元素不會被嵌套進內聯元素中，但能夠嵌套在其它塊級元素中。正則表達式

內聯元素一般出如今塊級元素中幷包裹文檔內容的一小部分，而不是一整個段落或者一組內容。內聯元素不會致使文本換行：它一般出如今一堆文字之間。例如超連接元素<a>或者強調元素<em>和 <strong>。算法

注：若是一個內聯元素先後都是塊級元素，那這個內聯元素先後都會換行，由於它先後的塊級元素「不要它」。數據庫

元素的屬性包含元素的額外信息，這些信息不會出如今實際的內容中。canvas

布爾屬性：有時你會看到沒有值的屬性，它是合法的。這些屬性被稱爲布爾屬性，他們只能有跟它的屬性名同樣的屬性值。小程序

在目前爲止，本章內容全部的屬性都是由雙引號來包裹。也許在一些HTML中，你之前也見過單引號。這只是風格的問題，你能夠從中選擇一個你喜歡的（VSC對屬性的自動補全用的是雙引號）。在一個HTML中已使用一種引號，你能夠在此引號中嵌套另一種引號(或者用字符實體引用)。後端

<!DOCTYPE html>: 聲明文檔類型。最短的有效的文檔聲明。

代碼更新後刷新瀏覽器便可更新頁面（不過要注意外部CSS、JS的更新要打開F12才行）。

字符實體引用：在HTML中，字符<，>，」，’和&是特殊字符（&彷佛能夠像普通字符同樣直接包含進文本中）。它們是HTML語法自身的一部分，若是想將這些字符包含進文本中，就要使用字符實體引用——表示字符的特殊編碼。每一個字符實體引用以符號&開始，以分號;結束。<，>，」，’和&分別對應lt（less than），gt（greater than），quot（quotation），apos（apostrophe）和amp（ampersand）。deg是°，times是×。

HTML的註釋（comment）是用。

能夠用開發者工具去查看網頁的index.html。

元數據：<meta>元素。元數據就是描述數據的數據

許多<meta> 元素包含了name和content屬性。這兩個meta元素對於定義你的頁面的做者和提供頁面的內容描述是頗有用的。頭文件的<title>元素是搜索結果裏的主標題，name是description的<meta>元素是搜索結果裏的小字描述。

你在網站上看到的許多元數據都是專有創做，旨在向某些網站（如社交網站）提供可以使用的特定信息。

爲了進一步豐富你的網站設計，你能夠在元數據中添加對自定義圖標的引用，這些將在特定的場合中顯示。

CSS還能將JS添加到頁面的內容進行樣式化。

你能夠（並且確實應該）爲你的站點設定語言，這在不少方面都頗有用。若是你的HTML文檔的語言設置好了，那麼你的HTML文檔就會被搜索引擎更有效地搜索（例如，容許它在特定於語言的結果中正確顯示），對於那些使用屏幕閱讀器的視障人士也頗有用（好比，法語和英語中都有「six」這個單詞，可是發音卻徹底不一樣）。

HTML的主要工做是編輯文本結構和文本內容。

在用h1到h6建立層次結構時，須要記住這些最佳實踐：

l 優選地，您應該只對每一個頁面使用一次<h1>——這是頂級標題，全部其它標題位於層次結構中的下方。

l 確保在層次結構中以正確的順序使用標題。不要使用<h3>來表示副標題和使用<h2>表示副副標題——這是沒有意義的，會致使奇怪的結果（注：試了下，彷佛不奇怪啊，和想象中的同樣）。

l 在可用的六個標題級別中，您應該旨在每頁使用不超過三個，除非您認爲有必要使用更多。具備許多級別的文檔（即，較深的標題層次結構）變得難以操做且難以導航。在這種狀況下，若是可能，建議將內容分散在多個頁面上。

關於語義：咱們須要確保使用了正確的元素，基於內容正確的意思、做用和外形。好比，<h1>元素，它是一個語義元素，它給出了包裹在您的頁面上用來表示頂級標題的角色（或意義）的文本。通常來講，瀏覽器會給它一個更大的字形來讓它看上去像個標題（雖然你可使用CSS讓它變成任何你想要的樣式），更重要的是，它的語義值將以多種方式被使用，好比被搜索引擎和屏幕閱讀器使用

CSS和JS都能寫在HTML裏但不建議。

不管你用了多少空白（包括空格、換行），當渲染這些代碼時，HTML解釋器會將連續出現的空白減小爲一個空格。

在HTML中咱們用<em>元素和<strong>來標記強調的狀況。這樣作既可讓文檔讀起來更有趣或有用，也能夠被屏幕閱讀器識別出來，並以不一樣的語調發出。對於<em>，瀏覽器默認強調的風格爲斜體，但你不該該純粹爲了得到斜體風格而使用這個標籤，純粹爲了得到斜體風格，你應該使用<span>元素和一些CSS，或者是<i>元素（粗體風格是用<b>元素）。使用<b>,<i>,<u> 來傳達傳統意義上的粗體、斜體或下劃線是合適的。

表象元素（presentational elements）：僅僅影響表象並且沒有語義。

一種關於下劃線的警告：人們很容易把下劃線和超連接聯繫起來。所以，在Web上，最好只在連接上使用下劃線。既可用<u>元素也可用CSS實現。

URL（Uniform Resource Locator）能夠指向HTML文件、文本文件、圖像、文本文檔、視頻和音頻文件以及能夠在網絡上保存的任何其它內容。若是瀏覽器不知道如何顯示或處理文件，它會詢問您是否要打開文件（須要選擇合適的本地應用來打開或處理文件）或下載文件（之後處理它）。

超連接能夠連接到HTML文檔的特定部分（被稱爲文檔片斷），而不只僅是文件的頂部。要作到這一點，你必須首先分配一個有id屬性的元素到連接。而後連接到那個特定的id，你能夠在URL的結尾包含它，前面是一個井號（#）。固然，能夠用連接到同一份文檔的另外一部分。

絕對URL：例如，若是index.html頁面上傳到projects這一個目錄，而projects位於一個域名爲http://www.example.com的Web服務站點的根目錄，則這個頁面能夠經過http://www.example.com/projects/index.html訪問（或者僅僅經過http://www.example.com/projects/來訪問，由於若是沒有特定的URL，大多數Web服務器經過訪問index.html這樣的頁面來加載）。

連接的措辭要清晰。搜索引擎使用連接文本爲索引目標文件，因此，在連接文本中包含關鍵詞是一個很好的主意，以有效地描述與之相關的信息；讀者每每會瀏覽頁面而不是閱讀每個字，他們的眼睛會被頁面的特徵所吸引，好比連接。

Download Firefox是一個好的連接文本，而Click here to download Firefox是很差的。

不要重複URL做爲連接文本的一部分，由於它看起來很醜。

連接一般存在下劃線（這個慣例通常不該該打破，由於用戶習慣了它）

保持你的連接標籤儘量短

儘量使用相對連接，由於方便檢查代碼（相對連接短）且運行效率高（不用跑到別的域名服務器去查詢域名）

連接到非HTML資源時，要留下清晰的指示。

網頁能夠看起來彼此不一樣，但它們都傾向於使用相似的標準組件，除非頁面顯示全屏視頻或遊戲，或是某種藝術項目的一部分，或者是結構不當。

文檔的基本結構（這些元素，除了<div>，全都只起語義做用，不改變樣式）：頁眉<header>、導航<nav>、主要內容<main>（具備表明性的內容段落主題可使用<article><section>和<div>）、側欄<aside>（常常嵌套在<main>中）和頁腳<footer>。

頁眉：一般在頂部有一個大標題和（或）圖標。這是一個網站的主要常見信息，一般存在於每個網頁。

導航：連接到網站的主要部分，一般由菜單按鈕、連接或選項卡表示。與標題同樣，這些內容一般在一個網頁與另外一個網頁之間保持一致——在您的網站上導航不一致只會令人疑惑和惱火。

主要內容：中心的一個大區域，包含給定網頁的大部分獨特內容，絕對會因頁面而異。

側欄：一些次要信息、連接、引言、廣告等。一般這是與主要內容中包含的內容相關（例如在新聞文章頁面上，側欄可能包含做者的我的信息或相關文章的連接），但在一些狀況下，你會發現一些重複的元素，如輔助導航系統。

頁腳：橫跨頁面底部的條紋，一般包含精美的打印、版權通知或聯繫信息。它是一個放置公共信息的地方，但一般該信息對網站來講不是特別重要。經過提供用於快速訪問熱門內容的連接，頁腳有時也用於SEO目的。

一個「典型的網站」可能會這樣佈局：

搜索用的表單是另外一種常見的非線性的導航方式。

文檔佈局的關鍵是編寫一個完整的HTML結構，而後用CSS佈局。

<header>展示了一系列的介紹性內容。若是它是<body>的子元素，它就定義了網站的全局頁眉。可是若是它是<article>和<section>的子元素，它就定義了這些部分的特定的頁眉（不要把這些與標題（titles and headings）混淆）。

<nav>

<main>展示了頁面內容的獨特性。只能夠在每個頁面使用一次<main>。在理想狀況下，不該該把它嵌套進其它的元素中。<article>閉合一塊與自身相關的內容，這塊內容可以解釋它自身而不是頁面上其它的內容（例如一篇單獨的博客）。<section>近似於<article>，但它更多的是伴隨着由一個單獨功能構成的頁面（例如一個小型的地圖，或者是一組文章的標題和摘要）。它被認爲最好的實踐是用標題（a heading）做爲每個<section>的開頭；也要注意的是你能夠把不一樣的<article>分到不一樣的<section>中，也能夠把不一樣的<section>分到不一樣的<article>中，這要取決於內容。

<aside>包含的內容並不與主要內容有直接的聯繫，但它能夠提供額外的不直接有聯繫的信息（術語表條目，做者簡介，相關連接等等）。

<footer>

有時候，你會找不到理想的語義元素來包含項目或內容，或者你可能只想僅僅用CSS或JS將一組元素做爲一個單獨的實體來修飾。爲了應對這種狀況，HTML提供了<div>和<span>元素。你最好使用class屬性來使它們能容易被找到。

警告：divs用起來很是便利以致於很容易被濫用。由於它們不攜帶語義值，因此會讓你的HTML代碼變得混亂。要當心地使用它們，只有當沒有更好的語義解決方案時才能使用，並且要儘量把它們的使用量降到最低，不然，當你升級和維護你的文檔時會很是困難。

計劃一個簡單的網站：

記住，你的大多數頁面會使用一些相同的元素，如導航欄和頁腳。因此說，若是在你的設計中，每一個頁面都有一些內容是重複的，你能夠先把這些重複的內容記錄下來。
接下來，你能夠經過畫一個草圖的方式來講明你但願的每一個頁面的結構的樣子（或許你畫出來的草圖和咱們那個「典型的網站」比較像），在空白段落上作上標記，來講明以後要填充在這裏的內容。
如今，討論還但願網站上顯示哪些內容（不包括重複的內容），以列表的形式寫下來。
接着，嘗試把這些內容進行分組，這樣可讓你瞭解哪些內容能夠放在一個相同的頁面上。
如今，嘗試再畫一個網站的草圖——用氣泡表明網站的一個頁面，在氣泡與氣泡之間用連線的方式，來講明它們之間的聯繫。主頁面可能位於中心位置，而且連接到其它大多數頁面；對於一個小型網站，大多數頁面均可以從主頁的導航欄中連接跳轉。你可能也會記錄內容將怎樣顯示。

注意：將你的工做成果保存好，以後你可能還會須要它們。

HTML自己不容易因語法錯誤出錯，由於瀏覽器是以寬鬆模式來運行，這意味着即便出現語法錯誤瀏覽器依然會運行。瀏覽器一般都有本身的規則來解析語法錯誤的標記語言，因此程序仍然會運行，儘管可能不是你預期的樣子。

瀏覽器的開發者工具中的標記語言是瀏覽器渲染後的，而不是源代碼中的標記語言。

Markup Validation Service網站：用於檢驗HTML文檔。

元素（Element）：

<p></p>（塊級元素）：段落

<h1></h1>（塊級元素）：標題，還有h二、h3……直到h6。

<em></em>（內聯元素）：即emphasis。有語義的斜體（能夠單獨使用）

<strong></strong>（內聯元素）：即strong importance。有語義的粗體（能夠單獨使用）

<a></a>（內聯元素）：錨，使被包裹的內容成爲超連接

注：幾乎全部的元素都能單獨使用。

<img>（空元素）：插入圖片

<input>（空元素）：表單

<html></html>：包裹了整個完整的頁面，是根元素。

<head></head>：是一個容器，它包含了全部你想包含在HTML頁面中但不想在HTML頁面中顯示的內容。這些內容包括你想在搜索結果中出現的關鍵字和頁面描述，CSS樣式，字符集聲明等等。

<title></title>：設置瀏覽器標籤上的標題。

<body></body>：包含了你訪問頁面時全部顯示在頁面上的內容。

<span></span>（內聯元素）：是短語內容的通用內聯容器，並無任何特殊語義。可使用它來編組元素以達到某種樣式意圖（經過使用類或者id屬性），或者這些元素有着共同的屬性，好比lang。應該在沒有其它合適的語義元素時才使用它。<span>和<div>很類似，但後者是一個塊級元素而前者則是內聯元素。

<ul></ul>（塊級元素）：即unordered list。

<ol></ol>（塊級元素）：即ordered list。

<li></li>（塊級元素）：即list item。

<i></i>：即italic，斜體。

<b></b>：即bold，粗體。

<u></u>：即underline，下劃線。

<dl></dl>，<dt></dt>，<dd></dd>：分別即description list，description term，description description，三者共同構成描述列表。一個術語<dt>能夠同時有多個描述<dd>。瀏覽器的默認樣式會在術語和描述之間產生縮進（要改變它的縮進量用margin）。

<blockquote></blockquote>和<q></q>：即塊級引用和內聯引用，除此以外，前者會增長縮進以做爲引用的指示符，後者則加入雙引號。

<cite></cite>（有同名的屬性）：表示引用，斜體。

<code></code>，<pre></pre>，<var></var>，<kbd></kbd>，<samp></samp>：即分別是code，preformatted，variable，keyboard和sample都是用於標記計算機代碼。分別用於標記計算機通用代碼，固定寬度的文本塊、其中保留空格（一般是代碼塊），具體變量名（又是斜體），鍵盤等的輸入和計算機程序的輸出。

<abbr></abbr>：即abbreviation。一般還用title屬性提供縮寫的解釋。

<address></address>：只能用來標記聯繫地址。也是斜體。

<sup></sup> 和<sub></sub>：分別即Superscript和subscript，上標和下標。

<time></time>：經過datetime屬性將時間和日期標記爲可供機器識別的格式。

<br>和<hr>（空元素）：分別即break和horizontal rule

屬性（Attribute）：

class：賦予元素一個用來識別的名字，這個名字此後能夠被用來識別此元素的樣式信息和其它信息。同一個名字可用於多個class。

herf（hypertext reference）（<a>元素專用）：聲明超連接的web地址。

title（<a>元素可用）：鼠標懸停超連接時的提示信息。

target（<a>元素可用）：決定將用於顯示連接的瀏覽上下文。例如，target='_blank'將在新標籤頁中顯示連接。若是你但願在目前標籤頁顯示連接，只需忽略這個屬性。

disabled（布爾屬性）：標記表單輸入使之變爲不可用。

name（<meta>元素可用）：指定meta元素的類型，說明該元素包含了什麼類型的信息。

content（<meta>元素用）：指定實際的元數據內容。

rel：即relationship。<link>元素的屬性。

src：即source。可做爲<script></script>的屬性。

lang：即language。設定語言。

alt（<img>元素用）：即alternative。圖顯示失敗時顯示這個文本。

download：設置點擊下載連接後的文件保存用的名字

cite（有同名的元素）：引用元素的屬性，用來指向引用的資源。cite屬性的內容聽起來頗有用，但不幸的是，瀏覽器、屏幕閱讀器等等不會真的關心它，若是不使用JavaScript或CSS，瀏覽器不會顯示cite的內容。

2、 多媒體與嵌入：

注意：搜索引擎也把圖片的文件名計入SEO，所以你應該給你的圖片取一個描述性的文件名：dinosaur.jpg 比 img835.png 要好。

警告：大多數圖片是有版權的。不要在你的網頁上使用一張圖片，除非：

l 你是圖片版權全部者

l 你有圖片版權全部者明確的、書面上的使用受權

l 你有充分的證據證實這張圖片是公共的

侵犯版權是違法且不道德的。在獲得受權以前永遠不要把你的src屬性指向其餘人網站上的圖片，這被稱爲「盜鏈（hotlinking）」。一樣，盜取其餘人的帶寬也是違法的。並且這會下降你的頁面的加載速度，並且圖片可能會在不受你控制的狀況下被移走或用別的使人尷尬的東西替換掉。

注意：像<img>和<video>這樣的元素有時被稱之爲替換元素，由於這樣的元素的內容和尺寸由外部資源（像是一個圖片或視頻文件）所定義，而不是元素自身。

咱們須要備選文本（alt）是由於它常常能派上用場。

你到底應該在 alt 裏寫點什麼呢？這首先取決於這張圖片爲何會在這兒，換句話說，若是在這張圖片沒顯示出來，會少了什麼：

l 裝飾：若是圖片只是用於裝飾，而不是內容的一部分，能夠寫一個空的alt=」」。實際上，裝飾性圖片就不該該放在HTML文件裏，CSS background images才應該用於插入裝飾圖片，但若是這種狀況沒法避免， alt=""會是最佳處理方案。

l 內容：若是你的圖片提供了重要的信息，就要在alt文本中提供相同的信息。但若是在主要文本中已經對圖片作了充分的說明，寫alt=""就好。

l 連接：若是你把圖片嵌套在<a>標籤裏，來把圖片變成連接，那你還必須提供無障礙的連接的文本。在這種狀況下，你能夠寫在同一個<a>元素裏，或者寫在圖片的alt屬性裏，隨你喜歡。

l 文本：你不該該把文本放到圖片裏。例如，若是你的主標題須要有陰影，你能夠用CSS來達到這個目的，而不是把文本放到圖片裏。若是真的必須這麼作，那就把文本也放到alt裏。

本質上，關鍵在於圖片沒法被看見時也提供一個能夠用的體驗，這確保了全部人都不會錯失一部份內容。

用width屬性和height屬性來指定你的圖片的（本來的）寬度和高度是一件好事情。在正常的狀況下，這不會對顯示產生很大的影響，可是若是圖片沒有顯示（例如用戶剛剛開始瀏覽網頁，可是圖片尚未加載完成），你會注意到瀏覽器會爲要顯示的圖片留下必定的空間——這使得頁面加載的更快速更流暢。

注意：若是你須要改變圖片的尺寸，你應該使用CSS而不是HTML。（？二者對圖片尺寸的影響彷佛是同樣的）

說明文字（<figcaption>）和alt的內容不該該同樣，由於當圖片沒法顯示時，它們會同時出現。

若是圖片對你的內容有意義，就應該使用HTML圖片；若是圖片純粹是裝飾，就應該使用CSS背景圖片。

<video> 標籤內的段落：這個叫作後備內容——當瀏覽器不支持 <video> 標籤的時候，它將會顯示出來，它使咱們可以對舊的瀏覽器作一些兼容處理。你能夠添加任何後備內容，好比提供一個指向這個視頻文件的連接，從而使用戶能夠至少訪問到這個文件，而不會侷限於瀏覽器的支持。

你的視頻應當包括 WebM 和 MP4 兩種格式，這兩種在目前已經足夠支持大多數平臺和瀏覽器。

Note: 文本軌道會使你的網站更容易被搜索引擎抓取到（SEO），因爲搜索引擎的文本抓取能力很是強大，使用文本軌道甚至可讓搜索引擎經過視頻的內容直接連接。

一個好的關於網絡安全的經驗法則："You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise."

注意：插件是一種對瀏覽器原生沒法讀取的內容提供訪問權限的軟件。

不須要插件了：若是您須要交互性，HTML和JavaScript能夠輕鬆地爲您完成工做，而不須要Java小程序或過期的ActiveX / BHO技術。您可使用HTML5的<video>等來知足媒體需求，矢量圖形SVG，以及複雜圖像和動畫畫布。對於工做，Adobe Flash極少是正確的工具，除了專門的遊戲和商業應用。

SVG（Scalable Vector Graphics）在不少狀況下很是有用 — 它們擁有較小的文件尺寸（由於它們僅需儲存少許的算法，而不是逐個儲存每一個像素的信息），卻高度可縮放，因此它們不會在鏡頭拉近或者放大圖像時像素化。矢量圖使用算法來定義，而位圖（當它被放大時，每一個像素就被放大以填滿屏幕上更多的像素）使用像素網格來定義，流行的位圖格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)。位圖適合像照片那樣複雜精密的圖像。

響應式圖片——一種能夠在不一樣的屏幕尺寸和分辨率的設備上都能良好工做以及有其它特性的圖片。響應式圖片僅僅只是響應式web設計的一部分（奠基了響應式web設計的良好基礎），咱們會在將來的CSS topic模塊中學到更多關於這一主題的知識。經過讓瀏覽器提供多個圖像文件來解決設備屏幕大小不一樣的問題，好比使用相同顯示效果的圖片但包含多個不一樣的分辨率（分辨率切換），或者使用不一樣的圖片以適應不一樣的空間分配（藝術方向）。CSS是比HTML更好的響應式設計的工具。

elva-fairy-320w.jpg 320w的w意思是width（以px爲單位）

元素（Element）：

<figure> </figure>和<figcaption> </figcaption>（HTML5）：後者包含在前者中。<figcaption>元素告訴瀏覽器和其它輔助的技術工具：這段說明文字描述了 <figure> 元素的內容。<figure>裏不必定要是一張圖片，只要是一個這樣的獨立內容單元：它用緊湊、易於掌握的方式表達你的意圖；它能夠放在頁面線性流中的幾個地方；它爲主要內容提供關鍵信息。<figure>能夠是幾張圖片、一段代碼、音視頻、方程、表格或別的。

<video></video>（HTML5）：也可用width和height（但長寬比保持不變）。

<audio></audio>（HTML5）

<source>（空元素）：可用於在<video>中使用幾個不一樣格式的文件來兼容不一樣的瀏覽器。每一個 <source> 含有一個 type 屬性，這個屬性是可選的，可是建議你添加上這個屬性——它包含了視頻文件的 MIME types（叫"media type"更合適），同時瀏覽器也會經過檢查這個屬性來迅速的跳過那些不支持的格式。若是你沒有添加 type 屬性，瀏覽器會嘗試加載每個文件，直到找到一個能正確播放的格式，這樣會消耗掉大量的時間和資源。

<audio> 標籤與 <video> 標籤的使用方式幾乎徹底相同，除了<audio> 標籤不支持 width/height 屬性 — 因爲其並無視覺部件，也就沒有能夠設置 width/height 的內容。一樣的緣由，也不支持poster屬性。

<track>（空元素）：放在<audio> 或 <video> 標中、<source> 後，加字幕用的，要有WebVTT文件才行。用 kind 屬性來指明是哪種類型，如 subtitles（字幕）、 captions 、 descriptions。用 srclang 來告訴瀏覽器你是用什麼語言來編寫的 subtitles。

<canvas>：用於用JavaScript生成2D和3D圖形

<picture> </picture>：若是是藝術方向，就不直接用srcset和sizes而用帶media 和srcset的<source>。在任何狀況下，你都必須在 </picture>中同時提供一個<img>元素以及它的src和alt屬性。

屬性（Attribute）：

width和height：指定圖片的（本來的）寬度和高度，指定視頻的寬度和高度。

controls（布爾屬性）：控件，使用戶可以控制視頻和音頻的回放功能。

autoplay（布爾屬性）：顧名思義，能使音頻和視頻當即播放，即便頁面的其它部分尚未加載徹底。建議不要應用這個屬性在你的網站上，由於用戶比較反感自動播放的媒體文件。

loop（布爾屬性）：顧名思義，使媒體循環播放。一樣不建議使用，除非有必要。

muted（布爾屬性）：靜音的。使媒體播放時，默認關閉聲音。

poster：指向一個圖片的URL，這個圖片會在視頻播放前顯示。一般用於粗略的預覽或者廣告。

preload：用來緩衝較大的文件，有3個值可選："none" 不緩衝，"auto" 頁面加載後緩存媒體文件，"metadata" 僅緩衝文件的元數據。

srcset和sizes——使小屏幕用小體積的圖片、大屏幕用大致積的圖片。當瀏覽器成功匹配第一個媒體條件的時候，剩下全部的東西都會被忽略，因此要注意媒體條件的順序。

srcset定義了咱們容許瀏覽器選擇的圖像集，以及每一個圖像的大小。在每一個逗號以前，咱們寫：一個文件名、一個空格和圖片的固有寬度（使用w單位，這是圖像的真實大小）。

sizes定義了一組媒體條件（例如屏幕寬度）而且指明當某些媒體條件爲真時，什麼樣的圖片尺寸是最佳選擇。在每一個逗號以前，咱們寫：

一個媒體條件（如(max-width:480px)）——你會在 CSS topic中學到更多的。可是如今咱們僅僅討論的是媒體條件描述了屏幕可能處於的狀態。在這裏，咱們說「當視窗的寬度是480像素或更少」；

一個空格；

當媒體條件爲真時，圖像將填充的槽的寬度（如440px）。

若是但願每一個人在屏幕上看到的圖片的實際尺寸是相同的，用srcset和x。

media：僅僅當在藝術方向場景下使用。格式爲media="(max-width: 799px)"。

3、 HTML tables（表格）：

表格：HTML讓在web上顯示錶格數據變的很容易，只須要一點兒的CSS來設定風格。

使用表格佈局而不使用 CSS layout techniques 是很糟糕的。

元素：

<table></table>：一個表格的內容都包含在這裏面。

<td> </td>：即table data，表格的最小內容容器。

<tr> </tr>：即table row，換行用。

<th></th> ：即table header，用法和<td>同樣，只不過它是標題（不是表格上方那個）。

<col> 和 <colgroup></colgroup>：按列樣式化。

<caption> </caption>：表格的標題，放在<table>中。

<thead></thead>, <tfoot> </tfoot>, 和 <tbody></tbody>：即表頭、頁腳、正文。這些元素不會使表格更易於屏幕閱讀器用戶訪問，也不會形成任何視覺上的改變（胡說，明明強制把頁腳放到表格的底部了）。然而，它們在應用樣式和佈局上會起到做用，能夠更好地讓 CSS 應用到表格上。注意：<tbody> 老是包含在每一個表中，若是你沒有在代碼中指定它，那就是隱式的。注：<th>會改變樣式，而<thead>不會。

屬性：

colspan和rowspan：即column span和row span（span爲跨度）。這兩個屬性接受一個沒有單位的數字。

span：應用之一——使一個<col>元素的樣式應用到多列。

scope：即範圍。添加在<th> 元素中，可選的值有col、row、colgroup和rowgroup，用來幫助屏幕閱讀設備更好地理解那些標題單元格是列標題仍是行標題。若是要替代 scope 屬性，可使用 id 和 headers 屬性來創造標題與單元格之間的聯繫，可是注意: 這種方式爲標題單元格和數據單元格之間創造了很是精確的聯繫。可是這個方法使用了大量的標記，因此容錯率比較低。使用 scope 的方法對於大多數表格來講，也夠用了。

其它：

 ：即Non-Breaking Space，不換行空格，可用於生成空的表格單元。注：直接空着，即<td> </td>，彷佛也行，還更方便。可累加。

4、 HTML forms（表單）：

HTML表單是用戶和web站點或應用程序之間交互的主要內容之一。它們容許用戶將數據發送到web站點。HTML表單和常規HTML文檔的主要區別在於，大多數狀況下，表單收集的數據被髮送到web服務器。

大多數狀況下，表單小部件與描述其目的的標籤配對——正確實現的標籤可以清楚地指示視力正常的用戶和盲人用戶輸入表單要求輸入的內容。

從用戶體驗(UX/UE)的角度來看，表單越大，失去用戶的風險就越大。

大部分表單小部件都有一些它們本身的屬性。不過，全部表單小部件都有一組相同屬性，它們能夠對這些小部件進行控制：autofocus（顧名思義）、disabled（顧名思義）、name和value。

若是你不給<input>提供type屬性，text就會是默認值；若是你指定的type屬性的值在瀏覽器中是未知的（好比你指定 type="date"，可是瀏覽器不支持原生日期選擇器），屬性值text就是是備用值。

可選中項小部件（如單選按鈕和複選框）與其餘表單小部件不同。對於大多數表單部件，一旦表單提交，全部具備name屬性的小部件都會被髮送，即便沒有任何值被填。對於可選中項，只有在勾選時才發送它們的值。若是他們沒有被勾選，就不會發送任何東西，甚至連他們的名字也沒有。

若是幾個單選按鈕的name屬性共享相同的值，那麼它們將被認爲屬於同一組的按鈕。

元素：

<form>：全部HTML表單都以一個<form>元素開始，甚至相關的標題和段落都放裏面。至少要設置action屬性和method屬性，這被認爲是最佳實踐。

<label></label>：在全部<label>元素上使用for屬性。最明顯的一個好處是容許用戶單擊標籤以激活相應的小部件。還有一個好處是，對於單選按鈕和複選框特別有用——這種控件的可點擊區域可能很是小，設置標籤來可以使它們的可點擊區域變大。一個小部件上放置多個標籤不是一個好主意。

<input>（空元素）：能夠被size (框的物理尺寸) 和 maxlength (能夠輸入的最大字符數)限制。注意： <input>元素是如此特別是由於它幾乎能夠是任何東西。經過簡單設置 type 屬性，它能夠完全改變，它用於建立大多數類型的表單小部件，包括單行文本字段、沒有文本輸入的控件、時間和日期控件和按鈕。然而，也有一些例外，好比用來多行輸入的 <textarea>。

<textarea></textarea>：textarea和常規的單行文本的主要區別是，容許用戶輸入包含硬換行符(即按回車)的文本。它本身的屬性有cols（文本控件的可見寬度）、rows和wrap（表示控件是如何包裝文本的），這三者應該都有默認值。

<button></button>：讓用戶在填寫完表單後發送他們的數據。

<fieldset></fieldset>和<legend></legend>：主要用於一組單選按鈕或複選框。<fieldset>元素是一種方便的用於建立具備相同目的的小部件組的方式，出於樣式和語義目的（會給這一組小部件加個框）。你能夠在<fieldset>開口標籤後加上一個 <legend>元素來給<fieldset> 標上標籤。 <legend>的文本內容正式地描述<fieldset>的用途。它是包含在<fieldset>裏的。

<select></select>和<option></option>：下拉菜單和下拉菜單的「菜」。經過將multiple屬性添加到<select>元素，您能夠容許用戶經過操做系統提供的默認機制來選擇幾個值(如，按下Ctrl 的同時點擊多個值)。<option>元素能夠嵌套在<optgroup>元素中，以建立視覺相關的組值，用label屬性設置組名。可使用selected屬性在所需的<option>元素上設置下拉菜單的默認值。

<datalist> </datalist>：爲表單小部件提供建議的、自動完成的值。使用一些<option>子元素來指定要顯示的值。使用list屬性將數據列表綁定到一個文本域(一般是一個 <input> 元素)。list 屬性和<datalist>元素能夠用於任何須要用戶輸入的小部件。可是，除了文本(例如顏色或日期)，它應該如何工做還不清楚，不一樣的瀏覽器在不一樣的狀況下會有不一樣的表現。正由於如此，除了文本字段之外，要當心使用這個特性。

<progress></progress>：進度條。表示一個值，它會隨着時間的變化而變化到最大的值，這個值由max屬性指定。

<meter></meter>：儀表。必要的屬性有min、max、low、high和optimum

屬性：

action：定義表單收集到的數據被送去的地方。

method：定義發送數據的HTTP方法(它能夠是「get」或「post」)。

for：將標籤連接到表單小部件的一種正式方式。

type：可用於定義<input>的行爲方式，有text、radio（單選按鈕。老式收音機頻道切換就是這種按鈕，一個按下去，其它的彈出來）、checkbox（複選框）、date（除此以外，還有datetime-local、month、time和week）、email（經過包括multiple屬性，它還可讓用戶將多個電子郵件地址輸入相同的input(以逗號分隔)）、password（保護數據安全要靠https）、search（它們的值能夠自動保存到同一站點上的多個頁面上自動完成）、tel（telephone。在一些設備上(特別是在移動設備上)，可能會所以出現一個不一樣的虛擬鍵盤，更適合輸入電話號碼）、url、number（可用min、max和setp約束該值）、range（滑塊，也有min、max和step屬性；滑塊的一個問題是，它們不提供任何形式的視覺反饋以瞭解當前的值是什麼，您須要使用JavaScript來添加這一點）、color、file（被接受的文件類型可使用accept屬性來約束。此外，若是您想讓用戶選擇多個文件，那麼能夠經過添加multiple屬性來實現）、hidden（有時候，因爲技術緣由，有些數據是用表單發送的，但不顯示給用戶，這有時是很方便的）、image（支持與<img>元素相同的屬性，加上其餘表單按鈕支持的全部屬性）；有特殊約束和錯誤的域能夠防止表單被髮送。也可用於<button>，接受三個值中的一個:submit（默認值）, reset（從用戶體驗的角度來看，這被認爲是一種糟糕的作法）或者 button（不會發生任何事！這聽起來很傻，可是用JavaScript構建定製按鈕很是有用）。

value：可設置<input>的默認值，即默認的用來發送的數據；而單選按鈕、複選框和下拉菜單就是發送被選中的項的value值（若是有設置；沒設置就發送選項的內容）。

name：給每一個表單小部件收集到的數據片命名。

readonly：即只讀，用戶不能修改輸入值，但發送時仍發送該數據；而disabled 是輸入值永遠不會與表單數據的其他部分一塊兒發送。

placeholder：文本輸入框中出現的文本，用來簡略描述輸入框的目的。

checked（布爾屬性）：使單選按鈕或複選框在頁面加載時自動被選中。

發送表單數據

<form>元素定義瞭如何發送數據。它的全部屬性都是爲了讓您配置當用戶點擊提交按鈕時發送的請求。兩個最重要的屬性是action和method。

action屬性定義了發送數據的位置。它的值必須是一個有效的URL。若是沒有提供此屬性，則數據將被髮送到包含表單的頁面的URL。

注意：能夠指定使用HTTPS(安全HTTP)協議的URL。當您這樣作時，數據將與請求的其他部分一塊兒加密，即便表單自己是託管在使用HTTP訪問的不安全頁面上。另外一方面，若是表單是在安全頁面上託管的，可是您指定了一個不安全的HTTP URL，它帶有action屬性，全部的瀏覽器都會在每次嘗試發送數據時向用戶顯示一個安全警告，由於數據不會被加密。

method屬性定義瞭如何發送數據。HTTP協議提供了幾種執行請求的方法；HTML表單數據能夠經過許多不一樣的數據傳輸，其中最多見的是GET方法和POST方法。

使用GET請求用戶將在他們的URL欄中看到數據，可是使用POST請求用戶將不會看到。這一點很重要，有兩個緣由：

若是您須要發送一個密碼(或其餘敏感數據)，永遠不要使用GET方法不然數據會在URL欄中顯示，這將很是不安全。
若是您須要發送大量的數據，那麼POST方法是首選的，由於一些瀏覽器限制了URL的大小。此外，許多服務器限制它們接受的URL的長度。

用HTML表單發送文件是一個特殊的例子。文件是二進制數據——或者被認爲是這樣的——而全部其餘數據都是文本數據。因爲HTTP是一種文本協議，因此處理二進制數據有特殊的要求。enctype （encoded type）屬性容許您指定在提交表單時所生成的請求中的Content-Type的HTTP數據頭的值。這個數據頭很是重要，由於它告訴服務器正在發送什麼樣的數據。默認狀況下，它的值是application/x-www-form-urlencoded。它的意思是：「這是已編碼爲URL參數的表單數據。」若是你想要發送文件，你須要額外的三個步驟：

將method屬性設置爲POST，由於文件內容不能放入URL參數中。
將enctype的值設置爲multipart/form-data，由於數據將被分紅多個部分，每一個文件分別對應一個文件以及表單正文中包含的文本數據(若是文本也輸入到表單中)。
包含一個或多個File picker小部件，容許用戶選擇將要上傳的文件。

警告：爲了防止濫用，許多服務器配置了文件和HTTP請求的大小限制。在發送文件以前，先檢查服務器管理員的權限是很重要的。

每次向服務器發送數據時，都須要考慮安全性。到目前爲止，HTML表單是最多見的攻擊媒介(可能發生攻擊的地方)。這些問題歷來都不是來自HTML表單自己，它們來自於服務器如何處理數據。

一些很是有名的安全問題：XSS 和 CSRF、SQL注入、HTTP數據頭注入和電子郵件注入。

執行客戶端數據驗證是可能的，可是服務器不能信任這種驗證，由於它沒法真正知道客戶端到底發生了什麼。

Form data validation

form validation —— 當你向 Web 應用提交數據時，應用會校驗你輸入的數據是不是正確的。若是驗證經過，則這些數據可能會被保存至數據庫中（一般都是這樣的）或者執行下一步操做，若是校驗未經過，則 Web 應用會提示你有錯誤的數據，而且通常都會明確地告訴你錯誤發生在哪裏。

在 Web 中，你可能會碰見各類不一樣的表單驗證：

客戶端驗證發生在瀏覽器端，表單數據被提交以前，這種方式相較於服務器端校驗來講，用戶體驗更好，它能實時的反饋用戶的輸入校驗結果，這種類型的校驗能夠經過下面這些方式實現：

JavaScript 校驗，這是能夠徹底自定義的實現方式；
HTML5 內置的校驗，這不須要 JavaScript ，並且性能更好，可是不能自定義校驗過程。

服務器端校驗則是發生在瀏覽器提交數據並被服務器端程序接收以後 —— 一般服務器端校驗都是發生在將數據寫入數據庫以前。

HTML5 一個特別有用的新功能就是，能夠在不寫一行腳本代碼的狀況下，即對用戶的輸入進行數據校驗，這都是經過表單元素的校驗屬性實現的，這些屬性可讓你定義一些規則，用於限定用戶的輸入，好比某個輸入框是否必須輸入，或者某個輸入框的字符串有最大長度限制，或者某個輸入框必須輸入一個數字、郵箱地址等，若是表單中輸入的數據都符合這些限定規則，那麼表示這個表單校驗經過，不然則認爲校驗未經過。

當一個元素校驗經過時：

該元素將能夠經過 CSS 僞類 :valid 進行特殊的樣式化；
若是用戶嘗試提交表單，若是沒有其它的控制來阻止該操做（好比JavaScript便可阻止提交），那麼該表單的數據會被提交。

若是一個元素未校驗經過：

該元素將能夠經過 CSS 僞類 :invalid 進行列表的樣式化；
若是用戶嘗試提交表單，瀏覽器會展現出錯誤消息，並中止表單的提交。

required 屬性（布爾屬性，設置在<input>上）：最簡單的HTML5驗證功能是 required屬性 — 若是要使輸入成爲必需的，則可使用此屬性標記元素。

pattern 屬性（設置在<input>上，而<textarea> 元素不支持）, 以 Regular Expression 做爲 value 值. 正則表達式 (regex) 是一個能夠用於匹配以字符組成的文本字符串的模式，因此它們是理想的表單驗證器 (以及 JavaScript 中其它許多的用途)。

注意: 一些 <input> 元素類型不須要pattern 屬性進行驗證.，好比指定特定 email 類型就會使用匹配電子郵件格式的正則表達式來校驗。

全部文本框 (<input> 或 <textarea>) 能夠強制使用minlength 和 maxlength 屬性. 若是值小於該字段 minlength 的值或大於 maxlength 值則無效，而且不能輸入超過maxlength的長度。在數字條目中 (i.e. <input type="number">), min 和 max 屬性也能強制驗證數字的大小。

每次咱們輸入無效的表單數據時, 瀏覽器總會顯示錯誤的信息. 可是顯示的信息取決於你所使用的瀏覽器。自定義這些信息的外觀和文本, 你必須使用 JavaScript; 不能使用 HTML 和 CSS 來改變。使用 setCustomValidity() 方法，例子以下：

var email = document.getElementById("mail");

email.addEventListener("input", function (event) {

if (email.validity.typeMismatch) {

email.setCustomValidity("I expect an e-mail, darling!");

} else {

email.setCustomValidity("");

}

});

If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript. More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on each form element. 約束驗證 API 爲您提供了一個強大的工具來處理表單驗證，讓您能夠對用戶界面進行極大的控制，而不只僅是僅使用 HTML 和 CSS。

有時，例如使用舊版瀏覽器或自定義小部件，您將沒法（或不但願）使用約束驗證API。在這種狀況下，您仍然可使用 JavaScript 來驗證您的表單。創建本身的驗證系統並不難。困難的部分是使其足夠通用。

有許多庫可用於執行表單驗證; 你不該該猶豫使用它們。

遠程校驗：在某些狀況下，執行一些遠程驗證可能頗有用。當用戶輸入的數據與存儲在應用程序服務器端的附加數據綁定時，這種驗證是必要的。一個用例就是註冊表單，在這裏你須要一個用戶名。爲了不重複，執行一個 AJAX 請求來檢查用戶名的可用性，而不是要求用戶發送數據，而後發送帶有錯誤的表單。

表單驗證不須要複雜的 JavaScript，但它確實須要仔細考慮用戶。必定要記住幫助您的用戶更正他提供的數據。爲此，請務必：

顯示明確的錯誤消息。
放寬輸入格式。
指出錯誤發生的位置（特別是在大型表單中）。

經過 JavaScript 發送表單

標準的HTML表單提交加載URL，這個URL是數據要發送的位置，這意味着瀏覽器窗口以整頁加載進行導航。避免整頁加載能夠經過隱藏閃爍和網絡滯後來提供更平滑的體驗。

許多現代用戶界面只使用HTML表單來收集用戶的輸入。當用戶嘗試發送數據時，應用程序將在後臺異步地控制和傳輸數據，只更新UI中須要更改的部分。

異步地發送任何數據被稱爲AJAX, 表明"Asynchronous JavaScript And XML"。AJAX uses the XMLHttpRequest (XHR) DOM object. It can build HTTP requests, send them, and retrieve their results. 建立之初, XMLHttpRequest 被提出是打算將 XML 作爲傳輸數據的格式。不過，JSON已經取代了XML，並且今天已經很是廣泛了。But neither XML nor JSON fit into form data request encoding. 表單數據(application/x-www-form-urlencoded)由URL編碼的鍵/值對列表組成。爲了傳輸二進制數據，HTTP請求被從新整合成multipart/form-data。若是您控制前端（在瀏覽器中執行的代碼）和後端（在服務器上執行的代碼），則能夠發送JSON / XML並根據須要處理它們。可是，若是你想使用第三方服務，這並不容易。有些服務只接受表單數據。也有使用表單數據更簡單的狀況。若是數據是鍵/值對或原始二進制數據，現有的後端工具能夠處理它，而不須要額外的代碼。

過期瀏覽器的 HTML 表單

HTML表單和舊式瀏覽器最大的問題是CSS的兼容性。

優雅地降級(Graceful degradation)是web開發者最好的朋友。

HTML5引入的新input類型十分酷，由於他們的降級(degrade)是高度可預測的。若是一個瀏覽器不能理解 <input>元素的 type 屬性, 它將會後退到text同樣的行爲。

CSS屬性選擇器在 HTML Forms 中十分有用，然而舊式瀏覽器不支持. 在那種情形下，通常會習慣性使用等價的class。

input[type=number], input.number {

/* 在某些瀏覽器中，這可能會失敗，由於若是他們不理解其中任何一個選擇器，則跳過整個規則 */

}

有兩種定義HTML表單按鈕的方式:

<input> 元素使用type 屬性並設置其值爲button, submit, reset or image
<button> 元素

<button> 元素有兩個問題使人困擾，其中一個是一些舊瀏覽器不使用submit 做爲 type 屬性的默認值, 因此建議老是在<button> 元素上設置 type 屬性。

即便仍然能夠對HTML表單小部件的文本元素（如大小、字體顏色等）進行一些調整，但那樣作會有反作用。最好的辦法仍是不要美化HTML表單小部件。但你仍然能夠將樣式應用到HTML表單小部件周圍的項目上。

JavaScript在舊式瀏覽器中可能存在不少的問題。

API的兼容性是最大的問題。因爲這個緣由，與"不引人注意的（unobtrusive）" JavaScript一塊兒工做被認爲是最佳實踐（意思是沒有JS或JS出了問題，網頁也能工做）。這個開發模式定義了兩個需求：

結構和行爲之間的嚴格隔離
若是代碼出錯，內容和基本功能必須保持可訪問和可用狀態

有不少情形，好的"polyfill"能經過提供缺乏的API以提供幫助。A polyfill is a bit of JavaScript that "fills in the holes" in the functionality of legacy（遺產） browsers. The best way to polyfill missing API is by using the Modernizr library and its spin-off project: YepNope.

注意性能：舊式瀏覽器有處理速度很是慢的JavaScript引擎，讓polyfills的執行對於用戶來講變得很痛苦。性能自己就是一個主題，但舊式瀏覽器對它很是敏感：基本上，它們速度慢，須要的poliyfill就越多，結果它們須要處理的JavaScript就越多。與現代瀏覽器相比，它們承受雙重負擔。有時，在舊式瀏覽器中放棄某些功能會帶來更好的用戶體驗，而不是在全部瀏覽器中具備徹底相同的功能。做爲最後提醒，老是優先考慮用戶。

樣式化 HTML 表單

使用HTML表單和CSS以使頁面更加美觀。使人驚訝的是，這可能有點棘手。因爲歷史和技術的緣由，表單部件不能很好地與CSS配合工做。因爲這些困難，許多開發人員選擇構建本身的HTML小部件以得到更好的控制和視覺觀感。然而，在現代瀏覽器中，web設計者愈來愈多地控制表單元素的設計。

涉及到CSS，並不是全部表單小部件都是平等的

爲了讓form表單的外觀和其餘內容保持一致，你能夠在你的樣式表中增長如下內容:

button, input, select, textarea {

font-family : inherit;

font-size : 100%;

}

若是你想保持組件的原生觀感，又想給它們一致的大小，你會面臨一些困難。這是由於每一個小部件都有本身的邊框，填充和邊距的規則。因此若是你想給幾個不一樣的小部件相同的大小，你必須使用box-sizing 屬性。

The <legend> element is okay to style, except for positioning. In every browser, the <legend> element is positioned on top of the top border of its <fieldset> parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the position property. But otherwise it is part of the fieldset border.

可訪問性是讓你的網站儘量多的人能使用的作法——咱們傳統上認爲這是關於殘疾人的，但實際上它也涵蓋了其餘羣體，好比使用移動設備的人羣，或者那些網絡鏈接緩慢的人羣。

可訪問性和它所須要的最佳實踐可使每一個人受益：

語義HTML(提升可訪問性)也提升了搜索引擎優化，使你的網站更容易得到。
關心可訪問性展現良好的倫理道德,它提升了你的公衆形象。
其餘一些改善可訪問性的好的作法也會讓你的網站更容易被其餘羣體使用，好比移動電話用戶，低網速等等。事實上，每一個人均可以從不少這樣的改進中受益。
咱們有沒有提到在某些地方法律也是如此?

Because the <legend> element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it's quite often paired with a title, and then hidden in an accessible way. For example:

HTML：

<h1>Hello</h1>

</fieldset>

CSS：

legend {

width: 1px;

height: 1px;

overflow: hidden;

}

默認狀況下，全部瀏覽器都認爲<textarea> 元素是inline block，與文本底線對齊。

background: none;

font : .9em/1.5em表示字體大小爲0.9em、行高爲1.5em。

CSS 的屬性 vertical-align（用在子元素上）用來指定內聯元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。The text-align（用在父元素上） CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.

由於咱們的設計是一個固定大小的設計，因此咱們會把CSS的resize 屬性設爲none來防止用戶調整咱們的多行文本域的大小。The resize CSS property sets whether an element is resizable, and if so, in which direction(s). In many browsers, <textarea> elements are resizable by default. You may override this behavior with the resize property.

CSS的overflow 屬性是用來讓域在不一樣的瀏覽器上渲染得更一致。一些瀏覽器默認值爲 auto，而一些將默認值設爲 scroll。

若咱們想構建只包含文本域和按鈕的表單，用 CSS 美化它們很是容易。

HTML表單的高級樣式

瀏覽器廠家在CSS表現力在表單方面的擴展作了一些嘗試（即-webkit-、-moz-和-ms-之類的），在某些狀況下，知道什麼可用也挺不錯的。警告：儘管這些嘗試頗有趣，但它們是非標準的，也就是不可靠的。.若是你使用它們(也許你並不經常使用)，你要本身承擔風險，使用非標準的屬性對於Web並非好事。

The road to nicer forms: useful libraries and polyfills: Remember that binding CSS and JavaScript can have side effects. So if you choose to use one of those libraries, you should always have fallback style sheets in case the script fails.

表單小部件的屬性兼容表

HTML 和可訪問性

你可能在想，爲何語義化（semantics）對於一個網頁來講如此重要。總的來講，正確的語義化可以使Css和javaScript更爲便利地操做網頁的樣式和行爲。例如，一個用來操做視頻播放的按鈕能夠寫成這樣一種形式:

<div>Play video</div>

接下來你將看到一種更好的寫法，它使用了正確的HTML標籤，看上去更加合理:

<button>Play video</button>

<button>標籤不只提供了按鈕的樣式（雖然有時會從新編寫樣式），還提供了鍵盤的可訪問性，如：使用tab鍵更換按鈕，使用回車鍵點擊按鈕。

若是你在項目的一開始就使用HTML語義化，不只不會花更多的時間，並且又有如下的可訪問性優勢：

更便於開發 — 如上所述，你可使HTML更易於理解，而且能夠絕不費力的得到一些功能。
更適配移動端 — 語義化的HTML文件比非語義化的HTML文件更加輕便，而且更易於響應式開發。
更便於SEO優化 —search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc.，使用語義化可以使網頁更容易被用戶搜索到。

上面咱們討論了語義化的重要性以及爲何咱們要使用正確的HTML標籤來表達正確的意圖。語義化（semantics）是咱們不可忽視的一部分，由於它每每決定了網頁的可訪問性（accessibility）。

repeating content units適合用 <article>

By UI controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. One key aspect to the accessibility of UI controls is that by default, browsers allow them to be manipulated by the keyboard.

tabindex = '0'：使元素能被聚焦（包括經過Tab鍵）。Basically, the tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. 雖然tabindex =「0」容許咱們用 tab 選擇按鈕，但它不容許咱們經過 Enter / Return 鍵來激活它們。要作到這一點，咱們必須添加JS 小絕招（JavaScript trickery）。

表單標籤也很重要，可讓您瞭解您須要輸入每一個表單輸入的內容：

用

<div>

</div>

而不是

Fill in your name: <input type="text" id="name" name="name">

你不該該在圖像中包含文本內容 - 屏幕閱讀器根本沒法訪問它。還有其餘的缺點 - 你不能選擇它並複製/粘貼它。不要這樣作！

<figure> and <figcaption> — which are supposed to associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。