html基礎

時間  2019-11-10
標籤 html 基礎 欄目 HTML 简体版
原文   原文鏈接

 

對web標準的理解是什麼？javascript

  • 首先是html標籤上，標籤閉合，標籤小寫，不亂嵌套；
  • 使用語義化標籤，例如header，article，少用<b></b>這樣沒有語義的標籤，以提升搜索概率；
  • 使用外部的css文件及js文件，使結構表現行爲分離；
  • 減小文件數目，達到減小網絡請求次數，文件下載與頁面速度更流暢；
  • 內容能被更多的用戶及設備訪問，保證在版本較低的瀏覽器下可以呈現完整內容，在版本高的瀏覽器上可以展示更完美的視覺效果；
  • 代碼低耦合高內聚，易維護。

1.DOCTYPE有什麼做用？標準模式與混雜模式如何區分？它們有何意義?css

告訴瀏覽器使用哪一個版本的HTML規範來渲染文檔。DOCTYPE不存在或形式不正確會致使HTML文檔以混雜模式呈現。
標準模式（Standards mode）以瀏覽器支持的最高標準運行；混雜模式（Quirks mode）中頁面是一種比較寬鬆的向後兼容的方式顯示。html

2.HTML5爲何只須要寫 <!DOCTYPE HTML>？java

HTML5不基於SGML（Standard Generalized Markup Language 標準通用標記語言），所以不須要對DTD（DTD 文檔類型定義）進行引用，可是須要DOCTYPE來規範瀏覽器行爲。web

HTML4.01基於SGML，因此須要引用DTD。才能告知瀏覽器文檔所使用的文檔類型，以下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">ajax

3.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？算法

行內元素：a span img input select 
塊級元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>數據庫

4.頁面導入樣式時，使用link和@import有什麼區別？canvas

相同的地方，都是外部引用CSS方式，區別：跨域

  1. link是xhtml標籤，除了加載css外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS
  2. link引用CSS時候，頁面載入時同時加載；@import須要在頁面徹底加載之後加載，並且@import被引用的CSS會等到引用它的CSS文件被加載完才加載
  3. link是xhtml標籤，無兼容問題；@import是在css2.1提出來的，低版本的瀏覽器不支持
  4. link支持dom操做，可使用javascript控制去改變樣式；而@import不支持
  5. link方式的樣式的權重高於@import的權重
  6. import在html使用時候須要<style type="text/css">標籤

5.無樣式內容閃爍（FOUC）Flash of Unstyle Content

@import導入CSS文件會等到文檔加載完後再加載CSS樣式表。所以，在頁面DOM加載完成到CSS導入完成之間會有一段時間頁面上的內容是沒有樣式的。

解決方法：使用link標籤加載CSS樣式文件。由於link是順序加載的，這樣頁面會等到CSS下載完以後再下載HTML文件，這樣先佈局好，就不會出現FOUC問題。

6.介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。
JS引擎：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

7.常見的瀏覽器內核有哪些？

  • Trident(-ms-)：IE、傲遊、世界之窗、騰訊TT、360、搜狗
  • Gecko(-moz-)：FireFox
  • Webkit(-webkit-)：Chrome、Safari
  • Kestrel(-o-)：9.5版本以上Opera
  • Presto(-o-)：9.5之前Opera

8.HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML和HTML5

新增長了圖像、位置、存儲、多任務等功能。
新增元素：

  1. canvas
  2. 用於媒介回放的video和audio元素
  3. 本地離線存儲。localStorage長期存儲數據，瀏覽器關閉後數據不丟失;sessionStorage的數據在瀏覽器關閉後自動刪除
  4. 語意化更好的內容元素，好比 article footer header nav section
  5. 位置API：Geolocation
  6. 表單控件，calendar date time email url search
  7. 新的技術：web worker(web worker是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行) web socket
  8. 拖放API：drag、drop

移除的元素：

  1. 純表現的元素：basefont big center font s strike tt u
  2. 性能較差元素：frame frameset noframes

