HTML 參考手冊

一僵朗、有哪些特點

1、DOCTYPE及字符編碼

<!doctype html>  //
<html lang="zh-cn">  //文檔語言
<meta charset="utf-8">  //字符編碼

2、大小寫都可以

<Input tYpe=RadiO>  //不區(qū)分大小寫

3衣迷、布爾值

<input type="checkbox" checked/>  //checked表示true畏鼓，不寫就是false

4、省略引號

<input type="checkbox" checked/>  //寫兩個引號
<input type='text'/>    //寫單引號
<input type=radio>      //不寫引號

出現(xiàn)了空格必須要寫引號

5壶谒、可以進行省略的標簽

最好還是按照規(guī)范書寫云矫。

不允寫結(jié)束符的標簽：
area、basebr汗菜、col让禀、command、embed陨界、hr巡揍、img、input菌瘪、keygen腮敌、link、meta俏扩、param糜工、source、track录淡、wbr
可以省略結(jié)束符的標簽：
li捌木、dt、dd嫉戚、p刨裆、rt、optgroup彬檀、option帆啃、colgroup、thread凤覆、tbody链瓦、tr、td盯桦、th
可以完全省略的標簽：
html、head渤刃、body拥峦、colgroup、tbody

^[2]

二卖子、新增的標簽

2.1 新增的結(jié)構(gòu)標簽

section元素
表示頁面中的一個內(nèi)容區(qū)塊略号，比如張杰、頁眉、頁腳或頁面的其他部分玄柠⊥幻危可以和h2\h3等元素結(jié)合使用，表示文檔結(jié)構(gòu)羽利，比如html5中<section>...</section> html4中<div>...</div>
article元素
表示頁面中一塊與上下文不相關(guān)的獨立內(nèi)容宫患。比如一篇文章。
aside元素
表示與article元素內(nèi)容之外的这弧，與article元素內(nèi)容相關(guān)的輔助信息娃闲。
header元素
表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標題。
hgroup元素
表示對整個頁面或頁面中的一個內(nèi)容區(qū)塊的標題進行組合匾浪。
footer元素
表示整個頁面或頁面中的一個內(nèi)容區(qū)塊的的腳注皇帮。一般來說，會包含創(chuàng)作者的姓名蛋辈，創(chuàng)作日期以及創(chuàng)作這的聯(lián)系信息属拾。
nav元素
表示頁面中導(dǎo)航鏈接的部分。
figure元素
表示一段獨立的流內(nèi)容冷溶，一般表示文檔主題流內(nèi)容中的一個獨立單元

^[3]

2.2 新增的媒體標簽

video標簽
定義視頻渐白，像電影片段或其他視頻流，例：

<video src="movie.ogg" controls="controls">這是XXX的視頻</video>

audio標簽
定義音頻挂洛，如音樂或其他音頻流礼预。例：

<audio src="someaudio.wav">audio標簽</audio>

embed標簽
用來嵌入內(nèi)容（包括各種媒體）。格式可以是midi虏劲、wav托酸、aiff、au柒巫、MP3励堡、flash等。例：

<embed src="flash.swf"/>

^[4]

2.3 新增表單控件標簽

email //必須輸入email
url //必須輸入url地址
number //必須輸入數(shù)值
range //必須輸入一定范圍內(nèi)數(shù)值
Date Pickers（日期選擇器）堡掏，擁有多個可供選擇的日期和時間的新輸入類型：
date - 選取日月年
month - 選取月应结、年
week - 選取周和年
time - 選取時間
datetime - 選取時間、日泉唁、月鹅龄、年（UTC時間）
datetime-local - 選取時間、日亭畜、月璃俗、年（本地時間）
search
color

^[5]

2.4 新增的其他標簽

mark標簽
主要用來在視覺上向用戶呈現(xiàn)哪些需要突出顯示或高亮現(xiàn)實的文字笨篷，典型應(yīng)用搜索結(jié)果中高亮顯示搜索關(guān)鍵字
<html5>: <mark></mark>;
progress標簽
表示運行中的進程，可以使用progress標簽顯示JS中耗時時間函數(shù)的進程，等待中...、請稍后等。

<progress max="100" value="85"><span>85</span>%</progress>

time標簽

<p>"發(fā)布日期"<time datetime="2017-10-20T09:00Z">9:00</time>    //T表示時間和日期的分隔符，Z表示UTC時間制
      "更新日期"<time datetime="2017-10-20T09:00Z" pubdate>9:00</time>
</p>

ruby標簽
對內(nèi)容進行注釋

<ruby>"厼"<rt> </rt>     //rt表示注釋內(nèi)容
    <rp>(</rp>
    "ㄩㄜ ㄇ "<rp>)</rp>    //rp表示瀏覽器不支持時的顯示
</ruby>

