HTML/HTML5 基礎知識 | 面試題專用

時間  2021-08-12
標籤 javascript css html 前端 html5 java git github web ajax 欄目 HTML 简体版
原文   原文鏈接

DTD 介紹

  • DTD（Document Type Definition 文檔類型定義）是一組機器可讀的規則，它們定義 XML 或 HTML 的特定版本中全部容許元素及它們的屬性和層次關係的定義。在解析網頁時，瀏 覽器將使用這些規則檢查頁面的有效性而且採起相應的措施。
  • DTD 是對 HTML 文檔的聲明，還會影響瀏覽器的渲染模式（工做模式）

SGML 、 HTML 、XML 和 XHTML 的區別？

  • SGML 是標準通用標記語言，是一種定義電子文檔結構和描述其內容的國際標準語言， 是全部電子文檔標記語言的起源
  • HTML（HyperText Markup Language）是超文本標記語言，它定義了網頁內容的含義和結構。
  • XML 是可擴展標記語言是將來網頁語言的發展方向，XML 和 HTML 的最大區別就在於 XML 的標籤是能夠本身建立的，數量無限多，而 HTML 的標籤都是固定的並且數量有限。
  • XHTML 是一個基於 XML 的標記語言，他與 HTML 沒什麼本質的區別，但他比 HTML 更加嚴格。
  • 爲了規範 HTML，W3C 結合 XML 制定了 XHTML1.0 標準，這個標準沒有增長任何新的標籤，只是按照 XML 的要求來規範 HTML。二者最主要的區別是：
    • 文檔頂部 doctype 聲明不一樣，XHTML 的 doctype 頂部聲明中明確規定了xhtml DTD的寫法
    • 元素必須始終正確嵌套
    • 標籤必須始終關閉
    • 標籤名必須小寫
    • 特殊字符必須轉義
    • 文檔必須有根元素
    • 屬性值必須用雙引號 "" 括起來
    • 禁止屬性最小化（例如，必須使用 checked="checked" 而不是 checked）

DOCTYPE 有什麼用？

  • <!DOCTYPE> 聲明位於 HTML 文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器使用標準模式渲染文檔。DOCTYPE 不存在或格式不正確會致使文檔以兼容模式呈現。
// 返回當前文檔關聯的文檔類型定義（DTD），若是當前文檔沒有 DTD，則該屬性返回 null。
document.doctype
複製代碼

標準模式與兼容模式各有什麼區別？它們有何意義？

  • 標準模式：又稱嚴格模式，是指瀏覽器按照 W3C 標準解析代碼。javascript

    • 標準模式的渲染方式和 JS 引擎的解析方式都是以該瀏覽器支持的最高標準運行。

  • 兼容模式：又稱怪異模式或混雜模式，是指瀏覽器用本身的方式解析代碼。css

    • 在兼容模式中，頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。

  • 如何區分：html

    • 在 HTML4.01 標準中，瀏覽器解析時到底使用標準模式仍是兼容模式，與網頁中的 DTD 直接相關，由於 HTML 4.01 基於 SGML，DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現。 且有三種
    • HTML5 不基於 SGML，所以不須要對 DTD 進行引用。只須要在頂部聲明 <!DOCTYPE html>

  • 目的：防止呈現文檔時瀏覽器切換到 「兼容模式」。前端

  • 怪異模式和標準模式html5

  • 怪異模式（Quirks Mode）對 HTML 頁面的影響java

頁面導入樣式時，使用 link 和 @import 有什麼區別？

  • link 屬於 XHTML 標籤，除了加載 CSS 外，還能用於定義 RSS，定義 rel 鏈接屬性等做用；而 @import 是 CSS 提供的，只能用於加載 CSS；git

  • 頁面被加載的時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載；github

  • @import 是CSS2.1 提出的，只在 IE5 以上才能被識別，而 link 是 XHTML 標籤，無兼容問題；web

  • link 方式的樣式的權重高於 @import 的權重。ajax

HTML 中 form 裏 action 方法的 Get 和 Post 有什麼區別？

  • Get：Form 的默認方法。

  • Get 是用來從服務器上得到數據。Post 是用來向服務器上傳遞數據

  • Get 將表單中數據的按照 name=value 的形式，添加到 action 所指向的 URL 後面，而且二者使用 "?" 鏈接，而各個變量之間使用 "&" 鏈接。Post 是將表單中的數據放在 form 的數據體中，按照變量和值相對應的方式，傳遞到 action 所指向 URL

  • Get 是不安全的，由於在傳輸過程，數據被放在請求的 URL 中。Post 的全部操做對用戶來講都是不可見的，其放置 request body 中

  • Get 傳輸的數據量小，這主要是由於受 URL 長度限制。Post 能夠傳輸大量的數據，因此在上傳文件只能使用 Post

  • Get 限制 Form 表單的數據集的值必須爲 ASCII 字符。Post 支持整個 ISO10646 字符集

  • Get 請求瀏覽器會主動 cache。Post 支持不會

  • Get 請求參數會被完整保留在瀏覽歷史記錄中。Post 中的參數不會被保留。

  • GET 和 POST 本質上就是 TCP 連接，並沒有差異。可是因爲 HTTP 的規定和瀏覽器/服務器的限制，致使他們在應用過程當中體現出一些不一樣。

  • GET 產生一個 TCP 數據包；POST 產生兩個 TCP 數據包。

Meta viewport 原理是什麼？

  • meta viewport 標籤的做用是讓當前 viewport 的寬度等於設備的寬度，同時當設置 user-scalbale="no" 時不容許用戶進行手動縮放
  • viewport 的原理：移動端瀏覽器一般都會在一個比移動端屏幕更寬的虛擬窗口中渲染頁面，這個虛擬窗口就是 viewport；目的是正常展現沒有作移動端適配的網頁，讓他們完整的展現給用戶；
  • viewport 屬性值
屬性 描述
width 設備的虛擬視口的寬度。
height 設備的虛擬視口的高度。
device-width 設備屏幕的物理寬度。
device-height 設備屏幕的物理高度。
initial-scale 訪問頁面時的初始縮放。1.0沒法縮放。
user-scalable 容許設備放大和縮小，值爲 yes 或 no。
minimum-scale 容許用戶的最小縮放值，1.0 表沒法縮放。
maximum-scale 容許用戶的最大縮放值，1.0 表沒法縮放。 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
複製代碼

Meta 的目的是什麼？

  • meta 元素可用於包含描述 HTML 文檔屬性的名稱/值對，如做者，字符編號，關鍵字列表，文檔做者等信息
<!DOCTYPE html>
<html>
  <head>
    <!-- 推薦 Meta Tags -->
    <meta charset="utf-8" />
    <meta name="language" content="english" />
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Author Name" />
    <meta name="designer" content="Designer Name" />
    <meta name="publisher" content="Publisher Name" />
    <meta name="no-email-collection" content="name@email.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- 搜索引擎優化 Meta Tags -->
    <meta name="description" content="Project Description" />
    <meta name="keywords" content="Software Engineer,Product Manager,Project Manager,Data Scientist" />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="7 days" />
    <meta name="distribution" content="web" />
    <meta name="robots" content="noodp" />

    <!-- 可選 Meta Tags-->
    <meta name="distribution" content="web" />
    <meta name="web_author" content="" />
    <meta name="rating" content="" />
    <meta name="subject" content="Personal" />
    <meta name="title" content=" - Official Website." />
    <meta name="copyright" content="Copyright 2020" />
    <meta name="reply-to" content="" />
    <meta name="abstract" content="" />
    <meta name="city" content="Bangalore" />
    <meta name="country" content="INDIA" />
    <meta name="distribution" content="" />
    <meta name="classification" content="" />

    <!-- 移動設備上 HTML 頁面的 Meta Tgas -->
    <meta name="format-detection" content="telephone=yes" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- http-equiv Tags -->
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />

    <title>HTML5 Meta Tags</title>
  </head>
  <body>
    ...
  </body>
</html>
複製代碼
  • Meta Refresh
<!-- 在5秒鐘內重定向到提供的 URL。設置爲0可當即重定向 -->
<meta http-equiv="refresh" content="3;url=https://juejin.cn/user/96412754251390" />
複製代碼

什麼是替換元素與非替換元素

  • 替換元素：就是瀏覽器根據其標籤的元素屬性來判斷顯示具體的內容的元素，且元素通常擁有固定的尺寸（寬高或寬高比）。
    • 在 html 中像這樣的元素有 img，input，textarea，select，object，這些都是替換元素，這些元素都沒有實際的內容。
  • 非替換元素：html 中大多數都是非替換元素，他們直接將內容告訴瀏覽器，直接顯示出來。
    • 如：p標籤，瀏覽器會直接顯示 p標籤裏的內容。
  • tips：替換元素和非替換元素不只是在行內元素中有，塊級元素也有替換和非替換之分，好比嵌入的文檔 iframe，audio，canvas 在某些狀況下也爲替換元素。

塊級元素和行內元素的區別？

  • HTML4.01 中，元素被分紅兩大類：inlink（行內元素）與 block（塊級元素）。區別以下：
塊級元素 行內元素
獨佔一行 不獨佔一行
能夠設置寬高（盒模型） 不能夠設置寬高，寬高由元素內部的內容決定，padding 和 margin 的 top/bottom 不會對元素生效
能夠包含行內元素和其餘塊級元素 行內元素只能包含文本和其餘行內元素。

