前端-HTML基本概念

什么是HTML

常用的瀏覽器引擎是什么？

常見的HTML實體字符

HTML注釋

HTML語義化是什么？為什么要語義化？一定要語義化嗎？

連續空格如何渲染？

聲明文檔類型

哪些字符集編碼支持簡體中文？

如何解決亂碼問題？

如何驗證HTML是否正確？

重點：什么是HTML5？它有哪些新特性？

什么是MIME types，常見的MIME type有哪些？

重點：什么是ARIA？

注：本文以力扣的前端HTML為基礎

本文看完了解基礎后，面試前還可以看一下《七天八股速記：前端》來速記一下

什么是HTML

HTML全稱是 HyperText Markup Language ，也就是超文本標記語言

HTML被歸類為一種標記語言，而不是編程語言

在前端-什么是結構語言、樣式語言、腳本語言？-CSDN博客中我稱HTML是房子的骨架，是因為他是用來告知瀏覽器如何組織頁面的標記，用來描述網頁的表現，展示效果或功能以及行為

“超文本”是指連接單個網站或多個網站網頁的鏈接，比如（下面的超鏈接就是超文本的一種）

<a href="https://www.example.com">點擊我跳轉</a>

HTML使用“標記”（markup）來注明文本、圖片和其他內容

HTML使用“標簽”（tag）標記元素，標簽由在 < 和 > 中包裹的元素名組成

HTML標簽里的元素名不區分大小寫

常用的瀏覽器引擎是什么？

瀏覽器是一種從Web獲取和顯示頁面的程序，讓用戶通過超鏈接訪問更多頁面

排版引擎（Layout Engine），也稱為瀏覽器引擎（Browser Engine）、頁面渲染引擎（Rendering Engine）或樣板引擎，它是軟件組件，負責獲取標記式內容（如HTML、XML及圖像文件等）和整合信息（如CSS以及XSL等），并將排版后內容輸出至顯示器或打印機

上面的CSS就是我之前說的樣式語言，控制顏色、字體、大小、位置等（房子的裝修）

XML（eXtensible Markup Language）可拓展標記語言，是一種數據存儲和傳輸語言，而現在JSON更加常用了

常見的瀏覽器排版引擎有：

Mozilla Firefox 使用 Gecko 引擎
Apple Safari 和早期 Google Chrome 使用 KDE 引擎，后發展成為 WebKit 引擎
Internet Explorer 使用 Trident 引擎
Microsoft Edge 早期使用 EdgeHTML 引擎
Opera 早期使用 Presto 引擎
目前，Google Chrome 及基于 Chromium 瀏覽器，如 Microsoft Edge，Opera 使用基于 WebKit 分支自行構建的 Blink 引擎

常見的HTML實體字符

HTML語法自身的特殊字符

表示其自身的話得用特殊引用：以&開始，分號；結束（有點像反斜杠 \ 轉義符）

原義字符? ? ? ? ? ? ? ? ? ? ? ? 等價字符飲用

<? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <

>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? >

"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "

'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '

&? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? &

空格? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  

HTML注釋

用  包裹

HTML注釋不會被渲染

? ? ? ? 會被傳輸

? ? ? ? 解析時，早起IE瀏覽器用HTML注釋區分版本

? ? ? ? 通常使用UglifyJS 和 Terser 或正則匹配的方式，在生產環境刪除注釋

HTML注釋用來描述

? ? ? ? 代碼怎么工作

? ? ? ? 不同部分代碼做了什么

HTML語義化是什么？為什么要語義化？一定要語義化嗎？

語義是語言的含義，語義化是前端開發的專用術語，指使用具有真實意義的標簽來標記內容（比如<header>頁眉、<nav>導航欄、<main>頁面主要內容等等）語義類標簽是對內容的補充，表達標題摘要、文章結構、強調重點、豐富含義、避免歧義

HTML語義化的好處是

? ? ? ? 易讀、增強可讀性、便于開發和維護

? ? ? ? 增強可訪問性，便于屏幕閱讀器定位和朗讀

? ? ? ? 增強結構清晰度，利于SEO（Search Enigine Optimization 搜索引擎優化：更容易被搜索引擎抓取放在前面，獲得更多瀏覽量）

? ? ? ? HTML語義化不是一定要執行的標準

? ? ? ? 利用無語義標簽，如 <div> 和 <span> 可以滿足幾乎所有開發需求（<div>是用來包“大塊內容”的塊級容器，<span>是用來包“小段文字”的行內容器，向外顯示文字）

? ? ? ? 部分語義化標簽存在兼容性問題，如 <button> 的默認 type 不總為 submit 等

? ? ? ? 濫用標簽會增加不必要的嵌套，增加CSS Reset的樣式（雖然CSS不強制要求和HTML的語義化標簽對應，但是如果你想寫出高質量、可維護、利于SEO的網頁，CSS最好和HTML的語義結構對應）

<article class="news-card"><h2>標題</h2><p>新聞內容...</p>
</article>

語義化這是一章文章塊

CSS：配合語義來美化

.news-card {border: 1px solid gray;padding: 10px;background: #f9f9f9;
}

? ? ? ? 除了HTML 語義化以外，良好的命名，簡明扁平的結構，良好的無障礙設計，清晰的導航和分區，一定程度上，也能彌補語義的欠缺，提升代碼的機器閱讀體驗，降低抓取難度，提高索引權重

連續空格如何渲染？

為了增加代碼可讀性，開發者一般會在HTML元素中嵌套使用空白

空白可以使用空格或TAB縮進實現

HTML解釋器會講連續出現的空白字符識別為一個單獨的空格符

