這篇文章主要介紹了html基礎(chǔ)知識點有哪些,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

語義化
HTML標(biāo)簽的語義化是指:通過使用包含語義的標(biāo)簽(如h2-h7)恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu)
css命名的語義化是指:為html標(biāo)簽添加有意義的class
為什么需要語義化:
去掉樣式后頁面呈現(xiàn)清晰的結(jié)構(gòu)
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面,有利于收錄
便團隊項目的可持續(xù)運作及維護
簡述一下你對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)站分塊,便于閱讀維護理解
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運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。在兼容模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作
HTML5 為什么只需要寫 <!DOCTYPE HTML>?
HTML5 不基于 SGML,因此不需要對DTD進行引用,但是需要doctype來規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運行)
而HTML4.01基于SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型
行內(nèi)元素有哪些?塊級元素有哪些? 空(void)元素有那些?
行內(nèi)元素有:a b span img input select strong(強調(diào)的語氣)
塊級元素有:p ul ol li dl dt dd h2 h3 h4 h5…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)頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同,所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核
JS引擎則:解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確,后來JS引擎越來越獨立,內(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)連接時,可以正常訪問站點或應(yīng)用,在用戶與因特網(wǎng)連接時,更新用戶機器上的緩存文件
原理:HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù)),通過這個文件上的解析清單離線存儲資源,這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時,瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示
如何使用:
頁面頭部像下面一樣加入一個manifest的屬性;
在cache.manifest文件的編寫離線存儲的資源
在離線狀態(tài)時,操作window.applicationCache進行需求實現(xiàn)
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢?
在線的情況下,瀏覽器發(fā)現(xiàn)html頭部有manifest屬性,它會請求manifest文件,如果是第一次訪問app,那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了,那么瀏覽器就會使用離線的資源加載頁面,然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發(fā)生改變,就不做任何操作,如果文件改變了,那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下,瀏覽器就直接使用離線存儲的資源。
請描述一下 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大得多,可以達到5M或更大
有期時間:
localStorage存儲持久數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除
cookie 設(shè)置的cookie過期時間之前一直有效,即使窗口或瀏覽器關(guān)閉
iframe有那些缺點?
iframe會阻塞主頁面的Onload事件
搜索引擎的檢索程序無法解讀這種頁面,不利于SEO
iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的并行加載
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript動態(tài)給iframe添加src屬性值,這樣可以繞開以上兩個問題
Label的作用是什么?是怎么用的?
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時,瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件
HTML5的form如何關(guān)閉自動完成功能?
給不想要提示的 form 或某個 input 設(shè)置為 autocomplete=off。
如何實現(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)頁的時間等;
在頁面被切換到其他后臺進程的時候,自動暫停音樂或視頻的播放
如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域?
map+area或者svg
border-radius
純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等
實現(xiàn)不使用 border 畫出1px高的線,在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果
<p style="height:1px;overflow:hidden;background:red"></p>
網(wǎng)頁驗證碼是干嘛的,是為了解決什么安全問題
區(qū)分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水
有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試
title與h2的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別?
title屬性沒有明確意義只表示是個標(biāo)題,H1則表示層次明確的標(biāo)題,對頁面信息的抓取也有很大的影響
strong是標(biāo)明重點內(nèi)容,有語氣加強的含義,使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時:會重讀,而是展示強調(diào)內(nèi)容
i內(nèi)容展示為斜體,em表示強調(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)容進行布局計和樣式渲染,然后會輸出至顯示器或打印機
JS引擎則負(fù)責(zé)解析和執(zhí)行JS腳本來實現(xiàn)網(wǎng)頁的動態(tài)效果和用戶交互
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確,后來JS引擎越來越獨立,內(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
增強表單控件 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的離線儲存原理:
用戶在線時,保存更新用戶機器上的緩存文件;當(dāng)用戶離線時,可以正常訪離線儲存問站點或應(yīng)用內(nèi)容
HTML5的離線儲存使用:
在文檔的 html 標(biāo)簽設(shè)置 manifest 屬性,如 manifest="/offline.appcache"
在項目中新建 manifest 文件,manifest 文件的命名建議:xxx.appcache
在 web 服務(wù)器配置正確的 MIME-type,即 text/cache-manifest
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的?
在線的情況下,瀏覽器發(fā)現(xiàn) html 標(biāo)簽有 manifest 屬性,它會請求 manifest 文件
如果是第一次訪問app,那么瀏覽器就會根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲
如果已經(jīng)訪問過app且資源已經(jīng)離線存儲了,瀏覽器會對比新的 manifest 文件與舊的 manifest 文件,如果文件沒有發(fā)生改變,就不做任何操作。如果文件改變了,那么就會重新下載文件中的資源并進行離線存儲
離線的情況下,瀏覽器就直接使用離線存儲的資源。
iframe 有那些優(yōu)點和缺點?
優(yōu)點:
用來加載速度較慢的內(nèi)容(如廣告)
可以使腳本可以并行下載
可以實現(xiàn)跨子域通信
缺點:
iframe 會阻塞主頁面的 onload 事件
無法被一些搜索引擎索識別
會產(chǎn)生很多頁面,不容易管理
label 的作用是什么?怎么使用的?
label標(biāo)簽來定義表單控件的關(guān)系:
當(dāng)用戶選擇label標(biāo)簽時,瀏覽器會自動將焦點轉(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>
如何實現(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) 可以有哪些用途?
在頁面被切換到其他后臺進程的時候,自動暫停音樂或視頻的播放
當(dāng)用戶瀏覽其他頁面,暫停網(wǎng)站首頁幻燈自動播放
完成登陸后,無刷新自動同步其他頁面的登錄狀態(tài)
title 與 h2 的區(qū)別、b 與 strong 的區(qū)別、i 與 em 的區(qū)別?
title 表示是整個頁面標(biāo)題,h2 則表示層次明確的標(biāo)題,對頁面信息的抓取有很大的影響
strong 標(biāo)明重點內(nèi)容,有語氣加強的含義,使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時,strong 會重讀,而 b
是展示強調(diào)內(nèi)容
i 內(nèi)容展示為斜體,em 表示強調(diào)的文本
自然樣式標(biāo)簽:b, i, u, s, pre
語義樣式標(biāo)簽:strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用。如果不能確定時,選使用自然樣式標(biāo)簽
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“html基礎(chǔ)知識點有哪些”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)建站,關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
本文題目:html基礎(chǔ)知識點有哪些-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于:http://chinadenli.net/article28/eogcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、外貿(mào)建站、定制網(wǎng)站、用戶體驗、網(wǎng)站建設(shè)、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容