塊級元素和行內元素分別有哪些？ 空（void）元素有哪些？

  • CSS 規範規定，每一個元素都有 display 屬性，每一個元素都有默認的 display 值。例如：
    • div 默認display 屬性值爲 block，爲塊級元素；
    • span 默認 display 屬性值爲 inline，爲行內元素。
  • 塊級元素：
    • <h1>-<h6>、<p>、<div>、<ul>、<ol>、<form>、<table>、<address>、<blockquote>、<center>、<dir>、<dl>、<fieldset>、<hr>、<menu>、<noscript>、<pre>、<noframes>、<isindex>
    • 當元素的 display 屬性爲 block、list-item 或 table 時，該元素將成爲 「塊級元素」。
  • 行內元素：
    • <a>、<img>、<input>、<span>、<textarea>、<label>、<select>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<kbd>、<q>、<s>、<samp>、<small>、<strike>、<strong>、<sub>、<sup>、<tt>、<u>
    • 當元素的 display 屬性爲 inline、inline-block 或 inline-table 時，該元素將成爲 「行內元素」
  • 常見的空元素：標籤內沒有內容的 HTML 標籤被稱爲空元素。
    • <br>、<hr>、<img>、<input>、<link>、<meta>
  • 不常見的空元素：<area>、<base>、<col>、<command>、<embed>、<keygen>、<param>、<source> <track>、<wbr>

什麼是可選標籤？爲何要使用它？

  • 在 HTML 中，某些元素具備可選標記。實際上，即便元素自己是必需的，也能夠從 HTML 文檔中徹底刪除某些元素的開始和結束標籤。

  • p，li，td，tr，th，html，head，body 等。如：

<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.
複製代碼
  • 您沒必要提供 </p> 結束標籤。瀏覽器會檢測到它須要它們，而且不管如何都會正確顯示在 DOM 中。但這可能帶給你編寫上的困難！
  • 您能夠節省一些字節並減小須要在 html 文件中下載的字節。

爲了便於閱讀，當您的標籤內有內容/文本時，帶上結束標籤。

簡述一下 src 與 href 的區別？

  • src 用於引用資源，替換當前元素；href 用於在當前文檔和引用資源之間確立聯繫。
  • href（hyperReference）即超文本引用：瀏覽器遇到並行下載資源，不阻塞頁面解析，與 link 引入 css 同樣，瀏覽器並行下載 css 不阻塞頁面解析
    • href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。
  • src （resource）即資源：當瀏覽器遇到 src 時，會暫停頁面解析，直到該資源下載或執行完畢，這也是script 標籤之因此放底部的緣由
    • src 是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；
    • 在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。
    • 當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將 js 腳本放在底部而不是頭部。

img 上 title 與 alt

  • title 是鼠標放在圖片上面時顯示的文字，title 是對圖片的描述和進一步的說明。
  • alt 定義了圖像的備用文本描述。
  • tips：瀏覽器並不是老是會顯示圖像。當有下列狀況時，alt 屬性能夠爲圖像提供替代的信息：
    • 非可視化瀏覽器（Non-visual browsers）（好比有視力障礙的人使用的音頻瀏覽器）
    • 用戶選擇不顯示圖像（好比爲了節省帶寬，或出於隱私等考慮不加載包括圖片在內的第三方資源文件）
    • 圖像文件無效，或是使用了不支持的格式
    • 瀏覽器禁用圖像等
    • tips：建議儘量地經過 alt 屬性提供一些有用的信息。
<!-- × -->
<img src="wenhao.jpg" alt="圖片" />

<!-- √ -->
<img src="wenhao.jpg" alt="滿臉問號的男人" />
複製代碼
  • 圖像上 alt 屬性的用途是什麼？
    • 若是用戶沒法查看圖像，alt 屬性將爲圖像提供可選信息。alt 屬性應該用來描述任何圖像，除了那些僅用於裝飾目的的圖像，在這種狀況下，應該將其留空。
    • 裝飾性圖像應具備空 alt 屬性。
    • 網絡爬蟲使用 alt 標籤來理解圖像內容，所以它們被認爲對搜索引擎優化（SEO）很重要。
    • 在 alt 標籤的末尾增長可訪問性。
  • img

爲何在 img 標籤中使用 srcset 屬性？請描述瀏覽器遇到該屬性後的處理過程。

  • 爲了設計響應式圖片。咱們能夠使用兩個新的屬性 srcset 和 sizes 來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源。
  • srcset：定義了咱們容許瀏覽器選擇的圖像集，以及每一個圖像的大小。
  • sizes：定義了一組媒體條件（例如屏幕寬度）而且指明當某些媒體條件爲真時，什麼樣的圖片尺寸是最佳選擇。
  • 處理過程：
    • 查看設備寬度
    • 檢查 sizes 列表中哪一個媒體條件是第一個爲真
    • 查看給予該媒體查詢的槽大小
    • 加載 srcset 列表中引用的最接近所選的槽大小的圖像
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">
複製代碼

noscript 標籤的做用

  • <noscript> 元素用來定義在腳本未被執行時的替代內容（文本）。
  • <noscript> 標籤中的內容只有在下列狀況下才會顯示出來：
    • 瀏覽器不支持腳本
    • 瀏覽器支持腳本，但腳本被禁用
<!-- 給予用戶友好的提示! -->
<noscript>您的瀏覽器不支持 JavaScript！</noscript>
複製代碼

label 的做用是什麼？是怎麼用的？

  • label 標籤訂義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
  • 兩種用法：一種是 id 綁定，一種是嵌套
<label for="select">愛我</label>
<input type="radio" id="select" name="love" value="love" />
<label>恨我<input type="radio" name="hate" value="hate" /></label>
複製代碼

title 與 h1 的區別、b 與 strong 的區別、i 與 em 的區別？

  • <title> 與 <h1> 的區別
    • <title> 用於網站信息標題，一個網站能夠有多個 title，seo 權重高於 h1；
    • <h1> 歸納的是文章主題，一個頁面最好只用一個 h1，seo 權重低於 title。
  • <b> 與 <strong> 的區別
    • <b> 爲了加粗而加粗
    • <strong> 爲了標明重點內容而加粗，有語氣增強的含義
  • <i> 與 <em> 的區別
    • <i> 爲了斜體而斜體，<em> 爲了標明重點而斜體，且對於搜索引擎來講 <strong> 和 <em> 比 <b> 和 <i> 要重視的多

rel="noopener" 應在什麼場景下使用，爲何？

  • rel="noopener" 是 <a> 標籤的一個屬性。他能夠禁止打開的新頁面中使用 window.opener 屬性，這樣一來打開的新頁面就不能經過 window.opener 去操做你的頁面。

  • 新頁面能夠經過 window.opener.location = newURL 將你的頁面導航至任何網址。

<!-- home.html -->
<a href="./home.html" target="_blank">home</a>
<!-- <a href="./home.html" target="_blank" rel="noopener">home</a> -->

<!-- details.html -->
<h1>點關注 不迷路！</h1>
<script> window.opener.location = 'https://juejin.cn/user/96412754251390' </script>
複製代碼
  • 若是您正在使用帶有 target ="_ blank" 的外部連接，則您的連接應具備 rel="noopener" 屬性，以防止標籤被挪用。若是您須要支持舊版本的 Firefox，請使用 rel="noopener noreferrer"
  • 總結：rel="noopener" 應用於超連接，防止打開的連接操縱源頁面

爲何最好把 link 標籤放在 head 之間？

  • 把 <link> 標籤放在 <head></head> 之間是規範要求的內容。此外，這種作法可讓頁面逐步呈現，提升了用戶體驗。
  • 將樣式表放在文檔底部附近，會使許多瀏覽器（包括 Internet Explorer）不能逐步呈現頁面。
  • 一些瀏覽器會阻止渲染，以免在頁面樣式發生變化時，從新繪製頁面中的元素。
  • 這種作法能夠防止呈現給用戶空白的頁面或沒有樣式的內容。

爲何最好把 JS 的 script 標籤放在 body 以前，有例外狀況嗎？

  • 腳本在下載和執行期間會阻止 HTML 解析。把 <script> 標籤放在底部，保證 HTML 首先完成解析，將頁面儘早呈現給用戶。
  • 例外狀況：當你的腳本里包含 document.write() 時。
    • 可是如今，document.write() 不推薦使用。
    • 同時，將 <script> 標籤放在底部，意味着瀏覽器不能開始下載腳本，直到整個文檔（document）被解析。對此比較好的作法是，<script> 使用 defer 屬性，放在 <head> 中。

HTML 全局屬性（global attribute）有哪些

  • accesskey：設置快捷鍵，提供快速訪問元素
  • class：爲元素設置類標識，多個類名用空格分開，CSS 和 JavaScript 可經過 class 屬性獲取元素
  • contenteditable：指定元素內容是否可編輯
  • contextmenu：自定義鼠標右鍵彈出菜單內容
  • data-*：爲元素增長自定義屬性
  • dir：設置元素文本方向
  • draggable：設置元素是否可拖拽
  • dropzone：設置元素拖放類型： copy，move，link
  • hidden：表示一個元素是否與文檔。樣式上會致使元素不顯示，可是不能用這個屬性實現樣式效果
  • id：元素 id，文檔內惟一
  • lang：元素內容的的語言
  • spellcheck：是否啓動拼寫和語法檢查
  • style：行內 CSS 樣式
  • tabindex：設置元素能夠得到焦點，經過 tab 能夠導航
  • title：元素相關的建議信息
  • translate：元素和子孫節點內容是否須要本地化

請描述下 SEO 中的 TDK？

  • 在 SEO 中，所謂的 TDK 其實就是 title、description、keywords 這三個標籤
    • title 標題標籤
    • description 描述標籤
    • keywords 關鍵詞標籤

你有使用過什麼模板引擎？爲何使用它？

  • 經常使用模板引擎：Pug（之前叫 Jade）、 Haml、Handlebars、art-template 等
  • 這些模版語言大可能是類似的，都提供了用於展現數據的內容替換和過濾器的功能
  • 大部分模版引擎都支持自定義過濾器，以展現自定義格式的內容。
