html基礎(chǔ)問題

1.<!DOCTYPE HTML>

必須位于html文檔第一行，位于<html>標簽之前

<!DOCTYPE HTML>作用：

聲明文檔的解析類型(document.compatMode),指示瀏覽器的layout引擎用那種方式來解析頁面，只是用來選擇mode，告訴瀏覽器dom用哪種詞法解析。
document.compatMode：
BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

html4.01和html5聲明的不同：

html4.01聲明需要引用DTD，分為strict，transitional，frameset三種。
html5不是基于SMGL和XML的，所以可以用簡短的聲明（!DOCTYPE HTML）

不聲明會怎么樣

document.compatMode會被瀏覽器識別并使用，如果不聲明的話，瀏覽器就會使用自己的怪異模式去解析渲染頁面。

  • (1)元素在不同的文檔類型中的使用情況不同。例如：<article> <aside><audio><canvas><datalist><header><footer>等在html5模式中可以使用，但是在html4的文檔聲明中不可使用。
    具體的可參考http://www.w3school.com.cn/tags/html_ref_dtd.asp
  • (2) BackCompat模式下margin: 0 auto 問題。例如：ie在BackCompact模式下，margin: 0 auto不起作用，元素還是居左，不能居中。
  • (3) BackCompat模式下table的font屬性繼承問題,white-space:pre會失效，設(shè)置圖片的padding會失效。例如：在body中設(shè)置了body{font-size:30px;}；在ie中，font-size是不會對table起作用的。
  • (4)BackCompat模式下行內(nèi)元素可以設(shè)置寬高，行為類似display:inline-block;ie，firefox，chrome表現(xiàn)一致。
  • (5)BackCompat模式下可以設(shè)置百分比高度。在standard模式下，元素的高度默認是由包含的內(nèi)容來決定的，如果父元素沒有設(shè)置高度，給子元素設(shè)置百分比高度是沒有作用的。但是在BackCompat模式下，父元素沒有高度，或者元素沒有內(nèi)容的時候，都是可以設(shè)置百分比高度的。ie，firefox，chrome表現(xiàn)一致。
  • (6) 元素的寬高不同。在BackCompat模式下，width則是元素的實際寬度 ，內(nèi)容寬度 = width - ( padding-left + padding-right + border-left-width + border-right-width)；在嚴格模式中 ：width是內(nèi)容寬度 ，元素真正的寬度 = border-left-width + padding-left + width + padding-right + border-right-width。

2.html5新特性：

HTML5一共包含了10個大類別，它們是：

  • 離線(offline)
    Application cache, localStorage, indexedDB,在線/離線事件
  • 存儲(storage)
    Application cache, localStorage,sessionStorage,indexedDB等
  • 連接(connectivity)
    Web Stockets, Sever-sent事件
  • 文件訪問(file access)
    File API, File System, FileWriter, ProgressEvents
  • 語義(semantics)
    各種新的元素，包括Media, structural, 國際化, Link relation, 屬性, form類型, microdata 等
  • 音頻和視頻(audio/video)
    HTML5 Video, Web Audio, WebRTC, Video track等
  • 3D和圖形(3D/graphics)
    Canvas2D, 3D CSS變換, WebGl, SVG等
  • 展示(persentation)
    css3 2D/3D變換，轉(zhuǎn)換，WebFonts等。
  • 性能(performance)
    Web Wroker, HTTP caching等
  • 其他(Nuts and bolts)
    觸控和鼠標, Shadow DOM, CSS masking等

3.列舉html5新的標簽

<header><footer><nav><aside><section><article><audio><video><embed><figure><figcaption><time><summary><canvas><meter><output><progress><track><rt><rp><ruby>
新的input類型:
email, url, number, range, datepicker(date,month,week,time,date-time,datetime-local,search,color)
廢棄的標簽:
applet, basefont, big, center, u, noframe, frame, frameset, tt, strike, font, dir

4.離線緩存

application cache：通過創(chuàng)建cache manifest文件，創(chuàng)建web應用離線版本
好處：

  • 離線瀏覽：用戶可在離線時加載他們
  • 速度：已緩存資源的加載速度會很快
  • 減少服務器負載：瀏覽器只從服務器下載更新過或者更改過的文件

