h5的新特性(目前個人所瞭解)如下 語義化標簽 表單新特性 視頻(video)和音頻(audio) canvas畫布 svg繪圖 地理定位 為滑鼠提供的拖放API webworker (重點)Storage (重點)Websocket HTML語義化是什麼? 語義化是指根據內容的結構化(內容語義化) ...
h5的新特性(目前個人所瞭解)如下
- 語義化標簽
- 表單新特性
- 視頻(video)和音頻(audio)
- canvas畫布
- svg繪圖
- 地理定位
- 為滑鼠提供的拖放API
- webworker
- (重點)Storage
- (重點)Websocket
HTML語義化是什麼?
語義化是指根據內容的結構化(內容語義化),選擇合適的標簽(代碼語義化),便於開發者閱讀和寫出更優雅的代碼的同時,讓瀏覽器的爬蟲和機器很好的解析。
為什麼要語義化?
-
有利於SEO,有助於爬蟲抓取更多的有效信息,爬蟲是依賴於標簽來確定上下文和各個關鍵字的權重。
-
語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構
-
方便其他設備的解析
-
便於團隊開發和維護
1、<section></section>
定義文檔中的主體部分的節、段。
2、<article></article>
一個特殊的section標簽,比section有更明確的語義。定義來自外部的一個獨立的、完整的內容塊,例如什麼論壇的文章,博客的文本。。。
3、<aside></aside>
用來裝載頁面中非正文的內容,獨立於其他模塊。例如廣告、成組的鏈接、側邊欄。。。
4、<header></header>
定義文檔、頁面的頁眉。通常是一些引導和導航信息,不局限於整個頁面頭部,也可以用在內容里。
5、<footer></footer>
定義了文檔、頁面的頁腳,和header類似。
6、<nav></nav>
定義了一個鏈接組組成的導航部分,其中的鏈接可以鏈接到其他網頁或者當前頁面的其他部分。
7、<hgroup></hgroup>
用於對網頁或區段(section)的標題元素(h1~h6)進行組合。
8、<figure></figure>
用於對元素進行組合。
9、<figcaption></figcaption>
為figure元素加標題。一般放在figure第一個子元素或者最後一個。
10、<details></details>
定義元素的細節,用戶可以點擊查看或者隱藏。
11、<summary></summary>
和details連用,用來包含details的標題。
12、<canvas></canvas>
用來進行canvas繪圖。
13、<video></video>
定義視頻。
14、<audio></audio>
定義音頻。
15、<embed></embed>
定義嵌入網頁的內容。比如插件。
16、<source></source>
該標簽為媒介元素(比如video、audio)定義媒介元素。
17、<datalist id='dl'></datalist>
定義可選數據的列表,與input配合使用(<input list='dl'>)可製作輸入值的下拉列表。
18、<mark></mark>
在視覺上向用戶展現出那些想要突出的文字。比如搜索結果中向用戶高亮顯示搜索關鍵詞。
19、<meter [min/max/low/high/optimum/value]></meter>
度量衡,用紅黃綠表示出一個數值所在範圍。
20、<output></output>
定義不同類型的輸出,樣式與span無異。
21、<progress></progress>
進度條,運行中的進度。
22、<time></time>
定義日期或者時間。
23、<keygen></keygen>
定義加密內容。
24、<command></command>
定義命令行為。