!!! 5 
html 
  head 
    title = HelloWorld 
  body 
    h1使用Jade建立HelloWorld網頁
複製代碼

編譯爲

<!DOCTYPE html>
<html>
  <head>
    <title>HelloWorld</title>
  </head>
  <body>
    <h1>使用Jade建立HelloWorld網頁</h1>
  </body>
</html>
複製代碼
  • 它幫助咱們用更少的代碼更快地編寫 HTML 代碼。

iframe 是什麼？有什麼優缺點？

  • HTML內聯框架元素（<iframe>）表示嵌入的瀏覽上下文。它可以將另外一個 HTML 頁面嵌入到當前頁面中。
  • iframe 是用來在網頁中插入第三方頁面，早期的頁面使用 iframe 主要是用於導航欄這種不少頁面都相同的部分，這樣在切換頁面的時候避免重複下載。
  • tips：能夠將提示文字放在 <iframe></iframe> 之間，來提示某些不支持 iframe 的瀏覽器
  • 優勢
    • 便於修改，模擬分離，像一些信息管理系統會用到。
    • iframe 可以原封不動的把嵌入的網頁展示出來。
    • 若是有多個網頁引用 iframe，那麼你只須要修改 iframe 的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
    • 網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用 iframe 來嵌套，能夠增長代碼的可重用。
    • 並行加載腳本
    • security sandbox（安全沙盒）
    • 解決加載緩慢的第三方內容。如：圖標和廣告等的加載問題。
  • 缺點
    • 沒有語意。搜索引擎沒法解讀這種頁面，不利於SEO
    • 會產生不少頁面，不容易管理。
    • 即便內容爲空，加載也須要時間。
    • iframe 的建立比通常的 DOM 元素慢了 1-2 個數量級
    • 不少的移動設備（PDA手機）沒法徹底顯示框架，設備兼容性差。
    • iframe 框架頁面會增長服務器的 http 請求，對於大型網站是不可取的。
    • iframe 會阻塞主頁面的 onload 事件。
    • iframe 和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
    • 若是須要使用 iframe，最好經過 javascript 動態給 iframe 添加 src 屬性值，這樣能夠繞開以上兩個問題
    • iframe 框架結構有時會讓人感到迷惑，若是框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，用戶體驗度差。
  • tips：除非特殊須要，通常不推薦使用。目前 iframe 的優勢徹底能夠使用 Ajax 實現，所以已經沒有必要使用 iframe 了。
  • iframe

div+css 的佈局較 table 佈局有什麼優勢？

  • 分離方便、改版快、清晰簡潔、seo
    • 表現與結構相分離。
    • 改版的時候更方便，只要改 css 文件。
    • 頁面加載速度更快、結構化清晰、頁面顯示簡潔。
    • 易於優化（seo）搜索引擎更友好，排名更容易靠前。

不少網站不經常使用 table，iframe 這兩個元素，知道緣由嗎？

由於瀏覽器頁面渲染的時候是從上至下的，而 table 和 iframe 這兩種元素會改變這樣渲染規則，他們須要等待本身元素內的內容加載完才總體渲染。用戶體驗會很不友好。

HTML 中的 lang 屬性有什麼做用？

  • 經過在 css:lang() 僞類拼寫和語法檢查器中使用頁面樣式來幫助搜索引擎進行語言檢測
:lang(zh) {
  font-size: 1.5em;
}
複製代碼

什麼 enctype='multipart/form-data' 意思？

  • enctype 屬性指定將表單數據提交到服務器時應如何編碼。

HTML5

HTML5 是 HTML（超文本標記語言）最新的修訂版本，由萬維網聯盟（W3C）於 2014 年 10 月完成標準制定。目標是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標準。它是一種爲萬維網構建和顯示內容的語言，萬維網是互聯網的核心技術。

HTML5 向後兼容舊瀏覽器嗎？

  • HTML5 被設計成儘量向後兼容現有的 web 瀏覽器

HTML5 爲何只須要寫 <!DOCTYPE html>？

  • HTML5 不基於 SGML，所以不須要對 DTD 進行引用，可是須要 DOCTYPE 來規範瀏覽 器的行爲（讓瀏覽器按照它們應該的方式來運行）
  • HTML4.01 基於 SGML，因此須要對 DTD 進行引用，才能告知瀏覽器文檔所使用的文檔類型。
  • 其中，SGML 是標準通用標記語言，簡單的說，就是比 HTML，XML 更老的標準，這二者都是由 SGML 發展而來的。可是，HTML5 不是。

HTML5 文檔類型和字符集是？

  • HTML5 文檔類型：<!DOCTYPE html>
  • HTML5 字符集編碼：<meta charset="UTF-8" />

HTML5 有哪些新特性

  • 在 HTML5 中，DOM 拓展了三種選擇器 document.querySelector、document.querySelectorAll、matchesSelector()
  • 拖拽釋放（Drag and drop）API
  • 繪畫 canvas，支持內聯 SVG。支持 MathML
  • 媒體播放的 video 和 audio 元素
  • 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage 的數據在瀏覽器關閉後自動刪除
  • 更好的實踐 web 語義化，好比 article、footer、header、nav、section 等語義標籤
  • 表單控件：calendar、date、time、email、url 等
  • 新增表單元素：datalist、keygen、output
  • 新的技術：多線程編程的 webWorker， 全雙工通訊協議 webSocket 和地理定位 Geolocation

什麼是 data-* 屬性？

  • 自定義數據屬性以 data 開始，並將根據您的需求進行命名

  • 您能夠使用 JavaScript 得到這些屬性的值

  • 在 JavaScript 框架變得流行以前，前端開發者常用 data-* 屬性，把額外數據存儲在 DOM 自身中，而當時沒有其餘 Hack 手段（好比使用非標準屬性或 DOM 上額外屬性）。它用於存儲頁面或應用程序專用的自定義數據，對於這些數據，沒有更合適的屬性或元素。

  • 而如今，不鼓勵使用 data-* 屬性。緣由：

    • 用戶能夠經過在瀏覽器中利用檢查元素，輕鬆地修改屬性值，藉此修改數據
    • 數據模型最好存儲在 JavaScript 自己中，並利用框架提供的數據綁定，使之與 DOM 保持更新

HTML5 中不推薦使用哪些 HTML 標籤？

  • <acronym>：建議用 <abbr>
  • <applet>：建議用 <object>
  • <basefont>：建議用 <font>
  • <bgsound>：建議用 <audio>
  • <b>：不推薦使用，建議用 font-weight 代替
  • <big>：不推薦使用，建議用 font-size 代替
  • <blink>：建議採用 animation 代替
  • <center>：不推薦使用，建議用 text-align: center 代替
  • <dir>：建議根據語義採用 <ul>、<ol> 或者 <dl>
  • <font>：不推薦使用，建議用 CSS 代替，以便更好控制。
  • <frame>：不推薦使用，建議用 <iframe> 代替。但 <iframe> 如今又能夠用 ajax 來代替
  • <frameset>：不推薦使用
  • <hgroup>：不推薦使用
  • <isindex>：建議用 <input>
  • <listing>：建議用 <pre> 或使用語義更好的 <code>
  • <marquee>：不推薦使用
  • <multicol>：建議用 <input>
  • <nobr>：不推薦使用，建議用 white-space 代替
  • <noframes>：不推薦使用，建議用 幀 CSS 代替
  • <plaintext>：建議用 <pre> 或使用語義更好的 <code>
  • <u>：不推薦使用，建議用 幀 font-style 代替
  • <spacer>：不推薦使用
  • <strike>：建議用語義更好的 <del> 或 <s>
  • <tt>：建議用 <code> 或 <span>
  • <xmp>：建議用帶有 CSS 的 <pre> 或使用語義更好的 <code>
  • HTML5與HTML4的區別
  • HTML 元素參考

你如何理解 Web 的語義化?

  • web 語義化是指經過 HTML 標記表示頁面包含的信息，包含了 HTML 標籤的語義化和 CSS 命名的語義化。
  • HTML 標籤的語義化是指：經過使用包含語義的標籤（如h1-h6）恰當地表示文檔結構
  • CSS 命名的語義化是指：爲 HTML 標籤添加有意義的 class，id 補充未表達的語義，如Microformat經過添加符合規則的 class 描述信息

HTML 爲何須要結構語義化

  • 便於團隊開發和維護。
  • 在沒有 CSS 樣式的狀況下，能讓頁面呈現清晰的結構。
  • 屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來 "讀" 你的網頁。
  • 搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。

它用於改進文檔的自動化處理。自動處理髮生的頻率比你意識到的要高——搜索引擎中的每一個網站排名都是從全部網站的自動處理中派生出來的。

<!-- 機器：這種結構看起來多是導航元素？ -->
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>

<!-- 機器: 這是導航元素！ -->
<nav class="some-meaningless-class"><ul><li><a>...</nav>
複製代碼

什麼是語義和非語義元素？

  • 語義元素：對瀏覽器和開發人員都清楚地描述了其含義。例如：<form>，<table>， <article>，<aside>，<details>，<figcaption>，<figure>，<footer>，<header>，<main>，<mark>，<nav>，<section>，<summary>，<time> 明確規定其含義。
  • 非語義元素：<div>，<span> 不包含任何含義。

