明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html的基礎(chǔ) 理論

發(fā)表時間：2023-09-12 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家分享的是關(guān)于html基礎(chǔ) 理論知識，內(nèi)容很不錯，有感興趣的朋友可以看一下HTML語義化HTML標(biāo)簽的語義化是指：通過使用包含語義的標(biāo)簽（如h1-h6）恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu)css命名的語義化是指：為html標(biāo)簽添加有意義的class為什么需要語義化：去掉樣式后頁面呈現(xiàn)清晰的結(jié)構(gòu)盲人使用讀...
本篇文章給大家分享的是關(guān)于html基礎(chǔ) 理論知識，內(nèi)容很不錯，有感興趣的朋友可以看一下

HTML

語義化

  • HTML標(biāo)簽的語義化是指：通過使用包含語義的標(biāo)簽（如h1-h6）恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu)

  • css命名的語義化是指：為html標(biāo)簽添加有意義的class

  • 為什么需要語義化：

    • 去掉樣式后頁面呈現(xiàn)清晰的結(jié)構(gòu)

    • 盲人使用讀屏器更好地閱讀

    • 搜索引擎更好地理解頁面，有利于收錄

    • 便團(tuán)隊(duì)項(xiàng)目的可持續(xù)運(yùn)作及維護(hù)

簡述一下你對HTML語義化的理解？

  • 用正確的標(biāo)簽做正確的事情。

  • html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;

  • 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

  • 搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;

  • 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解

Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

  • <!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)

  • 標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作

HTML5 為什么只需要寫 <!DOCTYPE HTML>？

  • HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）

  • 而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型

行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

  • 行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）

  • 塊級元素有：p ul ol li dl dt dd h1 h2 h3 h4…p

  • 常見的空元素: <br> <hr> <img> <input> <link> <meta>

頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

  • link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS

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

  • import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題

介紹一下你對瀏覽器內(nèi)核的理解？

  • 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

  • 渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核

  • JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果

  • 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎

常見的瀏覽器內(nèi)核有哪些？

  • Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

  • Gecko內(nèi)核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

  • Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]

  • Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

  • HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加

    • 繪畫 canvas

    • 用于媒介回放的 video 和 audio 元素

    • 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

    • sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

    • 語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

    • 表單控件，calendar、date、time、email、url、search

    • 新的技術(shù)webworker, websocket, Geolocation

  • 移除的元素：

    • 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u

    • 對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes

  • 支持HTML5新標(biāo)簽：

    • IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽

    • 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽

    • 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式

  • 當(dāng)然也可以直接使用成熟的框架、比如html5shim

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->

  • 如何區(qū)分HTML5： DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素

HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

  • 在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機(jī)器上的緩存文件

  • 原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示

  • 如何使用：

    • 頁面頭部像下面一樣加入一個manifest的屬性；

    • 在cache.manifest文件的編寫離線存儲的資源

    • 在離線狀態(tài)時，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？

  • 在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲。

  • 離線的情況下，瀏覽器就直接使用離線存儲的資源。

請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

  • cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）

  • cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞

  • sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

  • 存儲大�。�

    • cookie數(shù)據(jù)大小不能超過4k

    • sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大

  • 有期時間：

    • localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)

    • sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除

    • cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

iframe有那些缺點(diǎn)？

  • iframe會阻塞主頁面的Onload事件

  • 搜索引擎的檢索程序無法解讀這種頁面，不利于SEO

  • iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載

  • 使用iframe之前需要考慮這兩個缺點(diǎn)。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題

Label的作用是什么？是怎么用的？

  • label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件

HTML5的form如何關(guān)閉自動完成功能？

  • 給不想要提示的 form 或某個 input 設(shè)置為 autocomplete=off。

如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? (阿里)

  • WebSocket、SharedWorker

  • 也可以調(diào)用localstorge、cookies等本地存儲方式

webSocket如何兼容低瀏覽器？(阿里)

  • Adobe Flash Socket 、

  • ActiveX HTMLFile (IE) 、

  • 基于 multipart 編碼發(fā)送 XHR 、

  • 基于長輪詢的 XHR

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

  • 通過 visibilityState 的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等;

  • 在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放

如何在頁面上實(shí)現(xiàn)一個圓形的可點(diǎn)擊區(qū)域？

  • map+area或者svg

  • border-radius

  • 純js實(shí)現(xiàn) 需要求一個點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等

實(shí)現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果

<p style="height:1px;overflow:hidden;background:red"></p>

網(wǎng)頁驗(yàn)證碼是干嘛的，是為了解決什么安全問題

  • 區(qū)分用戶是計算機(jī)還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水

  • 有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試

title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

  • title屬性沒有明確意義只表示是個標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響

  • strong是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：會重讀，而是展示強(qiáng)調(diào)內(nèi)容

  • i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本

頁面導(dǎo)入樣式時，使用 link 和 @import 有什么區(qū)別？

  • link 屬于HTML標(biāo)簽，除了加載CSS外，還能用于定 RSS等；@import 只能用于加載CSS

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

  • @import 只在 IE5 以上才能被識別，而 link 是HTML標(biāo)簽，無兼容問題

介紹一下你對瀏覽器內(nèi)核的理解？

  • 瀏覽器內(nèi)核主要分為兩部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎

  • 渲染引擎負(fù)責(zé)取得網(wǎng)頁的內(nèi)容進(jìn)行布局計和樣式渲染，然后會輸出至顯示器或打印機(jī)

  • JS引擎則負(fù)責(zé)解析和執(zhí)行JS腳本來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果和用戶交互

  • 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎

