前端面試題集 -- HTML常見題目

時間  2019-11-10
標籤 端面 試題 html 常見 題目 欄目 HTML 简体版
原文   原文鏈接

--HTML常見題目

參考連接：https://www.cnblogs.com/king18181753985/p/6510756.htmljavascript

0一、doctype 的做用？嚴格模式與混雜模式如何區分？它們有何意義？

DOCTYPE是document type (文檔類型) 的縮寫。 < !DOCTYPE > 聲明位於文檔的最前面，處於標籤以前，它不是html標籤。主要做用是告訴瀏覽器的解析器使用哪一種HTML規範或者XHTML規範來解析頁面。css

嚴格模式和混雜模式都是瀏覽器的呈現模式，瀏覽器究竟使用混雜模式仍是嚴格模式呈現頁面與網頁中的DTD（文件類型定義）有關，DTD裏面包含了文檔的規則。好比：loose.dtdhtml

  • 嚴格模式：又稱標準模式，是指瀏覽器按照W3C標準來解析代碼，呈現頁面
  • 混雜模式：又稱爲怪異模式或者兼容模式，是指瀏覽器按照本身的方式來解析代碼，使用一種比較寬鬆的向後兼容的方式來顯示頁面。

0二、HTML5 爲何只需寫< !DOCTYPE HTML> ?

HTML5不基於 SGML （標準通用標記語言），所以不須要對DTD（ DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。）進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）。html5

而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。java

0三、行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？

  • 行內：

<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>web

  • 塊級：

<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>canvas

  • 空：

常見的：<br> <hr> <img> <input> <link> <meta>api

不爲人知的：<area> <base> <col> <command> <embed> <link> <meta><keygen> <param> <source> <track> <wbr>瀏覽器

0四、頁面導入樣式時，使用link和@import有什麼區別？

  • link屬於XHTML標籤，import是CSS提供的方式。link方式除了CSS，還能夠定義RSS，定義rel鏈接屬性等，而import只能加載CSS
  • link是頁面加載時同時執行的，而import是在頁面加載完以後，纔會執行的
  • link支持使用Javascript控制DOM去改變樣式；而@import不支持
  • link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本(IE5及如下)的瀏覽器不支持

0五、介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。緩存

渲染引擎：用於獲取html、css和圖片,而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。

JS引擎：解析和執行 javascript 來實現網頁的動態效果。

0六、常見的瀏覽器內核有哪些？

  • Trident：IE、360
  • Gecko：Firefox
  • Webkit：Safari、Chrome內核原型
  • Chromium/Blink：Chrome
  • Blink：opera

0七、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？

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；

兼容問題：

  • IE6/IE7/IE8 支持經過 document.createElment 方法產生的標籤，利用這一特性讓這些瀏覽器支持 HTML5 新標籤。瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
  • 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
 
<![endif]-->

0八、如何區分 HTML 和 HTML5？

    1. 在文檔類型聲明上不一樣： HTML 是很長的一段代碼，很難記住，而HTML5卻只有簡簡單單的聲明，方便記憶。

    1. 在結構語義上不一樣：

      HTML：沒有體現結構語義化的標籤，一般都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。

      HTML5：在語義上卻有很大的優點。提供了一些新的標籤，好比：<header><article><footer>

0九、簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情:
  • HTML 語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
  • 即便在沒有樣式 CSS 的狀況下也能以一種文檔格式顯示，而且是容易閱讀的
  • 搜索引擎的爬蟲也依賴於 HTML 標記來肯定上下文和各個關鍵字的權重，有利於 SEO
  • 使閱讀源代碼的人更容易將網站分塊，便於閱讀、維護和理解

十、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

  • 使用：

    1.頁面頭部像下面同樣加入一個manifest的屬性
    html <html manifest = "cache.manifest">
    2.在cache.manifest文件的編寫離線存儲的資源
    ```html
    CACHE MANIFEST
    #v0.11

    CACHE:

    js/app.js
    css/style.css

    NETWORK:
    resourse/logo.png

    FALLBACK:
    / /offline.html
    ```

  • 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

十一、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

在線的狀況下，瀏覽器發現Html頭部有manifest屬性，它會請求manifest文件。

若是是第一次訪問APP，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。

