一篇文章帶你快速入門HTML
HTML
五月未央
五月即將過去
天氣越發炎熱，你日漸消瘦（並不）
今年年初下了個決心
每個月底要寫一篇前端教程
但二月你懂的
曾經辣么放飛自我辣么浪
積攢下來的內容並不多
所以二、三、四月的教程乾脆寫到一起
HTML簡介
簡介
什麼是HTML？
HTML（Hyper Text Markup Language） ，即超文本標記語言。HTML不是編程語言，因此其與其他編程語言（如：Java、C及Objective-c等）是有區別的。標記語言由一系列標籤組成，通過標記標籤來描述網頁
HTML標籤
HTML 標記標籤通常被稱為 HTML 標籤(HTML tag)
HTML 標籤是由尖括弧包圍的關鍵詞，如：
HTML 標籤通常是成對出現的，如：
標籤對中的第一個標籤（）被稱為開始標籤，第二個標籤（）被稱為結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤
提示：在HTML中標籤名是不區分大小寫的，也就是說一個標籤既可以全部寫成大寫的英文字母，也可以全部寫成小寫的英文字母（主流的寫法），如：「」寫成「」，「」寫成「」都不會影響頁面的正常運行。甚至還可以將一個標籤元素的英文字母大小混寫都是不影響頁面正常運行的，但這種做法會影響代碼的可讀性，並不推薦
HTML文檔與網頁
HTML 文檔描述網頁
文檔包含HTML標籤和純文本
HTML 文檔也被稱為網頁
Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容
屬性
HTML 標籤可以擁有屬性，屬性提供了有關HTML標籤的更多屬性，屬性以鍵（key）值（value）對的形式出現，即：key = "value"，如：title = "HTMLTest"，屬性一般定義在開始標籤中
點擊前往
上述代碼定義了一個 a 標籤（超鏈接），該標籤擁有 href 及 target 屬性，提供了鏈接地址以及在什麼窗口下打開新的頁面，標籤中的文本為呈現在頁面上的內容
元素
HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的所有代碼，即元素由開始標籤、結束標籤、屬性以及內容組成
標籤嵌套
所謂標籤的嵌套，是指一個標籤對以內包含另外一個標籤，如：標籤內包含和兩個標籤對，而標籤內又可以包含和等標籤。也就是說標籤不僅可以單獨存在，又可以包含其它一個或多個標籤，而且標籤的嵌套可以是多層的，並且嵌套層數是沒有限制的
標籤的嵌套根據代碼規範性、性能和SEO（搜索引擎優化）等方面考慮，應當遵循以下規則：
HTML頁面中所有需要顯示在瀏覽器窗口內的內容均需要放置在標籤對以內
在不影響頁面顯示、CSS樣式設置和DOM操作的前提下，標籤的嵌套層數是越少越好
標籤嵌套的基本順序應該是：「塊級標籤>行內塊標籤>行內標籤」
同一個顯示類型的標籤可以進行嵌套，如：「塊級標籤>塊級標籤」（
除外）、「行內塊標籤>行內塊標籤」和「行內標籤>行內標籤」
避免使用「行內標籤」去嵌套「行內塊標籤」和「塊級標籤」、「行內塊標籤」去嵌套「塊級標籤」，雖然有的時候在顯示上並不會出現問題，但「行內標籤」大部分是不具備布局屬性的，需要進行顯示類型轉換（display）才能夠進行CSS的布局設置，既麻煩，又不規範
文檔流
所謂文檔流就是HTML文檔中可顯示元素在排列時所佔用的位置。HTML文檔流中的標籤元素遵循「從左到右、從上到下」的排列次序，有如現代漢字的書寫順序一樣，但又存在著一些差別
文檔結構
HTML（Hyper Text Markup Language 超文本標記語言）基本文檔結構是指組成一個基本的HTML頁面所必須的元素標籤。它的根節點是由一個文檔聲明 「」 和一個「」標籤組成的，而標籤下級（又稱「子節點」）又包含「」和「」兩個主要的標籤，具體編寫格式如下：
Document
結構解讀：
DOCTYPE定義文檔的類型為HTML
：根標籤
：頭部標籤，放置網頁基本信息，如標題、編碼格式、JavaScript文件引入及層疊樣式表引用等
：無結束標籤，通過對應的屬性來設置編碼格式（必要）、設備顯示縮放、搜索引擎關鍵字、描述、瀏覽器內核渲染方式等內容
：設置網頁標題
：內容標籤，網頁顯示的所有內容，HTML中所有的文本、基本標籤、表單標籤、標籤、超鏈接、圖像、音頻、視頻等有實質內容的標籤都贏放置於內，否則瀏覽器內核將不能正確的渲染並最終顯示
HTML標籤
文本標籤
：文本標籤，行內元素
：段落標籤，一般用於描述一個段落，塊級元素
：標題，塊級元素
：標題組 （了解）
文本格式化標籤
粗體：
斜體：
強調：
上標：
下標：
大號字：
小號字：
插入字：
刪除字：
著重字：
提示：文本格式化標籤只需要了解即可，後期可通過 CSS 實現文本格式化標籤所呈現的效果
引用/術語定義
：作為聯繫信息出現，郵編地址、郵件地址等等，一般出現在footer標籤中
：短引用
：長引用
：該標籤通常表示它所包含的文本對某個參考文獻的引用，比如書籍或者雜誌的標題
布局標籤/語義化標籤
HTML 提供了一系列標籤用於布局，主要包括一下標籤：
：布局標籤（通用容器）
：用於文章、新聞或博客，表示文檔、頁面、應用或一個獨立的容器，article可以嵌套article，只要裡面的article與外面的article是部分與整體的關係
：章節標籤，表示具體相似主題的一組內容，比如網站的主頁可以分成介紹、新聞條目、聯繫信息等條塊。
：指定附註欄，包括引述、側欄、指向文章的一組鏈接、廣告、友情鏈接、相關產品列表等
：頁眉，通常包括網站標誌，主導航，全站鏈接及搜索框，也適合對頁面內部一組介紹性或導航性內容進行標記。
：頁腳，通常包括網站版權信息等
：標記導航，僅對文檔中重要的鏈接使用。HTML5規範不推薦對輔助性頁腳使用nav，除非頁腳再次顯示頂級全局導航，或者包含招聘信息等重要鏈接
：指定細則，輸入免責聲明、註解、署名、版權。只適用於短語，不要用來標記「使用條款」、「隱私政策」等長的法律聲明
：創建圖（默認有40px左右margin）
：figure的標題，必須是figure內嵌的第一個或者最後一個元素。
：標記時間
：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能
實用標籤
1、
標籤主要用於顯示圖片，其主要常用屬性如下：
src：設置圖片鏈接地址
width/height：設置圖片大小
title：設置圖片標題，滑鼠懸浮在圖片上時顯示
alt：設置提示，當圖片載入失敗時會顯示
2、
標籤主要用於超鏈接，HTML 使用超鏈接與網路上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。其主要常用屬性如下：
href：鏈接地址，可以是本地鏈接地址，也可以是在線鏈接地址
target：定義被鏈接的文檔在何處顯，其值包括：blank、self、_parent、_top
利用超鏈接可以跳轉到本頁錨點，類似於書籤跳轉，將a標籤的「href」屬性設置為「#」+「指定元素的ID值」後，該超鏈接不再是進行頁面間的跳轉或是文件的打開了，而是將頁面滾動到本頁面中ID屬性值和「href」屬性值「#」後的值所對應的值的地方，頁面滾動的目標元素的上邊緣將和瀏覽器內容窗口上邊緣重合
如果頁面上布局了一個超鏈接，但是現在還不確定鏈接地址，可以使用 「#」 號替代 href 屬性值，當然你也可以使用 javascript:void(0) 替代，建議用後者，使用前者未在URL資源地址後面追加「#」，從而改變 location.href
利用超鏈接也可以實現回到頂部的需求，即指定 href 屬性值為 #top，但是這樣設置時直接跳至頂部，給用戶一種突兀的感覺，後期可通過 JavaScript + css 實現回到頂部的效果
3、
frame 標籤會創建包含另外一個文檔的內聯框架（即行內框架），其主要屬性包括：
name：設置iframe的名稱
width：設置iframe的寬度，值可以為像素（不用添加「px」單位）和百分數
height：設置iframe的高度，值可以為像素（不用添加「px」單位）和百分數
src：設置iframe元素內需要顯示頁面或文件的URL地址，該屬性的值可以由與之關聯的a標籤點擊設置（通過將a標籤的「target」屬性的值設置為該iframe的「name」屬性的值進行關聯）
frameborder：設置是否顯示邊框（0 表示不顯示邊框/ 1 表示要顯示邊框）
scrolling：設置是否允許滾動（auto/yes/no）
4、
a、無序列表
常用屬性：
type：列表項目符號類型（disc（默認）/circle/square）
使用示例：
無序列表01
無序列表02
無序列表03
b、有序列表
常用屬性：
type：列表項目符號類型（1（默認）/A/a/I/i）
reversed：倒序
start：起始值（對阿拉伯數字有效）
使用示例：
有序列表01
有序列表02
有序列表03
c、定義列表
定義列表分為兩層：第一層為定義的列表dl；第二層分為兩個部分，即dt和dd，dt用於定義列表中的項目，dd用於描述定義的項目，它們的顯示類型都為「塊級元素（block）」。相對於「無序列表」和「有序列表」，這種列表由於其自身的結構原因，對需要進行名詞性描述的列表更為適用
使用示例：
蘋果
蘋果學名
草莓
草莓學名
櫻桃
櫻桃學名
d、列表嵌套
無序列表與有序列表嵌套使用方式一致，這裡以無序列表為例:
Web前端工程師
HTML
CSS
Bootstrap
LESS
SASS
JS
JavaScript
jQuery
AngularJS
...
其他開發工程師
5、
標籤主要用於定義HTML表格
a、相關概念
thead：表頭（表格標題及頭部信息不等）
tbody：表中（表格顯示的內容部分）
tfoot ：表尾（表格說明與備註部分）
tr：行
th：單元格，作為行或列的標題呈現
td：單元格，作為內容單元格呈現
caption：表格主標題，位於表格之外
b、相關屬性
width/height：設置寬度/高度
border：設置邊框
align：設置表格對齊方式（left/center/right）
cellspacing：設置單元格與單元格之間的間距
cellpadding：設置單元格與內容之間的間距
bgcolor：設置表格背景顏色
background：設置背景圖片
colspan：合併列 『』
rowspan：合併行 『』
6、
標籤用於描述文檔或文檔某個部分的細節，目前只有 Chrome 和 Safari 6 支持 details 標籤。，該標籤需與 標籤結合使用。其使用方法如下：
蘋果
蘋果學名
7、
標籤定義帶有記號的文本。請在需要突出顯示文本時使用此標籤。如下所示：
2015年3月5日上午十二屆全國人大三 互聯網+ 行動計劃
8、
標籤用於描述進度信息，其具備如下兩個屬性：
max：規定總進度量的值
value：規定當前進度量的值
代碼示例：
下載中：
當前進度：
9、
標籤是一個「行內塊級元素」,它用於在頁面中載入音頻文件，目前HTML5標準中，主要支持三種格式的音頻文，即：「ogg」(Ogg Vorbis)、「mp3」和「wav」格式的音頻文件，但不同的瀏覽器支持的情況又有所不同，所以我們通常不會單獨使用標籤，而是在該標籤內置入一個標籤，使瀏覽器將一個識別到的音頻文件進行使用
瀏覽器支持音頻格式的情況如下表：
標籤常用屬性如下：
autoplay：自動播放
controls：顯示音頻控制項（播放/暫停按鈕等）
loop：循環播放
muted：靜音
preload：預載入，與autoplay連同使用，該屬性會被忽略
src：音頻地址
標籤常用屬性如下：
media：規定媒體類型，如：「screen and (min-width:320px)」
src：規定媒體文件的URL地址
type：規定媒體資源的MIME類型（Multipurpose Internet Mail Extensions，它包含文本、圖像、音頻、視頻以及其他應用程序專用的數據）
10、
標籤是一個「行內塊級元素」,它用於在頁面中載入視頻文件，目前HTML5標準中，主要支持三種格式的視頻文件，即：「ogg/ogv」(帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件)、「mp4」（帶有H.264 視頻編碼和AAC音頻編碼的MPEG4文件）和「webm」（帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件）格式的視頻文件，但不同的瀏覽器支持的情況又有所不同，所以我們通常不會單獨使用標籤，而是在該標籤內置入一個標籤，使瀏覽器將一個識別到的音頻文件進行使用
瀏覽器支持視頻格式的情況如下表：
標籤常用屬性如下：
width：設置視頻播放器的寬度
height：設置視頻播放器的高度
autoplay：自動播放
controls：顯示視頻控制項（播放/暫停按鈕等）
loop：循環播放
preload：預載入，與autoplay連同使用，該屬性會被忽略
src：音頻地址
11、
? 標籤用於設置水平線，其常用屬性如下：
width：設置水平線寬度
color：設置水平線顏色
align：設置水平線對齊方式，其值包括left/center/right
12、
標籤的作用主要是換行
HTML表單
簡介
HTML 表單用於搜集不同類型的用戶輸入。表單是一個包含表單元素的區域。表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、複選框等等）輸入信息的元素。如下圖所示：
表單使用表單標籤（）定義。表單標籤的內容通常是「表單元素」+「提交按鈕」的形式。它雖然和
標籤一樣屬於「塊級元素」，但它卻有自己的實際用處，也就是若不將「表單元素」放置於表單標籤中，那某些表單元素將會失效，如：「提交」按鈕和「重置」按鈕
表單
表單使用 標籤定義，標籤具備以下屬性：
name：規定識別表單的名稱
action：規定向何處提交表單的地址（URL）（提交頁面）
method：規定在提交表單時所用的 HTTP 方法（默認：GET），其值包括：
GET：form表單里所填的值，附加在action指定的URL後面，做為URL鏈接而傳遞
POST：form表單里所填的值，附加在HTML Headers上
target：規定在何處打開「action」中設定的URL（默認：_self），有以下值：
_blank：在新窗口/選項卡中打開 _self：當前頁打開
_parent：在父框架中打開
_top：在整個窗口中打開
enctype：規定在發送表單數據之前，如何對錶單數據進行編碼，有以下值：application/x-www-form-urlencoded（默認，在發送前編碼所有字元）
multipart/form-data（不對字元編碼，在使用包含文件上傳控制項的表單時，必須使用該值
text/plain（空格轉換為 "+" 加號，但不對特殊字元編碼。）
autocomplete：規定是否啟用表單的自動完成功能（默認：on）
novalidate：規定瀏覽器不驗證表單
accept-charset：規定在被提交表單中使用的字符集，主要有以下值：
UTF-8（Unicode，雙位元組對字元進行編碼，統一的編碼標準）
ISO-8859-1（拉丁字母表的字元編碼
GB2312（簡體中文字符集）
提示：當然，還有其它更多字符集的編碼標準，這裡作為了解即可，如：「ISO-8859-2」（東歐字元編碼），「ISO-2022-JP」和「ISO-2022-JP-2」（日語字元編碼），「ISO-2022-KR」（韓語字元編碼）等
表單元素
1、
表單中用於顯示錶單欄位的標籤，可以讓用戶知道該行表單元素的作用，它屬於「行級元素」。和標籤不一樣，它配合後面學習的其它表單元素可以實現一些作用上的關聯。所以，標準的表單編寫都需要在表單元素前加上一對標籤，內容需寫上標籤後表單元素的作用
2、
標籤用於搜集用戶信息。根據不同的 type 屬性值，輸入欄位擁有很多種形式。可以是文本欄位、複選框、掩碼後的文本控制項、單選按鈕、按鈕等等
1）常用屬性
type：規定表單類型。
name：定義 input 元素的名稱。
value：規定「文本類型」的輸入框中，默認顯示的值內容。
maxlength：規定輸入欄位中的字元的最大長度。
readonly：使表單元素成為「只讀」狀態，在這個狀態下只能讀取元素內容，而不能進行編輯。
disabled：使表單元素成為「禁用」狀態，表單元素將「失效」。
checked：使「type」屬性值為「checkbox」和「radio」的表單元素中的指定項默認成為「選中」狀態。
size：規定文本框可見字元顯示的寬度，但不同瀏覽器對此的支持有所不同，我們現在基本都是使用CSS去控制。
autocomplete：規定是否使用輸入欄位的自動完成功能。（html5）
autofocus：規定輸入欄位在頁面載入時是否獲得焦點。（不適用於 type="hidden"）（html5）
form：規定輸入欄位所屬的一個或多個表單。（html5）
height：規定 input 欄位的高度。（適用於 type="image"）（html5）
width：規定 input 欄位的寬度。（適用於 type="image"）（html5）
list：引用包含輸入欄位的預定義選項的 datalist 。（html5）
multiple：多選（適用於select/datalist）。（html5）
pattern：規定輸入欄位的值的模式或格式。例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。（html5）
placeholder：用戶輸入提示（佔位符）。（html5）
required：指示輸入欄位的值是必需的。（html5）
step：規定輸入字的的合法數字間隔。（html5）
2）type屬性值
text：默認屬性值，規定顯示的類型為「文本框」
password：規定顯示的類型為「密碼框」
radio：規定顯示的類型為「單選框」
checkbox：規定顯示的類型為「複選框」
file：規定顯示的類型為「文件上傳」控制項
button：規定顯示的類型為「按鈕」
submit：規定顯示的類型為「提交按鈕」
reset：規定顯示的類型為「重置按鈕」
image：規定顯示的類型為「圖像按鈕」
hidden：規定顯示的類型為「隱藏域」
email：用於應該包含「e-mail」地址的輸入框（html5）
url：用於應該包含「URL」地址的輸入框（html5）
search：用於應該「搜索內容」的輸入框（html5）
number：用於應該包含「數值」的輸入控制項（html5）
tel：規定顯示的類型為「電話號碼」的輸入框（html5）
range：規定顯示的類型為「數值選擇範圍」選擇控制項（html5）
date：規定顯示的類型為「日期」選擇控制項（html5）
month：規定顯示的類型為「月份」選擇控制項（html5）
week：規定顯示的類型為「周」選擇控制項（html5）
time：規定顯示的類型為「時間」選擇控制項（html5）
datetime：規定顯示的類型為「日期時間」選擇控制項（html5）
datetime-local：規定顯示的類型為「本地日期時間」選擇控制項（html5）
color：規定顯示的類型為「顏色」選擇控制項（html5）
3、
標籤是一個可以輸入多行文本的標籤對，它是一個「行內塊級標籤」。和 標籤不同的是， 標籤是一個標籤對，它擁有閉合標籤。需要特別加以區分的是，它顯示文本內容是通過標籤的內容，而非「value」屬性。它可以通過「cols」和「rows」屬性來設置顯示的尺寸，當然,使用CSS去控制尺寸更加利於布局準確性
4、
通過標籤可以創建單選和多選的下拉菜單。可以通過「size」屬性設置該標籤在一個選項菜單中可見的選項個數，當它的值設為「1」時，將顯示為默認的下拉菜單的樣式，是它必須的子菜單，否則將不能提供任何可選項，而標籤通常需要具有一個「value」屬性，以便於在做數據操作時能準確地通過該屬性值取到對應標籤的內容
5、
標籤對和其它表單元素一樣，同是屬於「行內塊元素」，它的作用和「type」屬性為「button/submit/reset」的一樣，是在頁面內創建一個「按鈕」元素，它的「type」屬性和也一樣，支持「button」、「submit」和「reset」三個值。它也是一個擁有閉合標籤的元素
和使用相比，使用有以下不同：
按鈕文本是放置於該標籤的內容上，而是將按鈕文本設置於它的「value」屬性上
在頁面提交時，「IE瀏覽器」提交的是標籤對內的內容，而其它瀏覽器提交的是的「value」屬性值的內容
標籤對內可以同時顯示文本、圖片、表格甚至是多媒體，而標籤只能顯示其中一個
標籤的「type」屬性不進行設置的話，在「IE瀏覽器」中將默認設為「button」，而在其它瀏覽器中（包括 W3C 規範）都會默認設為「submit」，所以，為了統一瀏覽器的行為，我們通常都會為的屬性「type」設置一個初始值
在外觀上標籤比標籤生成的按鈕更加有質感，交互視覺效果也更加出色（大部分瀏覽器如此）
6、
使用 標籤可以實現下拉列表，需要配合一個屬性為「list」的標籤使用，通過將list的屬性值設置為標籤的「ID」屬性的值來關聯，實現一個既可輸入，又可選擇的下拉菜單。當然，IE瀏覽器不支持該元素
7、
fieldset 元素可將表單內的相關元素分組
8、
標籤是一個具有特殊作用的「行級元素」，它用於顯示不同類型的輸出。標籤最後顯示的值是通過標籤的「oninput」事件屬性進行賦值運算得出來的，最後再通過的「for」屬性對錶單內參與「運算」表單元素的「Id」進行綁定，最終將運算的結果顯示出來
HTML全局屬性
概述
HTML全局屬性是可以應用於幾乎所有（部分屬性有一定的應用範圍限制）的HTML標籤的屬性，現在已知的屬性有16個，其中有一半左右是HTML5標準後出現的，很多屬性在我們之前的學習中都已經接觸過了的，能熟練地記識這些屬性能夠給我們之後的Web開發帶來很多便利，減少開發中所犯的一些低級錯誤。作為一個Web前端工程師，能夠準確地區分全局屬性和特殊屬性也是一項重要的基本功。接下來我們就來看看在HTML中哪些屬性能夠作為並為大部分主流瀏覽器所兼容的全局屬性
全局屬性
1、id
該屬性能用於所有的HTML元素，為HTML元素指定一個唯一的標識符，用於CSS設置，JavasSript進行操作或其它腳本語言及伺服器端語言進行設置操作
2、class
該屬性可以用於所有HTML元素，為元素添加一個或多個類名。通常是用於CSS設置或配合JavaScript進行操作設置，多個類名以空格符進行分隔，多個元素可以使用同一個類名
3、title
該屬性可以用於所有HTML元素，通過設置它的值，可以讓用戶滑鼠懸浮在該元素上顯示出「title」屬性中所設置的值。如之前提到的 標籤
4、lang
該屬性用於設置元素的語言類型，不支持的標標有，
，，，，
及 ，但通常的使用方式是直接給標籤設置該屬性，如：、、這樣的形式，分別表示將語言類型設置為「簡體中文」、「中文」、「英文」
5、tabindex
該屬性用於設定當用戶按下鍵盤上的「Tab」鍵後，頁面內可以獲得焦點的元素獲得焦點的次序（默認是基於文檔流「從左到右，從上到下」的次序）。切換次序的先後遵循以下規則：
必須為正整數
數字小的先獲得焦點，數字大的後獲得焦點
數字並不需要連續，如「1、2、5、7...」也能正常按次序跳轉焦點
同樣的數字，在文檔流中先出現的先獲得焦點，後出現的後獲得焦點
不能為負數，否則會被忽略
可以為「0」，但會被排序到最後一個獲得焦點
6、contenteditable
該屬性是HTML5標準後寫出現的一個比較有「革命意義」的屬性，它可以讓一個普通的布局標籤元素，可以像一個文本框（域）一樣編輯文本內容。之所以說它具有革命意義的原因在於，傳統的表單輸入元素的編輯只限於文本，而「contenteditable」屬性只是讓一個元素可以進行編輯，而並不會對其類型進行轉化，也就是說網頁中任何可以通過HTML+CSS實現的元素，都是可以進行編輯的
該屬性允許設置兩種值，值的類型為一個布爾值：
true：表示元素內可以進行編輯
false：表示元素內不能進行編輯
7、data-*
用戶自定義屬性，首先需要明白的是該屬性本身並不會對元素及相關聯的元素造成任何影響，也就是說該屬性會被瀏覽器用戶代理忽略。屬性「data-*」後面的「*」號可以是用戶自定義的英文單詞、數字、橫線「-」和下劃線「_」等字元串，該屬性可以有屬性值，也可以沒有屬性值，而屬性值也完全是用戶自定義的字元串
該屬性的作用和「class」屬性的作用比較相似（但該屬性不被較老版本的瀏覽器支持），同樣可以通過它去進行CSS樣式的設置，也可以被JavaScript代碼進行DOM操作，數據獲取、設置等，但很多時候「class」中的值是用於CSS樣式設置的，如果對其操作修改會造成自身樣式或後代元素的樣式錯亂，這個時候通過去操作開發者自定義「data-*」屬性更為穩妥，也更為規範
8、draggable
該屬性用於設定元素是否可以拖動，它允許設置2種值：
true：表示元素內可以進行拖動
false：表示元素內不能進行拖動
9、hidden
該屬性無需屬性值（所有屬性值都無效），在「嚴格模式」的HTML文檔中需要寫成「hidden="hidden"」，但凡設置了該屬性的元素都會在頁面中隱藏，並且不再佔用「文檔流」中的位置，相當於將元素CSS的顯示類型「display」屬性的值設置為「none」（但通過這種方式隱藏元素，它的優先順序的權重為0，只要在CSS中顯示地將「display」屬性設置為「inline-block」或「block」等可以顯示元素的類型即可顯示出元素）
10、spellcheck
該屬性用於檢查元素內容中英文語法拼寫的檢查，若元素中英文字母內容不是已知的英文單詞瀏覽器會在單詞下方划上一條紅色的波浪線用於提示錯誤
該屬性允許設置兩種值，值的類型為一個布爾值：
true：表示為元素內的英文文本內容執行語法檢查
false：表示不為元素內的英文文本內容執行語法檢查
11、translate
規定是否應該翻譯元素內容
提示：目前沒有主流瀏覽器支持 translate 屬性
12、dropzone
規定在拖動被拖動數據時是否進行複製、移動或鏈接
提示：目前所有主流瀏覽器都不支持 dropzone 屬性
13、contextmenu
在用戶右鍵目標元素時出現一個「id」屬性值為「contextmenu」屬性值中所設置文本內容的菜單，標籤中的項通過子元素標籤的屬性「label」進行文本設置從而顯示出內容，用JavaScript的事件去定義這些項的功能
提示：目前沒有任何主流瀏覽器支持 contextmenu 屬性
當你
耐
看
心
完
我想這篇足夠入門HTML了，就算入不了門，也能夠幫助你放棄了！因為這只是開篇，前端也並不是一蹴而就就可以學好的，連基礎都沒耐心學，怎麼學前端
TAG:道本如風 |