知識整理之HTML篇

時間  2019-11-08
標籤 知識 整理 html 欄目 HTML 简体版
原文   原文鏈接
最近關注winter的「重學前端」系列文章，也想把已知的前端知識體系梳理一遍，夯實基礎的同時，總結提高。接下來會從HTML、CSS、JS、性能、網絡安全、框架通識進行分類總結。

Doctype做用？標準模式與兼容模式各有什麼區別?

  1. <!DOCTYPE>聲明位於HTML文檔的第一行，處於<html>以前。
  2. <!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。Doctype不存在或者格式不正確都會致使文檔以兼容模式/混雜模式呈現。
  3. 標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。

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

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們該有的方式來運行）
而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。css

Doctype的類型有哪些？

整體上應該分爲三類： HTML5，HTML4.01，XHTML。html

HTML5

HTML5模式是目前最經常使用的模式。直接在DOCTYPE後面添加html便可。前端

<!DOCTYPE html>

HTML4.01 模式

分爲三種模式：嚴格模式(strict)、過分模式(transitional)、Frameset模式。區別在因而否容許使用展現性和棄用元素，以及是否容許使用框架集。html5

  • 嚴格模式：不容許展現型、棄用元素和框架集。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 過分模式：容許使用展現性元素、棄用元素（好比font、color等），不容許使用框架集。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset模式：容許展現性元素、棄用元素，容許框架集。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 模式

XHTML是一種比較嚴格的模式，全部元素必須以XML格式編寫。分類和HTML4.01比較相似，分爲嚴格模式、過渡模式、Frameset模式，同時添加了1.1模式。css3

  • 嚴格模式：不容許展現性、棄用元素和框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 過渡模式：容許展現性、棄用元素（好比font，color等）,不容許框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Frameset模式：容許展現性、棄用元素，容許框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML 1.1：該 DTD 等同於 XHTML 1.0 Strict，但容許添加模型（例如提供對東亞語系的 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

最後附上各類文檔類型支持的元素列表：HTML5/HTML 4.01/XHTML 元素和有效的 DTDweb

區分HTML4.01和HTML5

  • DOCTYPE聲明
  • 新增結構元素
  • 新增功能元素

HTML和XHTML編寫區別

XHTML要求編寫符合XML的語法。主要區別在於：算法

  • XML區分大小寫：之前不少<html>、<body>等都用大寫或大小寫混用如<HTML>、<BODY>或<Html>、<Body>」排版，可是XHTML統一要求須要用<html>、<body>小寫。
  • XML標籤必須閉合，單元素須要以/做爲閉合結尾，嵌套不能出錯。好比：「<meta name="keywords" content="關鍵字" > 」像這個標籤在html是可行的，可是爲了xhtml的標準因此必須關閉如「<meta name="keywords" content="關鍵字" /> 」
  • XML屬性必須放在引號中。
  • XML屬性必須有屬性值，不能省略。好比：網頁裏顯示圖片img標籤裏均可加可不加alt屬性，可是如今xhtml要求必須加上alt屬性,否則xhtml驗證將提示錯誤，哪怕alt的值爲空均可以。
  • XML中空格不會被自動刪除。

<meta>

<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。
<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。
經常使用列表以下:chrome

<!DOCTYPE html>  <!-- H5標準聲明，使用 HTML5 doctype，不區分大小寫 -->
<head lang="en"> <!-- 標準的 lang 屬性寫法 -->
<meta charset="utf-8">    <!-- 聲明文檔使用的字符編碼 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   <!-- 優先使用 IE 最新版本和 Chrome -->
<meta name="description" content="不超過150個字符"/>       <!-- 頁面描述 -->
<meta name="keywords" content=""/>      <!-- 頁面關鍵詞 -->
<meta name="author" content="name, email@gmail.com"/>    <!-- 網頁做者 -->
<meta name="robots" content="index,follow"/>      <!-- 搜索引擎抓取 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- 爲移動設備添加 viewport -->
<!-- 設置頁面不緩存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

meta viewport

在移動端開發，最常看到head裏面設置了下面這個屬性：json

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >

