溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了html基礎知識點有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
語義化
HTML標簽的語義化是指：通過使用包含語義的標簽（如h2-h7）恰當地表示文檔結構
css命名的語義化是指：為html標簽添加有意義的class
為什么需要語義化：
去掉樣式后頁面呈現清晰的結構
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面，有利于收錄
便團隊項目的可持續運作及維護
簡述一下你對HTML語義化的理解？
用正確的標簽做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解
Doctype作用？標準模式與兼容模式各有什么區別?
<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現
標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作
HTML5 為什么只需要寫 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型
行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：p ul ol li dl dt dd h2 h3 h4 h5…p
常見的空元素: <br> <hr> <img> <input> <link> <meta>
頁面導入樣式時，使用link和@import有什么區別？
link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題
介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核
JS引擎則：解析和執行javascript來實現網頁的動態效果
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎
常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加
繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
sessionStorage 的數據在瀏覽器關閉后自動刪除
語意化更好的內容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u
對可用性產生負面影響的元素：frame，frameset，noframes
支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽
可以利用這一特性讓這些瀏覽器支持HTML5新標簽
瀏覽器支持新標簽后，還需要添加標簽默認的樣式
當然也可以直接使用成熟的框架、比如html5shim
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com /svn/trunk/html5.js"</script><![endif]-->
如何區分HTML5： DOCTYPE聲明新增的結構元素功能元素
HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示
如何使用：
頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源
在離線狀態時，操作window.applicationCache進行需求實現
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
存儲大小：
cookie數據大小不能超過4k
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
有期時間：
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
iframe有那些缺點？
iframe會阻塞主頁面的Onload事件
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題
Label的作用是什么？是怎么用的？
label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件
HTML5的form如何關閉自動完成功能？
給不想要提示的 form 或某個 input 設置為 autocomplete=off。
如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
WebSocket、SharedWorker
也可以調用localstorge、cookies等本地存儲方式
webSocket如何兼容低瀏覽器？(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發送 XHR 、
基于長輪詢的 XHR
頁面可見性（Page Visibility API） 可以有哪些用途？
通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放
如何在頁面上實現一個圓形的可點擊區域？
map+area或者svg
border-radius
純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果
<p style="height:1px;overflow:hidden;background:red"></p>
網頁驗證碼是干嘛的，是為了解決什么安全問題
區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水
有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試
title與h2的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響
strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：會重讀，而是展示強調內容
i內容展示為斜體，em表示強調的文本
頁面導入樣式時，使用 link 和 @import 有什么區別？
link 屬于HTML標簽，除了加載CSS外，還能用于定 RSS等；@import 只能用于加載CSS
頁面加載的時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載
@import 只在 IE5 以上才能被識別，而 link 是HTML標簽，無兼容問題
介紹一下你對瀏覽器內核的理解？
瀏覽器內核主要分為兩部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎
渲染引擎負責取得網頁的內容進行布局計和樣式渲染，然后會輸出至顯示器或打印機
JS引擎則負責解析和執行JS腳本來實現網頁的動態效果和用戶交互
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎
常見的瀏覽器內核有哪些？
Blink內核：新版 Chrome、新版 Opera
Webkit內核：Safari、原Chrome
Gecko內核：FireFox、Netscape6及以上版本
Trident內核（又稱MSHTML內核）：IE、國產瀏覽器
Presto內核：原Opera7及以上
HTML5有哪些新特性？
新增選擇器 document.querySelector、document.querySelectorAll
拖拽釋放(Drag and drop) API
媒體播放的 video 和 audio
本地存儲 localStorage 和 sessionStorage
離線應用 manifest
桌面通知 Notifications
語意化標簽 article、footer、header、nav、section
增強表單控件 calendar、date、time、email、url、search
地理位置 Geolocation
多任務 webworker
全雙工通信協議 websocket
歷史管理 history
跨域資源共享(CORS) Access-Control-Allow-Origin
頁面可見性改變事件 visibilitychange
跨窗口通信 PostMessage
Form Data 對象
繪畫 canvas
HTML5移除了那些元素？
純表現的元素：basefont、big、center、font、s、strike、tt、u
對可用性產生負面影響的元素：frame、frameset、noframes
如何處理HTML5新標簽的瀏覽器兼容問題？
通過 document.createElement 創建新標簽
使用墊片 html5shiv.js
如何區分 HTML 和 HTML5？
DOCTYPE聲明、新增的結構元素、功能元素
HTML5的離線儲存工作原理能不能解釋一下，怎么使用？
HTML5的離線儲存原理：
用戶在線時，保存更新用戶機器上的緩存文件；當用戶離線時，可以正常訪離線儲存問站點或應用內容
HTML5的離線儲存使用：
在文檔的 html 標簽設置 manifest 屬性，如 manifest="/offline.appcache"
在項目中新建 manifest 文件，manifest 文件的命名建議：xxx.appcache
在 web 服務器配置正確的 MIME-type，即 text/cache-manifest
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的？
在線的情況下，瀏覽器發現 html 標簽有 manifest 屬性，它會請求 manifest 文件
如果是第一次訪問app，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源并且進行離線存儲
如果已經訪問過app且資源已經離線存儲了，瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作。如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲
離線的情況下，瀏覽器就直接使用離線存儲的資源。
iframe 有那些優點和缺點？
優點：
用來加載速度較慢的內容（如廣告）
可以使腳本可以并行下載
可以實現跨子域通信
缺點：
iframe 會阻塞主頁面的 onload 事件
無法被一些搜索引擎索識別
會產生很多頁面，不容易管理
label 的作用是什么？怎么使用的？
label標簽來定義表單控件的關系：
當用戶選擇label標簽時，瀏覽器會自動將焦點轉到和label標簽相關的表單控件上
使用方法1：
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
使用方法2：
<label>Date:<input type="text"/></label>
如何實現瀏覽器內多個標簽頁之間的通信？
iframe + contentWindow
postMessage
SharedWorker(Web Worker API)
storage 事件(localStorge API)
WebSocket
webSocket 如何兼容低瀏覽器？
Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 編碼發送 XHR
基于長輪詢的 XHR
頁面可見性（Page Visibility API） 可以有哪些用途？
在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放
當用戶瀏覽其他頁面，暫停網站首頁幻燈自動播放
完成登陸后，無刷新自動同步其他頁面的登錄狀態
title 與 h2 的區別、b 與 strong 的區別、i 與 em 的區別？
title 表示是整個頁面標題，h2 則表示層次明確的標題，對頁面信息的抓取有很大的影響
strong 標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時，strong 會重讀，而 b
是展示強調內容
i 內容展示為斜體，em 表示強調的文本
自然樣式標簽：b, i, u, s, pre
語義樣式標簽：strong, em, ins, del, code
應該準確使用語義樣式標簽, 但不能濫用。如果不能確定時，首選使用自然樣式標簽
感謝你能夠認真閱讀完這篇文章，希望小編分享的“html基礎知識點有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