常見的瀏覽器內(nèi)核有哪些？

  • Blink內(nèi)核：新版 Chrome、新版 Opera

  • Webkit內(nèi)核：Safari、原Chrome

  • Gecko內(nèi)核：FireFox、Netscape6及以上版本

  • Trident內(nèi)核（又稱MSHTML內(nèi)核）：IE、國產(chǎn)瀏覽器

  • Presto內(nèi)核：原Opera7及以上

HTML5有哪些新特性？

  • 新增選擇器 document.querySelector、document.querySelectorAll

  • 拖拽釋放(Drag and drop) API

  • 媒體播放的 video 和 audio

  • 本地存儲 localStorage 和 sessionStorage

  • 離線應(yīng)用 manifest

  • 桌面通知 Notifications

  • 語意化標(biāo)簽 article、footer、header、nav、section

  • 增強(qiáng)表單控件 calendar、date、time、email、url、search

  • 地理位置 Geolocation

  • 多任務(wù) webworker

  • 全雙工通信協(xié)議 websocket

  • 歷史管理 history

  • 跨域資源共享(CORS) Access-Control-Allow-Origin

  • 頁面可見性改變事件 visibilitychange

  • 跨窗口通信 PostMessage

  • Form Data 對象

  • 繪畫 canvas

HTML5移除了那些元素？

  • 純表現(xiàn)的元素：basefont、big、center、font、s、strike、tt、u

  • 對可用性產(chǎn)生負(fù)面影響的元素：frame、frameset、noframes

如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？

  • 通過 document.createElement 創(chuàng)建新標(biāo)簽

  • 使用墊片 html5shiv.js

如何區(qū)分 HTML 和 HTML5？

  • DOCTYPE聲明、新增的結(jié)構(gòu)元素、功能元素

HTML5的離線儲存工作原理能不能解釋一下，怎么使用？

  • HTML5的離線儲存原理：

    • 用戶在線時，保存更新用戶機(jī)器上的緩存文件；當(dāng)用戶離線時，可以正常訪離線儲存問站點(diǎn)或應(yīng)用內(nèi)容

  • HTML5的離線儲存使用：

    • 在文檔的 html 標(biāo)簽設(shè)置 manifest 屬性，如 manifest="/offline.appcache"

    • 在項(xiàng)目中新建 manifest 文件，manifest 文件的命名建議：xxx.appcache

    • 在 web 服務(wù)器配置正確的 MIME-type，即 text/cache-manifest

瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的？

  • 在線的情況下，瀏覽器發(fā)現(xiàn) html 標(biāo)簽有 manifest 屬性，它會請求 manifest 文件

  • 如果是第一次訪問app，那么瀏覽器就會根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲

  • 如果已經(jīng)訪問過app且資源已經(jīng)離線存儲了，瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發(fā)生改變，就不做任何操作。如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲

  • 離線的情況下，瀏覽器就直接使用離線存儲的資源。

iframe 有那些優(yōu)點(diǎn)和缺點(diǎn)？

  • 優(yōu)點(diǎn)：

    • 用來加載速度較慢的內(nèi)容（如廣告）

    • 可以使腳本可以并行下載

    • 可以實(shí)現(xiàn)跨子域通信

  • 缺點(diǎn)：

    • iframe 會阻塞主頁面的 onload 事件

    • 無法被一些搜索引擎索識別

    • 會產(chǎn)生很多頁面，不容易管理

label 的作用是什么？怎么使用的？

  • label標(biāo)簽來定義表單控件的關(guān)系：

    • 當(dāng)用戶選擇label標(biāo)簽時，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和label標(biāo)簽相關(guān)的表單控件上

  • 使用方法1：

    • <label for="mobile">Number:</label>

    • <input type="text" id="mobile"/>

  • 使用方法2：

    • <label>Date:<input type="text"/></label>

如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信？

  • iframe + contentWindow

  • postMessage

  • SharedWorker(Web Worker API)

  • storage 事件(localStorge API)

  • WebSocket

webSocket 如何兼容低瀏覽器？

  • Adobe Flash Socket

  • ActiveX HTMLFile (IE)

  • 基于 multipart 編碼發(fā)送 XHR

  • 基于長輪詢的 XHR

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

  • 在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放

  • 當(dāng)用戶瀏覽其他頁面，暫停網(wǎng)站首頁幻燈自動播放

  • 完成登陸后，無刷新自動同步其他頁面的登錄狀態(tài)

title 與 h1 的區(qū)別、b 與 strong 的區(qū)別、i 與 em 的區(qū)別？

  • title 表示是整個頁面標(biāo)題，h1 則表示層次明確的標(biāo)題，對頁面信息的抓取有很大的影響

  • strong 標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時，strong 會重讀，而 b

是展示強(qiáng)調(diào)內(nèi)容

  • i 內(nèi)容展示為斜體，em 表示強(qiáng)調(diào)的文本

  • 自然樣式標(biāo)簽：b, i, u, s, pre

  • 語義樣式標(biāo)簽：strong, em, ins, del, code

  • 應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用。如果不能確定時，首選使用自然樣式標(biāo)簽

相關(guān)推薦：

幾個HTML基礎(chǔ)知識點(diǎn)

在前端中的html基礎(chǔ)知識

html基礎(chǔ)圖像知識詳解

以上就是html的基礎(chǔ) 理論的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。




標(biāo)簽：html的基礎(chǔ) 理論