一拐揭、HTML語義化
1. HTML語義化是什么娶吞？
根據(jù)內(nèi)容玄窝，選擇使用最恰當(dāng)?shù)臉?biāo)簽牵寺，看到標(biāo)簽就能知道內(nèi)容和結(jié)構(gòu)。
2. HTML語義化好處
- 在沒有CSS樣式的情況下哆料，內(nèi)容結(jié)構(gòu)也可以很好呈現(xiàn)
- 使得HTML代碼結(jié)構(gòu)清晰缸剪，便于維護和開發(fā)
- 提升搜索引擎優(yōu)化(SEO)的效果吗铐。爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重东亦，使用語義化標(biāo)簽可以和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息
- 便于團隊開發(fā)和維護唬渗，減少差異化
3.語義化標(biāo)簽舉例
- h1-h6 標(biāo)簽典阵，標(biāo)題標(biāo)簽
<h1>這是標(biāo)題 1</h1>
<h2>這是標(biāo)題 2</h2>
<h3>這是標(biāo)題 3</h3>
<h4>這是標(biāo)題 4</h4>
<h5>這是標(biāo)題 5</h5>
<h6>這是標(biāo)題 6</h6>
- <header> 標(biāo)簽，定義文檔節(jié)頁眉
<header>
<h1>Welcome to my page</h1>
<p>My name is Qiu</p>
</header>
- <main> 標(biāo)簽镊逝，規(guī)定文檔的主要內(nèi)容
<main>
<h1>My page content</h1>
<p>qqqqqqqqqqqqq</p>
<article>
<h1>content 1</h1>
<p>ppppppppp</p>
</article>
<article>
<h1>content 2r</h1>
<p>iiiiiiiiiiiii</p>
</article>
</main>
- <footer> 標(biāo)簽壮啊，定義文檔或節(jié)的頁腳
<footer>
<p>Posted by: qiudingding</p>
<p>Contact information:
<a href="mailto:someone@example.com">someone@example.com</a>.
</p>
</footer>
二、HTML5簡單解析
1. 新特性
- 用于媒介回放的 video 和 audio 元素
- 用于繪畫的 canvas 元素
- 對本地離線存儲的更好的支持
- 新的特殊內(nèi)容元素撑蒜，比如 article歹啼、footer玄渗、header、nav狸眼、section
- 新的表單控件藤树，比如 calendar、date拓萌、time岁钓、email、url微王、search
2. 部分標(biāo)簽解析
（1）<video> 視頻標(biāo)簽
<video src="movie.ogg" width="320" height="240" controls="controls">
</video>
- 當(dāng)前只支持三種視頻格式屡限，Ogg 、MPEG4 炕倘、WebM
- 允許多個視頻資源钧大，source 元素可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
</video>
- 標(biāo)簽屬性罩旋，autoplay（添加后視頻準(zhǔn)備就緒即播放）拓型、controls（添加后向用戶顯示控件，如播放按鈕）瘸恼、height（播放器高度）劣挫、width（播放器寬度）、loop（播放結(jié)束后重復(fù)播放）东帅、preload（預(yù)加載）压固，src（資源）
- 有對應(yīng)的方法、屬性及事件靠闭，如currenSrc屬性帐我、play()方法、puase事件等
（1）<audio> 音頻標(biāo)簽
<audio src="song.ogg" controls="controls"></audio>
- 當(dāng)前只支持三種音頻格式愧膀，Ogg 拦键、MP3、Wav
- 允許多個音頻資源檩淋，source 元素可以鏈接不同的視頻文件芬为，瀏覽器將使用第一個可識別的格式
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
- 標(biāo)簽屬性，與video標(biāo)簽屬性相同
- 有對應(yīng)的方法蟀悦、屬性及事件媚朦，如currentTime屬性、play()方法等
（3）<canvas>繪畫標(biāo)簽日戈，canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像
- 創(chuàng)建畫布询张，畫出一個紅色的矩形
<canvas id="myCanvas" width="200" height="100"></canvas>
var canvas=document.getElementById('myCanvas'); //通過 id 找到canvas 元素
var ctx=canvas.getContext('2d'); // 創(chuàng)建 context 對象
ctx.fillStyle='#FF0000'; // 將其染成紅色，
ctx.fillRect(0,0,80,100); // 確定了形狀浙炼、位置和尺寸份氧。
- canvas 標(biāo)簽可以畫出各種不同形狀的圖案唯袄，需使用到不同API，詳見文檔
3. 本地儲存的優(yōu)化
（1）localStorage - 沒有時間限制的數(shù)據(jù)存儲
localStorage.setItem('a','1') //設(shè)置緩存蜗帜，key-value
localStorage.getItem('a') //獲取緩存越妈，key
localStorage.clearItem() //清除緩存
（2）sessionStorage（回話儲存） - 針對一個 session 的數(shù)據(jù)存儲
sessionStorage .setItem('a','1') //設(shè)置緩存，key-value
sessionStorage .getItem('a') //獲取緩存钮糖，key
sessionStorage .clearItem() //清除緩存
（3）兩者的異同
相同點
- 與HTTP無關(guān)梅掠，HTTP不會帶上其值
- 只有相同域名的頁面才能互相讀取值
- 每個域名最大儲存量為5M，視瀏覽器情況不同有不同大小
相同點
- sessionStorage 在回話（頁面）關(guān)閉后會消失
- localStorage 永遠不會消失店归，除非用戶清理
4. 應(yīng)用緩存
HTML5 引入了應(yīng)用程序緩存阎抒，這意味著 web 應(yīng)用可進行緩存，并可在沒有因特網(wǎng)連接時進行訪問消痛。
優(yōu)點
- 離線瀏覽 - 用戶可在應(yīng)用離線時使用它們
- 速度 - 已緩存資源加載得更快
- 減少服務(wù)器負載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
- 詳情可查閱文檔
5. 表單
（1）input類型
HTML5 擁有多個新的表單輸入類型且叁。這些新特性提供了更好的輸入控制和驗證。
- email：email 類型用于應(yīng)該包含 e-mail 地址的輸入域秩伞，在提交表單時逞带，會自動驗證 email 域的值
<input type="email" name="user_email" />
- url：url 類型用于應(yīng)該包含 URL 地址的輸入域在提交表單時，會自動驗證 url 域的值
<input type="url" name="user_url" />
- number：number 類型用于應(yīng)該包含數(shù)值的輸入域
<input type="number" name="points" min="1" max="10" />
/*
min max value(默認值)
step(規(guī)定合法的數(shù)字間隔（如果 step="3"纱新，則合法的數(shù)是 -3,0,3,6 等）)
*/
- range：用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域展氓，顯示為滑動條
<input type="range" name="points" min="1" max="10" />
- Date pickers (date, month, week, time, datetime, datetime-local)：多個可供選取日期和時間的新輸入類型
<input type="date" name="user_date" />
- search：search 類型用于搜索域，比如站點搜索或 Google 搜索脸爱，search 域顯示為常規(guī)的文本域