manifest文件告訴瀏覽器要緩存的內(nèi)容，文件分為三個部分：

  • cache manifest:首次下載后進行緩存的文件列表
  • network:需要與服務器建立連接，且不會被緩存的文件列表
  • fallback:當頁面無法訪問時的回退頁面列表(比如：404)；

更新緩存：
一旦應用被緩存，它就會保持緩存直到發(fā)生下列情況：

  • 用戶清空瀏覽器緩存
  • manifest文件被修改
  • 由程序來更新應用緩存

使用：
配置html的manifest屬性
manifest文件需要配置正確的MIME-type，即text/cache-manifest。必須在web服務器上進行配置

<!doctype html>
<html manifest="test.appcache">
</html>

瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
(1) 在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù) manifest文件的內(nèi)容下載相應的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后 瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資 源并進行離線存儲。
(2)離線的情況下，瀏覽器就直接使用離線存儲的資源。

5.cookie,localStorage,sessionStorage之間的區(qū)別

ps: 對于一些大型的，結(jié)構(gòu)化的數(shù)據(jù)，可以用indexedDB存儲。
同：都保存在客戶端。
異：

  • 數(shù)據(jù)的生命期不同：cookie一般由服務器生成，可以設(shè)置失效時間，如果是在瀏覽器生成的，默認是關(guān)閉瀏覽器之后失效；localStorage永久有效，除非清除；sessionStorage瀏覽器關(guān)閉之后失效。
  • 存儲大小不同：cookie一般是4kb大小，localStorage和sessionStorage會比cookie大很多，一般為5MB。
  • 是否與服務器端通信：cookie會攜帶在http請求頭部，在瀏覽器和服務器之間傳遞，在cookie中存放大量的數(shù)據(jù)會影響性能，常用的場景為判斷用戶是否登錄；localStorage和sessionStorage不會與服務器通信
  • 作用域不同：localStorage和cookie在所有同源窗口中共享(協(xié)議，端口，域名相同)。sessionStorage不能在不同的頁面或者標簽中共享。需要注意的是，頁面及標簽頁僅僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬于同源頁面，那么他們之間是可以共享sessionStorage的。（也就是說如果關(guān)閉標簽頁后，通過sessionStorage存儲的數(shù)據(jù)就都被刪除了。sessionStorage的作用域不僅被限制在文檔源，還被限定在窗口中，也就是同一標簽頁中。注意，這里說的窗口是指頂級窗口，若果同一標簽頁中包含多個<iframe>元素，這兩者之間也是可以共享sessionStorage的。）

6.lable和input的關(guān)系

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

  • label的for屬性和input的id綁定
<form>
  <label for="male">male</label>
  <input type="radio" id="male" name="sex" />
  <br>
  <label for="female">female</label>
  <input type="radio" id="female" name="sex" />
</form>
  • <label>包裹<input>標簽，點擊<label>，<label>響應兩次，即<label>本身出發(fā)和<input>觸發(fā)后冒泡到<label>。
<body>
  <label for="input">
    <input id="input" type="text" /> 
  </label>
  <script>
    var label = document.getElementByTagName("label")[0];
    var input = document.getElementById("input");
    label.addEventListener("click",function(){
      console.log("label");
    },false);
    input.addEventListener("click",function(){
      console.log("input");
    },false)
  </script>
</body>
//output: label  input label

