HTML5為新增了很多特性腹忽，下面我們來詳細(xì)探索一下
- 什么是HTML
- W3C對HTML5的需求整體原則
- DOCTYPE 和字符編碼charset聲明
- 新增的語義/結(jié)構(gòu)化標(biāo)簽
- HTML4 --> HTML5語義化標(biāo)簽遷移
- 新增的input的type類型和屬性
- HTML5專有的API 地理位置 本地存儲 緩存等
- 新的圖形標(biāo)簽 svg canvas 二者區(qū)別
- 新的多媒體標(biāo)簽 video audio source
- 瀏覽器支持度
- 廢棄的一些元素標(biāo)簽
- 自定義元素標(biāo)簽
- 解決瀏覽器兼容性的 HTML5Shiv
HTML擴(kuò)展名.html和.htm的區(qū)別
HTML5
一拷橘、W3C對HTML5的需求整體原則：
- 新特性應(yīng)該基于 HTML盒粮、CSS芹敌、DOM 以及 JavaScript。
- 減少對外部插件的需求（比如 Flash）
更優(yōu)秀的錯誤處理- 更多取代腳本的標(biāo)記
- HTML5 應(yīng)該獨(dú)立于設(shè)備
- 開發(fā)進(jìn)程應(yīng)對公眾透明
二萄涯、什么是HTML:
- HTML是創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言
- HTML描述了使用標(biāo)記的網(wǎng)頁結(jié)構(gòu)
- HTML元素由標(biāo)簽顯示
- 瀏覽器不會顯示HTML標(biāo)簽妄帘，而是使用它們呈現(xiàn)頁面的內(nèi)容
三、DOCTYPE聲明
<!Doctype html>
四兄裂、字符編碼聲明：
<meta charset="UTF-8"> //不寫的話HTML5默認(rèn)也是UTF-8
- 一鍵生成的網(wǎng)頁結(jié)構(gòu)：
<!DOCTYPE html> //
<html>
<head>
<meta charset="UTF-8"> //
<title>標(biāo)題</title>
</head>
<body>
內(nèi)容
</body>
</html>
五句旱、新增的語義/結(jié)構(gòu)化標(biāo)簽 Semantic
| 標(biāo)簽 | 標(biāo)簽 |
|---|---|
| <article>文檔中定義文章內(nèi)容 | <aside> |
| <details> | <dialog> |
| <figcaption> | <figure> img和figcaption組合放在figure里 |
| <footer> 一個文檔可以有多個footer | <header>一個文檔可以有多個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語義化標(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> |
- 這也是為什么識別不了的元素通過 HTML5Shiv自動轉(zhuǎn)換識別啦
七恃泪、新增的input類型和屬性
| 類型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圖形的語言
- Canvas隨時隨地繪制2D圖形(使用JavaScript)
- SVG是基于XML的碎税，這意味著每個元素在SVG DOM中都可用匾南。你可以為每個元素添加JavaScript事件處理程序
- 在SVG中啃匿，每個繪制的形狀都會被記憶為一個對象。如果SVG對象的書香發(fā)生變化蛆楞，瀏覽器可以自動重新渲染形狀溯乒。
- Canvas是一像素一像素地渲染。在畫布中豹爹，一旦圖形繪制好了裆悄，就會被瀏覽器遺忘。如果你想改變某一個的位置臂聋，整個場景都需要重新繪制光稼，包括可能已經(jīng)被圖形覆蓋的任何對象。
| Canvas | SVG |
|---|---|
| 與分辨率相關(guān)(可以理解為位圖孩等，圖形放大會失真看到一個個像素點(diǎn)) | 與分辨率無關(guān)(可以理解為矢量艾君，圖形放大不會失真) |
| 不支持事件處理程序 | 支持事件處理程序 |
| 文字呈現(xiàn)功能比較簡單 | 最適合具有大型渲染區(qū)域地應(yīng)用程序(如Google地圖) |
| 可以將生成的圖像保存為.png或.jpg | 如果復(fù)雜地話渲染速度慢(其實(shí)任何使用DOM的東西都會很慢) |
| 非常適合圖形密集性游戲 | 不適合游戲應(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> //通過腳本(通常是JavaScript) 動態(tài)繪制圖形
你以為下面的美圖是jpg,png嗎腻贰，Come on babe吁恍，用svg幾段代碼搞定扒秸，才只占幾k內(nèi)存!
-
總有一天播演，你也會輕輕松松幾行代碼畫出優(yōu)美的藝術(shù)
wrk.png 再看看這個，svg怎么能少得了Illustrator和svg編輯器呢~~
parrot.png
- 沒事伴奥，近期正在鉆研SVG写烤，有合適的demo我會集中起來發(fā)文，記得常來看看寡人~
九拾徙、新的多媒體標(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 本地存儲
- HTML Application Cache 應(yīng)用程序緩存
- HTML Web Workers web工作者
- HTNL SSE
十一暂衡、瀏覽器的支持度
- 所有現(xiàn)代瀏覽器都支持HTML5
- 另外，對于新舊瀏覽器崖瞭，無法識別的元素狂巢，作為內(nèi)聯(lián)自動處理
十二、語義元素轉(zhuǎn)換為塊元素：
- HTML5新定義了8個新的語義化元素书聚，全都是塊元素
- 如果像確保新老瀏覽器都支持唧领，我們可以手動設(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)簽名字雌续，你開心不就好啦~
你好斩个，我是Amelia
</aaa>
</body>
1
高能預(yù)警：傻缺IE8(及以前)不允許未知元素
- HTML5Shiv是一個針對 IE 瀏覽器的 HTML5 JavaScript 補(bǔ)丁，目的是讓 IE 識別并支持 HTML5 元素驯杜。
- HTML5Shiv包裹在<head>元素里受啥，
- 是一個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> 首字母縮寫 | <abbr> |
| <applet> | <object> |
| <basefont> 頁面上默認(rèn)字體顏色和字號 | CSS樣式 |
| <big> 更大的文本 | CSS樣式 |
| <center> 文本水平居中 | CSS樣式 |
| <dir> 目錄列表 | CSS樣式 |
| <font> 字體外觀，尺寸再悼，顏色 | CSS樣式 |
| <frame> 定義子窗口 | |
| <frameset> 定義框架集 | |
| <noframes> 向?yàn)g覽器顯示無法處理框架的提示文本核畴，位于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)簽對網(wǎng)頁可用性的負(fù)面影響
十五冲九、其他細(xì)節(jié)
- 閉合標(biāo)簽谤草，雙標(biāo)簽不寫那個閉合的標(biāo)簽不會出現(xiàn)解析錯誤，但是建議閉合
<section>
<p>This is a paragraph. //沒有</p>
<p>This is a paragraph.
</section>
- 單標(biāo)簽元素建議加 /來閉合莺奸；但在XHTML和XML文檔中是必須要加的
<meta charset="utf-8">
<meta charset="utf-8" /> //兩個都行
- HTML5元素命名 & class等屬性名允許混合使用大寫和小寫字母丑孩，但建議用小寫
- 1.混合使用本身就不符合命名習(xí)慣
- 2.視覺更干凈
- 3.小寫更容易編寫
- 引號括起來的屬性現(xiàn)在允許去掉，下面的例子都不會報錯灭贷，
<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通過meta標(biāo)簽達(dá)到監(jiān)聽并適配設(shè)備屏幕的布局
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 擴(kuò)展名.html和.htm的差異：
- 解析方面是沒有區(qū)別的甚疟。任何瀏覽器Wen服務(wù)器都會將它們視為HTML
- 兩者的差異體現(xiàn)在文化發(fā)展層面：
.htm 可以察覺早期講擴(kuò)展名限制為3個字符的DOS系統(tǒng) .html 不會特定去識別Unix操作系統(tǒng)的這個擴(kuò)展名字符限制- 技術(shù)層面的差異：
* 當(dāng)URL沒有指定文件名時(比如：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
* 不過服務(wù)器可以配置多個默認(rèn)的文件名拄丰，所以你可以根據(jù)需要設(shè)置多個默認(rèn)文件名
* 總而言之，HTML文件的完整擴(kuò)展名是.html俐末，我們沒有理由不用它啊~~~
