前端面試題總結——HTML(持續更新中)
1.什麼是HTML?
HTML:HyperText Markup Language超文本標記語言
2.XHTML和HTML有什麼區別
HTML是一種基本的WEB網頁設計語言,XHTML是一個基於XML的標記語言
3.簡述一下你對HTML語義化的理解?
html語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器、搜索引擎解析;
4.瀏覽器頁面有哪三層構成,分別是什麼,作用是什麼?
瀏覽器頁面構成:結構層、表示層、行爲層
分別是:HTML、CSS、JavaScript
作用:HTML實現頁面結構,CSS完成頁面的表現與風格,JavaScript實現一些客戶端的功能與業務。
5.Doctype作用?嚴格模式與混雜模式如何區分?
(1)作用:用於告知瀏覽器的解析器用什麼文檔標準解析這個文檔。
(2)區分:如果HTML文檔包含形式完整的DOCTYPE,那麼他一般以標準模式呈現。DOCTYPE不存在或者格式不正確會導致文檔已混雜模式呈現。
6.Quirks模式是什麼?它和Standards模式有什麼區別
區別:
總體會有佈局、樣式解析和腳本執行三個方面的區別。
盒模型:在W3C標準中,如果設置一個元素的寬度和高度,指的是元素內容的寬度和高度,而在Quirks 模式下,IE的寬度和高度還包含了padding和border。
設置行內元素的高寬:在Standards模式下,給等行內元素設置wdith和height都不會生效,而在quirks模式下,則會生效。
用margin:0 auto設置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下卻會失效。
7.頁面導入樣式時,使用link和@import有什麼區別?
(1)作用不同:link屬於XHTML標籤,除了加載CSS外,還能用於定義RSS, 定義rel連接屬性等作用;
而@import是CSS提供的,只能用於加載CSS;
(2)加載不同:頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;
(3)兼容不同:import是CSS2.1 提出的,只在IE5以上才能被識別,而link是XHTML標籤,無兼容問題;
8.知道的網頁製作會用到的圖片格式有哪些?
Webp:WebP格式,谷歌(google)開發的一種旨在加快圖片加載速度的圖片格式。
並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。
Apng:是PNG的位圖動畫擴展,可以實現png格式的動態圖片效果,有望代替GIF成爲下一代動態圖標準。
9.文本標記
1.特殊字符
1. 表示一個空格
2.< 表示一個<
3.> 表示一個>
4.© 表示版權
5.¥ ¥
2.文本樣式
1.<b></b> :加粗
2.<i></i> :斜體
3.<u></u> :下劃線
4.<s></s> :刪除線
5.<sup></sup> :上標
6.<sub></sub> :下標
10.什麼是錨點
錨點就是網頁中一個記號,可以通過超級鏈接跳轉到該記號位置處。
1.定義錨點
1.使用a標記的name屬性定義錨點
<a name="錨點名稱"></a>
2.使用任意標記的id屬性定義錨點
<ANY id="錨點名稱"></ANY>
2.鏈接到錨點
<a href="#錨點名稱">本頁面</a>
<a href="url#錨點名稱">其它頁面</a>
11.div+css的佈局有什麼優點?
(1)改版的時候更方便 只要改css文件。
(2)頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
(3)易於優化(seo)搜索引擎更友好,排名更容易靠前。
12.行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
首先:CSS規範規定,每個元素都有display屬性,確定該元素的類型,每個元素都有默認的display值,如div的display默認值爲“block”,則爲“塊級”元素;span默認display屬性值爲“inline”,是“行內”元素。
(1)行內元素有:a b span img input select
(2)塊級元素有:div p ul ol li dl dt dd h1-h6
(3)常見的空元素:br-換行,hr-水平分割線;
13.iframe有那些缺點?
1.iframe會阻塞主頁面的Onload事件,會影響頁面的並行加載;
2.搜索引擎的檢索程序無法解讀這種頁面,不利於SEO;
改進:通過javascript動態給iframe添加src屬性值,這樣可以繞開以上兩個問題。
14.Label的作用是什麼?是怎麼用的?
label標籤來定義表單控制間的關係,當用戶選擇該標籤時,瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
15.隱藏元素的幾種方法
(1)display:none;
(2)visibility:hidden;
(3)opacity:0;
(4)position:absolute; left:-10000px;
16.簡述一下src與href的區別。
src用於替換當前元素,href用於在當前文檔和引用資源之間確立聯繫。
17.實現不使用 border 畫出1px高的線,在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果
18.如何給背景圖片加上超鏈接
<div class="swiper-slide "
style='background:#dedede url() no-repeat center center;background-size:contain'>
<a class="banner-a"rel="nofollow" href="#"></a>
</div>
.banner-a{
width:100%;
height: 8rem;
display: inline-block;
}
19.清除浮動的方法有哪些?
第一種:clear:both
在父元素的裏面添加一個空的clear的div(跟浮動的子級同級),然後再爲這個類添加屬性值clear:both;便可以清除浮動。
第二種:overflow:hidden
在父元素的樣式中添加overflow: hidden;也可以清除浮動,如下css代碼,但不提倡使用這個方法,overflow: hidden;還有一個意思就是隱藏超出的部分,處理不好還是會給頁面帶來麻煩。
第三種:clearfix(推薦使用)
1.在父集元素類名中添加 clear-fix
2.寫僞類樣式
<style>
.clear-fix::after {
content:"";
display: block;
clear:both;
}
</style>
<div class="header-line clear-fix">
<div class="header-logo">
<a class="logo"href=" https://www.meisaas.com/index.html">樣式方案</a>
</div>
</div>
前端開發教程扣qun:767273102 ,從最基礎的HTML+CSS+JavaScript。jQuery,Ajax,node,angular等到移動端HTML5的項目實戰的資料都有整理