你是如何理解 HTML 語(yǔ)義化的？

學(xué)習(xí)視頻分享：html視頻教程

讓頁(yè)面內(nèi)容結(jié)構(gòu)化，它有如下優(yōu)點(diǎn)

1、易于用戶(hù)閱讀，樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)。

2、有利于SEO，搜索引擎根據(jù)標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。

3、方便其他設(shè)備解析，如盲人閱讀器根據(jù)語(yǔ)義渲染網(wǎng)頁(yè)

4、有利于開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧

如：

meta viewport 是做什么用的，怎么寫(xiě)？

通常viewport是指視窗、視口。瀏覽器上(也可能是一個(gè)app中的webview)用來(lái)顯示網(wǎng)頁(yè)的那部分區(qū)域。在移動(dòng)端和pc端視口是不同的，pc端的視口是瀏覽器窗口區(qū)域，而在移動(dòng)端有三個(gè)不同的視口概念：布局視口、視覺(jué)視口、理想視口

meta有兩個(gè)屬性name 和 http-equiv

1、name

keywords(關(guān)鍵字) 告訴搜索引擎，你網(wǎng)頁(yè)的關(guān)鍵字
description(網(wǎng)站內(nèi)容描述) 用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。
viewport(移動(dòng)端的窗口) 后面介紹
robots(定義搜索引擎爬蟲(chóng)的索引方式) robots用來(lái)告訴爬蟲(chóng)哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引
author(作者)
generator(網(wǎng)頁(yè)制作軟件）
copyright(版權(quán))

2、http-equiv 顧名思義，相當(dāng)于http的文件頭作用

content-Type 設(shè)定網(wǎng)頁(yè)字符集
//舊的HTML，不推薦
//HTML5設(shè)定網(wǎng)頁(yè)字符集的方式，推薦使用UTF-8
X-UA-Compatible(瀏覽器采用哪種版本來(lái)渲染頁(yè)面)
//指定IE和Chrome使用最新版本渲染當(dāng)前頁(yè)面
cache-control（請(qǐng)求和響應(yīng)遵循的緩存機(jī)制）
expires(網(wǎng)頁(yè)到期時(shí)間)

canvas畫(huà)布

const ctx = canvas.getContext(‘2d’); // 獲取它的2d上下文
ctx.fillStyle = ‘green’; // 設(shè)置筆刷的填充色
ctx.fillRect(10, 10, 100, 100); // 利用畫(huà)筆范圍,矩形，比如圓

video

autoplay 布爾屬性；視頻馬上自動(dòng)開(kāi)始播放，不會(huì)停下來(lái)等著數(shù)據(jù)載入結(jié)束。
controls 提供用戶(hù)控制，允許用戶(hù)控制視頻的播放，包括音量，跨幀，暫停/恢復(fù)播放。
loop 布爾屬性；指定后，會(huì)在視頻結(jié)尾的地方，自動(dòng)返回視頻開(kāi)始的地方。
track標(biāo)簽表示的是字幕
poster 表示的是封面

h5移動(dòng)端頁(yè)面

WebView是一種控件，它基于webkit引擎，因此具備渲染W(wǎng)eb頁(yè)面的功能。
基于Webview的混合開(kāi)發(fā)，就是在 Anddroid (安卓)/(蘋(píng)果)原生APP里，通過(guò)WebView控件嵌入Web頁(yè)面。
很多APP都是外邊套原生APP的殼，內(nèi)容是H5頁(yè)面(基于html+css+js的Web頁(yè)面)。現(xiàn)在的移動(dòng)端混合開(kāi)發(fā)軟件，如果對(duì)于交互渲染要求不是特別高的項(xiàng)目，基本都是這么玩的。

HTML5新特性

本地存儲(chǔ)特性
設(shè)備兼容特性 HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口
連接特性 WebSockets
網(wǎng)頁(yè)多媒體特性 支持Audio Video SVG Canvas WebGL CSS3
CSS3特性

區(qū)分普通顯示屏和高清屏

當(dāng)devicePixelRatio值等于1時(shí)（也就是最小值），那么它普通顯示屏。
當(dāng)devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清顯示屏。
不同像素的圖利用媒體查詢(xún)結(jié)合 devicePixelRatio 可以區(qū)分普通顯示屏和高清顯示屏

CSS設(shè)計(jì)方案：

.css{/* 普通顯示屏(設(shè)備像素比例小于等于1.3)使用1倍的圖 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
	.css{/* 高清顯示屏(設(shè)備像素比例大于等于1.5)使用2倍圖  */
	    background-image: url(img_2x.png);
	  }
}

服務(wù)端用nginx對(duì)圖片進(jìn)行處理

想要什么樣尺寸的圖片自己裁切,我們提供了按比例縮放和自定尺寸的裁切方法，地址后拼接字符串就行。

cookie、localStorage和SessionStorage的區(qū)別和特點(diǎn)

1、LocalStorage特點(diǎn)：

只保留在客戶(hù)端
本地永久存儲(chǔ)，關(guān)閉瀏覽器不會(huì)清除，除非用戶(hù)從瀏覽器清除
每個(gè)域可以最多存儲(chǔ)5MB

2、SessionStorage特點(diǎn)：

只保留在客戶(hù)端
本地臨時(shí)存儲(chǔ)，在頁(yè)面會(huì)話(huà)結(jié)束時(shí)會(huì)被清除
存儲(chǔ)大小與localStorage相同

3、Cookie特點(diǎn)：

服務(wù)端和客戶(hù)端都可以訪(fǎng)問(wèn)
可以設(shè)置有效期，過(guò)期后將會(huì)自動(dòng)刪除。如果不設(shè)置則是關(guān)閉瀏覽器后失效
存儲(chǔ)大小只有4kb
有存儲(chǔ)個(gè)數(shù)限制。每個(gè)瀏覽器限制不一樣。建議20個(gè)以?xún)?nèi)。最多的瀏覽器可以支持50個(gè)

相關(guān)推薦：html教程

總結(jié)

以上是生活随笔為你收集整理的HTML中必须掌握的知识点有哪些的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。