也不知道有沒有跟小編有同感的童鞋,隨着技術的逐(ri)漸(yi)提(tui)升(bu),對於一些底層的概念性的知識點卻有些遺忘。有時候知道是這麼個意思,可是表述出來的時候也沒能完整的說到點子上。出現此現象的時候,小編以爲是時候該作點什麼了(嗯!)。css
如下是小編就這HTML常見的問題整理出來的知識點,後繼還會出CSS,JS相關係列的文章,用於整理以及鞏固基礎。本篇着重針對的是萌新以及像小編同樣對於一些基礎概念性的東西有遺忘的童鞋,亦可做爲處於跳槽階段的童鞋做爲溫習的文章,如有記憶超凡的大佬請跳過。html
小建議: 鑑於文章多以文字爲主,建議能夠收藏,分次閱讀,提升閱讀效率。文中小編已標註好分割線前端
HTML
:超文本標記語言,是語法較爲鬆散的、不嚴格的Web
語言;XML
:可擴展的標記語言,主要用於存儲數據和結構,可擴展;XHTML
:可擴展的超文本標記語言,基於XML
,做用與HTML
相似,但語法更嚴格。HTML5
是HTML
的新標準,其主要目標是無需任何額外的插件如Flash
、Silverlight
等,就能夠傳輸全部內容。它囊括了動畫、視頻、豐富的圖形用戶界面等。html5
HTML5
是由萬維網聯盟(W3C)
和Web Hypertext Application Technology Working Group
合做建立的HTML
新版本。web
從文檔聲明類型上看:面試
HTML
是很長的一段代碼,很難記住。以下代碼:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
複製代碼
HTML5
卻只有簡簡單單的聲明,方便記憶。以下:<!DOCTYPE html>
複製代碼
從語義結構上看:數據庫
HTML4.0
:沒有體現結構語義化的標籤,一般都是這樣來命名的<div id="header"></div>
,這樣表示網站的頭部。HTML5
:在語義上卻有很大的優點。提供了一些新的標籤,好比:<header><article><footer>
。拓展: 不輸入<!DOCTYPE HTML>
,瀏覽器將沒法識別html
文件,所以html
將沒法正常工做。編程
XHTML
標籤名必須小寫;XHTML
元素必須被關閉;XHTML
元素必須被正確的嵌套;XHTML
元素必需要有根元素。HTML5
新增了canvas
繪畫元素;HTML5
新增了用於繪媒介回放的video
和audio
元素;MATHML
,SVG
等,能夠更好的render
;calendar
、date
、time
、email
等。XHTML
是HTML
規範版本;HTML5
是HTML
、XHTML
以及HTML DOM
的新標準。這是由於HTML5
不基於SGML
,所以不須要對DTD
進行引用,可是須要DOCTYPE
來規範瀏覽器的行爲(讓瀏覽器按照他們應該的方式來運行)而HTML4.01
基於SGML
,因此須要對DTD
進行引用,才能告知瀏覽器文檔所使用的文檔類型。canvas
a
, b
, span
, img
, input
, select
, strong
;div
, ul
, li
, dl
, dt
, dd
, h1-5
, p
等;<br>
, <hr>
, <img>
, <link>
, <meta>
;link
屬於HTML
標籤,而@import
是css
提供的;link
會同時被加載,而@import
引用的css會等到頁面被加載完再加載;@import
只在IE5
以上才能識別,而link
是XHTML
標籤,無兼容問題;link
方式的樣式的權重高於@import
的權重。如今幾乎全部現有的瀏覽器都支持HTML5
,例如Chrome
, Opera
, Safari
, IE
, 火狐等;跨域
label
標籤來定義表單控制間的關係,當用戶選擇該標籤時,瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
<label for="Name">Number:</label>
<input type=「text「 name="Name" id="Name"/>
複製代碼
alt
是爲了在圖片未能正常顯示時(屏幕閱讀器)給予文字說明。且長度必須少於100個英文字符或者用戶必須保證替換文字儘量的短。title
屬性爲設置該屬性的元素提供建議性的信息。使用title
屬性提供非本質的額外信息。語義化是指根據內容的結構化(內容語義化),選擇合適的標籤(代碼語義化),便於開發者閱讀和寫出更優雅的代碼的同時,讓瀏覽器的爬蟲和機器很好的解析。
SEO
:和搜索引擎創建良好溝通,有助於爬蟲抓取更多的有效信息:爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重;文檔聲明是爲了告訴瀏覽器,咱們寫的HTML
文檔當前使用什麼版本的HTML
來寫的,這樣瀏覽器才能按照咱們聲明的版原本正確的解析。
<!doctype html>
的做用就是讓瀏覽器進入標準模式,使用最新的 HTML5
標準來解析渲染頁面;若是不寫,瀏覽器就會進入混雜模式,咱們須要避免此類狀況發生。
嚴格模式: 又稱爲標準模式,指瀏覽器按照W3C
標準解析代碼;
混雜模式: 又稱怪異模式、兼容模式,是指瀏覽器用本身的方式解析代碼.混雜模式一般模擬老式瀏覽器的行爲,以防止老站點沒法工做;
區分:
網頁中的DTD
,直接影響到使用的是嚴格模式仍是瀏覽模式,能夠說DTD
的使用與這兩種方式的區別息息相關。
DOCTYPE
,那麼它通常以嚴格模式呈現(嚴格 DTD ——嚴格模式);DTD
和 URI
的 DOCTYPE
,也以嚴格模式呈現,但有過渡 DTD
而沒有 URI
(統一資源標識符,就是聲明最後的地址)會致使頁面以混雜模式呈現(有 URI 的過渡 DTD ——嚴格模式;沒有 URI 的過渡 DTD ——混雜模式);DOCTYPE
不存在或形式不正確會致使文檔以混雜模式呈現(DTD不存在或者格式不正確——混雜模式);HTML5
沒有 DTD
,所以也就沒有嚴格模式與混雜模式的區別,HTML5
有相對寬鬆的語法,實現時,已經儘量大的實現了向後兼容(HTML5 沒有嚴格和混雜之分)。總的來講,嚴格模式讓各個瀏覽器統一執行一套規範.兼容模式保證了舊網站的正常運行。
能夠經過調用localstorge、cookies等本地存儲方式。
Adobe Flash Socket
;ActiveX HTMLFile (IE)
;multipart
編碼發送 XHR
;iframe
能夠實現無刷新文件上傳;iframe
能夠跨域通訊;iframe
會阻塞主頁面的Onload事件;http
請求;src
用於替換當前元素;href
用於在當前文檔和引用資源之間確立聯繫;source
的縮寫,指向外部資源的位置,指向的內容將會嵌入到文檔中當前標籤所在位置;而href是Hypertext Reference
的縮寫,指向網絡資源所在位置,創建和當前元素(錨點)或當前文檔(連接)之間的連接。在某些場合,使用Table
是100%的適合、恰當和正確。好比,用table
作表格是徹底正確的
Table
要比其它html
標記佔更多的字節,會致使延遲下載時間,佔用服務器更多的流量資源;Table
會阻擋瀏覽器渲染引擎的渲染順序,這會致使延遲頁面的生成速度,讓用戶等待更久的時間;td
才能設置tr
的border
屬性;table
中套用table
的時候,閱讀代碼會顯得異常混亂;colspan
與rowspan
,用來佈局時,頻繁使用他們會形成整個文檔順序混亂;gbk
的編碼,而內容中的中文字是utf-8
編碼的,這樣瀏覽器打開即會出現html
亂碼。反之也會出現亂碼;html
網頁編碼是gbk
,而程序從數據庫中調出呈現是utf-8
編碼的內容也會形成編碼亂碼;HTML
網頁內容;gbk
,而數據庫儲存數據編碼格式是UTF-8
,此時須要程序查詢數據庫數據顯示數據前進程序轉碼;HTML
是死的,只是一個字符串;而DOM
是由html
解析而來,是活的,咱們能夠經過Javascript
維護DOM
。
property
是DOM
中的屬性,是JavaScript
裏的對象;attribute
是HTML
標籤上的特性,它的值只可以是字符串;簡單的理解就是:Attribute
就是DOM
節點自帶的屬性,例如html
中經常使用的id
、class
、title
、align
等;而Property
是這個DOM
元素做爲對象,其附加的內容,例如childNodes
、firstChild
等。
a
元素例外)標籤可聲明三種 DTD
類型,分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01
規定了三種文檔類型:分別是Strict
、Transitional
以及 Frameset
;XHTML 1.0
規定了三種 XML 文檔類型:分別是Strict
、Transitional
以及 Frameset
;Standards
(標準)模式(也就是嚴格呈現模式)用於呈現遵循最新標準的網頁;Quirks
(包容)模式(也就是鬆散呈現模式或者兼容模式)用於呈現爲傳統瀏覽器而設計的網頁。HTML5 如今已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增長。
(Drag and drop)
API
;header
, nav
, footer
, aside
, article
, section
);audio
, video
);(Canvas)
API
;(Geolocation)
API
;localStorage
長期存儲數據,瀏覽器關閉後數據不丟失;sessionStorage
的數據在瀏覽器關閉後自動刪除;calendar
、date
、time
、email
、url
、search
;webworker
, websocket
, Geolocation
等;純表現元素:
<basefont>
默認字體,不設置字體,以此渲染;<font>
字體標籤;<center>
水平居中;<u>
下劃線;<big>
字體;<strike>
中橫字;<tt>
文本等寬;對可用性產生負面影響的元素:
<frameset>
,<noframes>
和<frame>
;
Quirks
模式,又稱怪癖模式、詭異模式、怪異模式。
當咱們在寫程序時,遇到新舊功能不兼容的時候,如何作才能保證原來的接口不變,又能夠提供強大的功能?
通常狀況下能夠經過增長參數和分支來解決。也就是當某個參數爲true
時,使用新功能,爲false
時使用舊功能,這樣就能不破壞原有的程序,又能提供新功能。
IE6
也是相似這樣作的,它將DTD
當成了這個「參數」,由於之前的頁面你們都不會去寫DTD
,第一IE6
就假定,若是寫了DTD
就意味這個頁面將採用對CSS
支持更好的佈局,而若是沒有就採用兼容以前的佈局方式,這就是Quirks模式(怪癖,詭異,怪異模式)。
其與Standards
的區別整體會有佈局、樣式解析、和腳本執行三個方面的區別:
W3C
標準中,若是設置一個元素的寬度和高度,指的是元素內容的寬度和高度,而在Quirks
模式下,IE的寬度和高度還包含了padding
和border
;Standards
模式下,給等行內元素設置wdith
和height
都不會生效,而在quirks
模式下,則會生效;standards
模式下,一個元素的高度是由其包含的內容來決定的,若是父元素沒有設置百分比的高度,子元素設置一個百分比的高度是無效的用;margin:0 auto
在standards
模式下可使元素水平居中,但在quirks
模式下卻會失效。小編的理解是: 如果將前端比做一我的來舉例子,結構(HTML
)就至關因而人體的「骨架」,樣式就至關於人體的「裝飾」,例如衣服,首飾等;行爲就至關於人作出的一系列「動做」。
在結構,樣式和行爲分離,就是將三者分離開,各自負責各自的內容,各部分能夠經過引用進行使用。
在分離的基礎上,咱們須要作到代碼的:精簡, 重用, 有序。
webStorage
本地緩存;canvas
,video
,audio
等新標籤元素;以及特殊內容元素:article
,footer
,header
,nav
,section
等;以及表單控件:calendar
,date
,time
,email
,url
,search
等;webSocket/webWork
技術;http
請求);cdn
託管資源;gizp
壓縮須要的js和css文件;title
, description
, keywords
),heading
標籤的優化,alt
優化;<datalist>
標籤,用來定義選項列表,與input
元素配合使用鈣元素,來定義input
可能的值。
datalist
及其選項不會被顯示出來,他僅僅是合法的輸入列表值。
<input id="fruits" list="fruit" /><datalist id="fruit"> <option value="apple"> <option value="orange"> <option value="banana"></datalist>
複製代碼
HTML5
的Web storage
的存儲方式有兩種:sessionStorage
和localStorage
。
sessionStorage
用於本地存儲一個會話中的數據,當會話結束後就會銷燬;sessionStorage
不一樣,localStorage
用於持久化的本地存儲,除非用戶主動刪除數據,不然數據永遠不會過時;cookie
是網站爲了標示用戶身份而儲存在用戶本地終端(Client Side
)上的數據(一般通過加密)。區別:
cookie
數據始終在同源的http請求中攜帶(即便不須要),即cookie
在瀏覽器和服務器間來回傳遞;而sessionStorage
和localStorage
不會自動把數據發給服務器,僅在本地保存。cookie
數據不能超過4k
,只適合保存很小的數據;而sessionStorage
和localStorage
雖然也有存儲大小的限制,但比cookie
大得多,能夠達到5M或更大。sessionStorage
在會話關閉會馬上關閉,所以持續性不久;cookie
只在設置的cookie過時時間以前一直有效,即便窗口或瀏覽器關閉。而localStorage
始終有效。sessionStorage
不在不一樣的瀏覽器窗口中共享,即便是同一個頁面;而localStorage
和cookie
都是能夠在全部的同源窗口中共享的。Trident
內核:IE最早開發或使用的, 360瀏覽器;Webkit
內核:Google Chrome,Safari, 搜狗瀏覽器,360極速瀏覽器, 阿里雲瀏覽器等;Gecko
內核: Mozilla FireFox (火狐瀏覽器) ,K-Meleon瀏覽器;Presto
內核:Opera瀏覽器;Canvas
是HTML5
的一個元素,它使用JavaScript
在網頁上繪製圖形。Canvas
是一個矩形區域。它的每個像素均可以由HTML5
語言來控制。使用Canvas繪製路徑、框、圓、字符和添加圖像有幾種方法。
若是要在咱們的HTML
文檔中添加Canvas
標籤,咱們須要ID
、寬度和高度。下面是如何將基本Canvas
標籤寫入HTML
文檔的示例。
<canvas id="myCanvas" width="100" height="100"> </canvas>
複製代碼
HTML
、CSS
、DOM
和JavaScript
,Flash
);HTML5
應與設備無關;新的HTML5
規範的應用緩存最關鍵的就是支持離線應用,容許瀏覽器在連接客戶端時預取一些或所有網站資產,如HTML
文件,圖像,CSS
以及JS
等,預取文件加速了站點的性能。換句話說,應用程序緩存能夠預取徹底未被訪問的頁面,從而在常規的瀏覽器緩存中不可用。與傳統的瀏覽器緩存比較,該特性並不強制要求用戶訪問網站。
Canvas
:Canvas
由HTML
代碼中定義的具備高度和寬度屬性的可繪製區域組成。JavaScript
代碼能夠經過一組完整的繪圖函數訪問該區域,這與其餘常見的2D API
相似,所以容許動態生成圖形。Canvas
的一些預期用途包括構建圖形、動畫、遊戲和圖像合成。MIME
類型和協議處理程序註冊;localStorage
本地存儲至關於一個輕量級的數據庫,能夠在本地永久的儲存數據(除非人爲刪除)。此外,還能夠在斷網狀況下讀取本地緩存的cookies
。
localStorage
保存數據: localStorage.setItem(key, value)
;localStorage
獲取保存的數據: localStorage.getItem(key)
;localStorage
保存的數據: localStorage.removeItem(key)
;localStorage
對象保存的數據: localStorage.clear( )
;類型 | 做用 |
---|---|
search | 用於搜索域 ,域顯示爲常規的文本域 |
用於應該包含email地址的輸入域,在提交表單時,自動驗證email域的值 | |
url | 用於應該包含url地址的輸入域在提交表單時,會自動驗證url的域值 |
number | 用於應該包含數值的輸入域,可自定義數字限定 |
range | 用於應該包含必定範圍內數字值的輸入域,類型顯示爲滑動條 |
dateTime | 用於選取時間,日,月,年(爲UTC時間) |
date | 用於選取日,月,年 |
month | 用於選取月,年 |
week | 用於選取周和年 |
time | 用於選取時間(分鐘和小時) |
dateTime-local | 用於選取時間,日,月,年(當地時間) |
於WEB而言:web
標準簡單來講能夠分爲結構、表現和行爲。web
標準通常是將該三部分獨立分開,使其更具備模塊化。但通常產生行爲時,就會有結構或者表現的變化,也使這三者的界限並不那麼清晰;
於W3C而言: W3C
對web
標準提出了規範化的要求,也就是在實際編程中的一些代碼規範,以下:
結構上的要求:
對於css和js來講:
css
和js
腳本,從而達到結構與行爲、結構與表現的分離,提升頁面的渲染速度,能更快地顯示頁面的內容;總之,遵循w3c制定的web標準,可以使用戶瀏覽者更方便的閱讀,使網頁開發者之間更好的交流。
HTML5
文檔類型:<!doctype html>
HTML5
使用的編碼<meta charset=」UTF-8」>
漸進加強(progressive enhancement):主要是針對低版本的瀏覽器進行頁面重構,保證基本的功能狀況下,再針對高級瀏覽器進行效果,交互等方面的改進和追加功能,以達到更好的用戶體驗。
優雅降級 graceful degradation: 一開始就構建完整的功能,而後再針對低版本的瀏覽器進行兼容。
CDN
緩存更加方便;cookie
寬帶;小編我的以爲:網頁標準和標準制定機構是讓web
更加規範,更加標準,健康的發展所必不可少的東西。
SEO
更加友好,提高了搜索效率。使用網頁標準和標準制定機構,對於提升網站的易用性起着很是大的做用。
幾乎全部的高版本瀏覽器Safari,Chrome,Firefox,Opera,IE8以上都支持HTML5
。
HTML5
沒有使用SGML
或者XHTML
,HTML5
是一個全新的東西,所以不須要參考DTD
,對於HTML5
,僅需放置下面的文檔類型代碼告訴瀏覽器識別這是HTML5
文檔就行。
(1),瀏覽器發現html
頭部有manifest
屬性,它會請求manifest
文件,若是是第一次訪問app
,那麼瀏覽器就會根據 manifest
文件的內容下載相應的資源而且進行離線存儲。
(2),若是已經訪問過app
而且資源已經離線存儲了,那麼瀏覽器就會使用離線的資源加載頁面,而後 瀏覽器會對比新的manifest
文件與舊的manifest
文件,若是文件沒有發生改變,就不作任何操做,若是文件改變了,那麼就會從新下載文件中的資源並進行離線存儲。
在頁面被切換到其餘後臺進程的時候,自動暫停音樂或視頻的播放。
給不想要提示的input
是設置autocomplete=off
便可。
頁面中經常使用的幾種圖片格式有: png
, jpg(jpeg)
,gif
, bmp
等;
(1)、Png格式的特徵
特徵: 圖片背景透明,能夠支持的顏色有不少。
使用範圍: 比較廣,在目前使用頻率最高。
(2)、jpg格式特徵
特徵: 圖片不支持透明,靜態圖,支持的顏色也比較多,可壓縮。
使用範圍: 使用範圍較廣,可以使用做爲電腦作面壁紙,手機屏保等,可根據需求來確實使用圖片的分辨率,
(3)、gif格式特徵
特徵: 動態圖,支持的顏色較少。
使用範圍: 在目前看到的在網站內使用頻率較低。
IE6/IE7/IE8
支持經過document
方法產生的標籤,利用這一特性讓這些瀏覽器支持HTML5
新標籤;html5shim
框架 另外,DOCTYPE
聲明的方式是區分HTML
和HTML5
標誌的一個重要因素,此外,還能夠根據新增的結構,功能元素來加以區分。以上就是小編此次分享的內容。做爲對於HTML常見面試知識點的統籌,文中部分知識點借(chao)鑑(xi)於度娘。因此,如有小夥伴看到本身的知識點長在上面了,莫慌!!!!獨樂樂不如衆樂樂,知識共享也是一件很快樂的事情呀~
最後,本篇文章會持續更新。此外,若文中有不足的地方,請下方留言指出,小編看到會及時更正。