前端面試題總結——HTML(持續更新中)

1.什麼是HTML？

HTML：HyperText Markup Language超文字標記語言

2.XHTML和HTML有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的標記語言

3.簡述一下你對HTML語義化的理解？

html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;

4.瀏覽器頁面有哪三層構成，分別是什麼，作用是什麼?

瀏覽器頁面構成：結構層、表示層、行為層
分別是：HTML、CSS、JavaScript
作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。

前端學習圈：767273102 ，從最基礎的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移動端HTML5的專案實戰的資料都有整理

5.Doctype作用？嚴格模式與混雜模式如何區分？

（1）作用：用於告知瀏覽器的解析器用什麼文件標準解析這個文件。
（2）區分:如果HTML文件包含形式完整的DOCTYPE，那麼他一般以標準模式呈現。DOCTYPE不存在或者格式不正確會導致文件已混雜模式呈現。

6.Quirks模式是什麼？它和Standards模式有什麼區別

區別：
總體會有佈局、樣式解析和指令碼執行三個方面的區別。
盒模型：在W3C標準中，如果設定一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設定行內元素的高寬：在Standards模式下，給<span>等行內元素設定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.&lt; 表示一個<
  3.&gt; 表示一個>
  4.&copy; 表示版權
  5.&yen; ￥
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高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>

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=" 樣式方案</a>
            </div>
</div>