經常使用的6個屬性：segmentfault

  • width ： 設置layout viewport 的寬度，爲一個正整數，或字符串"width-device"
  • initial-scale：設置頁面的初始縮放值，爲一個數字，能夠帶小數
  • minimum-scale：容許用戶的最小縮放值，爲一個數字，能夠帶小數
  • maximum-scale：容許用戶的最大縮放值，爲一個數字，能夠帶小數
  • height：設置layout viewport 的高度，這個屬性並不重要，不多使用
  • user-scalable：是否容許用戶進行縮放，值爲」no」或」yes」, no 表明不容許，yes表明容許

特殊說明：（IE6,7,8）支持，須要使用css3mediaqueries.js

<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]>

深刻了解，移步至：移動前端開發之viewport的深刻理解

meta http-equiv

http-equiv顧名思義，至關於http的文件頭做用。把 content 屬性關聯到 HTTP 頭部。
http-equiv屬性主要有如下幾種參數：

  • content-Type(設定網頁字符集)(推薦使用HTML5的方式)

說明：用於設定網頁字符集，便於瀏覽器解析與渲染頁面舉例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  <!--舊的HTML，不推薦 -->
<meta charset="utf-8"> <!-- HTML5設定網頁字符集的方式，推薦使用UTF-8 -->
  • X-UA-Compatible(瀏覽器採起何種版本渲染當前頁面)

說明：用於告知瀏覽器以何種版原本渲染頁面。（通常都設置爲最新模式，在各大框架中這個設置也很常見。）舉例：

<meta http-equiv="X-UA-Compatibel" conent="IE=edge,chrome=1" >  <!-- 指定IE和Chrome使用最新版本渲染當前頁面 -->
  • cache-control(指定請求和響應遵循的緩存機制)

說明：指定瀏覽器如何緩存某個響應以及緩存多長時間。舉例：

<meta http-equiv="cache-contorl" conent="no-cache">

共有如下幾種用法：

- no-cache: 先發送請求，與服務器確認該資源是否被更改，若是未被更改，則使用緩存。
 - no-store: 不容許緩存，每次都要去服務器上，下載完整的響應。（安全措施）
 - public : 緩存全部響應，但並不是必須。由於max-age也能夠作到相同效果。
 - private : 只爲單個用戶緩存，所以不容許任何中繼進行緩存。（好比說CDN就不容許緩存private的響應）
 - maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器從新請求。例如：max-age=60表示響應能夠再緩存和重用 60 秒。

關於瀏覽器緩存，可移步至：瀏覽器緩存機制

  • expires(網頁到期時間)

說明:用於設定網頁的到期時間，過時後網頁必須到服務器上從新傳輸。舉例：

<meta htttp-equiv="expires" content="Sunday 26 October 2019 01:00 GMT">
  • Pragma(cache模式)

說明：是用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定後一旦離開網頁就沒法從Cache中再調出 。舉例：

＜meta http-equiv="pragma" content="no-cache"＞
  • Set-Cookie(cookie設定)

說明：若是網頁過時。那麼這個網頁存在本地的cookies也會被自動刪除。舉例：

<meta http-equiv="Set-Cookie" content="name, date"> <!-- 格式 -->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> <!-- 具體範例 -->
  • refresh(自動刷新並指向某頁面)

說明：網頁將在設定的時間內，自動刷新並調向設定的網址。舉例:

<meta http-equiv="refresh" content="2；URL=https://segmentfault.com/u/clearlove07"> <!-- 意思是2秒後跳轉向個人博客 -->

HTML語義化

根據內容的結構，選擇合適的標籤（代碼語義化）恰當地表示文檔結構，便於開發者閱讀的同時讓瀏覽器的爬蟲和機器很好地解析。

爲何要語義化？

  1. 在沒有css的狀況下，也能很好的展現內容結構、代碼結構。
  2. 提高用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用。
  3. 有利於SEO：和搜索引擎創建良好的溝通，有助於爬蟲獲取更多有效的信息，爬蟲以來於標籤的上下文和各個關鍵字的權重。
  4. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備等）以有意義的方式渲染頁面。
  5. 便於團隊開發和維護，語義化更具可讀性，減小由於不遵循標準的差別化。

語義化標籤的推薦使用場景

