HTML5為新增了很多特性，下面我們來(lái)詳細(xì)探索一下
- 什么是HTML
- W3C對(duì)HTML5的需求整體原則
- DOCTYPE 和字符編碼charset聲明
- 新增的語(yǔ)義/結(jié)構(gòu)化標(biāo)簽
- HTML4 --> HTML5語(yǔ)義化標(biāo)簽遷移
- 新增的input的type類(lèi)型和屬性
- HTML5專(zhuān)有的API 地理位置 本地存儲(chǔ) 緩存等
- 新的圖形標(biāo)簽 svg canvas 二者區(qū)別
- 新的多媒體標(biāo)簽 video audio source
- 瀏覽器支持度
- 廢棄的一些元素標(biāo)簽
- 自定義元素標(biāo)簽
- 解決瀏覽器兼容性的 HTML5Shiv
HTML擴(kuò)展名.html和.htm的區(qū)別
HTML5
一、W3C對(duì)HTML5的需求整體原則：
- 新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。
- 減少對(duì)外部插件的需求（比如 Flash）
更優(yōu)秀的錯(cuò)誤處理- 更多取代腳本的標(biāo)記
- HTML5 應(yīng)該獨(dú)立于設(shè)備
- 開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明
二、什么是HTML:
- HTML是創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言
- HTML描述了使用標(biāo)記的網(wǎng)頁(yè)結(jié)構(gòu)
- HTML元素由標(biāo)簽顯示
- 瀏覽器不會(huì)顯示HTML標(biāo)簽，而是使用它們呈現(xiàn)頁(yè)面的內(nèi)容
三、DOCTYPE聲明
<!Doctype html>
四、字符編碼聲明：
<meta charset="UTF-8"> //不寫(xiě)的話HTML5默認(rèn)也是UTF-8
- 一鍵生成的網(wǎng)頁(yè)結(jié)構(gòu)：
<!DOCTYPE html> //
<html>
<head>
<meta charset="UTF-8"> //
<title>標(biāo)題</title>
</head>
<body>
內(nèi)容
</body>
</html>
五、新增的語(yǔ)義/結(jié)構(gòu)化標(biāo)簽 Semantic
| 標(biāo)簽 | 標(biāo)簽 |
|---|---|
| <article>文檔中定義文章內(nèi)容 | <aside> |
| <details> | <dialog> |
| <figcaption> | <figure> img和figcaption組合放在figure里 |
| <footer> 一個(gè)文檔可以有多個(gè)footer | <header>一個(gè)文檔可以有多個(gè)header |
| <main> | <mark> |
| <nav> 導(dǎo)航 | <section> 在文檔中定義部分 |
| <summary> | <time> |
123
<figure>
//img和figcaption可以組合放在figure里
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
六、HTML4 到HTML5語(yǔ)義化標(biāo)簽遷移
| HTML4 | HTML5 |
|---|---|
| <div id="header"></div> | <header> |
| <div id="menu"></div> | <nav> |
| <div id="content"></div> | <section> |
| <div class="article"></div> | <article> |
| <div id="footer"></div> | <footer> |
- 這也是為什么識(shí)別不了的元素通過(guò) HTML5Shiv自動(dòng)轉(zhuǎn)換識(shí)別啦
七、新增的input類(lèi)型和屬性
| 類(lèi)型type | 屬性attribute |
|---|---|
| color | autocomplete |
| date | autofocus |
| datetime | form |
| datetime-local | formaction |
| formenctype | |
| month | formmethod |
| number | formnovalidate |
| range | formtarget |
| search | height and width |
| tel | list |
| search | min and max |
| time | pattern(regexp) |
| url | placeholder |
| week | required |
| ? | step |
| ? | mutiple |
| 其他 | 其他 |
八、新的圖形標(biāo)簽：
SVG
- 代表可縮放矢量圖形
- SVG用于為Web定義圖形
- SVG是W3C的建議
SVG與Canvas區(qū)別
- SVG適用于描述XML中的2D圖形的語(yǔ)言
- Canvas隨時(shí)隨地繪制2D圖形(使用JavaScript)
- SVG是基于XML的，這意味著每個(gè)元素在SVG DOM中都可用。你可以為每個(gè)元素添加JavaScript事件處理程序
- 在SVG中，每個(gè)繪制的形狀都會(huì)被記憶為一個(gè)對(duì)象。如果SVG對(duì)象的書(shū)香發(fā)生變化，瀏覽器可以自動(dòng)重新渲染形狀。
- Canvas是一像素一像素地渲染。在畫(huà)布中，一旦圖形繪制好了，就會(huì)被瀏覽器遺忘。如果你想改變某一個(gè)的位置，整個(gè)場(chǎng)景都需要重新繪制，包括可能已經(jīng)被圖形覆蓋的任何對(duì)象。
| Canvas | SVG |
|---|---|
| 與分辨率相關(guān)(可以理解為位圖，圖形放大會(huì)失真看到一個(gè)個(gè)像素點(diǎn)) | 與分辨率無(wú)關(guān)(可以理解為矢量，圖形放大不會(huì)失真) |
| 不支持事件處理程序 | 支持事件處理程序 |
| 文字呈現(xiàn)功能比較簡(jiǎn)單 | 最適合具有大型渲染區(qū)域地應(yīng)用程序(如Google地圖) |
| 可以將生成的圖像保存為.png或.jpg | 如果復(fù)雜地話渲染速度慢(其實(shí)任何使用DOM的東西都會(huì)很慢) |
| 非常適合圖形密集性游戲 | 不適合游戲應(yīng)用程序 |
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> //描邊綠色，填充黃色的圓，半徑40px
<canvas id="myCanvas" width="200" height="100"></canvas> //通過(guò)腳本(通常是JavaScript) 動(dòng)態(tài)繪制圖形
你以為下面的美圖是jpg,png嗎，Come on babe，用svg幾段代碼搞定，才只占幾k內(nèi)存!
-
總有一天，你也會(huì)輕輕松松幾行代碼畫(huà)出優(yōu)美的藝術(shù)
wrk.png 再看看這個(gè)，svg怎么能少得了Illustrator和svg編輯器呢~~
parrot.png
- 沒(méi)事，近期正在鉆研SVG，有合適的demo我會(huì)集中起來(lái)發(fā)文，記得常來(lái)看看寡人~
九、新的多媒體標(biāo)簽
| video | audio |
|---|---|
| source | embed |
| track |
<audio controls>
<!--source多配合audio video內(nèi)部標(biāo)簽使用 -->
<source src="horse.ogg" type="audio/ogg">
你的瀏覽器不支持音頻文件
</audio>
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<!--主瀏覽器都不支持，track目前不用深究-->
<!--標(biāo)簽定義嵌入的內(nèi)容，比如插件-->
<embed src="" />
十、新的HTML5的API
- (Application Programming Interface)--應(yīng)用程序編程接口
- HTML Geolocation 地理位置
- HTML Drag & Drop拖放
- HTML Local Storage 本地存儲(chǔ)
- HTML Application Cache 應(yīng)用程序緩存
- HTML Web Workers web工作者
- HTNL SSE
十一、瀏覽器的支持度
- 所有現(xiàn)代瀏覽器都支持HTML5
- 另外，對(duì)于新舊瀏覽器，無(wú)法識(shí)別的元素，作為內(nèi)聯(lián)自動(dòng)處理
十二、語(yǔ)義元素轉(zhuǎn)換為塊元素：
- HTML5新定義了8個(gè)新的語(yǔ)義化元素，全都是塊元素
- 如果像確保新老瀏覽器都支持，我們可以手動(dòng)設(shè)置CSS樣式
header, section, footer, aside, nav, main, article, figure {
display: block;
}
十三、可以自定義標(biāo)簽名字
- 自定義標(biāo)簽和style樣式
<style>
display: block;
width: 400px;
height: 300px;
background: lightpink;
margin-left: 100px;
margin-top: 100px;
font-size: 30px;
text-align: center;
line-height: 300px;
color: green;
</style>
<body>
<aaa> //隨便取的標(biāo)簽名字，你開(kāi)心不就好啦~
你好，我是Amelia
</aaa>
</body>
1
高能預(yù)警：傻缺IE8(及以前)不允許未知元素
- HTML5Shiv是一個(gè)針對(duì) IE 瀏覽器的 HTML5 JavaScript 補(bǔ)丁，目的是讓 IE 識(shí)別并支持 HTML5 元素。
- HTML5Shiv包裹在<head>元素里，
- 是一個(gè)js外部文件
- 在使用HTML5新元素就可以引入它了
<head>
// 下面是HTML的條件注釋判斷。只給懂的人...呸、瀏覽器看
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- HTML5標(biāo)簽-->
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
</section>
</body>
十四、HTML5刪除/廢棄不能用的元素
| 刪除的元素 | 被以下替代 |
|---|---|
| <acronym> 首字母縮寫(xiě) | <abbr> |
| <applet> | <object> |
| <basefont> 頁(yè)面上默認(rèn)字體顏色和字號(hào) | CSS樣式 |
| <big> 更大的文本 | CSS樣式 |
| <center> 文本水平居中 | CSS樣式 |
| <dir> 目錄列表 | CSS樣式 |
| <font> 字體外觀，尺寸，顏色 | CSS樣式 |
| <frame> 定義子窗口 | |
| <frameset> 定義框架集 | |
| <noframes> 向?yàn)g覽器顯示無(wú)法處理框架的提示文本，位于frameset元素中 | |
| <strike> 文本添加刪除線 | CSS樣式，<s>或<del> |
| <tt> 定義打字機(jī)文本 | CSS樣式 |
<acronym title="World Wide Web">WWW</acronym> //換成了abbr
<basefont color="red" size="5" /> //CSS樣式替代
<frame></frame>
<frameset></frameset> //該標(biāo)簽對(duì)網(wǎng)頁(yè)可用性的負(fù)面影響
十五、其他細(xì)節(jié)
- 閉合標(biāo)簽，雙標(biāo)簽不寫(xiě)那個(gè)閉合的標(biāo)簽不會(huì)出現(xiàn)解析錯(cuò)誤，但是建議閉合
<section>
<p>This is a paragraph. //沒(méi)有</p>
<p>This is a paragraph.
</section>
- 單標(biāo)簽元素建議加 /來(lái)閉合；但在XHTML和XML文檔中是必須要加的
<meta charset="utf-8">
<meta charset="utf-8" /> //兩個(gè)都行
- HTML5元素命名 & class等屬性名允許混合使用大寫(xiě)和小寫(xiě)字母，但建議用小寫(xiě)
- 1.混合使用本身就不符合命名習(xí)慣
- 2.視覺(jué)更干凈
- 3.小寫(xiě)更容易編寫(xiě)
- 引號(hào)括起來(lái)的屬性現(xiàn)在允許去掉，下面的例子都不會(huì)報(bào)錯(cuò)，
<table class="striped"> //建議用
<table class=striped> //不建議用
<table class=table striped> //更不建議用
- 在HTML5標(biāo)準(zhǔn)里，<html>,<body>,<header>標(biāo)簽甚至是可以省略的，但不建議哦~
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
- HTML5通過(guò)meta標(biāo)簽達(dá)到監(jiān)聽(tīng)并適配設(shè)備屏幕的布局
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 擴(kuò)展名.html和.htm的差異：
- 解析方面是沒(méi)有區(qū)別的。任何瀏覽器Wen服務(wù)器都會(huì)將它們視為HTML
- 兩者的差異體現(xiàn)在文化發(fā)展層面：
.htm 可以察覺(jué)早期講擴(kuò)展名限制為3個(gè)字符的DOS系統(tǒng) .html 不會(huì)特定去識(shí)別Unix操作系統(tǒng)的這個(gè)擴(kuò)展名字符限制- 技術(shù)層面的差異：
* 當(dāng)URL沒(méi)有指定文件名時(shí)(比如：https://www.w3schools.com/css/)，服務(wù)器將返回默認(rèn)的文件名，通用的默認(rèn)文件名是：index.html、index.htm、default.html、和default.html
* 但如果你的服務(wù)器僅配置了“index.html”作為默認(rèn)文件名，那么你的文件就必須命名index.html，不能用index.htm
* 不過(guò)服務(wù)器可以配置多個(gè)默認(rèn)的文件名，所以你可以根據(jù)需要設(shè)置多個(gè)默認(rèn)文件名
* 總而言之，HTML文件的完整擴(kuò)展名是.html，我們沒(méi)有理由不用它啊~~~