簡述 HTML5 一些語義的用法

  • <header> 用於包含有關頁面某個部分的介紹性和導航信息。這能夠包括章節標題、做者姓名、出版時間和日期、目錄或其餘導航信息。
  • <article> 是用來存放一個自成體系的做文，在邏輯上能夠在頁面以外獨立地從新建立，而不會失去它的意義。我的博客文章或新聞故事就是很好的例子。
  • <section> 是一個靈活的容器，用於保存共享公共信息主題或目的的內容。
  • <footer> 用於保存應該出如今內容節末尾的信息，幷包含有關該節的附加信息。做者姓名、版權信息和相關連接是此類內容的典型示例。
  • <main> 元素表示 body 文檔的主要內容。主要內容區域由與文檔的中心主題或應用程序的中心功能直接相關或擴展的內容組成。
  • HTML5 中的語義

Canvas 和 SVG

  • Canvas 和 SVG 都容許您在瀏覽器中建立圖形，可是它們在根本上是不一樣的。

SVG

SVG 意爲可縮放矢量圖形（Scalable Vector Graphics）是一種基於 XML 的圖像格式，用於爲 web 定義基於向量的二維圖形。與光柵圖像（例如 .jpg、.gif、.png 等）不一樣，矢量圖像能夠在不損失圖像質量的狀況下進行任何程度的放大或縮小。

<!-- SVG 是矢量和聲明性的 -->
<svg viewBox="0 0 200 200">
    <circle cx="10" cy="10" r="10" />
</svg>
複製代碼

Canvas

Canvas 是一個 HTML5 元素，用於在網頁上繪製圖形。它是一個帶有 "當即模式" 圖形應用程序編程接口（API）的位圖，用於在其上繪圖。<canvas> 元素只是圖形的容器。爲了繪製圖形，你應該使用 js 畫布在繪製路徑、方框、圓、文本和添加圖像時有幾種策略。

  • HTML <canvas> 元素提供了一個空白繪圖區域，可經過 JavaScript API（Canvas API 或 WebGL API）繪製圖形及圖形動畫
    • 經過 Javascript 來繪製 2D 圖形
    • 是逐像素進行渲染的
    • 其位置發生改變，會從新進行繪製
<canvas id="myCanvas" width="578" height="200"></canvas>
<script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); </script>
複製代碼
  • Canvas 的一些預期用途包括構建圖形、動畫、遊戲和圖像合成。
  • Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於能夠直接在 HTML 上進行圖形操做

Canvas 和 SVG 的區別

Canvas SVG
基於柵格（由像素組成） 基於矢量（由形狀組成），很是適合 UI/UX 動畫
依賴分辨率 不依賴分辨率
不支持事件處理器 支持事件處理器
文本渲染能力差 良好的文字渲染功能
使用更多的對象或更小的曲面或二者都提供更好的性能 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪 不適合遊戲應用
僅經過腳本修改 經過腳本和 CSS 修改
可以以 .png 或 .jpg 格式保存結果圖像 多個圖形元素，成爲頁面 DOM 樹的一部分
可伸縮性差。不適合以較高分辨率打印。可能發生像素化 更好的可擴展性。能夠任何分辨率高質量打印。不會發生像素化

100 * 100的 canvas 佔多少內存？

您如何爲您的網站選擇 svg 或 canvas？

  • 若是你知道你須要矢量藝術，則選擇 SVG。與 JPG 之類的柵格圖形相比，矢量藝術在視覺上是清晰的，而且文件大小一般較小。
  • 像一個小的平面顏色圖標，這顯然是 SVG 的領域。
  • 像互動遊戲，那顯然是 Canvas。

參考

新標籤

新語義和結構元素

  • canvas 標籤訂義圖形，好比圖表和其餘圖像。該標籤基於 JavaScript 的繪圖 API
<canvas width="300" height="300">
  抱歉，您的瀏覽器不支持canvas元素
</canvas>
複製代碼

  • figure 表明一段獨立的內容，常常與說明（caption）配合使用，而且做爲一個獨立的引用單元

  • figcaption 是與其相關聯的圖片的說明/標題，用於描述其父節點 figure 元素裏的其餘數據。

<style> figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto; } img { max-width: 220px; max-height: 150px; } figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center; } </style>

<figure>
  <img src="1.jpg" alt="索隆">
  <figcaption>An elephant at sunset</figcaption>
</figure>
複製代碼
  • summary 利用了一個 details 元素的一個內容的摘要，標題或圖例。
  • details 可建立一個掛件，僅在被切換成展開狀態時，它纔會顯示內含的信息。 
