HTML
Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?
(1)、<!DOCTYPE> 聲明位於文件中的最前面,處於 <html> 標籤之前。告知瀏覽器的解析器,
用什麼文件類型 規格來解析這個文件。
(2)、嚴格模式的排版和 JS 運作模式是 以此瀏覽器支援的最高標準運作。
(3)、在混雜模式中,頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止網站無法運作。
(4)、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
行內元素有哪些?塊級元素有哪些?空(void)元素有那些?
(1)CSS規格規定,每個元素都有display屬性,確定該元素的類型,每個元素都有預設的display值,
例如div預設display屬性值為“block” ,成為“區塊級”元素;
span預設display屬性值為“inline”,是“行內”元素。
(2)行內元素有:a b span img input select strong(強調的語氣)
區塊級元素有: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> <command> <embed> <keygen> <param> <source> <track>; import 的差別是?
(3)import只在IE5以上才能識別,而link是XHTML標籤,無相容問題;
(4)link方式的樣式的權重高於@import的權重.
瀏覽器的核心分別是什麼?
常見相容性問題?
* png24位元的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.
* 瀏覽器預設的margin和padding不同。解是加一個全域的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:區塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大。
浮動ie產生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 10px;}
# 這種情況之下IE會產生20px的距離,解決方案是在float的標籤樣式控制中加入-_display:inline;將其轉換為行內屬性。 (_這個符號只有ie6會辨識)
漸進辨識的方式,從總體中逐漸排除局部。
首先,巧妙的使用「\9」這個標記,將IE遊覽器從所有情況中分離出來。
接著,再次使用「 」將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有辨識*/
.background-color:#00deff\9; 識別/*IE6、7、 .background-color:#00deff\9; 識別/*IE6、7、88 */
background-color:#a200ff;/*IE6、7辨識*/
_background-color:#1e0bd1;/*IE6辨識*/
}
IE#可以使用取得常規屬性的方法來取得自訂屬性,
也可以使用getAttribute()取得自訂屬性;
Firefox下,只能使用getAttribute()取得自訂屬性.
解決方法:統一透過getAttribute()取得自訂屬性.
* IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.
* 解決方法:(條件註解)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
* Chrome 中文介面下預設會將小於12px 的文字強制依照12px 顯示,
可透過加入CSS 屬性-webkit-text-size-adjust: none; 解決.
#超連結訪問後hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a :hover {} a:active {}
* HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。
* 繪畫canvas
用於媒介回放的video 和audio 元素
本地離線存儲localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素,例如article、footer、header、nav、section
表單控件,calendar、date、time、email、url、search
# 新的技術webworker, websockt, 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]-->
如何區分: DOCTYPE宣告\新增的結構元素\功能元素
#語意化的理解?
用正確的標籤做正確的事!
html語意化就是讓頁面的內容結構化,便於對瀏覽器、搜尋引擎解析;
在沒有樣式CCS情況下也以一種文件格式顯示,而且是容易閱讀的。
搜尋引擎的爬蟲依賴標記來確定上下文和各個關鍵字的權重,利於 SEO。
讓閱讀原始程式碼的人對網站更容易將網站分塊,以便於閱讀維護理解。
HTML5的離線儲存?
localStorage 長期儲存數據,瀏覽器關閉後資料不遺失;
sessionStorage 資料在瀏覽器關閉後自動刪除。
(寫)描述一段語意的html程式碼吧。
(HTML5中新增加的許多標籤(如:<article>、<nav>、<header>和<footer>等)
是基於語意化設計原則)
< div id="header">
< h1>標題< /h1>
< h2>專注Web/gt;lt; /h2>
divh;
*iframe會阻塞主頁面的Onload事件;
*iframe和主頁共用連線池,而瀏覽器對相同網域的連線有限制,所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是透過javascript
動態為iframe新增src屬性值,這樣可以繞過以上兩個問題。
請描述 cookies,sessionStorage 和 localStorage 的差別?
cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨立的存儲空間;
欢迎选择我的课程,让我们一起见证您的进步~~