天然語言表達能力的補充

  • 做爲天然語言和純文本的補充

在 HTML5 中，就引入了這個表示 ruby 的標籤，它由ruby、rt、rp 三個標籤來實現。用於註音或者意思的註解。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
  • 用來表達必定的結構或者消除歧義

好比當沒有上下文時，如何消除歧義呢？這就要用到咱們的 em 標籤，em 表示重音：

今天我吃了一個 <em> 蘋果 </em>。
今天我吃了 <em> 一個 </em> 蘋果。

實際上，不只僅是讀音，這裏的意思也發生了變化。前一段中，表示我今天吃的是蘋果，而不是別的什麼東西，後一段中，則表示我今天只吃了一個蘋果，沒有多吃。

文章標題摘要

語義化的 HTML 可以支持自動生成目錄結構，HTML 標準中還專門規定了生成目錄結構的算法，即便咱們並不打算深刻實踐語義，也應該儘可能在大的層面上保證這些元素的語義化使用。例如：

<section>
    <h1>HTML 語義 </h1>
    <p>balah balah balah balah</p>
    <section>
        <h1> 弱語義 </h1>
        <p>balah balah</p>
    </section>
    <section>
        <h1> 結構性元素 </h1>
        <p>balah balah</p> 
    </section>
......
</section>

適合機器閱讀的總體結構

隨着愈來愈多的瀏覽器推出「閱讀模式」，以及各類非瀏覽器終端的出現，語義化的 HTML 適合機器閱讀的特性變得愈來愈重要。
應用了語義化結構的頁面，能夠明確地提示出頁面信息的主次關係，它能讓瀏覽器很好地支持「閱讀視圖功能」，還可讓搜索引擎的命中率提高，同時，它也對視障用戶的讀屏軟件更友好。例如：

<body>
    <header>
        <nav>
            ……
        </nav>
    </header>
    <aside>
        <nav>
            ……
        </nav>
    </aside>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>
        <address>……</address>
    </footer>
</body>

書寫HTML代碼時應該注意什麼？

  1. 可能少的使用無語義的標籤div和span。
  2. 在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利。
  3. 不要使用純樣式標籤，如：b、font、u等，改用css設置。
  4. 須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）。具體緣由，請移步至：HTML中strong與b,em與i標籤的區別
  5. 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td。
  6. 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途。
  7. 每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

HTML5新增了哪些語義標籤?

注意不要由於html5新標籤的出現，而隨意用之，錯誤的使用確定會事與願違。因此有些地方仍是要用div的，就是由於div沒有任何意義的元素，他只是一個標籤，僅僅是用來構建外觀和結構。所以是最適合作容器的標籤。

<header>

header 元素表明「網頁」或section的頁眉。
一般包含h1-h6元素或hgroup，做爲整個頁面或者一個內容塊的標題。也能夠包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。

<header>
    <hgroup>
        <h1>網站標題</h1>
        <h2>網站副標題</h2>
    </hgroup>
</header>

header使用注意：

  • 沒有個數限制。
  • 若是hgroup或h1-h6本身就能工做的很好，那就不要用header。

<footer>

footer元素表明「網頁」或section的頁腳，一般含有該節的一些基本信息，譬如：做者，相關文檔連接，版權資料。若是footer元素包含了整個節，那麼它們就表明附錄，索引，提拔，許可協議，標籤，類別等一些其餘相似信息。

<footer>
    COPYRIGHT@clearlove07
</footer>

footer使用注意：

  • 沒有個數限制，除了包裹的內容不同，其餘跟header相似。

<hgroup>

hgroup元素表明「網頁」或section的標題，當元素有多個層級時，該元素能夠將h1到h6元素放在其內，譬如文章的主標題和副標題的組合。

<hgroup>
    <h1>this is main title</h1>
    <h2>this is sub title</h2>
</hgroup>

hgroup使用注意：

  • 若是隻須要一個h1-h6標籤就不用hgroup。
  • 若是有連續多個h1-h6標籤就用hgroup。
  • 若是有連續多個標題和其餘文章數據，h1-h6標籤就用hgroup包住，和其餘文章元數據一塊兒放入header標籤。