wbr標簽
軟換行：當(dāng)頁面足夠?qū)挷粨Q行，當(dāng)頁面小了之后換行
canvas標簽
跟著script進行圖形的繪制

圖形繪制
command標簽

<menu>
  command onclick="alert('hello world')" label="click">
  "Click Me!"
</menu>   //兼容性不是很好

details標簽

<details open>
    <summary>MacBook Pro Sepcification</summary>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</details>

details的使用效果

datalist標簽

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input id="myCar" list="cars">
    <datalist id="cars">
        <option value="BMW"></option>
        <option value="Ford"></option>
        <option value="Volvo"></option>
    </datalist>
</form>

keygen標簽
<keygen> 標簽規(guī)定用于表單的密鑰對生成器字段樟凄。
當(dāng)提交表單時，私鑰存儲在本地兄渺，公鑰發(fā)送到服務(wù)器缝龄。

<form action="demo_keygen.asp" method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    <input type="submit" />
</form>

火狐瀏覽器支持較好

output標簽

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0
    <input type="range" id="a" value="50">
    100+
    <input type="number" id="a" value="50">
    =
    <output name="x" for="a b">
        139
    </output>
</form>

source標簽
<source> 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<source> 標簽允許您規(guī)定可替換的視頻/音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進行選擇溶耘。

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
</audio>

menu標簽

<menu type="toolbar">
    <li><input type="checkbox" />Red</li>
    <li><input type="checkbox" />Blue</li>
</menu>

^[6]

三二拐、新增及廢除的屬性

3.1 表單屬性

manifest
表示定義應(yīng)用離線文件的本地文件，也就是應(yīng)用程序緩存 :

<!DOCTYPE HTML>
<html manifest="demo.appcache">  //定義緩存文件
<body>
文檔內(nèi)容......
</body>
</html>

禁用緩存的方法：

<meta http-equiv="pragma" content="no-cache">

charset

<meta charset="utf-8">

link logo的sizes屬性

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16">

base target屬性
base標簽

<base href="http://localhost/" target="_blank">

-script 標簽的defer和async屬性

<script defer src="http://code.jquery.com/jquery-1.10.1.min.js" onload="alert('a')"></script>
<script async src="http://code.jquery.com/jquery-1.10.1.min.js" onload="alert('b')"></script>

上面的代碼會先彈出“b”凳兵，defer表示延緩加載百新，async表示異步加載

a標簽的media和其他屬性

<a media="handheld" href="#">手持</a>  //為手持設(shè)備優(yōu)化
<a media="tv" href="#">電視</a>  //為TV優(yōu)化
<a href="#" hreflang="zh" ref="external">慕課網(wǎng)</a>  //external表示這是一個外部超鏈接

ol標簽的start和reversed屬性

<ol start="50" reversed>  //他會從50開始倒序顯示
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

menu 的type屬性
HTML <menu> 標簽
目前所有主流瀏覽器都不支持 <menu> 標簽。
scoped
內(nèi)嵌css樣式

<div>
    <style type="text/css" scoped>
        h1 {color: red;}
        p {color: blue;}
    </style>  //這里定義的樣式只對該div標簽下的元素作用
    <h1>This is a head</h1>
    <p>This is a paragragh</p>
</div>

iframe增加的屬性

<iframe seamless srcdoc="<h1>Hello</h1>" sandbox src="http://baidu.com"></iframe>

seamless：該框架沒有邊距庐扫，也沒有邊框饭望；
srcdoc：嵌入框架的內(nèi)容，和后面的src同時存在形庭，瀏覽器會忽略src的內(nèi)容铅辞；
sandbox：表示iframe受到嚴格安全限制。嵌入的百度萨醒，表單提交不能使用了斟珊。他會禁用三個：禁止提交表單、禁止運行JS富纸、內(nèi)嵌頁面和該頁面不是同源的囤踩，是異源。他還有四個值：allow-forms晓褪、allow-same-origin(允許 iframe 內(nèi)容被視為與包含文檔有相同的來源)堵漱、allow-script、allow-top-navigation(允許 iframe 內(nèi)容從包含文檔導(dǎo)航加載內(nèi)容)

刪除的屬性多是可用CSS代替的屬性
html5新增及廢除屬性

^[7]

四涣仿、全局屬性

data-yourvalue

<form data-type="comment" class="container">  //自定義屬性

hidden

<label hidden>隱藏的東西</label>

spellcheck 語法糾錯

<textarea tabindex="2" spellcheck="true" cols="60" rows="5"></textarea>

tabindex 表示用tab鍵的切換順序

<input tabindex="1">

contenteditable 讓標簽變成可輸入的

<p contenteditable="true">請您留言</p>

desginMode
JS的一個屬性可以讓頁面任意位置變成可輸入的勤庐，但實用度不高

<script>window.document.designMode = 'on' ;</script>

HTML5