如何理解HTML語義化

歷史：以前的html都是一堆沒有語義的冷冰冰的標(biāo)簽。最泛濫的就是div+css，以前的頁面，一打開就是一堆div+css，為了改變這種這種狀況，開發(fā)者們和官方提出了讓HTML結(jié)構(gòu)語義化的概念，并且官方w3c，也在HTML5給出了幾個(gè)新的語義化的標(biāo)簽。

使用語義化后有什么好處：

• 正確的標(biāo)簽做正確的事情
• 頁面內(nèi)容結(jié)構(gòu)化
• 無CSS樣子時(shí)也容易閱讀，便于閱讀維護(hù)和理解
• 便于瀏覽器、搜索引擎解析

舉例：header元素代表“網(wǎng)頁“和”section”的頁眉，footer元素代表“網(wǎng)頁”或“section”的頁腳，nav元素代表頁面的導(dǎo)航鏈接區(qū)域，h1，p。

meta viewport是做什么用，怎么寫

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width表示移動(dòng)設(shè)設(shè)備下顯示的寬度為設(shè)備寬度(device-width)
initial-scale表示設(shè)備與視口的縮放比率
maximum和minimum分別表示縮放的最大最小值, 要注意的是, maximum必須比minimum大.
user-scalable 是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許.

剛開始 web 頁面僅僅是在 PC 端進(jìn)行查看的，但是后來隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，越來越多的 web 訪問是通過移動(dòng)端進(jìn)行的，但是因?yàn)?PC 的 viewport 要比移動(dòng)端大，所以為了快速修復(fù)這個(gè)問題，移動(dòng)端的瀏覽器默認(rèn)只是把整個(gè)頁面等比例縮小到移動(dòng)端的 viewport 大小。
這樣做的后果就是，用戶看到的是一個(gè)縮小版的整個(gè)頁面，字體、圖標(biāo)和內(nèi)容等等都非常小，想要點(diǎn)擊或者查看都需要去放大頁面進(jìn)行操作，放大頁面之后就會(huì)出現(xiàn)橫向滾動(dòng)條，這對用戶體驗(yàn)來說是非常不好的。

用過哪些HTML5標(biāo)簽

canvas 提供了一個(gè)通過js和html的<canvas>元素來繪制圖形的方式

/* HTML*/
<canvas id="canvas"></canvas>
/* JS */
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green'; //填充顏色
ctx.fillRect(10, 10, 150, 100); //位置和寬高

video 用于在HTML或者XHTML文檔中嵌入媒體播放器，用于支持文檔內(nèi)的視頻播放

<video controls autoplay> //controls支持用戶控制視頻，autoplay自動(dòng)播放
  <source src="myVideo.mp4" type="video/mp4">  //source 用以不同的瀏覽器支持的多種格式，提供相同的媒體內(nèi)容
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

audio 元素用于在文檔中表示音頻內(nèi)容

<audio src="foo.ogg">
  <track kind="captions" src="foo.en.vtt" srclang="en" label="English"> //計(jì)時(shí)字幕
  <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>

<audio controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="foo.wav" type="audio/wav">
</audio>

什么是H5

搜知乎吧