(2019)[前端]面試題[9]：HTML5語義化標籤和新特性

2019 年 11 月 13 日
筆記

問題

知道語義化嗎？說說你理解的語義化，如果是你，平時會怎麼做來保證語義化？說說你了解的HTML5語義化標籤，HTML5新增了那些新特性？

Hello，歡迎來到我的博客，每天一道面試題，我們共同進步。

題外話：新網站（ https://www.lzpan.com ）懶盤，百度雲、藍奏雲資源搜索，歡迎訪問。

題外話

其實，不知道大家有沒有想過一件事：現在都在說H5,C3，那麼他們正式發佈的時間是多久？

反正都是在寫這篇文章時想到的。

HTML5經過查閱文章，確切發佈時間應該是：2014年10月（查看此篇文章：http://www.chinaw3c.org/archives/677/ ）

CSS3我網上沒找到具體的，反正看百度百科（ https://baike.baidu.com/item/CSS3/4059544?fr=aladdin ）貌似在2012年後才發佈的。（2012年都貌似還在提案）

面試我覺得應該不會問吧，但了解下我覺得還是可以的。

正題

語義化標籤

hgroup

代表網頁或者section的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章主標題和副標題的組合。

只有一個h1-h6時就不要用此標籤，多個時h1-h6包裹在hgroup，然後可以把hgroup放在header標籤裏面。

網頁或者section的頁眉，hgroup可以放在header裏面，該標籤沒有個數限制，可以一個網頁放置多個。

nav

nav：navigation，導航，用於定義頁面的主要導航部分。用在整個頁面的主導航部分，不適合不要用nav元素

section

代表文檔中的節或段，段可以是指一篇文章里按照字體的分段，節可以指一個頁面的分組。

細節： section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。 article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div

<section>      <h1>section是啥？</h1>      <article>          <h2>關於section</h1>          <p>section的介紹</p>          <section>              <h3>關於其他</h3>              <p>關於其他section的介紹</p>          </section>      </article>  </section>

以上代碼摘抄自網上

article

article代表一個在文檔，頁面或者網站中自成一體的內容

細節：獨立文章：article 單獨模塊：section 沒有語義：div

<article>      <h1>一篇文章</h1>      <p>文章內容..</p>      <footer>          <p><small>版權：迷思雨博客，作者：無道</small></p>        </footer>  </article>

aside

aside元素被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標籤、名次解釋等. 在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以是日誌串連，其他組的導航，甚至廣告，這些內容相關的頁面。

網頁或 section 的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。

比如迷思雨博客網，這裡就是包括在一個footer裏面：

細節：可以是網頁或任意 section 的底部部分；沒有個數限制，除了包裹的內容不一樣，其他跟header類似【本來header和footer就可以理解成對應的】。

detailes

用於描述文檔或文檔某個部分的細節

summary

標籤包含 details 元素的標題

dialog

定義對話框，比如提示框

什麼是語義化

自己的定義

如上面所示的那些標籤，都有自己的語義及使用情況，這就叫語義化。

語義化的好處

語義化就是讓計算機能夠快讀的讀懂內容，高效的處理信息，可以對搜索引擎更友好。
便於與他人的協作，他人通過讀代碼就可以理解你網頁標籤的意義。
頁面能呈現清晰的結構。
有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多有效信息：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義方式來渲染網頁。
便於團隊開發和維護，語義化更具有可讀性，是下一步把網頁的重要動向，遵循W3C標準的團隊都要遵循這個標準，減少差異化

增強型標籤類型

類型	描述
color	主要用於選取顏色
date	從一個日期選擇器選擇一個日期
datetime	選擇一個日期（UTC 時間）
datetime-local	選擇一個日期和時間 (無時區)
email	包含 e-mail 地址的輸入域
month	選擇一個月份
number	數值的輸入域
range	一定範圍內數字值的輸入域
search	用於搜索域
tel	定義輸入電話號碼字段
time	選擇一個時間
url	URL 地址的輸入域
week	選擇周和年

就是input（當然不止input）的type屬性的值新增了以上

比如我定義了一個顏色選擇器：

<body>      <input type="color">  </body>

在Chrome瀏覽器下：

感覺還可以嗎？

在Win10 Edge下：

看出來了嗎，顯示方式完全是瀏覽器自己定義的，而不是開發者決定的。哈米，這你都可以接受？那麼告訴你，在很多低版本瀏覽器下，根本不支持，如果你要去兼容IEx，那麼還是不能使用這個。只能說，等待以後大多數都兼容再說。

HTML5新增表單屬性

placehoder 屬性，簡短的提示在用戶輸入值前會顯示在輸入域上。即我們常見的輸入框默認提示，在用戶輸入後消失。
required 屬性，是一個 boolean 屬性。要求填寫的輸入域不能為空
pattern 屬性，描述了一個正則表達式用於驗證<input> 元素的值。
min 和 max 屬性，設置元素最小值與最大值。
step 屬性，為輸入域規定合法的數字間隔。
height 和 width 屬性，用於 image 類型的 <input> 標籤的圖像高度和寬度。
autofocus 屬性，是一個 boolean 屬性。規定在頁面加載時，域自動地獲得焦點。
multiple 屬性，是一個 boolean 屬性。規定<input>元素中可選擇多個值。

HTML5新特性

新的DOCTYPE聲明<!DOCTYPE html>
完全支持css3 【所以從這裡我們可以看出CSS3先於HTML5發佈，那麼CSS正式發佈就在14年前】
新增video和audio 標籤 <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的瀏覽器不支持 audio 元素。 </audio>
本地存儲（localStorage、sessionStorage），詳解可參考：https://blog.csdn.net/weixin_42881744/article/details/81414262
語義化標籤
canvas 【這也算是一個較重要的部分吧，個人認為】
新事件如 ondrag onresize
地理位置獲取

以上有些參考：

https://www.cnblogs.com/vicky1018/p/7705223.html