區分：

  1. DOCTYPE聲明的方式是區分重要因素
  2. 根據新增長的結構、功能來區分

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

  1. 去掉或丟失樣式的時候可以讓頁面呈現出清晰的結構。
  2. 有利於SEO和搜索引擎創建良好溝通，有助於爬蟲抓取更多的信息，爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重。
  3. 方便其它設備解析。
  4. 便於團隊開發和維護，語義化根據可讀性。

10.HTML5的文件離線儲存怎麼使用，工做原理是什麼？

在線狀況下，瀏覽器發現HTML頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問，那麼瀏覽器就會根據manifest文件的內容下載相應的資源，並進行離線存儲。若是已經訪問過而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面。而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不會作任何操做，若是文件改變了，那麼就會從新下載文件中的資源，而且進行離線存儲。例如，

在頁面頭部加入manifest屬性 ： <html manifest='cache.manifest'>

在cache.manifest文件中編寫離線存儲的資源

  1.   CACHE MANIFEST
  2.   #v0.11
  3.   CACHE:
  4.  js/app .js
  5.  css/style .css
  6.  NETWORK:
  7.  Resourse/logo .png
  8.  FALLBACK:
  9.   //offline.html

11.cookies，sessionStorage和localStorage的區別？

共同點：都是保存在瀏覽器端，且是同源的。

區別：

  • cookies是爲了標識用戶身份而存儲在用戶本地終端上的數據，始終在同源http請求中攜帶，即cookies在瀏覽器和服務器間來回傳遞，而sessionstorage和localstorage不會自動把數據發給服務器，僅在本地保存。
  • 存儲大小的限制不一樣。cookie保存的數據很小，不能超過4k，而sessionstorage和localstorage保存的數據大，可達到5M。
  • 數據的有效期不一樣。cookie在設置的cookie過時時間以前一直有效，即便窗口或者瀏覽器關閉。sessionstorage僅在瀏覽器窗口關閉以前有效。localstorage始終有效，窗口和瀏覽器關閉也一直保存，用做長久數據保存。
  • 做用域不一樣。cookie在全部的同源窗口都是共享；sessionstorage不在不一樣的瀏覽器共享，即便同一頁面；localstorage在全部同源窗口都是共享

12.iframe框架有那些優缺點？

  • 缺點
    • iframe可以原封不動的把嵌入的網頁展示出來。
    • 若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
    • 網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。
    • 若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。
  • 缺點
    • 搜索引擎的爬蟲程序沒法解讀這種頁面
    • 框架結構中出現各類滾動條
    • 使用框架結構時，保證設置正確的導航連接。
    • iframe頁面會增長服務器的http請求

13.label的做用是什麼? 是怎麼用的?

label標籤用來定義表單控件間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。label 中有兩個屬性是很是有用的, FOR和ACCESSKEY。 
FOR屬性功能：表示label標籤要綁定的HTML元素，你點擊這個標籤的時候，所綁定的元素將獲取焦點。例如，

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

ACCESSKEY屬性功能：表示訪問label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。例如，

<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

14.HTML5的form如何關閉自動完成功能？

HTML的輸入框能夠擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你之前的同名輸入框的歷史記錄中查找出相似的內容並列在輸入框下面，這樣就不用所有輸入進去了，直接選擇列表中的項目就能夠了。但有時候咱們但願關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，咱們但願使用AJAX技術從數據庫搜索並列舉而不是在用戶的歷史記錄中搜索。

方法：

  1. 在IE的internet選項菜單中裏的自動完成裏面設置
  2. 設置form輸入框的autocomplete爲on或者off來來開啓輸入框的自動完成功能

15.如何實現瀏覽器內多個標籤頁之間的通訊?

  1. WebSocket SharedWorker
  2. 也能夠調用 localstorge、cookies 等本地存儲方式。 localstorge 在另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊。

注意：Safari 在無痕模式下設置 localstorge 值時會拋出QuotaExceededError 的異常

16.webSocket如何兼容低瀏覽器？

  1. Adobe Flash Socket ActiveX HTMLFile (IE) 基於 multipart 編碼發送 XHR 基於長輪詢的 XHR
  2. 引用WebSocket.js這個文件來兼容低版本瀏覽器。