<style> details { border: 1px solid #aaa; border-radius: 4px; padding: 0.5em 0.5em 0; } summary { font-weight: bold; margin: -0.5em -0.5em 0; padding: 0.5em; } details[open] { padding: 0.5em; } details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: 0.5em; } </style>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
複製代碼
  • header、nav、main、footer、section、article
<section>
  <header></header>
  <main>
  	<nav></nav>
  </main>
  <footer></footer>
</section>
<article></article>
複製代碼
  • map 定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點擊區域的一幅圖像
    • area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。
<div>
  <img src="../img/cs.jpg" width="500" height="500" alt="pic" usemap="#circusmap" />
  <map name="circusmap">
    <area shape="rect" coords="90,18,202,186" href="https://www.baidu.com/"/>
    <area shape="rect" coords="222,141,318, 256" href="https://www.baidu.com/" />
    <area shape="circle" coords="343,111,455, 267" href="https://www.baidu.com/" />
    <area shape="rect" coords="35,328,143,500" href="https://www.baidu.com/" />
  </map>
</div>
複製代碼
  • mark 突出顯示 html 中的文本。在這個標籤出現以前，常使用使用 em 或 strong 賦予突出顯示的內容一些語義。如今不推薦了。若是須要突出顯示，請使用此標籤
<p><mark>Lio</mark></p>
複製代碼

默認背景顏色 <mark> 是黃色

/* default style */
mark {
  background: yellow;
  color: black;
}
複製代碼

能夠使用 CSS 自定義樣式

mark {
  background: red;
  color: white;
}
複製代碼
  • meter 標籤訂義已知範圍或分數值內的標量測量。也被稱爲 gauge（尺度）。
    • <meter> 標籤不該用於指示進度（在進度條中）。若是標記進度條，請使用 <progress> 標籤。
<div>
  <meter value="4" min="0" max="10">4/10</meter><br />
  <meter value="0.6">60%</meter>
</div>
複製代碼
  • progress 標籤標示任務的進度（進程）。
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
複製代碼
  • time 定義日期或時間。
<p>The concert starts at <time datetime="2020-06-01T20:00:00">20:00</time>.</p>
複製代碼
  • bdi 容許您設置一段文本，使其脫離其父元素的文本方向設置。
<p dir="ltr">Lorem ipsum <bdi>dolor</bdi> sit amet.</p>
複製代碼
  • dialog 標籤訂義一個對話框、確認框或窗口。
<dialog open>
  <p>Greetings, one and all!</p>
</dialog>
複製代碼

新多媒體元素

  • source 定義視頻源 <video> 和 <audio>
  • track 定義文本軌道
  • video 定義視頻元素
    • HTML5支持 mp四、webm 和 ogg 格式的視頻。其中 Ogg 格式在 IE 中不受任何方式的支持
    • src 指定視頻的來源。
    • 當不給 video 設置高度和寬度時，瀏覽器不知道視頻的大小，當視頻加載時，頁面將發生變化或閃爍
<!-- 1. 用 src 屬性定義 -->
<video src="video.mp4" controls ></video>

<!-- 2. 定義 source 標籤 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
  	你的瀏覽器不支持 HTML5 viedo 標籤。
</video>
複製代碼
  • embed 將外部內容嵌入文檔中的指定位置。
<embed src="https://juejin.cn/user/96412754251390" height="700" width="100%" />

<embed type="video/webm" src="/media/cc0-videos/flower.mp4" height="700" width="100%" />
複製代碼
  • audio 定義音頻內容
    • HTML5 支持 MP三、Wav 和 Ogg 格式的音頻。
<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  您的瀏覽器不支持 HTML5 audio 標籤。
</audio>
複製代碼

新表單元素

  • datalist
    • <datalist> 標籤訂義選項列表。與 input 元素配合使用該元素，來定義 input 可能的值。
    • datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。
    • 使用 input 元素的 list 屬性來綁定 datalist
<label for="course">選擇學習課程：</label>
<input list="target" name="course" id="course" />
<datalist id="target">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="JavaScript"></option>
  <option value="Node"></option>
  <option value="Vue"></option>
  <option value="React"></option>
  <option value="Webpack"></option>
</datalist>
複製代碼

  • keygen 該元素有助於生成密鑰和經過表單提交。

    • keygen 必須在表單內使用。
    • keygen 已經從 Web 標準中刪除，請使用 JavaScript 生成密鑰
    • MDN

  • output 標籤訂義不一樣類型的輸出，好比腳本的輸出。

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
  0 <input type="range" id="a" value="50"> 100
  * <input type="number" id="b" value="1" /> =
  <output name="x" for="a b"></output>
</form>
複製代碼

HTML5 以前的一些元素

  • pre 標籤可定義預格式化的文本。被包圍在 <pre> 標籤中的文本一般會保留空格和換行符。而文本也會呈現爲等寬字體。

  • strong 用於指示比周圍文本更重要的文本，例如警告或錯誤。從語義上講，它的重要性。它顯示爲粗體

  • b 與 strong 很是類似，由於它也顯示爲粗體。然而，與它不一樣的是，它並無真正傳達出任何重要性，它更像是一種文體而非語義。

  • em 用於強調某個詞。它顯示爲斜體

<strong>lorem</strong>
<b>lorem</b>
<em>lorem</em>
複製代碼
  • q 和 blockquote
    • q 引號
    • blockquote 塊引號
<q>lorem</q>
<blockquote>lorem</blockquote>
複製代碼
  • bdo 能夠更改 HTML 文本的方向
    • rtl：從右到左。ltr：從左到右。
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
複製代碼
  • 使用 abbr 標籤縮寫您的代碼，當你傳遞一個標題時，它將建立一個工具提示
    • <abbr> 不一樣瀏覽器的默認樣式有些不一樣。在 Chrome 和 Firefox 中，它將帶有下劃線，而且在懸停時將帶有 title 傳遞的值的工具提示。若是您在 Safari 上打開此頁面，則不會出現下劃線。此外，僅當您具備 title 屬性時才顯示下劃線。
    • 因爲跨瀏覽器的差別，建議爲 <abbr> 代碼加上自定義樣式。這樣，您將在瀏覽器之間擁有一致的外觀

定義術語時，能夠與 dfn 混合使用

<dfn>
  <abbr title="Today I learned">TIL</abbr> something awesome!	
</dfn>
複製代碼

指示的非縮寫詞並將其輸出到頁面上的括號中

abbr[title]::after {
  content: ' (' attr(title) ')';
}
複製代碼

利用 hover 狀態僅在點擊時顯示非縮寫詞

abbr[title]:hover::after {
  content: ' (' attr(title) ')';
}
複製代碼

使用 abbr 標籤來指示在順序鍵盤導航中是可聚焦的 tabindex="0"，而後在聚焦時觸發咱們的非縮寫內容。

<abbr title="Today I learned" tabindex="0">TIL</abbr>
複製代碼
abbr[title]:focus::after {
  content: ' (' attr(title) ')';
}
複製代碼

也能夠使用一些提示工具，如 Bootstrap 的工具提示組件。

  • kbd 和 code
    • kbd：表示用戶從鍵盤、語音輸入或任何其餘文本輸入設備輸入的文本。
    • code：表示計算機代碼的簡短片斷的文本。
    • 二者使用一樣的 monospace 字體。可是在語義上它們是不一樣的。最好使用 kbd 代替 code
<kbd>Ctrl</kbd> + <kbd>C</kbd>
<code>Ctrl</code> + <code>C</code>
複製代碼
/* Default Style */
kbd {
  font-family: monospace;
}

kbd, code {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
}
複製代碼
  • s 和 del 刪除線
    • s 當您嘗試表示再也不相關或再也不準確的事物時，使用它。
    • del 當您要指示某些內容已從文檔中刪除時，使用它。
    • 它們都是刪除線。可是，它們傳達了關於內容的不一樣含義。
<s>Lorem ipsum dolor sit amet.</s>

<!-- 常使用於商品價格折扣 -->
<span><s>$1999</s></span>
<span style="color: red;">$99</span>

<del>Lorem ipsum dolor sit amet.</del>

<!-- 常使用於待辦事項清單 -->
<ul>
  <li><del>打卡</del></li>
  <li>喝杯咖啡</li>
</ul>
複製代碼
  • ins
<p>
  Lorem ipsum
  <ins>dolor sit amet consectetur adipisicing elit.</ins> Perferendis, rem.
</p>
複製代碼

新屬性

  • contenteditable
    • contenteditable 屬性應用於任何HTML元素，它能夠像 input 或 <textare> 那樣工做編輯它們
    • 您能夠爲其添加事件監聽器，監聽其內容變化
    • contenteditable 屬性值有3個不一樣的值：true、false、inherit
<div contenteditable="true">
  <h1>元素可編輯</h1>
</div>
<div contenteditable="false">
  <h1>元素不可編輯</h1>
</div>
<div contenteditable="inherit">
  <h1>元素繼承其父元素的可編輯狀態</h1>
</div>
複製代碼
  • input
    • required
    • autofocus 屬性可以讓 button，input 或 textarea 元素在頁面加載完成時自動成爲頁面焦點
    • pattern 用正則表達式驗證
<!-- required -->
<input type="text" id="username1" name="username" required>

<!-- autofocus -->
<input type="text" id="username2" name="username" >

<!-- pattern -->
<input type="password" name="password" placeholder="請輸入密碼" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" required />
複製代碼
  • HTML5 新的表單輸入類型？
    • 新輸入類型（type 13種）：date、month、week、time、number、range、email、url、color、datatime-local、datetime、search、tel
    • search：用於搜索域，好比站點搜索或 Google 搜索，域顯示爲常規的文本域。
    • url ：用於應該包含 URL 地址的輸入域在提交表單時，會自動驗證 url 域的值。
    • email：用於應該包含 e-mail 地址的輸入域，在提交表單時，會自動驗證 email 域的值。
    • datetime：選取時間、日、月、年（UTC 時間）
    • date：選取日、月、年
    • month：選取月、年
    • week：選取周和年
    • time：選取時間（小時和分鐘）
    • datetime-local：選取時間、日、月、年（本地時間）
    • number：用於應該包含數值的輸入域，您還可以設定對所接受的數字的限定。
    • range：用於應該包含必定範圍內數字值的輸入域，類型顯示爲滑動條。
    • color：定義拾色器。
    • tel：定義用於輸入電話號碼的字段。
    • 其中 datetime 不在被推薦使用，轉而使用 datatime-local
<!-- url -->
<input type="url" />

<!-- tel -->
<input type="tel" name="tel" />

<!-- search -->
<input type="search" />

<!-- email -->
<form action="/">
    <input type="email" />
    <input type="submit" value="提交">
</form>

<!-- date -->
<input type="date" value="2020-06-01" min="2020-01-01" max="2022-01-01" />

<!-- time -->
<input type="time" value="12:00" />

<!-- datetime -->
<input type="datetime" value="2020-09-12T23:00Z" />

<!-- week -->
<input type="week" />

<!-- month -->
<input type="month" value="2020-06-01" />

<!-- datetime-local -->
<input type="datetime-local" value="2020-09-06T23:00" />

<!-- number -->
<input type="number" name="number" min="2" max="10" value="3" />

<!-- color -->
<input type="color" onchange="showColor(event)">

<!-- range -->
<input type="range" name="range" min="0" max="100" step="1" value="" />
複製代碼
  • hiden 屬性規定對元素進行隱藏。
    • 能夠對 hidden 屬性進行設置，使用戶在知足某些條件時才能看到某個元素（好比選中複選框，等等）。而後，可以使用 JavaScript 來刪除 hidden 屬性，使該元素變得可見。
<div hidden>lorem</div>
複製代碼
  • Download
    • 錨點標記的默認設置是導航連接，它將轉到您在 href 屬性中指定的連接
    • 添加 download 屬性時，它將變成一個下載連接。提示您要下載的文件。下載的文件將具備與原始文件名相同的名稱。可是，您也能夠經過將值傳遞給 download 屬性來設置自定義文件名
    • download 屬性僅適用於同源 URL。若是的 href 來源與網站的來源不一樣，那麼它將沒法正常工做。換句話說，您只能下載屬於該網站的文件。此屬性遵循同源策略中的相同規則概述。
<a href="../img/cs.jpg" download>
    使用原始文件名下載本地文件
</a>

<a href="../img/cs.jpg" download='logo'>
  使用自定義文件名下載 logo.png
</a>
複製代碼

HTML5 的 form 如何關閉自動完成功能？

<!-- 不使用 autocomplete -->
<input type="email" name="email" />

<!-- 使用 autocomplete -->
<form action="/post">
    <input type="email" name="email" autocomplete="off" />
    <input type="submit" value="提交" />
</form>
複製代碼

<script> 標記上的 defer 和 async 屬性是什麼？

  • <script>：當遇到腳本時，HTML 中止解析，腳本被獲取並當即執行。執行結束後，HTML 解析繼續。
  • defer 和 async 的做用：都是讓腳本的下載和執行不阻塞頁面的渲染

區別：

  • defer 是推遲執行，它是等到頁面渲染完畢，全部腳本下載完成，在 DOMContentLoaded 事件前按照腳本的在文檔中的順序執行；
  • async 是當即下載並執行，加載和渲染後續文檔元素的過程將和 js 腳本的加載與執行並行進行（異步）
  1. 關於 defer，咱們還要記住的是它是按照加載順序執行腳本的
  2. 標記爲 async 的腳本並不保證按照指定它們的前後順序執行。對它來講腳本的加載和執行是牢牢挨着的，因此無論你聲明的順序如何，只要它加載完了就會馬上執行。
  3. async 對於應用腳本的用處不大，由於它徹底不考慮依賴（哪怕是最低級的順序執行），不過它對於那些能夠不依賴任何腳本或不被任何腳本依賴的腳原本說倒是很是合適的。
<script src="longTime.js"></script>
<script src="longTime.js" defer></script>
<script src="longTime.js" async></script>
複製代碼
  • tips：沒有 src 屬性的腳本（即不是內聯腳本），async 和 defer 屬性會被忽略。

如何處理 HTML5 新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

  • IE6-8 支持經過 document.createElement 方法產生的標籤，利用這一特性讓這些瀏覽器支持 HTML5 新標籤

  • 使用 html5shiv 框架

  • HTML5：

    • DOCTYPE 聲明
    • 新增的語義元素（<header>、<section> 等）
    • 新增功能元素

HTML5 的構成要素是什麼？

  • 語義：提供更準確地描述內容。
  • 鏈接：提供新的方式與服務器通訊。
  • 離線和存儲：容許網頁在本地存儲數據並有效地離線運行。
  • 多媒體：在 Open Web 中，視頻和音頻被視爲一等公民（first-class citizens）。
  • 2D/3D 圖形和特效：提供更多種演示選項。
  • 性能和集成：提供更快的訪問速度和性能更好的計算機硬件。
  • 設備訪問：容許使用各類輸入、輸出設備。
  • 外觀：能夠開發豐富的主題。
  • HTML5

Modernizr

  • Modernizr 是一個用來檢測瀏覽器功能支持狀況的 JavaScript 庫。
  • 經過這個庫咱們能夠檢測不一樣的瀏覽器對於 HTML5 特性的支持狀況。
<article>
  <h1>經過 Modernizr 檢測 HTML5 特性</h1>
</article>
<script crossorigin="anonymous" integrity="sha384-l7lIexAaQrMGAnOGdPikxQDjq8aY1MS3oqkKPS8FXlJ47UejXvEzmezjhEwHVkzm" src="https://lib.baomitu.com/modernizr/2010.07.06dev/modernizr.js" ></script>
<script> window.onload = function () { //經過Modernizr.對瀏覽器canvas功能進行檢測 if (Modernizr.canvas) { console.log('本瀏覽器支持Canvas API') } else { console.log('本瀏覽器不支持Canvas API') } } </script>
複製代碼

HTML5 存儲

localStorage

localStorage 持久化的本地存儲，除非是經過 js 刪除，或者清除瀏覽器緩存，不然數據永遠不會過時，關閉瀏覽器也不會丟失。

  • HTML5 修訂 localStorage 取代 globalStorage
  • 在同源的全部標籤頁和窗口之間共享數據
  • 數據僅保存在客戶端，不與服務器進行通訊，對數據的操做是同步的
  • 大小限制爲 5M；但實際 JavaScript 中的字符串爲 UTF-16，所以每一個字符須要兩個字節的內存。這意味着儘管許多瀏覽器的限制爲 5MB，但您只能存儲 2.5M 個字符。
  • 瀏覽器的支持狀況：IE7 及如下版本不支持 web storage。但在 IE5-7 中有個 userData，其實也是用於本地存儲。

sessionStorage

sessionStorage 存儲對象存儲一個會話的數據，數據會在瀏覽器關閉後自動刪除。

cookie、sessionStorage 和 localStorage 的區別

  • 都是在客戶端以鍵值對存儲的存儲機制，而且只能將值存儲爲字符串。
cookie localStorage sessionStorage
由誰初始化 客戶端或服務器，服務器能夠使用Set-Cookie請求頭。 客戶端 客戶端
過時時間 手動設置 永不過時 當前頁面關閉時
在當前瀏覽器會話（browser sessions）中是否保持不變 取決因而否設置了過時時間 是 否
是否隨着每一個 HTTP 請求發送給服務器 是，Cookies 會經過Cookie請求頭，自動發送給服務器 否 否
容量（每一個域名） 4kb 5MB 5MB
訪問權限 任意窗口 任意窗口 當前頁面窗口

什麼是 WebSQL？

  • WebSQL 是使用 SQL 的客戶端（瀏覽器）的數據庫 API。
  • Web SQL 數據庫 API 並非 HTML5 規範的一部分，可是它是一個獨立的規範，引入了一組使用 SQL 操做客戶端數據庫的 APIs。
  • 並不是全部瀏覽器都支持WebSQL。
  • 如今不推薦使用 WebSQL ，而是使用 IndexedDB 代替它。

什麼是 IndexedDB？

IndexedDB 是一種底層異步 API，瀏覽器內置的數據庫，用於在客戶端存儲大量的結構化數據（也包括文件/二進制大型對象（blobs））。

  • 它將將數據存儲爲鍵值對。
  • 大多數瀏覽器都支持 IndexedDB。

IndexedDB API 功能強大，但對於簡單的狀況可能看起來太複雜若是你更喜歡一個簡單的API，請嘗試 localForage，dexie.js，PouchDB，IDB，IDB-KEYVAL，JsStore 或者 lovefield 之類的庫，這些庫使 IndexedDB 對開發者來講更加友好。

爲何在 HTML5 中使用 IndexedDB 代替 WebSQL？

IndexedDB 像一個 NoSQL 數據庫，而 WebSQL 像關係型數據庫，使用 SQL 查詢數據。W3C WebSQL 已經再也不支持這種技術。

HTML5 應用程序緩存（Application Cache）

根據最新的標準，該特性已經從 Web 標準中刪除，建議使用 Service Workers 代替。這裏找了一些資料，感興趣瞭解一下。

什麼是 Web Workers？

  • Web Workers 幫助咱們在後臺運行 JavaScript 代碼，而不會阻止應用程序。
  • Web Workers 在一個隔離的（新的）線程中運行，用於執行 JavaScript 代碼，而且經過 postMessage 將結果回傳到主線程。這樣就不會阻塞主線程的運行。
  • Web Workers 一般用於大型任務。
  • Web Workers 須要一個單獨的文件來存儲咱們的 JavaScript 代碼。
  • Web Workers 文件是異步下載的 。
  • 全部最新的瀏覽器均支持 Web Worker。

客戶端 js：

var myWebWorker = new Worker("task.js") // 建立 worker

// 監聽 task.js worker 消息
worker.addEventListener("message", function(event) {
  console.log("Worker said: ", event.data)
}, false)

// 啓動工做程序
worker.postMessage("From web worker file")
複製代碼

task.js（工做文件）文件：

// 監聽客戶端 JS 文件發佈消息
self.addEventListener("message", function(event) {
  // 處理後的數據發送到客戶端監聽 JS 文件
  self.postMessage(event.data)
}, false)
複製代碼

WebSocket

  • WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。
  • WebSocket 是一種在客戶端與服務器之間保持TCP長鏈接的網絡協議，能夠隨時進行信息交換。
  • Websocket 使用 ws 或 wss 的統一資源標誌符，相似於 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。
  • 默認狀況下，Websocket 協議使用 80 端口；運行在 TLS 之上時，默認使用 443 端口。

webSocket 如何兼容低瀏覽器？

  • Adobe Flash Socket
  • ActiveX HTMLFile（IE）
  • 基於 multipart 編碼發送 XHR
  • 基於長輪詢的 XHR

websocket 與 socket 的區別

Socket 是傳輸控制層協議，WebSocket 是應用層協議。更多請看參考

參考

地理定位 API 如何在 HTML5 中工做？

  • HTML5 地理定位 API 容許用戶在須要時向 web 應用程序提供用戶的位置。出於隱私緣由，用戶須要得到報告位置信息的權限。
  • JavaScript 能夠捕獲你的緯度和經度，並能夠發送到後端 Web 服務器，作一些奇特的位置感知的事情，好比找到本地企業或在地圖上顯示你的位置
  • 現在，大多數瀏覽器和移動設備都支持地理定位 API
  • 地理定位 API 經過 navigator 獲取對象。
if ("geolocation" in navigator) {
  /* geolocation is available */
} else {
  /* geolocation IS NOT available */
}
複製代碼

頁面可見性（Page Visibility）API 能夠有哪些用途？

  • 頁面可見性 API 提供了您能夠觀察的事件，剎車瞭解文檔什麼時候可見或隱藏，以及查看頁面當前可見性狀態的功能。

  • 使用選項卡式瀏覽，任何給定網頁都有可能在後臺，所以對用戶不可見。頁面可見性 API提供了您能夠觀察的事件，以便了解文檔什麼時候可見或隱藏，以及查看頁面當前可見性狀態的功能。

  • document.hidden 返回一個布爾值。

    • true 表示頁面可見，false 則表示頁面隱藏。
    • 不一樣頁面之間來回切換，將觸發 visibilitychange 事件。

  • document.visibilityState：表示頁面所處的狀態，當前頁面的可見性，有四個取值

    • visible：頁面完全不可見。
    • hidden：頁面至少一部分可見。
    • prerender：頁面即將或正在渲染，處於不可見狀態。
    • unloaded：已被廢棄，不在使用。

  • 只要 document.visibilityState 屬性發生變化，就會觸發 visibilitychange 事件

// 打開新的頁面，來回切換標籤頁，觀察頁面標題的變化
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'hidden') {
    document.title = "愛我"
  } else {
    document.title = "恨我"
  }
})
複製代碼
  • 用途：
    • 動畫，視頻，音頻均可以在頁面顯示時打開，在頁面隱藏時關閉
    • 完成登錄後，無刷新自動同步其餘頁面的登陸狀態
