html的基礎(chǔ) 理論
發(fā)表時(shí)間：2023-09-12 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章給大家分享的是關(guān)于html基礎(chǔ) 理論知識(shí)，內(nèi)容很不錯(cuò)，有感興趣的朋友可以看一下HTML語(yǔ)義化HTML標(biāo)簽的語(yǔ)義化是指：通過(guò)使用包含語(yǔ)義的標(biāo)簽（如h1-h6）恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu)css命名的語(yǔ)義化是指：為html標(biāo)簽添加有意義的class為什么需要語(yǔ)義化：去掉樣式后頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)盲人使用讀...
本篇文章給大家分享的是關(guān)于html基礎(chǔ) 理論知識(shí)，內(nèi)容很不錯(cuò)，有感興趣的朋友可以看一下
HTML
語(yǔ)義化
簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？
用正確的標(biāo)簽做正確的事情。
html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;
即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解
Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)
標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作
HTML5 為什么只需要寫 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型
行內(nèi)元素有哪些？塊級(jí)元素有哪些？ 空(void)元素有那些？
行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語(yǔ)氣）
塊級(jí)元素有：p ul ol li dl dt dd h1 h2 h3 h4…p
常見(jiàn)的空元素: <br> <hr> <img> <input> <link> <meta>
頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？
link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS
頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載
import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題
介紹一下你對(duì)瀏覽器內(nèi)核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核
JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎
常見(jiàn)的瀏覽器內(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)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5？
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->
HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？
在用戶沒(méi)有與因特網(wǎng)連接時(shí)，可以正常訪問(wèn)站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件
原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示
如何使用：
頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性；
在cache.manifest文件的編寫離線存儲(chǔ)的資源
在離線狀態(tài)時(shí)，操作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瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢？
在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪問(wèn)app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)app并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。
離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。
請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過(guò)加密）
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），記會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存
存儲(chǔ)大�。�
有期時(shí)間：
localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除
cookie 設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉
iframe有那些缺點(diǎn)？
iframe會(huì)阻塞主頁(yè)面的Onload事件
搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于SEO
iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題
Label的作用是什么？是怎么用的？
HTML5的form如何關(guān)閉自動(dòng)完成功能？
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信? (阿里)
webSocket如何兼容低瀏覽器？(阿里)
頁(yè)面可見(jiàn)性（Page Visibility API） 可以有哪些用途？
如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
實(shí)現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果
<p style="height:1px;overflow:hidden;background:red"></p>
網(wǎng)頁(yè)驗(yàn)證碼是干嘛的，是為了解決什么安全問(wèn)題
title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
title屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響
strong是標(biāo)明重點(diǎn)內(nèi)容，有語(yǔ)氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：會(huì)重讀，而是展示強(qiáng)調(diào)內(nèi)容
i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本
頁(yè)面導(dǎo)入樣式時(shí)，使用 link 和 @import 有什么區(qū)別？
link 屬于HTML標(biāo)簽，除了加載CSS外，還能用于定 RSS等；@import 只能用于加載CSS
頁(yè)面加載的時(shí)，link 會(huì)同時(shí)被加載，而 @import 引用的 CSS 會(huì)等到頁(yè)面被加載完再加載
@import 只在 IE5 以上才能被識(shí)別，而 link 是HTML標(biāo)簽，無(wú)兼容問(wèn)題
介紹一下你對(duì)瀏覽器內(nèi)核的理解？
瀏覽器內(nèi)核主要分為兩部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎
渲染引擎負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容進(jìn)行布局計(jì)和樣式渲染，然后會(huì)輸出至顯示器或打印機(jī)
JS引擎則負(fù)責(zé)解析和執(zhí)行JS腳本來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果和用戶交互
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎
常見(jiàn)的瀏覽器內(nèi)核有哪些？
Blink內(nèi)核：新版 Chrome、新版 Opera
Webkit內(nèi)核：Safari、原Chrome
Gecko內(nèi)核：FireFox、Netscape6及以上版本
Trident內(nèi)核（又稱MSHTML內(nèi)核）：IE、國(guó)產(chǎn)瀏覽器
Presto內(nèi)核：原Opera7及以上
HTML5有哪些新特性？
新增選擇器 document.querySelector、document.querySelectorAll
拖拽釋放(Drag and drop) API
媒體播放的 video 和 audio
本地存儲(chǔ) localStorage 和 sessionStorage
離線應(yīng)用 manifest
桌面通知 Notifications
語(yǔ)意化標(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
頁(yè)面可見(jiàn)性改變事件 visibilitychange
跨窗口通信 PostMessage
Form Data 對(duì)象
繪畫 canvas
HTML5移除了那些元素？
如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？
如何區(qū)分 HTML 和 HTML5？
HTML5的離線儲(chǔ)存工作原理能不能解釋一下，怎么使用？
HTML5的離線儲(chǔ)存原理：
HTML5的離線儲(chǔ)存使用：
在文檔的 html 標(biāo)簽設(shè)置 manifest 屬性，如 manifest="/offline.appcache"
在項(xiàng)目中新建 manifest 文件，manifest 文件的命名建議：xxx.appcache
在 web 服務(wù)器配置正確的 MIME-type，即 text/cache-manifest
瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的？
在線的情況下，瀏覽器發(fā)現(xiàn) html 標(biāo)簽有 manifest 屬性，它會(huì)請(qǐng)求 manifest 文件
如果是第一次訪問(wèn)app，那么瀏覽器就會(huì)根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)
如果已經(jīng)訪問(wèn)過(guò)app且資源已經(jīng)離線存儲(chǔ)了，瀏覽器會(huì)對(duì)比新的 manifest 文件與舊的 manifest 文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作。如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)
離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。
iframe 有那些優(yōu)點(diǎn)和缺點(diǎn)？
label 的作用是什么？怎么使用的？
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信？
webSocket 如何兼容低瀏覽器？
頁(yè)面可見(jiàn)性（Page Visibility API） 可以有哪些用途？
在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候，自動(dòng)暫停音樂(lè)或視頻的播放
當(dāng)用戶瀏覽其他頁(yè)面，暫停網(wǎng)站首頁(yè)幻燈自動(dòng)播放
完成登陸后，無(wú)刷新自動(dòng)同步其他頁(yè)面的登錄狀態(tài)
title 與 h1 的區(qū)別、b 與 strong 的區(qū)別、i 與 em 的區(qū)別？
是展示強(qiáng)調(diào)內(nèi)容
i 內(nèi)容展示為斜體，em 表示強(qiáng)調(diào)的文本
自然樣式標(biāo)簽：b, i, u, s, pre
語(yǔ)義樣式標(biāo)簽：strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽, 但不能濫用。如果不能確定時(shí)，首選使用自然樣式標(biāo)簽
相關(guān)推薦：
幾個(gè)HTML基礎(chǔ)知識(shí)點(diǎn)
在前端中的html基礎(chǔ)知識(shí)
html基礎(chǔ)圖像知識(shí)詳解
以上就是html的基礎(chǔ) 理論的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