17.頁面可見性（Page Visibility）API 能夠有哪些用途？

  1. 經過visibility state的值得檢測頁面當前是否可見，以及打開網頁的時間。
  2. 在頁面被切換到其餘後臺進程時，自動暫停音樂或視頻的播放。

18.如何在頁面上實現一個圓形的可點擊區域？

  1. map+area或者svg
  2. border-radius
  3. 純js實現，一個點不在圓上的算法

19.實現不使用 border 畫出1px高的線，在不一樣瀏覽器的Quirks mode和CSS Compat模式下都能保持同一效果

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

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

  1. 區分用戶是計算機仍是人的程序;
  2. 能夠防止惡意破解密碼、刷票、論壇灌水；

21.title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義，只表示標題；h1表示層次明確的標題，對頁面信息的抓取也有很大的影響
strong標明重點內容，語氣增強含義；b是無心義的視覺表示
em表示強調文本；i是斜體，是無心義的視覺表示
視覺樣式標籤：b i u s
語義樣式標籤：strong em ins del code

22.元素的alt和title有什麼異同？

在alt和title同時設置的時候，alt做爲圖片的替代文字出現，title是圖片的解釋文字。

23. 一級域名？二級域名是指什麼？

  • .com ：頂級域名
  • baidu.com： 一級域名
  • www.baidu.com／tieba.baidu.com： 二級域名

24.瀏覽器解析url過程？ 

  • 瀏覽器輸入地址
    • 輸入baidu，瀏覽器自動添加.com
    • baidu.com的時候，這是一級域名，給你重定向到www.baidu.com這樣的二級域名。
  • 瀏覽器查看是否有緩存
    • 瀏覽器緩存
    • 系統緩存
    • DNS緩存（路由器緩存）
  • 請求到了DNS服務器，DNS服務器將域名解析爲ip地址
  • 瀏覽器有了ip就能夠找到服務器，二者之間就能夠創建tcp連接，服務器須要和瀏覽器創建tcp三次握手。
  • 握手成功後，首先瀏覽器得向服務器發送http請求（若是是http協議）和請求數據包
    • 請求方式
    • 請求協議的版本
    • 想到獲得什麼數據，數據是什麼格式的
  • 服務器收到了請求後進行處理，將須要的數據返回瀏覽器
  • 瀏覽器收到http響應頭，此時就會讀取數據，進行瀏覽器渲染。
    • 解析DOM樹
    • 遇到圖片樣式表js文件啓動下載
  • 顯示html頁面

25.iframe的使用場景有哪些？

  • 左側是功能樹，右側是具體功能。爲了每個功能單獨分離。
  • 加載別的網站的內容。
  • ajax上傳文件
  • 在上傳圖片時，不使用flash實現無刷新。
  • 跨域的時候做爲中間人 

26.什麼是重排和重繪？

如下三種狀況，會致使網頁從新渲染

  • 修改DOM
  • 修改樣式表
  • 用戶事件（頁面滾動，輸入框鍵入文字，改變窗口大小等等）

從新渲染，就須要從新生成佈局和從新繪製。
前者就叫重排，後者就叫作重繪。

  • 重繪不必定觸發重排，好比改變頁面某個元素的顏色，並無致使佈局改變。
  • 重排必定觸發重繪，好比改變了一個網頁元素的位置，就會觸發重排和重繪。

27.不一樣的字符編碼

  • utf-8：針對Unicode點可變長字符編碼，又稱萬國碼。UTF-8用1到6個字節編碼UNICODE字符。用在網頁上能夠同一頁面顯示中文簡體繁體及其它語言（如英文，日文，韓文）。
  • GBK：漢字編碼，表示簡體繁體。
  • ISO8859-2：收集了東歐字符。
  • 理論上是gb2312加載的比utf-8快一些

28.meta的做用及用法

做用：

  • 搜索引擎優化
  • 定義頁面使用的語言
  • 自動刷新並指向新的頁面
  • 頁面轉換時的動態效果
  • 控制頁面緩存
  • 頁面描述
  • 網頁顯示的窗口信息