// 視頻暫停或播放
document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    video.pause()
  } else if (document.visibilityState === 'visible') {
    video.play()
  }
})
複製代碼

說一下 HTML5 Drag And Drop API

**HTML 拖放（Drag and Drop）**接口使應用程序可以在瀏覽器中使用拖放功能。例如，用戶可以使用鼠標選擇可拖拽（draggable）元素，將元素拖拽到可放置（droppable）元素，並釋放鼠標按鈕以放置這些元素。

Event Description
Drag 每次拖動對象時移動鼠標時，它都會激發。事件主體是被拖放元素，在正在拖放被拖放元素時觸發。
Dragstart 當用戶開始拖動對象時觸發。事件主體是被拖放元素，在開始拖放被拖放元素時觸發。
Dragenter 當用戶將鼠標光標移到目標元素上時，它將激發。事件主體是目標元素，在被拖放元素進入某元素時觸發。
Dragover 當鼠標移到某個元素上時觸發此事件。事件主體是目標元素，在被拖放在某元素內移動時觸發。
Dragleave 當鼠標離開元素時觸發此事件。事件主體是目標元素，在被拖放元素移出目標元素是觸發。
Drop 拖放操做結束時觸發。事件主體是目標元素，在目標元素徹底接受被拖放元素時觸發。
Dragend 當用戶釋放鼠標按鈕以完成拖動操做時觸發。事件主體是被拖放元素，在整個拖放操做結束時觸發