<nav>

nav元素表明頁面的導航連接區域。用於定義頁面的主要導航部分。

<nav>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</nav>

nav使用注意：

  • 用在整個頁面主要導航部分上，不合適就不要用nav元素。

<aside>

aside元素被包含在article元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）
在article元素以外使用做爲頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容能夠是日誌串連，其餘組的導航，甚至廣告，這些內容相關的頁面。

<article>
    <p>this is content</p>
    <aside>
        <h1>author decalation</h1>
        <p>i'm a font-end</p>
    </aside>
</article>

aside使用總結：

  • aside在article內表示主要內容的附屬信息。
  • 在article以外則可作側邊欄，沒有article與之對應，最好不用。
  • 若是是廣告，其餘日誌連接或者其餘分類導航也能夠用。

<section>

section元素表明文檔中的「節」或「段」，「段」能夠是指一篇文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組。
section一般還帶標題，雖然html5中section會自動給標題h1-h6降級，可是最好手動給他們降級。以下：

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>關於section</h1>
        <p>section的介紹</p>
        <section>
            <h3>關於其餘</h3>
            <p>關於其餘section的介紹</p>
        </section>
    </article>
</section>

section使用注意：

  • 表示文檔中的節或者段。
  • article、nav、aside能夠理解爲特殊的section，因此若是能夠用article、nav、aside就不要用section，沒實際意義的就用div。

<article>

article元素最容易跟section和div容易混淆，其實article表明一個在文檔，頁面或者網站中自成一體的內容，其目的是爲了讓開發者獨立開發或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）

<article>
    <h1>一篇文章</h1>
    <p>文章內容..</p>
    <footer>
        <p><small>版權：html5jscss網所屬，做者：小北</small></p>
    </footer>
</article>

article使用注意：

  • 自身獨立的狀況下：用article。
  • 是相關內容：用section。
  • 沒有語義的：用div。

<address>

address 標籤訂義文檔做者/全部者的聯繫信息。

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

address使用注意：

  • 不該該使用 address 標籤來描述郵政地址，除非這些信息是聯繫信息的組成部分。
  • address 元素一般被包含在 footer 元素的其餘信息中。

html5有哪些新特性、移除了那些元素？

新特性

  1. 拖拽釋放（Drag and drop）API
  2. 語義化標籤（header、footer、nav、aside、article、section等）
  3. 音頻、視頻API（audio、video）
  4. 畫布（Canvas）API
  5. 地理(Geolocation) API
  6. 本地存儲：localStorage和sessionStorage
  7. 離線應用：manifest
  8. 桌面通知：Notifications
  9. 加強表單控件：date、time、url、search、email、calendar等
  10. 多任務：Web Worker
  11. 全雙工通訊協議: Web Socket
  12. 歷史管理: History
  13. 頁面可見性改變事件: visibilitychange
  14. 跨窗口通訊: PostMeaage
  15. Form Data 對象
  16. 新增選擇器：document.querySelector、document.querySelectorAll

移除元素

  1. 純表現元素：basefont、big、center、font、s、u、tt、strike
  2. 對可用性產生負面影響的元素: frameset、frame、noframes

如何處理HTML5新標籤的瀏覽器兼容問題？

  1. IE8/IE7/IE6支持經過document.createElement方法產生的標籤。
  2. 使用html5shim框架
<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]>

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

HTML5的離線儲存原理

用戶在線時，保存更新用戶機器上的緩存文件；當用戶離線時，能夠正常訪離線儲存問站點或應用內容

HTML5的離線儲存使用：

  • 在文檔的 html 標籤設置 manifest 屬性，如 manifest="/offline.appcache"
  • 在項目中新建 manifest 文件，manifest 文件的命名建議：xxx.appcache
  • 在 web 服務器配置正確的 MIME-type，即 text/cache-manifest

示例

<!DOCTYPE html>
<html manifest="cache.manifest">
    ....
</html>

