web前端面試之浮動(碼動未來)
1.3.1蛉谜、iframe有那些缺點豹休?
iframe會阻塞主頁面的Onload事件筛武;
搜索引擎的檢索程序無法解讀這種頁面春缕,不利于SEO;
iframe和主頁面共享連接池睁枕,而瀏覽器對相同域的連接有限制官边,所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點外遇。如果需要使用iframe注簿,最好是通過javascript動態(tài)給iframe添加src屬性值,這樣可以繞開以上兩個問題跳仿。
1.3.2诡渴、Label的作用是什么?是怎么用的菲语?
label標簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標簽時妄辩,瀏覽器會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
1.3.3山上、HTML5的form如何關(guān)閉自動完成功能眼耀?
給不想要提示的form或某個 input 設(shè)置為 autocomplete=off。
1.3.4佩憾、title與h1的區(qū)別哮伟、b與strong的區(qū)別潭辈、i與em的區(qū)別?
title屬性沒有明確意義只表示是個標題澈吨,H1則表示層次明確的標題,對頁面信息的抓取也有很大的影響寄摆;
strong是標明重點內(nèi)容谅辣,有語氣加強的含義,使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時:<strong>會重讀婶恼,而<B>是展示強調(diào)內(nèi)容桑阶。
i內(nèi)容展示為斜體,em表示強調(diào)的文本勾邦;
Physical Style Elements --自然樣式標簽
b, i, u, s, pre
Semantic Style Elements --語義樣式標簽
strong, em, ins, del, code
應(yīng)該準確使用語義樣式標簽,但不能濫用, 如果不能確定時首選使用自然樣式標簽蚣录。
1.3.5、解釋下浮動和它的工作原理眷篇。
關(guān)于浮動我們需要了解萎河,浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止蕉饼。要想使元素浮動虐杯,必須為元素設(shè)置一個寬度(width)。雖然浮動元素不是文檔流之中昧港,但是它浮動后所處的位置依然是在浮動之前的水平方向上擎椰。由于浮動框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣创肥,下面的元素填補原來的位置达舒。有些元素會在浮動元素的下方,但是這些元素的內(nèi)容并不一定會被浮動的元素所遮蓋叹侄,對內(nèi)聯(lián)元素進行定位時巩搏,這些元素會考慮浮動元素的邊界,會圍繞著浮動元素放置圈膏。也可以把浮動元素想象成是被塊元素忽略的元素塔猾,而內(nèi)聯(lián)元素會關(guān)注浮動元素的。
1.3.6稽坤、列舉不同的清除浮動的技巧丈甸,并指出它們各自適用的使用場景。
1.使用空標簽清除浮動尿褪。這種方法是在所有浮動標簽后面添加一個空標簽定義css clear:both.弊端就是增加了無意義標簽睦擂。
2.使用overflow。給包含浮動元素的父標簽添加css屬性overflow:auto;zoom:1;zoom:1用于兼容IE6杖玲。
3.使用after偽對象清除浮動顿仇。該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點臼闻。
一鸿吆、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0,否則該元素會比實際高出若干像素述呐;
二惩淳、content屬性是必須的,但其值可以為空乓搬,content屬性的值設(shè)為”.”思犁,空亦是可以的。
4.浮動外部元素
此三種方法各有利弊进肯,使用時應(yīng)擇優(yōu)選擇激蹲,比較之下第二種方法更為可取。
QQ技術(shù)交流群:815302226