draggable 是可枚舉的屬性指示該元素是否能夠拖動，用於標識元素是否容許使用 HTML拖放API

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script> function allowDrop(e) { e.preventDefault() } function drag(e) { e.dataTransfer.setData("text", e.target.id) } function drop(ev) { e.preventDefault() var data = e.dataTransfer.getData("text") e.target.appendChild(document.getElementById(data)) } </script>
複製代碼

其餘 HTML5 API

document.querySelector() 和 document.querySelectorAll()

  • querySelector()：根據 css 選擇器返回第一個匹配的元素，若是沒有匹配返回 null
  • querySelectorAll()：方法返回文檔中匹配指定 CSS 選擇器的全部元素，返回 NodeList 對象。若是 querySelectorAll 沒有匹配的內容返回的是一個空數組。

classList

  • 控制 CSS 的 增、刪、切換、是否存在某個類
ele.classList.add("addClass")
ele.classList.remove("removeClass")
ele.classList.toggle("toggleClass")
ele.classList.contains("containsClass")
複製代碼

contextMenu

  • 它並不會替換原有的右鍵菜單，而是將你的自定義右鍵菜單添加到瀏覽器的右鍵菜單裏
<div id="menu">Lorem ipsum dolor sit amet.</div>
<script> menu.addEventListener('contextmenu', function() { alert('點我！') }) </script>
複製代碼

你也能夠阻止它，顯示本身自定義的菜單

menu.addEventListener('contextmenu', function(e) {
  e.preventDefault()
  // ...
})
複製代碼

dataset

  • 經過 dataset 能夠方便的獲取或設置 data-* 自定義數據屬性集
<div class="avatar" data-user="lisi" data-avatar-type="circle" data-animateSpeed>
  lorem
</div>
<script> const avatar = document.querySelector('.avatar') avatar.dataset.user === 'lisi' // true avatar.dataset.avatarType === 'circle' // true avatar.dataset.animateSpeed = 4000 // 添加不存在的屬性 avatar.dataset.id = 'user' // console.log(avatar.dataset) </script>
複製代碼

tabindex

  • tabindex 屬性規定當使用 "tab" 鍵進行導航時元素的順序。
  • 在 HTML4.01 中，tabindex 屬性可用於：<a>，<area>，<button>，<input>，<object>，<select> 和 <textarea>。
    • 在 HTML5 中，tabindex 屬性可用於任何的 HTML 元素（它會驗證任何 HTML 元素。但不必定是有用）
<ul>
  <li tabindex="2">HTML</li>
  <li tabindex="1">CSS</li>
  <li tabindex="3">JAVASCRIPT</li>
</ul>
複製代碼

accessKey

  • accessKey 屬性規定激活（使元素得到焦點）元素的快捷鍵。
  • 不一樣瀏覽器使用的快捷鍵方法不一樣：
    • IE，Chrome，Safari，Opera 15+：[ALT] + accesskey
    • Opera prior version 15：[SHIFT] [ESC] + accesskey
    • Firefox：[ALT] [SHIFT] + accesskey
<input accesskey="b" />
<a href="https://www.baidu.com/" accesskey="c">百度一下，你就知道</a>
複製代碼

FullScreen（全屏）

  • FullScreen API 是一個新的 JavaScript API
  • 全屏顯示能夠是任意元素
  • HTML5 API 存在兼容性問題（IE9+），即便高版本瀏覽器也有兼容性問題
  • 不一樣瀏覽器須要添加不一樣的前綴 webkit、moz、o、ms
const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // 默認全屏模式打開 "body"
fullscreen(false); // 退出全屏模式
複製代碼

:fullscreen CSS 僞元素表明一個元素，當瀏覽器是在全屏模式下的顯示。

.elem:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}
複製代碼

預加載

  • 預取 CSS 文件，預渲染整個頁面或提早解析域
  • 瀏覽器有一個簡單的內置方式來完成全部這些事情。有六個 <link rel> 標記指示瀏覽器預加載內容：
<link rel="prefetch" href="/index.css" as="style" />
<link rel="preload" href="/index.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/index.js" />
複製代碼

preload

  • 使用 preload 做爲 rel 屬性的屬性值。還須要經過 href 和 as 屬性指定須要被預加載資源的資源路徑及其類型。
<link rel="preload" href="index.css" as="style">
複製代碼
  • 使用 as 來指定將要預加載的內容的類型，將使得瀏覽器可以：
    • 更精確地優化資源加載優先級。
    • 匹配將來的加載需求，在適當的狀況下，重複利用同一資源。
    • 爲資源應用正確的內容安全策略。
    • 爲資源設置正確的 Accept 請求頭。
    • MDN 完整列表

prefetch

  • <link rel="prefetch"> 要求瀏覽器在後臺下載並緩存資源（例如 JS 或 CSS）。下載的優先級較低，所以不會干擾更重要的資源。當您知道在下一個頁面上須要該資源，而且想要提早對其進行緩存時，這將頗有幫助。

  • 下載資源後，瀏覽器不執行任何操做。不執行 JS，不該用 CSS。它只是被緩存了，所以當其餘需求時，它當即可用。

  • 經過 link 標籤的 rel 屬性指定爲 "prefetch"，在 href 屬性裏指定要加載資源的地址

<!-- 預加載整個頁面 -->
<link rel="prefetch" href="https://juejin.cn/user/96412754251390" />

<!-- 預加載一個圖片 -->
<link rel="prefetch" href="https://images.pexels.com/photos/918281/pexels-photo-918281.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
複製代碼

preconnent

  • <link rel="preconnect"> 要求瀏覽器提早執行到域的鏈接。
<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390"> 
複製代碼

dns-prefetch

  • DNS-prefetch（DNS 預獲取）是嘗試在請求資源以前解析域名。這多是後面要加載的文件，也多是用戶嘗試打開的連接目標。
<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390"> 
複製代碼

連接預加載的一些注意事項

  • 預加載能夠跨域進行，固然，請求時 cookie 等信息也會被髮送。
  • 預加載可能破壞網站統計數據，而用戶並無實際訪問。
  • 瀏覽器兼容性不是很好

prerender

  • <link rel="prerender"> 要求瀏覽器加載 URL 並將其呈如今不可見的標籤中。當用戶單擊指向該 URL 的連接時，應當即呈現該頁面。當您確實肯定用戶接下來將訪問特定頁面而且想要更快地呈現它時，這將頗有幫助。
<link rel="prerender" href="https://juejin.cn/user/96412754251390" />
複製代碼
  • 當您肯定大多數用戶將導航到特定頁面時，您但願加快速度，那麼你能夠使用它

modulepreload

  • <link rel="modulepreload"> 告訴瀏覽器儘快下載，緩存和編譯 JS 模塊腳本。
  • 使用它能夠更快地加載您的 ES 模塊應用程序。此標記僅適用於預加載 ES 模塊——即您經過 import ... 或導入的模塊 <script type="module">。
<link rel="modulepreload" href="/static/Header.js" />
複製代碼

其餘

對於 WEB 標準以及 W3C 的理解與認識問題

  • web 標準簡單來講能夠分爲結構、表現和行爲。
    • 結構主要是有 HTML 標籤組成。或許通俗點說，在頁面 body 裏面咱們寫入的標籤都是爲了頁面的結構。
    • 表現即指 css 樣式表，經過 css 能夠是頁面的結構標籤更具美感。
    • 行爲是指頁面和用戶具備必定的交互，同時頁面結構或者表現發生變化，主要是由 js 組成。
  • web 標準通常是將該三部分獨立分開，使其更具備模塊化。但通常產生行爲時，就會有結構或者表現的變化，也使這三者的界限並不那麼清晰。
  • 萬維網聯盟（W3C）是一個國際組織，它開發開放標準以確保 Web 的長期發展。
  • W3C 對 web 標準提出了規範化的要求，也就是在實際編程中的一些代碼規範：
    • web 標準規範要求，書寫標籤必須閉合、標籤小寫、不亂嵌套，標籤規範能夠提升搜索引擎對頁面的抓取效率，對 SEO 頗有幫助
    • 建議使用外鏈 CSS和 JS 腳本，從而達到結構、表現與行爲的分離，提升頁面的渲染速度，提升用戶的體驗
    • 樣式與標籤的分離，更合理的語義化標籤，使內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件， 從而下降維護成本、改版方便
    • 不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性；
    • 遵循 w3c 制定的 web 標準，可以使用戶瀏覽者更方便的閱讀，使網頁開發者之間更好的交流。

前端頁面有哪三層構成，分別是什麼？做用是什麼？

  • 分紅：結構層、表示層、行爲層。
  • 結構層（structural layer）：由 HTML 或 XHTML 之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：「這是一個文本段。」
  • 表示層（presentation layer）：由 CSS 負責建立。 CSS 對「如何顯示有關內容」的問題作出了回答。
  • 行爲層（behaviorlayer）：負責回答「內容應該如何對事件作出反應」這一問題。這是 JavaScript 語言和 DOM 主宰的領域。

什麼是漸進式渲染？

  • 漸進式渲染（Progressive rendering）：是用於提升網頁性能（尤爲是提升用戶感知的加載速度），以儘快呈現頁面的技術。

  • 此類技術的示例：

    • 圖片懶加載：頁面上的圖片不會一次性所有加載。當用戶滾動頁面到圖片部分時，JavaScript 將加載並顯示圖像。
    • 肯定顯示內容的優先級（Hierarchical rendering）：爲了儘快將頁面呈現給用戶，頁面只包含基本的最少許的 CSS、腳本和內容，而後能夠使用延遲加載腳本或監聽 DOMContentLoaded/load 事件加載其餘資源和內容。
    • 異步加載 HTML 片斷：當頁面經過後臺渲染時，把 HTML 拆分，經過異步請求，分塊發送給瀏覽器。

  • 異步片斷：使用Marko從新發現漸進式HTML渲染

  • 什麼是漸進式渲染？