cache.manifest文件的書寫方式，就像下面這樣：

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html
  • CACHE:表示須要離線存儲的資源列表，因爲包含manifest文件的頁面將被自動離線存儲，因此不須要把頁面自身也列出來。
  • NETWORK:表示在它下面列出來的資源只有在在線的狀況下才能訪問，他們不會被離線存儲，因此在離線狀況下沒法使用這些資源。不過，若是在CACHE和NETWORK中有一個相同的資源，那麼這個資源仍是會被離線存儲，也就是說CACHE的優先級更高。
  • FALLBACK:表示若是訪問第一個資源失敗，那麼就使用第二個資源來替換他，好比上面這個文件表示的就是若是訪問根目錄下任何一個資源失敗了，那麼就去訪問offline.html。

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

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

瀏覽器解析manifest須要注意哪些問題？

  • 若是服務器對離線的資源進行了更新，那麼必須更新manifest文件以後這些資源才能被瀏覽器從新下載，若是隻是更新了資源而沒有更新manifest文件的話，瀏覽器並不會從新下載資源，也就是說仍是使用原來離線存儲的資源。
  • 對於manifest文件進行緩存的時候須要十分當心，由於可能出現一種狀況就是你對manifest文件進行了更新，可是http的緩存規則告訴瀏覽器本地緩存的manifest文件還沒過時，這個狀況下瀏覽器仍是使用原來的manifest文件，因此對於`manifest文件最好不要設置緩存。
  • 瀏覽器在下載manifest文件中的資源的時候，它會一次性下載全部資源，若是某個資源因爲某種緣由下載失敗，那麼此次的全部更新就算是失敗的，瀏覽器仍是會使用原來的資源。
  • 在更新了資源以後，新的資源須要到下次再打開app纔會生效，若是須要資源立刻就能生效，那麼可使用window.applicationCache.swapCache()方法來使之生效，出現這種現象的緣由是瀏覽器會先使用離線資源加載頁面，而後再去檢查manifest是否有更新，因此須要到下次打開頁面才能生效。

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

  • 在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放
  • 當用戶瀏覽其餘頁面，暫停網站首頁幻燈自動播放
  • 完成登錄後，無刷新自動同步其餘頁面的登陸狀態

關於Page Visibility的原理和應用場景，請移步至阮大神的：Page Visibility API 教程

WebSocket

WebSocket是一種在單個TCP鏈接上進行全雙工通訊的協議。

爲何須要 WebSocket ？

HTTP 協議有一個缺陷：通訊只能由客戶端發起。
這種單向請求的特色，註定了若是服務器有連續的狀態變化，客戶端要獲知就很是麻煩。大多數 Web 應用程序將經過頻繁的異步JavaScript和XML（AJAX）請求實現長輪詢。輪詢的效率低，很是浪費資源（由於必須不停鏈接，或者 HTTP 鏈接始終打開）。

WebSocket特色：

  1. 服務器能夠主動向客戶端推送信息，客戶端也能夠主動向服務器發送信息。
  2. 創建在 TCP 協議之上，服務器端的實現比較容易。
  3. 與 HTTP 協議有着良好的兼容性。默認端口也是80和443，而且握手階段採用 HTTP 協議，所以握手時不容易屏蔽，能經過各類 HTTP 代理服務器。
  4. 數據格式比較輕量，性能開銷小，通訊高效。
  5. 能夠發送文本，也能夠發送二進制數據。
  6. 沒有同源限制，客戶端能夠與任意服務器通訊。
  7. 協議標識符是ws（若是加密，則爲wss），服務器網址就是 URL。

關於WebSocket的使用介紹，請移步至軟大神的：WebSocket 教程

WebSocket 如何兼容低瀏覽器？

  1. Adobe Flash Socket
  2. ActiveX HTMLFile (IE)
  3. 基於 multipart 編碼發送 XHR
  4. 基於長輪詢的 XHR

簡述一下src與href的區別？

src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

src

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

<script src ="js.js"></script>

當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

href

href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加:

<link href="common.css" rel="stylesheet"/>

那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

link和@import的區別

二者都是外部引用CSS的方式，可是存在必定的區別：

  • link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
  • link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
  • link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
  • link支持使用Javascript控制DOM去改變樣式；而@import不支持。

iframe 有哪些缺點？

iframe的優勢：

  • iframe可以原封不動的把嵌入的網頁展示出來。
  • 若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
  • 若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。

iframe的缺點：

  • 會產生不少頁面，不容易管理。
  • iframe框架結構有時會讓人感到迷惑，若是框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，用戶體驗度差。
  • 代碼複雜，沒法被一些搜索引擎索引到，這一點很關鍵，如今的搜索引擎爬蟲還不能很好的處理iframe中的內容，因此使用iframe會不利於搜索引擎優化。
  • 不少的移動設備（PDA手機）沒法徹底顯示框架，設備兼容性差。
  • iframe框架頁面會增長服務器的http請求，對於大型網站是不可取的。

分析了這麼多，如今基本上都是用Ajax來代替iframe，因此iframe已經漸漸的退出了前端開發。

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

tilte與h1的區別

從搜索引擎角度來講,title標籤是用來描述這個頁面的主題的,是一個網頁權重的最高點。但title標籤並不出如今文章的正文中。而h1標籤通常出如今文章的正文中,是展現給訪問者的文章的標題。因此說這兩個標籤不只不衝突的,而是合做的關係。一篇文章既要有title又要有h1標籤,既突出了文章的主題,又突出了標題和關鍵字,達到雙重優化網站的效果。
通常會把title和h1標籤的內容寫成同樣,並且通常狀況下一篇文章最好只用一個h1標籤,過多的h1標籤反而會讓搜索引擎迷糊,認不清文章的主題。也就是說,從網站角度看,title更重於網站信息。title能夠直接告訴搜索引擎和用戶這個網站是關於什麼主題和內容的。
從文章角度看,h1則是用於歸納文章主題。用戶進入內容頁,想看到的固然就是文章的內容,h1文章標題就是最重要的。文章標題最好只有一個,多個h1會致使搜索引擎不知道這個頁面哪一個標題內容最重要,致使淡化這個頁面的標題和關鍵詞,起不到突出主題的效果。
區別:

  • h1突出文章主題,面對用戶,更突出其視覺效果。而title突出網站標題或關鍵字用。
  • 從seo看,title權重比h1高,適用性比h1廣。

一個好的網站是h1和title並存,既突出h1文章主題,又突出網站主題和關鍵字。達到雙重優化網站的效果。

b與strong的區別、i與em的區別

它們的區別就再於一個是物理元素,一個是邏輯元素。
物理元素所強調的是一種物理行爲,好比說我把一段文字用b標記加粗了,個人意思是告訴瀏覽器應該給我加粗了顯示這段文字,從單詞的語義也能夠分析得出,b是Bold(加粗)的簡寫,因此這個B標記所傳達的意思只是加粗,沒有任何其它的做用。
而Strong咱們從字面理解就能夠知道他是強調的意思,因此咱們用這個標記向瀏覽器傳達了一個強調某段文字的消息,而這個Strong就是咱們所說的邏輯元素,他是強調文檔邏輯的,並不是是通知瀏覽器應該如何顯示。
也就是說,這兩對標籤最大區別就是一個給搜索引擎看的,一個是給用戶看的。就用b和strong標籤作例子吧。
b標籤和strong標籤給咱們的主觀感覺都是加粗,但對搜索引擎來講b標籤和普通的文字並無什麼區別,而strong標籤倒是起強調做用的。也就是說若是你想讓搜索引擎認爲你的某句話很重要時那就用strong標籤。若是隻是想讓用戶看到加粗的效果,那就用b標籤。
同理如em標籤也是針對搜索引擎來起做用的,i標籤只是讓用戶看到展現的是斜體。

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

  • 行內元素有: a、b、span、img、input、strong、select等
  • 塊級元素有: div、ul、li、ol、dl、dd、dt、h1-h6等
  • 常見的空元素: br hr img input link meta等

label 的做用是什麼？怎麼使用的？

label標籤用來定義表單控件的關係：

當用戶選擇label標籤時，瀏覽器會自動將焦點轉到和label標籤相關的表單控件上。

使用方法

<!-- 方法一 -->
<labek for="moible">Mobile: </for>
<input type="number" id="mobile" placeholder="請輸入電話號碼" />

<!-- 方法二 -->
<label>
    name: <input tpye="text" placeholder="請輸入你的名字" />
</label>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程