HTML5基礎知識彙總
阿新 • • 發佈：2019-02-05
HTML是Hypertext Markup Language的縮寫，中文翻譯為：超文字標記語言
-
HTML文件結構和基本語法
-
HTML5基本語法
- 副檔名.html/.htm
- 內容型別(ContentType):text/html
- 文件型別:
<!DOCTYPE html>
-
字元編碼
- HTML4:
``` <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ``` * HTML5: ``` <meta charset="UTF-8"> ``` * 對於HTML5來說，兩種方法都有效-
標籤省略
- 不允許寫結束標記的元素
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr.- 可以省略結束標記的元素
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th- 可以省略全部標記的元素
html,head,body,colgroup,tbody- 可以省略標記的元素，不建議省略，因為省略不易於閱讀。
-
布林值
- 對於具有布林值的屬性，如disable與readonly等，當只寫屬性而不指定屬性值時，表示屬性值為true；如果想要將屬性值設為false，可以不使用該屬性。另外，要想將屬性值設定為true時，也可以將屬性名設定為屬性值，或將空字串設定為屬性值
<!--只寫屬性，不寫屬性值，代表屬性為true--> <input type="checkbox" checked /> <!--不寫屬性，代表屬性為false--> <input type="checkbox" /> <!--屬性值=屬性名，代表屬性為true--> <input type="checkbox" checked="checked" /> <!<!--屬性值=空字串，代表屬性為true--> <input type="checkbox" checked="" /> -
屬性值
- 屬性值兩邊既可以使用單引號，也可以用雙引號。HTML5在此基礎上做了改進，當屬性值不包括空字串，<，>,=,單引號，雙引號等字元時，屬性值兩邊的引號可以省略
<input type=text /> <input type="text" /> <input type='text' />
-
-
HTML4元素
-
結構元素：用於構建網頁文件的結構，多指塊級元素
* div：在文件中定義一塊區域，即包含框，容器 * span：在文字行中定義一塊區域，即行內包含框 * ol：根據一定的排序進行列表 * ul：沒有排序的列表 * li：每條列表項 * dl：以定義的方法進行列表 * dt：定義列表中的詞條 * dd：對定義的詞條進行解釋 * del：定義刪除的文字 * ins：定義插入的文字 * h1~h6：標題1到標題6，定義不同級別的標題 * p：定義了段落結構 * hr：定義水平線-
內容元素：用於定於元素在文件中的內容的語義，一般只文字格式化元素，它們多是行內元素
* a：定義超連結 * abbr：定義縮寫詞 * address：定義地址 * acronym：定義取首字母的縮寫詞 * dfn：定義條目 * kdb：定義鍵盤鍵 * samp：定義樣本 * var:定義變數 * tt：定義印表機字型 * code：定義計算機原始碼 * pre：定義預定義格式文字，保留原始碼格式 * blockquote：定義大塊內容引用 * q：定義引用短語 * strong：定義重要文字 * em：定義文字為重要-
修飾元素：用於定義文字的顯示效果
* b：定義粗體 * i：定義斜體 * big：定義文字增大 * small：定義文字縮小 * sup：定義文字上標 * sub：定義文字下標 * bdo：定義文字顯示方向 * br：定義換行 * 已廢除的修飾元素 * center：定義文字居中 * font：定義文字的樣式、大小和顏色 * u：定義文字下劃線 * s：定義刪除線。strike的縮寫 * strike：定義刪除線 -
-
HTML4屬性
-
核心屬性
* class：定義類規則或樣式規則 * id：定義元素的唯一標識 * style：定義元素的樣式宣告 * 這些元素不擁有核心屬性：html、head、title、base、meta、param、script、style，這些元素一般位於文件頭部區域，用來定義網頁元資訊。-
語言屬性
* lang：定義元素的語言程式碼或編碼。 * dir：定義文字方向，包括ltr和rtl取值，分別表示從左向右和從右向左。 * 以下這些元素不擁有語言屬性：frameset、frame、iframe、br、hr、base、param、script。 * 例如：`<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="en">`-
鍵盤屬性
* accesskey：定義訪問某元素的鍵盤快捷鍵 * 使用accesskey屬性可以使用快捷鍵(Alt+字母)訪問指定的URL，但是瀏覽器不能很好的支援，在IE中僅啟用超連結，需要配合Enter鍵確定。 * 一般會在導航欄中設定快捷鍵。例如： `<a href="http://www.baidu.com" accesskey="a">按住Alt鍵，點選A鍵可以連結到百度首頁</a>` * tabindex：定義元素的Tab鍵索引編號 * tabindex屬性用來定義元素的Tab訪問順序，可以使用Tab鍵遍歷頁面中的所有連線和表單元素。遍歷時會按照tabindex的大小決定順序，當遍歷到某個連結時，按Enter鍵即可開啟連結頁面。 * 例如： ``` <a href="http://www.baidu.com" tabindex="1">百度</a> <a href="http://www.163.com" tabindex="2">網易</a> <a href="http://www.qq.com" tabindex="3">騰訊</a> ```-
內容屬性
* alt:定義元素的替換文字 * title：定義元素的提示文字 * longdesc：定義元素包含內容的大段描述資訊**沒有瀏覽器支援 longdesc 屬性。** * cite：定義元素包含內容的引用資訊 * datetime：定義元素包含內容的時間和日期 * alt和title是兩個常用的屬性，分別用於定義元素的替換文字和提示文字 * 例如： ``` <a href="#" title="提示文字">超連結</a> <img src="URL" alt="替換文字" title="提示文字"/> <a href="http://www.baidu.com"><cite>百度</cite></a> <input type="image" src="URL" alt="替換文字"/> ```-
其他屬性
* rel：定義當前頁面與其他頁面的關係 * rev：定義其他頁面與當前頁面之間的連結關係 * rel表示從源文件到目標文件的關係 * rev表示從目標文件到原始檔的關係 * 例如： ``` <a href="Demo.html" rel="prev">連結到集合中的前一個文件</a> ``` -
-
HTML5元素
-
結構元素：
HTML5定義了一組新的語義化的結構標記來描述網頁內容。雖然語義化結構標記可以被HTML4標記進行替換，但是他可以簡化HTML頁面設計，明確的語義化更適合搜尋引擎檢索和抓取。
* header：表示頁面中一個內容區塊或整個頁面的標題
* footer：表示整個頁面或頁面中一個內容區塊的腳註。
* section：表示頁面中的一個內容區塊，如章節、頁首、頁尾或頁面中的其他部分。
* article：表示頁面中的一塊與上下文不相關的獨立內容，如部落格中的一篇文章
* aside：表示article元素的內容之外的、與article元素內容相關的輔助資訊
* nav：表示頁面中導航連結部分
* main：表示網頁中的主要內容。主要內容區域指與網頁標題或應用程式中本頁面主要功能直接相關或進行擴充套件的內容
* figure：表示一段獨立的流內容，一般表示文件主流內容中的一個獨立單元。可以使用figcaption元素為figure元素組新增標題
-
功能元素
-
hgroup元素：用於對整個頁面或頁面中一個內容區塊的標題進行組合。
* `<hgroup>......</hgroup>` * HTML4中： ``` <div>......</div> ```-
video元素：定義視訊，比如電影片段或其他視訊流
-
<video src="movie.ogg" controls="controls">video元素</video> -
HTML4中：
<object type="video/ogg" data="movie.ogv"> <param name="src" value="movie.ogv" /> </object>
-
-
audio元素：定義音訊，比如音樂或其他音訊流
-
<audio src="someaudio.wav">audio元素</audio> -
HTML4中：
<object type="application/ogg" data="someaudio.wav"> <param name="src" value="someaudio.wav" /> </object>
-
-
embed元素：用來插入各種多媒體，格式可以是：Midi、Wav、AIFF、AU、MP3等。
-
<embed src="horse.wav" /> -
HTML4中：
<object data="flash.swf" type="application/x-shockwave-flash"></object>
-
-
mark元素：主要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字。mark元素一個典型的應用就是在搜尋結果中向用戶高亮顯示搜尋關鍵詞（黃色背景色）
-
<mark></mark> -
HTML4中：
<span></span>
-
-
dialog元素：定義對話方塊或視窗
-
<dialog open>這是開啟的對話方塊視窗</dialog> -
HTML4中：
<div id="dialog">這是開啟的對話方塊視窗</div>
-
-
bdi元素：定義文字的文字方向，使其脫離其周圍文字的方向設定
-
HTML5中：
<ul> <li>Username <bdi dir="rtl">Bill</bdi>:80 password</li> <li>Username <bdi dir="ltr">Steve</bdi>:78 aaaaaa</li> </ul>
-
-
figcaption元素：定義figure元素的標題
-
HTML5中：
<figure> <figcaption>黃浦江上的的盧浦大橋</figcaption> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> </figure> -
HTML4中：
<div id="figure"> <h2>黃浦江上的的盧浦大橋</h2> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> </div>
-
-
time元素：表示日期或時間，也可以同時表示兩者
-
<time><time> -
HTML4中：
<span></span>
-
-
canvas元素：表示圖形，如圖表和其他影象。
-
這個元素本身沒有行為，僅提供一塊畫布，但它把一個繪圖API展現給客戶端JavaScript，以使指令碼能夠把想繪製的東西繪製到這塊畫布上
-
<canvas id="myCanvas" width="200" height="200"></canvas> -
HTML4中:
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
-
-
output元素：表示不同型別的輸出，比如指令碼的輸出。
-
<output></output> -
HTML4中：
<span></span>
-
-
source元素：為媒介元素（比如<video>和<audio>）定義媒介資源
-
<source> -
HTML4中：
<param>
-
-
menu元素：表示選單列表。當希望列出表單控制元件時使用該標籤
-
HTML5中：
<menu> <li><input type="checkbox" />Red</li> <li><input type="checkbox" />blue</li> </menu> -
HTML4中：menu元素不推薦使用
-
-
ruby元素：表示ruby註釋（中文註音或字元）
-
HTML5中：
<ruby> 漢 <rp>(</rp><rt>Han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby>
-
-
rt元素：表示字元（中文註音或字元）的解釋或發音
-
rp元素：在ruby註釋中使用，以定義不支援ruby元素的瀏覽器所顯示的內容
-
wbr元素：表示軟換行。
- wbr元素與br元素的區別：br元素表示此處必須換行；而wbr元素的意思是瀏覽器視窗或父級元素的寬度足夠寬時（沒必要換行時），不進行換行，而當寬度不夠時，主動在此處進行換行。
-
command元素：表示命令按鈕，如單選按鈕、複選框或按鈕
<command onclick="alert('Hello World')">Click Me!</command>- 只有 Internet Explorer 9 （更早或更晚的版本都不支援）支援 標籤。
-
details元素：表示使用者要求得到並且可以得到的細節資訊。它可以與summary元素配合使用
-
summary元素提供標題或圖例。標題是可見的，使用者單擊標題後，會顯示出細節資訊。summary元素應該是details元素的第一個子元素。
-
例如：
<details> <summary>標題</summary> 解釋解釋解釋解釋解釋 </details>
-
-
summary元素：為details元素定義可見的標題
-
datalist元素：datalist元素表示可選資料的列表，與input元素結合使用，可以製作出輸入值的下拉列表
-
例如：
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
-
-
datagrid元素：表示可選資料的列表，它以樹形列表的形式來顯示。
-
例如：
<datagrid> <ol> <li> (datagrid row 0) </li> <li> (datagrid row 1) <ol style="list-style-type:lower-alpha;"> <li> (datagrid row 1,0) </li> <li> (datagrid row 1,1) </li> </ol> </li> <li> (datagrid row 2) </li> </ol> </datagrid>
-
-
keygen元素：表示生成祕鑰
<keygen />
-
progress元素：表示執行中的程序，可以使用progress元素來顯示JavaScript中耗時時間的函式的程序
-
例如：
<progress value="22" max="100"></progress> <p><b>註釋：</b>Internet Explorer 9 以及更早的版本不支援 <progress> 標籤。</p>
-
-
meter元素：度量給定範圍（gauge）內的資料
-
例如：
<meter value="3" min="0" max="10">十分之三</meter> <meter value="0.6">60%</meter>
-
-
track元素：定義用在媒體播放器中的文字軌道
-
例如：
<video width="320" height="240"> <source src="myvideo.mp4" type="video/mp4"></source> <source src="myvideo.ogv" type="video/ogg"></source> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese" /> <track kind="subtitles" src="suns_eng.str" srclang="en" label="English" /> </video>
-
-
-
表單元素
-
tel：表示必須輸入電話號碼的文字框
``` <input type="tel" /> ```-
search：表示搜尋框
<input type="search" /> -
url：表示必須輸入URL地址的文字框
<input type="url" /> -
email：表示必須輸入電子郵件地址的文字框
<input type="email" /> -
datetime：表示日期和時間文字框
<input type="datetime" /> -
date：表示日期文字框
<input type="date" /> -
month：表示月份文字框
<input type="month" /> -
week：表示周幾文字框
<input type="week" /> -
time：表示時間文字框
<input type="time" /> -
datetime-local：表示本地日期和時間文字框
<input type="datetime-local" /> -
number：表示必須輸入數字的文字框
<input type="number" /> -
range：表示範圍文字框
<input type="range" /> -
color：表示顏色文字框
<input type="color" />
-
-
HTML5屬性
-
表單屬性
- 為input（type=text）、select、textarea與button元素新增加autofocus屬性。它以指定屬性的方式讓元素在畫面開啟時自動獲取焦點
* 為input（type=text）與textarea元素新增加placeholder屬性，它會對使用者的輸入進行提示，提示使用者可以輸入的內容
* 為input、output、select、textarea、button與fieldset新增加form屬性。宣告它屬於哪個表單，然後將其放置在頁面上任何位置，而不是在表單內。
* 為input元素（type=text）與textarea元素新增加required屬性。該屬性表示在使用者提交的時候進行檢查，檢查該元素內一定要有輸入內容
* 為input元素增加autocomplete、min、max、multiple、pattern和step屬性。同時還有一個新的list元素與datalist元素配合使用。datalist元素與autocomplete屬性配合使用。multiple屬性允許在上傳檔案時一次上傳多個檔案
* 為input元素與button元素增加了新屬性formaction、formenctype、formmethod、formnovalidate與formtarget，它們可以過載form元素的action、enctype、method、novalidate與target屬性。
為fieldset元素增加了disabled屬性，可以把它的子元素設為disabled（無效）狀態。
* 為input元素、button元素、form元素增加了novalidata屬性，該屬性可以取消提交時進行的有關檢查，表單可以被無條件提交。
-
連結屬性
- 為a與area元素增加了media屬性，該屬性規定目標URL是什麼型別的媒介/裝置進行優化的，只能在href屬性存在時使用。
* 為area元素增加了hreflang屬性與rel屬性，以保持與a元素、link元素一致
* 為link元素增加了新屬性sizes。該屬性可以與icon元素結合使用（通過rel屬性），該屬性指定關聯圖示（icon元素）的大小
* 為base元素增加了target屬性，主要目的是保持與a元素的一致性
-
其他屬性
- 為ol元素增加屬性reversed，它指定列表倒序顯示
* 為meta元素增加charset屬性，因為這個屬性已經被廣泛支援了，而且為文件的字元編碼的指定提供了一種比較良好的方式
* 為menu元素增加了兩個新的屬性-type與label。label屬性為選單定義一個可見的標註，type屬性讓選單可以上下文選單、工具條與列表選單3種形式出現
* 為style元素增加async屬性，它定義指令碼是否非同步執行
* 為html元素增加屬性manifest，開發離線web應用程式時它與API結合使用，定義一個URL，在這個URL上描述文件的快取資訊
* 為iframe元素增加3個屬性 ，即sandbox、seamless與srcdoc，用來提高頁面安全性，防止不信任的Web頁面執行某些操作
-
HTML5全域性屬性
-
全域性屬性是指可以用於任何HTML元素的屬性
-
contentEditable：主要功能是允許使用者可線上編輯元素中的內容。contentEditable是一個布林值屬性，可以被指定為true或false
* 注意，該屬性還有一個隱藏的inherit（繼承）狀態，屬性為true，元素被指定為允許編輯；屬性為false是，元素被指定為不允許編輯；未指定true或false是，則有inherit狀態來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。 * 例如： ``` <ul contentEditable="true"> <li>列表元素1</li> <li>列表元素2</li> <li>列表元素3</li> </ul> ``` -
contextmenu：定義
<div>元素的上下文選單。上下文選單在使用者右鍵單擊元素時出現* contextmenu屬性的值是要開啟的`<menu>`元素的id屬性值 * 目前只有Firefox支援contextmenu屬性 * 例如： ``` <div contextmenu="mymenu">上下文選單 <menu type="context" id="mymenu"> <menuitem label="微信分享"></menuitem> <menuitem label="微博分享"></menuitem> </menu> </div> ``` -
data-*：可以自定義使用者資料
* data-*屬性用於儲存頁面或Web應用的私有自定義資料 * data-*屬性賦予所有HTML元素嵌入自定義data屬性的能力 * 儲存自定義資料能夠被頁面的JavaScript指令碼利用，以建立更好的使用者體驗，不進行Ajax呼叫或伺服器端資料庫查詢 * data-*屬性包括兩個部分 * 屬性名：不應該包括任何大寫字母，並且在字首“data-*”之後必須有至少一個字元 * 屬性值：可以是任意字元 * 例如： ``` <ul> <li data-animal-type = "bird">貓頭鷹</li> <li data-animal-type = "fish">鯉魚</li> <li data-animal-type = "spider">蜘蛛</li> </ul> <script type="text/javascript"> var lis = document.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { console.log(lis[i].dataset.animalType); } </script> ``` -
dropzone：定義在元素上拖動資料時，是否複製、移動或連結被拖動資料
* copy：拖動資料會產生被拖動資料的副本 * move：拖動資料會導致被拖動資料被移動到新位置 * link：拖動資料會產生指向原始資料的連結 * 目前所有主流瀏覽器都不支援dropzone屬性 * 例如： ``` <div dropzone="copy"></div> ``` -
draggable：可以定義元素是否可以被拖動。
* true：定義元素可拖動 * false：定義元素不可拖動 * auto：定義使用瀏覽器的預設行為 * 例如： ``` <p draggable="true">可以拖動</p> <p draggable="false">不可以拖動</p> <p draggable="auto">預設</p> ``` -
hidden：在所有元素中都包含一個hidden屬性。
* 該屬性設定元素的可見狀態，取值為一個布林值，當設為true是，元素處於不可見狀態；當設定為false是，元素處於可見狀態。 * hidden屬性可用於防止使用者檢視元素，直到匹配到某些條件，如選擇了某個複選框。然後，在頁面載入之後，可以使用JavaScript指令碼刪除該屬性，刪除之後該元素變為可見狀態，同時元素中的內容也即時顯示出來 * 例如： ``` <p hidden>這個段落應該被隱藏</p> ``` -
spellcheck:spellcheck屬性定義是否對元素進行拼寫和語法檢查
* input元素中的文字值（非密碼） * `<textarea>`元素中的文字 * 可編輯元素中的文字 * spellcheck屬性是一個布林值的屬性，取值包括true和false，為true時表示對元素進行拼寫和語法檢查，為false時則不檢查元素。 * 例一： ``` <!--以下兩種書寫方法正確-->
```
* 例二：
```
<p contenteditable="true" spellcheck="true">這是一段可編輯的段落</p>
```
-
translate:translate屬性定義是否應該翻譯元素內容
* yes：定義應該翻譯元素內容 * no:定義不應該翻譯元素內容 * 例如： ``` <p translate="no">請勿翻譯本段。</p> <p>本段可被翻譯為任意語言。</p> ```