用法：

  • 語法：<meta name="參數"content="具體的參數值">。主要參數：

    • keywords：告訴搜索引擎你的網頁關鍵字是什麼。<meta name="keywords"content="xxx">
    • description：告訴搜索引擎引擎你的網站的主要內容。<meta name="description"content="xxx">
    • robots（機器人嚮導）：用來告訴哪些頁面須要索引。<meta name="robots"content="none">
      • all：文件將被檢索，且頁面上的連接能夠被查詢；
      • none：文件不會被檢索，頁面上的連接不能夠被查詢；
      • index：文件將被檢索；
      • follow：頁面上的連接能夠被查詢。
      • noindex：文件將不被檢索，但頁面上的連接能夠被查詢；
      • nofollow：文件將被檢索，但頁面上的連接不能夠被查詢；
    • author：標註網頁的做者<meta name="author"content="root,root@xxxx.com">
    • generator：表示網站採用的什麼軟件製做
    • COPYRIGHT：說明網站版權信息
    • revisit-after：表明網站重訪<META name="revisit-after"CONTENT="7days">表明7天。
  • http-equiv屬性：至關於http文件頭的做用，能夠向瀏覽器傳回一些有用的信息
    • Expires：設置網頁到期時間，一旦網頁到期，必須到服務器上從新傳輸。<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 注意時間使用的是GMT格式。
    • Pragma：禁止瀏覽器從本地計算機的緩存中訪問頁面內容。<meta http-equiv="Pragma"content="no-cache">。
    • Refresh：自動刷新並指向新頁面。<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> //(注意後面的引號，分別在秒數的前面和網址的後面)。
    • Set-Cookie：若是頁面過時，那麼存盤的cookie將被刪除。<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
    • Window-target(顯示窗口的設定)：用來防止別人在框架裏調用本身頁面。<meta http-equiv="Window-target"content="_top">強制頁面在當前窗口以獨立頁面顯示。
    • content-Type(顯示字符集的設定)：設定頁面使用的字符集。<meta http-equiv="content-Type"content="text/html;charset=gb2312">
    • content-Language（顯示語言的設定）<meta http-equiv="Content-Language"content="zh-cn"/>
    • Cache-Control指定請求和響應遵循的緩存機制。
    • imagetoolbar：指定是否顯示圖片工具欄，false不顯示，true顯示。<meta http-equiv="imagetoolbar"content="false"/>
    • Content-Script-Type：制定腳本類型<Meta http-equiv="Content-Script-Type"Content="text/javascript">
    • X-UA-Compatible：模擬ie版本 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  • 關於移動端的meta屬性：
    • viewport屬性：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
      • width：viewport的寬度
      • height：viewport的高度
      • initial-scale：初始的縮放比例
      • minimum-scale：容許用戶縮放到的最小比例
      • maximum-scale：容許用戶縮放到的最大比例
      • user-scalable：用戶是否能夠手動縮放
    • <meta name="apple-mobile-app-capable" content="yes">：是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單。
    • <meta name="apple-mobile-app-status-bar-style" content="black">：改變頂部狀態條的顏色。
    • <meta name="format-detection" content="telphone=no, email=no"/>：忽略頁面中的數字識別爲電話，忽略email識別。

29.CDN是什麼？

即內容分發網絡，其基本思路是儘量避開互聯網有可能影響數據傳輸和穩定性的瓶頸和環境，是內容傳輸更穩定更快。

30.正向代理，反向代理是什麼？
  • 正向代理：a想找c借錢，可是a並不能直接找c借錢，那麼a找b借錢，b找c借錢，那麼a就獲得了c的錢，可是c並不知道把錢借給了誰。好比a訪問google訪問不了，但搭建在國外的b能夠訪問google，那麼讓他去請求google再把內容返回給a就行了。
  • 反向代理：a訪問baidu，可是baidu背後有成千上萬臺服務器，a並不知道具體是哪臺給的服務，但你只須要知道代理服務器是www.baidu.com就行了，反向代理服務器會幫咱們把請求發給真實的服務器。主要用來作負載均衡。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程