HTML中一定要掌握哪些知識點

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

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

學習視頻分享：html視頻教程

讓頁面內容結構化，它有如下優點

1、易于用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。

2、有利于SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。

3、方便其他設備解析，如盲人閱讀器根據語義渲染網頁

4、有利于開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧

如：

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

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

meta有兩個屬性name 和 http-equiv

1、name

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

2、http-equiv 顧名思義，相當于http的文件頭作用

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

canvas畫布

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

video

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

h6移動端頁面

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

HTML5新特性

本地存儲特性
設備兼容特性 HTML5提供了前所未有的數據與應用接入開放接口
連接特性 WebSockets
網頁多媒體特性 支持Audio Video SVG Canvas WebGL CSS3
CSS3特性

區分普通顯示屏和高清屏

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

CSS設計方案：

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

服務端用nginx對圖片進行處理

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

cookie、localStorage和SessionStorage的區別和特點

1、LocalStorage特點：

只保留在客戶端
本地永久存儲，關閉瀏覽器不會清除，除非用戶從瀏覽器清除
每個域可以最多存儲5MB

2、SessionStorage特點：

只保留在客戶端
本地臨時存儲，在頁面會話結束時會被清除
存儲大小與localStorage相同

3、Cookie特點：

服務端和客戶端都可以訪問
可以設置有效期，過期后將會自動刪除。如果不設置則是關閉瀏覽器后失效
存儲大小只有4kb
有存儲個數限制。每個瀏覽器限制不一樣。建議20個以內。最多的瀏覽器可以支持50個

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