個例子
這兩段代碼這瀏覽器中顯示的效果是一樣的
但是用第一種方式就是屬于標簽語義化
標簽語義化,需要對html的標簽有很深厚的了解,我也就簡單的舉個例子,讓大家明白這個概念就行了
然后html從入門到放棄的所有教程到這里就結束了。
接下來可能會出一些css的教程,大家喜歡的話,可以關注我
,Doctype作用?標準模式與兼容模式各有什么區別?
(1)、<!DOCTYPE>聲明位于位于HTML文檔中的第一行,處于 <html> 標簽之前。告知瀏覽器的解析器 用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
(2)、標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
2,HTML5 為什么只需要寫 <!DOCTYPE HTML>?
HTML5 不基于 SGML,因此不需要對DTD進行引用,但是需要doctype來規范瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行);
而HTML4.01基于SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。
3,行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
首先:CSS規范規定,每個元素都有display屬性,確定該元素的類型,每個元素都有默認的display值,如div的display默認值為“block”,則為“塊級”元素;span默認display屬性值為“inline”,是“行內”元素。
(1)行內元素有:a b span img input select strong(強調的語氣)
(2)塊級元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
(3)常見的空元素:
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
4,頁面導入樣式時,使用link和@import有什么區別?
(1)link屬于XHTML標簽,除了加載CSS外,還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的,只能用于加載CSS;
(2)頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;
(3)import是CSS2.1 提出的,只在IE5以上才能被識別,而link是XHTML標簽,無兼容問題;
5,介紹一下你對瀏覽器內核的理解?
主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
(1)渲染引擎:負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
(2)JS引擎則:解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確,后來JS引擎越來越獨立,內核就傾向于只指渲染引擎。
6,常見的瀏覽器內核有哪些?
Trident內核:IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto內核:Opera7及以上。 [Opera內核原為:Presto,現為:Blink;]
Webkit內核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]
7,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聲明\新增的結構元素\功能元素
8,簡述一下你對HTML語義化的理解?
用正確的標簽做正確的事情。
html語義化讓頁面的內容結構化,結構更清晰,便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示,并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重,利于SEO;
使閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。
9,HTML5的離線儲存怎么使用,工作原理能不能解釋一下?
在用戶沒有與因特網連接時,可以正常訪問站點或應用,在用戶與因特網連接時,更新用戶機器上的緩存文件。
原理:HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術),通過這個文件上的解析清單離線存儲資源,這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時,瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用:
1、頁面頭部像下面一樣加入一個manifest的屬性;
2、在cache.manifest文件的編寫離線存儲的資源;
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態時,操作window.applicationCache進行需求實現。
10,瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢?
在線的情況下,瀏覽器發現html頭部有manifest屬性,它會請求manifest文件,如果是第一次訪問app,那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了,那么瀏覽器就會使用離線的資源加載頁面,然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發生改變,就不做任何操作,如果文件改變了,那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下,瀏覽器就直接使用離線存儲的資源。
11,請描述一下 cookies,sessionStorage 和 localStorage 的區別?
cookie是網站為了標示用戶身份而儲存在用戶本地終端(Client Side)上的數據(通常經過加密)。
cookie數據始終在同源的http請求中攜帶(即使不需要),記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存。
存儲大小:
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。
有期時間:
localStorage 存儲持久數據,瀏覽器關閉后數據不丟失除非主動刪除數據;
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。
cookie 設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉
12,iframe有那些缺點?
*iframe會阻塞主頁面的Onload事件;
*搜索引擎的檢索程序無法解讀這種頁面,不利于SEO;
*iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript
動態給iframe添加src屬性值,這樣可以繞開以上兩個問題。
13,Label的作用是什么?是怎么用的?
label標簽來定義表單控制間的關系,當用戶選擇該標簽時,瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
14,如何實現瀏覽器內多個標簽頁之間的通信?
WebSocket、SharedWorker;
也可以調用localstorge、cookies等本地存儲方式;
localstorge另一個瀏覽上下文里被添加、修改或刪除時,它都會觸發一個事件,
我們通過監聽事件,控制它的值來進行頁面信息通信;
注意quirks:Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常;
15,如何在頁面上實現一個圓形的可點擊區域?
1、map+area或者svg
2、border-radius
3、純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
16,title與h1的區別、b與strong的區別、i與em的區別?
title屬性沒有明確意義只表示是個標題,H1則表示層次明確的標題,對頁面信息的抓取也有很大的影響;
strong是標明重點內容,有語氣加強的含義,使用閱讀設備閱讀網絡時:<strong>會重讀,而<B>是展示強調內容。
i內容展示為斜體,em表示強調的文本;
Physical Style Elements -- 自然樣式標簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標簽
strong, em, ins, del, code
應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。
17,你知道多少種Doctype文檔類型?
該標簽可聲明三種 DTD 類型,分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型:Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型:Strict、Transitional 以及 Frameset。
Standards (標準)模式(也就是嚴格呈現模式)用于呈現遵循最新標準的網頁,而 Quirks(包容)模式(也就是松散呈現模式或者兼容模式)用于呈現為傳統瀏覽器而設計的網頁。
18, HTML與XHTML——二者有什么區別?
區別:
1.所有的標記都必須要有一個相應的結束標記
2.所有標簽的元素和屬性的名字都必須使用小寫
3.所有的XML標記都必須合理嵌套
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內容中使“--”
8.圖片必須有說明文字
19,<img>的title和alt有什么區別?
title是global attributes之一,用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性,是圖片內容的等價描述,用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性,除了純裝飾圖片外都必須設置有意義的值,搜索引擎會重點分析。
關HTML的相關的基礎問題
我的觀點
1Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?
①<!DICTYPE>聲明位于文檔中的最前面,處于<html>標簽之前,告訴瀏覽器的解析器,用什么文檔類型來規范解析這個文檔。
②嚴格模式的排版和js運作模式是以該瀏覽器支持的最高標準運行
③在混雜模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作
DOCTYPE不存在 或格式不正確會導致文檔以混雜模式呈現
我的觀點
2
HTML5 為什么只需要寫 <!DOCTYPE HTML>?
html5不基于SGML(標準通用語言),因此不需要對DTD(文檔類型定義)進行引用,但需要doctype來規范瀏覽器的行為(讓瀏覽器按照它們應該的方式運行)
而html4.01基于SGML,所以需要對DTD進行應用,才能告知瀏覽器文檔所使用的文檔類型。
我的觀點
3
行內元素有哪些?塊級元素有哪些?空(void)元素有哪些?
①.css規范規定,每個元素都有display 屬性,配檔該元素的類型,每個元素都有默認的display值。
②.行內元素有:a b soan img input select strong(強調的語氣)
塊級元素有:div ul li ol dl dt dd h1 h2 h3... p
空元素(沒有內容的HTML內容被稱為空元素,空元素是在開始標簽中關閉的)有: img input br hr link meta
我的觀點
4
頁面導入樣式時,使用link和@import有什么區別?
①.link屬于XHTML標簽,而@import是CSS提供的;
②.頁面被加載的時,link會同事被加載,而@import引用的CSS會等到頁面被加載完再加載;
③.import只有在IE5以上才能被識別,而link是XHTML標簽,無兼容問題;
④.link 方式的樣式的權重>@import的權重
我的觀點
5
常見的瀏覽器內核有哪些?
IE瀏覽器的內核:Trident、
Mozilla的Gecko、
Chrome的Blink(WebKit的分支)、
Opera內核原為Presto,現為Blink
我的觀點
6
介紹一下你對瀏覽器內核的理解?
瀏覽器內核是瀏覽器最重要的或者說是最核心的部分。主要負責對網頁語法的解釋并渲染(顯示)網頁。
瀏覽器內核又可以分為兩個部分(渲染引擎和js引擎)
js引擎則是解析JavaScript語言,執行javascript語言來實現網頁的動態效果。
渲染引擎負責取的網頁的內容,整理訊息,以及計算網頁的顯示方式,然后哦會輸出至顯示器或者打印機。
我的觀點
7
簡述一下你對HTML語義化的理解?
HTML語義化是指根據內容的結構化(內容語義化),選擇合適的標簽(代碼語義化)
于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
HTML語義化的主要目的是:
①.為了在沒有css的情況下,頁面也能呈現出很好地內容結構、代碼結構
②.有利于用戶體驗
③.有利于SEO和搜索引擎建立良好的溝通。
④.方便其他設備解析以意義的方式來渲染網頁、
⑤.便于團隊開發和維護,增加可讀性。
我的觀點
8
HTML5的離線儲存怎么使用
離線存儲局勢將一些源代碼文件保存在本地,這樣后續的頁面重新加載將使用本地資源文件,在離線情況下可以繼續訪問web應用,同時通過一定的手法(更新相關文件或者使用相關 API),可以更新、刪除離線存儲等操作
限時!!免費送Dreamweaver、js等前端教程
↓↓↓
*請認真填寫需求信息,我們會在24小時內與您取得聯系。