若是已經訪問過APP而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面。而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。

離線的狀況下，瀏覽器就直接使用離線存儲的資源。

十二、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

  • 存儲大小

    cookie數據大小不能超過4k。
  sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

  • 有效時間

    sessionStorage和localStorage：雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
  sessionStorage：數據在當前瀏覽器窗口關閉後自動刪除。
  cookie：設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

  • 數據與服務器之間的交互方式

    cookie的數據會自動的傳遞到服務器，服務器端也能夠寫cookie到客戶端。
  sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

1三、iframe有那些缺點？

  • 會產生不少頁面，不容易管理。
  • 代碼複雜，沒法被一些搜索引擎解讀。
  • 小型的移動設備沒法徹底顯示框架，設備兼容性差。
  • 若是框架個數多的話，可能會出現上下、左右滾動條致使用戶體驗度差。
  • iframe框架頁面會增長服務器的http請求，對於大型網站是不可取的。

1四、Label的做用是什麼？是怎麼用的？（加 for 或 包裹）

  • label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上
<label for="Name">Number:</label> <input type=「text「name="Name" id="Name"/>
或者
<label>Date:<input type="text" name="B" /></label>

1五、HTML5的form如何關閉自動完成功能？

給不想要的提示信息標籤裏設置：autocomplete爲"on"或者"off"來開啓或者關閉自動完成功能

1六、如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

方法1：使用localStorage

<!--在一個標籤頁裏面使用 localStorage.setItem(key,value)添加（修改、刪除）內容；-->
<input id="name">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
            var name=$("#name").val();    
            localStorage.setItem("name", name);   
        });    
    });    
</script>
<!--在另外一個標籤頁裏面監聽 storage 事件。
便可獲得 localstorge 存儲的值，實現不一樣標籤頁之間的通訊。-->
<script type="text/javascript">  
    $(function(){   
        window.addEventListener("storage", function(event){    
            console.log(event.key + "=" + event.newValue);    
        });     
    });  
</script>

方法2：調用cookie+setInterval()

將要傳遞的信息存儲在cookie中，每隔必定時間讀取cookie信息，便可隨時獲取要傳遞的信息。

頁面1：

將：
localStorage.setItem("name", name); 
改成：
document.cookie="name="+name;

頁面2：

<script type="text/javascript">  
    $(function(){   
        function getCookie(key) {    
            return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
        }     
        setInterval(function(){    
            console.log("name=" + getCookie("name"));    
        }, 10000);    
    });  
</script>

原文連接：https://blog.csdn.net/meijory/article/details/76358570

1七、webSocket如何兼容低瀏覽器？(阿里)

  • Adobe Flash Socket
  • ActiveX HTMLFile (IE)
  • 基於 multipart 編碼發送 XHR
  • 基於長輪詢的 XHR

1八、頁面可見性（Page Visibility）API 能夠有哪些用途？

  • 經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
  • 在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

1九、如何在頁面上實現一個圓形的可點擊區域？

  • 1.map+area或者svg
<img src="task6.jpg" width="1366" height="768" border="0" usemap="#Map" />  
<map name="Map" id="Map">  
 <area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />  
</map>
  • 2.border-radius
<style>  
 .disc{  
     width:100px;  
     height:100px;  
     background-color:dimgray;  
     border-radius: 50%;  
     cursor: pointer;  
     position: absolute;  
     left:50px;  
     top:50px;    
     line-height: 100px;  
     text-align: center;  
     color: white;  
 }  
</style>
<div class="disc">點擊區域</div>
  • 3.純js實現
<script>
        document.onclick = function(e){
            var r = 50;  //圓的半徑
            var x1 = 100,  y1 = 100;  
            var x2 = e.clientX,
                y2 = e.clientY;
            var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));  
            if(len<=50){
                console.log("Inner");
            }else{
                console.log("Outer");
            }
        }
    </script>

參考連接：https://www.cnblogs.com/guorange/p/7155164.html

20、實現不使用 border 畫出1px高的線，在不一樣瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。

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

2一、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？

  • 區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；
  • 有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。

2二、title與h1的區別、b與strong的區別、i與em的區別？

  • title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響;
  • strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展現強調內容。
  • i內容展現爲斜體，em表示強調的文本；
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程