如果一定要使用連續空格，可以用全角空格或者實體字符  

聲明文檔類型

<!DOCTYPE html>? ? ? ? ? ? ? ? （即：DOC? TYPE）

是最簡單有效的文檔類型聲明，目的是防止瀏覽器在渲染文檔的時候，切換到“怪異模式（兼容模式）”。確保瀏覽器按照最佳相關規范進行渲染，而不是使用一個不符合規范的渲染模式

哪些字符集編碼支持簡體中文？

支持簡體中文的字符集編碼有：

國標開頭的????????GB 2312、GBK、GB 18030

大五碼? ? ? ? BIG5

萬國碼? ? ? ? Unicode? ? ? ? 轉換格式即 UTF（-8、-16、-32）是將數字轉換到程序數據的編碼方案

如何解決亂碼問題？

亂碼原因：

????????客戶端不支持 HTML 編碼的字符集

????????實際存儲的字符集與使用 meta 標簽聲明的字符集不一致

????????????????部分現代瀏覽器會自動糾正，根據實際使用的字符集編碼渲染 HTML

解決方案：使用 UTF-8 存儲并在頁面添加?<meta charset="utf-8"> 聲明編碼類型

如何驗證HTML是否正確？

驗證 HTML 的最好方法使用 W3C 創立并維護的標記驗證服務，網址如下：

https://validator.w3.org/

提交一個線上 URL，HTML 文件或者代碼，網頁會返回相應的錯誤報告

重點：什么是HTML5？它有哪些新特性？

HTML5是HTML標準的最新版本。其引入了許多新的特性，使得Web開發變得更加簡單和強大。下面列舉一些HTML5的新特性：

1.語義化標簽：HTML5新增了一些語義化標簽，如<header>, <nav>, <article>, <section>, <footer>等，使得網頁的結構更加清晰明了。

2.增強的表單控件：HTML5提供了一些新的表單控件，如日期選擇器、顏色選擇器、數字輸入框等，使得表單更加易用和靈活。

3.視頻和音頻支持：HTML5原生支持視頻和音頻，可以使用<video>和<audio>標簽來嵌入視頻和音頻文件，不再需要依賴第三方插件（如Flash）來播放。

4.Canvas繪圖：HTML5的Canvas API允許我們使用JavaScript在網頁上繪制圖形、動畫和游戲。

5.Web存儲：HTML5引入了Web Storage API，使得我們可以在瀏覽器中存儲數據，包括本地存儲和會話存儲。

6.地理定位：HTML5提供了Geolocation API，可以獲取用戶的地理位置信息，使得我們可以開發基于地理位置的應用。

7.WebSocket和Server-Sent Events：HTML5提供了兩種新的網絡技術，WebSocket和Server-Sent Events，使得我們可以實現實時通信和事件推送。

8.Web Workers：HTML5的Web Workers允許我們使用JavaScript創建后臺線程，從而提高Web應用的性能和響應能力。

除了上述特性之外，HTML5還引入了許多其他的新特性和API，如IndexedDB、File API、Web Components等，使得Web開發更加高效和靈活。

詳情版看：力扣

什么是MIME types，常見的MIME type有哪些？

MIMEtype（現在稱為“媒體類型（media type）”，但有時也是“內容類型”（content type））其實就是一種在互聯網上標識文件格式和處理方式的標準，它通過在HTTP頭部中添加MIME類型信息、和文件一起發送（例如，一個聲音文件可能被標記為?audio/ogg?一個圖像文件可能是?image/png?），來指示文件類型（有點類似于文件拓展名），讓瀏覽器或其他用戶代理（例如郵件客戶端）知道如何正確地處理特定的文件格式。
常見的MIME類型：

text/plain?表示文本文件的默認值，一個文本文件應當是人類可讀的，并且不包含二進制數據

application/octet-stream 表示所有其他情況的默認值。一種未知的文件類型應當使用此類型。瀏覽器在處理這些文件時會特別小心，試圖防止、避免用戶的危險行為

text/html：HTML文件類型
text/plain：純文本文件類型
text/css：CSS文件類型
text/javascript：JavaScript文件類型
application/json：JSON數據類型
application/xml：XML文件類型
image/jpeg：JPEG圖片類型
image/png：PNG圖片類型
image/gif：GIF圖片類型
application/pdf：PDF文件類型
application/msword：Word文檔類型
application/vnd.ms-excel：Excel文件類型
audio/mpeg：用于表示 MP3 音頻文件。
video/mp4：用于表示 MP4 視頻文件

重點：什么是ARIA？

ARIA（Accessible Rich Internet Applications）是能夠讓殘障人士更加便利地訪問 Web 內容和使用 Web 應用的一套機制，來自 W3C（整個互聯網定規則的組織，它負責規范 HTML、CSS、XML、DOM 等技術標準，確保所有瀏覽器、網站、設備都能互通）的網絡無障礙計劃 WAI（Web Accessibility Initiative）

????????ARIA 是對超文本標記語言（HTML）的補充，以便在沒有其他機制的情況下，使得應用程序中常用的交互和小部件可以傳遞給輔助交互技術

????????ARIA 是一組特殊的易用性屬性，可以添加到任意標簽上，尤其適用于 HTML。role 屬性定義了對象的通用類型（例如文章、警告、或幻燈片）。額外的 ARIA 屬性提供了其他有用的特性，例如表單的描述或進度條的當前值

????????ARIA 在大多數流行的瀏覽器和屏幕閱讀器中得到了實現

????????開發人員應該更傾向使用對應的語義化 HTML 元素，而不是使用 ARIA。