7.標簽語義化的理解

  • 語義化：根據(jù)內(nèi)容的結(jié)構(gòu)化，選擇合適的標簽便于開發(fā)者閱讀和寫出優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好的解析。用正確的標簽做正確的事情。
  • 好處：
    • 在沒有css的情況下，能夠呈現(xiàn)出清晰的內(nèi)容結(jié)構(gòu)和代碼結(jié)構(gòu)。
    • 好的用戶體驗：例如title，alt用于解釋名詞或解釋圖片信息、label標簽的活用。
    • 有利于SEO：和搜索引擎建立良好的溝通，有助于爬蟲抓取更多的有效信息。爬蟲依賴標簽確定上下文和各個標簽的權(quán)重。
    • 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
    • 便于團隊的開發(fā)與維護：語義化更具可讀性，如果都遵循這個標準，可以減少差異化。
  • 應該注意的事項：
    • 盡可能少的使用無語義的標簽div和span；
    • 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
    • 不要使用純樣式標簽，如：b、font、u等，改用css設(shè)置。
      需要強調(diào)的文本，可以包含在strong或者em標簽中（瀏覽器預設(shè)樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
    • 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
    • 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
    • 每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設(shè)置id屬性，在lable標簽中設(shè)置for=someld來讓說明文本和相對應的input關(guān)聯(lián)起來。

8.meta標簽的作用

  • 概念： 定義頁面的元信息，比如針對搜索引擎和更新頻度的描述和關(guān)鍵字。

屬性用法具體可參考：https://www.deanhan.cn/html-meta.html

  • 屬性：

    • content：必選，定義與http-equiv或者name相關(guān)的元信息。
    • http-equiv: 可選，把content屬性關(guān)聯(lián)到http頭部。
      值：content-type, expires, refresh, set-cookie, charset, pragma, windows-target, page-enter，page-exit。
    • name: 可選，把content屬性關(guān)聯(lián)到一個名稱。
      值：author， description，keywords，generator，revised，others

  • 作用：meta標簽里的數(shù)據(jù)是供機器解讀的，其主要作用有：

    • 搜索引擎優(yōu)化（SEO）
    • 定義頁面使用語言
    • 自動刷新并指向新的頁面
    • 實現(xiàn)網(wǎng)頁轉(zhuǎn)換時的動態(tài)效果
    • 控制頁面緩存
    • 網(wǎng)頁定級評價
    • 控制網(wǎng)頁顯示的窗口等等

9.HTML5 標準提供的新的 API

  • Media API
  • Text Track API
  • Application Cache API
  • User Interaction
  • Data Transfer API
  • Command API
  • Constraint Validation API
  • History API

10.如何對網(wǎng)站的文件和資源進行優(yōu)化

  • 文件合并（目的是減少http請求）
  • 文件壓縮 （目的是直接減少文件下載的體積）
  • 使用cdn托管資源
  • 使用緩存
  • gzip壓縮你的js和css文件
  • meta標簽優(yōu)化（title,description,keywords）,heading標簽的優(yōu)化,alt優(yōu)化
  • 反向鏈接，網(wǎng)站外鏈接優(yōu)化。

11. 為什么利用多個域名來提供網(wǎng)站資源會更有效？

  • 突破瀏覽器的并發(fā)限制（瀏覽器同一域名最大的并發(fā)請求數(shù)量為6個，ie6為2個）
  • 節(jié)約cookie帶寬
  • CDN緩存更方便
  • 防止不必要的安全問題（尤其是cookie的隔離尤為重要）
  • 節(jié)約主機域名連接數(shù)，優(yōu)化頁面響應速度

參考：https://www.cnblogs.com/libin-1/p/6525128.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 接上 關(guān)于HTML/HTML5（一）http://www.itdecent.cn/p/33fc7840c079 學...
    Amyyy_閱讀 889評論 0贊 4
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,771評論 1贊 45
  • 語義化 HTML標簽的語義化是指：通過使用包含語義的標簽（如h1-h6）恰當?shù)乇硎疚臋n結(jié)構(gòu) css命名的語義化是指...
    紋小艾閱讀 587評論 0贊 1
  • ??支持離線 Web 應用開發(fā)是 HTML5 的另一個重點。 ??所謂離線 Web 應用，就是在設(shè)備不能上網(wǎng)的情況...
    霜天曉閱讀 1,185評論 0贊 2
  • 前端開發(fā)面試題 面試題目： 根據(jù)你的等級和職位的變化，入門級到專家級，廣度和深度都會有所增加。 題目類型： 理論知...
    怡寶丶閱讀 2,669評論 0贊 7

友情鏈接更多精彩內(nèi)容