前端關(guān)于HTML的面試題有哪些

這篇文章主要講解了“前端關(guān)于HTML的面試題有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“前端關(guān)于HTML的面試題有哪些”吧！

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的革吉網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1.什么是HTML？

HTML：HyperText Markup Language超文本標(biāo)記語言

2.XHTML和HTML有什么區(qū)別

HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的標(biāo)記語言

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

html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;

4.瀏覽器頁面有哪三層構(gòu)成，分別是什么，作用是什么?

瀏覽器頁面構(gòu)成：結(jié)構(gòu)層、表示層、行為層
分別是：HTML、CSS、JavaScript
作用：HTML實現(xiàn)頁面結(jié)構(gòu)，CSS完成頁面的表現(xiàn)與風(fēng)格，JavaScript實現(xiàn)一些客戶端的功能與業(yè)務(wù)。

前端學(xué)習(xí)圈：767273102 ，從最基礎(chǔ)的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移動端HTML5的項目實戰(zhàn)的資料都有整理

5.Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？

（1）作用：用于告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。
（2）區(qū)分:如果HTML文檔包含形式完整的DOCTYPE，那么他一般以標(biāo)準(zhǔn)模式呈現(xiàn)。DOCTYPE不存在或者格式不正確會導(dǎo)致文檔已混雜模式呈現(xiàn)。

6.Quirks模式是什么？它和Standards模式有什么區(qū)別

區(qū)別：
總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。
盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設(shè)置行內(nèi)元素的高寬：在Standards模式下，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

7.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

（1）作用不同：link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；
而@import是CSS提供的，只能用于加載CSS;
（2）加載不同：頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）兼容不同：import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題;

8.知道的網(wǎng)頁制作會用到的圖片格式有哪些？

Webp：WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。
并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。
Apng：是PNG的位圖動畫擴展，可以實現(xiàn)png格式的動態(tài)圖片效果，有望代替GIF成為下一代動態(tài)圖標(biāo)準(zhǔn)。

9.文本標(biāo)記

1.特殊字符
  1.  表示一個空格
  2.&lt; 表示一個<
  3.&gt; 表示一個>
  4.&copy; 表示版權(quán)
  5.&yen; ￥
2.文本樣式
  1.<b></b> :加粗
  2.<i></i> :斜體
  3.<u></u> :下劃線
  4.<s></s> :刪除線
  5.<sup></sup> :上標(biāo)
  6.<sub></sub> :下標(biāo)

10.什么是錨點

 錨點就是網(wǎng)頁中一個記號，可以通過超級鏈接跳轉(zhuǎn)到該記號位置處。
 1.定義錨點
    1.使用a標(biāo)記的name屬性定義錨點
      <a name="錨點名稱"></a>
    2.使用任意標(biāo)記的id屬性定義錨點
      <ANY id="錨點名稱"></ANY>
 2.鏈接到錨點
      <a href="#錨點名稱">本頁面</a>
      <a href="url#錨點名稱">其它頁面</a>

11.div+css的布局有什么優(yōu)點？

（1）改版的時候更方便 只要改css文件。
（2）頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡潔。
表現(xiàn)與結(jié)構(gòu)相分離。
（3）易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。

12.行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

首先：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select
（2）塊級元素有：div p ul ol li dl dt dd h2-h7
（3）常見的空元素：br-換行，hr-水平分割線；

13.iframe有那些缺點？

1.iframe會阻塞主頁面的Onload事件，會影響頁面的并行加載；
2.搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
改進(jìn)：通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。

14.Label的作用是什么？是怎么用的？

label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

15.隱藏元素的幾種方法

（1）display:none;
（2）visibility:hidden;
（3）opacity:0;
（4）position:absolute; left:-10000px;

16.簡述一下src與href的區(qū)別。

src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。

17.實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果

<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=" https://www.meisaas.com/index.html">樣式方案</a>
            </div>
</div>

感謝各位的閱讀，以上就是“前端關(guān)于HTML的面試題有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對前端關(guān)于HTML的面試題有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

當(dāng)前題目：前端關(guān)于HTML的面試題有哪些
瀏覽路徑：http://muchs.cn/article30/pjjhpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、面包屑導(dǎo)航、動態(tài)網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)