你能描述一下漸進加強和優雅降級之間的不一樣嗎？

漸進加強（Progressive enhancement）

優雅降級（Graceful degradation）

什麼是微格式？在前端構建中應該考慮微格式嗎？

  • 微格式（Microformats）是一種讓機器可讀的語義化 XHTML 詞彙的集合，是結構化數據的開放標準。是爲特殊應用而制定的特殊格式。
  • 優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。（如：豆瓣，有興趣自行 google）
  • Microformats

什麼是字符編碼？

  • 字符編碼是一種將字節轉換爲字符的方法。爲了正確地驗證或顯示 HTML 文檔，程序必須選擇適當的字符編碼。這是在標記中指定的：
<meta charset="UTF-8" />
複製代碼
  • UTF-8：Unicode 轉換格式，以8位爲單位，即以字節爲單位。UTF8 中的字符長度能夠從1到4個字節，從而使 UTF8 的寬度可變。

什麼是 WHATWG？

WHATWG（Web 超文本應用技術工做組）是一個對經過標準和測試來發展Web感興趣的人們組成的社區。

什麼是 WebP？

  • WebP 是一種像 JPG、PNG 這樣的圖像格式，它的大小比其餘格式小大約 10-20%。
  • 由 Google 在2010年開發和推出。
  • 並不是全部瀏覽器都支持 WebP。
  • 能夠使用插件將其餘格式轉換爲 WebP。
  • Web的新圖像格式

什麼是 Web 組件？

Web Components 是一套不一樣的技術，容許您建立可重用的定製元素（它們的功能封裝在您的代碼以外）而且在您的web應用中使用它們。不須要須要任何外部庫來工做。

特徵：

Web 應用程序中的可訪問性？

維基百科：可訪問性是最經常使用於描述設施或設施，幫助殘疾人，如「輪椅」。這能夠擴展到盲文標識、輪椅坡道，音頻信號在人行橫道，輪廓人行道，網站設計，等等。

什麼是 ARIA？

Accessible Rich Internet Applications (ARIA) 是可以讓殘障人士更加便利的訪問 Web 內容和使用 Web 應用（特別是那些由JavaScript 開發的）的一套機制。

  • ARIA 經過 HTML 屬性爲屏幕閱讀器提供了額外的信息。其不影響元素如何被呈如今瀏覽器中。
  • 您能夠經過遵循 ARIA 標準（例如：HTML 語義，alt 屬性並以預期的方式使用 [role = button]）來使您的網站更易於訪問
<style> [role='note'] { padding: 10px; border: 1px solid; border-left: 5px solid rebeccapurple; color: rebeccapurple; border-radius: 5px; } </style>
<section>
  <div role="note">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum
    totam.
  </div>
</section>
複製代碼
  • ARIA role 沒有爲大多數元素的默認語義添加任何內容
  • 在某些狀況下，HTML 元素的語義能夠經過 ARIA role，狀態或屬性來表達。常被稱爲元素的「默認隱式ARIA語義」
  • ARIA 容許開發人員以有意義的方式從新發明和擴展本機 HTML 特性。但它的特性與內置技術相比是脆弱的。

一些冗餘 ARIA 的示例：

<button role="button">按我</button>
<a href="https://www.baidu.com" role="link"></a>
<input type="checkbox" role="checkbox" />
<input type="radio" role="radio" />
複製代碼

  • HTML5 使用默認的隱式語義定義了一組新的結構和分段元素，這些語義與 ARIA role 匹配（在某些狀況下）：

    • 使用 role = button 時，考慮使用 <button> 元素，或者其餘各類原生 HTML 按鈕類型。
    • 使用 role=link 時，考慮改用 <a href> 元素。
    • 使用 role=heading 和 aria-level="1-6"，考慮改用 <h1> 到 <h6> 元素。
    • 使用 role=list 和 role=listitem 時，考慮改用 <ol> 或 <ul> 和 <li> 元素。
    • 使用 role=listbox 和 role=option，考慮改用 <select> 和 <option> 元素。
    • 使用 role=checkbox 或 role=radio 時，考慮改用 <input type="checkbox"> 或 <input type="radio"> 元素。
    • 使用 role=textbox，能夠考慮使用 <input type="text"> 或搜索、電子郵件、url 或電話。
    • article、aside、footer、header、main、nav、section 等等…
    • 這意味着在實現後，瀏覽器將公開該元素的默認隱式語義，所以您沒必要這樣作。

  • MDN：ARIA

  • 在 HTML 和 ARIA 大括號上（默認的隱式 ARIA 語義，他們不想讓你知道）

  • HTML5 – W3C建議書2014年10月28日

  • 在HTML中使用ARIA的注意事項

什麼是屏幕閱讀器？

屏幕閱讀器是提供輔助技術的軟件程序，該技術能夠使殘障人士（例如，沒有視力，聲音或滑鼠能力的人）使用 Web 應用程序。

HTML 開發準則

  • 符合W3C：全部頁面都須要使用 W3C 驗證程序進行測試，以識別 HTML 代碼中可能存在的問題。
  • 清理註釋：在將頁面發送到生產環境以前，須要刪除沒必要要的代碼。
  • 錯誤頁面：每一個網站都應該存在錯誤 404 頁面和 5xx。
  • HTML5語義元素：適當使用了 HTML5 語義元素（<header>，<section>，<footer>，<main>...）
  • HTMLHint：我使用工具來幫助我分析個人HTML代碼可能遇到的任何問題。
    • Dirty markup
    • webhint 是一個可自定義的整理工具，可經過檢查代碼中的最佳作法和常見錯誤來幫助您提升網站的可訪問性，速度，跨瀏覽器兼容性以及其餘功能。
  • 連接檢查器：檢查頁面連接是否可用，請確認您沒有任何 404 錯誤。
  • Noopener：若是您正在使用帶有 target ="_ blank" 的外部連接，則您的連接應具備 rel="noopener" 屬性，以防止標籤被挪用。若是您須要支持舊版本的 Firefox，請使用 rel="noopener noreferrer"
  • HTML 代碼規範：開發一致、靈活和可持續的 HTML 和 CSS 的標準。
  • 使用出色的開源工具 W3C tools 將代碼發揮最大潛能。

HTML 性能優化

  • 爲頁面測速制定樣式和腳本

  • 壓縮 HTML：將註釋、空格和空行從生產文件中刪除。

  • 刪除沒必要要的屬性：像 type="text/javascript" or type="text/css" 這樣的屬性應該被移除。

    • 類型屬性不是必需的，由於 HTML5 把 text/css 和 text/javascript 做爲默認值。沒用的代碼應在網站或應用程序中刪除，由於它們會使網頁體積增大。
    • 確保全部和 <script> 標記都沒有任何 type 屬性。
    • The Script Tag | CSS-Tricks

  • 避免腳本阻塞加載。確保在使用 JavaScript 代碼以前加載 CSS。

  • 儘量使用 async 和 defer

    • 確保 JavaScript 腳本兼容 async 和 defer，任什麼時候候都要儘量使用 async ，特別是當你有較多的 script 標籤時。
    • 這樣在加載 JavaScript 的過程當中頁面就不會從新繪製，不然，瀏覽器在不具備這些特性的 script 標籤後就不會重繪任何東西。
    • 消除渲染阻塞資源

  • DNS 預取：一次 DNS 查詢時間大概在 60-120ms 之間或者更長，提早解析網頁中可能的網絡鏈接域名

<link rel="dns-prefetch" href="http://example.com/">
複製代碼

  • 減小內聯腳本的數量

    • 內聯腳本在頁面加載過程當中消耗不少資源，由於解析器認爲內聯腳本會改變頁面結構。
    • 一般，儘可能少的使用內聯腳本和減小用 document.write() 來輸出內容，在必定狀況下能夠加速總體頁面的載入。如今瀏覽器中通常使用現代的 W3C DOM 方法操做頁面內容，優於使用 document.write() 的傳統方法。

  • 縮小和壓縮圖像

    • 較大的圖像會致使頁面須要更多的時間來加載。在將圖像添加到頁面以前，請考慮使用 Photoshop等圖像處理工具內置的壓縮功能，或使用 Compress Jpeg 或 Tiny PNG 等專用工具對圖像進行壓縮

  • 最小化文件數量

    • 減小一個頁面引用的文件數量能夠下降在下載一個頁面的過程當中須要的 HTTP 請求數量，從而減小這些請求的收發時間。
    • 根據其緩存設置，瀏覽器可能會爲每一個所引用的文件發送一個帶 If-Modified-Since 的請求給網絡服務器，以查詢這些文件自上次加載後是否有被修改。查詢引用文件上次修改時間會花費太多時間，致使網頁首屏延遲，這是由於在渲染頁面以前瀏覽器必須確認每一個文件的修改時間。

  • 最小化 iframe 的數量：僅在沒有任何其餘技術可行性時才使用 iframe。

  • 避免節點深層級嵌套：深層級嵌套的節點在初始化構建時每每須要更多的內存佔用，而且在遍歷節點時也會更慢些，這與瀏覽器構建 DOM 文檔的機制有關。瀏覽器會把整個 HTML 文檔的結構存儲爲 DOM "樹" 結構。當文檔節點的嵌套層次越深，構建的 DOM 樹層次也會越深。

  • 頁面緩存：在不設置頁面緩存的狀況下，每次刷新頁面會從新讀取服務器文件。設置頁面緩存，每次刷新可從本地讀取，提升頁面加載效率

    • 經過設置頁面頭的 expires 來定義頁面過時時間，將過時時間定久一點就達到了 "永久" 緩存。
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />
複製代碼

參考

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程