HTML中一定要掌握哪些知識(shí)點(diǎn)

這篇文章主要介紹了HTML中一定要掌握哪些知識(shí)點(diǎn)，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

你是如何理解 HTML 語義化的？

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

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

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

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

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

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

如：

meta viewport 是做什么用的，怎么寫？

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

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

1、name

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

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

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

canvas畫布

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

video

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

h6移動(dòng)端頁面

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

HTML5新特性

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

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

當(dāng)devicePixelRatio值等于1時(shí)（也就是最小值），那么它普通顯示屏。
當(dāng)devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清顯示屏。
不同像素的圖利用媒體查詢結(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)：

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

2、SessionStorage特點(diǎn)：

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

3、Cookie特點(diǎn)：

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享HTML中一定要掌握哪些知識(shí)點(diǎn)內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!