HTML介紹詳述

weixin_33860722發表於2017-10-10
HTML

關於HTML

超文字標記語言（HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及移動應用程式的使用者介面。網頁瀏覽器可以讀取HTML檔案，並將其渲染成視覺化網頁

發展

年份 版本
1997.1 HTML 3.2
1997.12 HTML 4
1999.12 HTML 4.01
2014.1 HTML 5

一個典型的HTML5頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
      <h1>HTML5</h1>
    </header>
    <main></main>
    <footer></footer>
</body>
</html>

一個典型的HTML4頁面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="header">
      <h1>HTML4</h1>
    </div>
    <div id="main"></div>
    <div id="footer"></div>
</body>
</html>

HTML vs XML vs XHTML(筆試重點)

  • HTML，超文字標記語言，是語法較為鬆散的、不嚴格的Web語言；
  • XML，可擴充套件標記語言，主要用於儲存資料和結構參考；
  • XHTML，可擴充套件超文字標記語言，基於XML，作用與HTML類似，但語法更嚴格參考。

表現(內容)、樣式、行為分離

  • 寫 HTML 的時候先不管樣式, 重點放在HTML的結構和語義化上，讓 HTML 能體現頁面結構或者內容。之後再去寫樣式。
  • 寫 JS 的時候，儘量不要用 JS 去直接操作樣式，而是通過給元素新增刪除class來控制樣式變化
  • HTML 內不允許出現屬性樣式，儘量不要出現行內樣式

語義化HTML

語義化HTML是一種編寫HTML的方式

選擇合適的標籤、使用合理的程式碼結構，便於開發者閱讀，同時讓瀏覽器的爬蟲和機器很好地解析。

1、什麼是HTML語義化？
基本上都是圍繞著幾個主要的標籤，像標題（H1~H6）、列表（li）、強調（strong em）等等
　　根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。
2、為什麼要語義化？

  • 為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構:為了裸奔時好看；
  • 使用者體驗：例如title、alt用於解釋名詞或解釋圖片資訊、label標籤的活用；
  • 有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
  • 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
  • 便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

3、寫HTML程式碼時應注意什麼？

  • 儘可能少的使用無語義的標籤div和span；
  • 在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
  • 不要使用純樣式標籤，如：b、font、u等，改用css設定。
  • 需要強調的文字，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；
  • 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
  • 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
  • 每個input標籤對應的說明文字都需要使用標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

一個簡單的頁面

<!--標準模式（standard mode）的宣告-->
<!DOCTYPE html>
<!--為文件設定語言-->
<html lang="zh">
<head>
    <meta charset="utf-8">      <!--設定字元編碼-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">      <!--設定瀏覽器最新核心渲染-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">           <!--設定移動端渲染效果-->
    <meta name="keywords" content="前端 飢人谷">         
    <meta name="description" content="最有愛的前端學習社群">        
    <title>Document</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <p>段落 <span>3</span></p>
    <a href="http://jirengu.com" target="_blank">飢人谷.com</a>
                                                                   <!--target為轉跳規則-->
    ![](a.png)
    <div class="box"></div>
                                                                  <!--div：語音為一大塊-->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

</body>
</html>

有哪些常見的meta標籤

  1. 定義和用法
    <meta> 元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。
    <meta> 標籤位於文件的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文件相關聯的名稱/值對。
  2. 常見標籤
標籤 說明
<meta name="keywords" content=""> 向搜尋引擎說明你的網頁的關鍵詞
<meta name="description" content=""> 告訴搜尋引擎你的站點的主要內容
<meta name="author" content="你的姓名"> 告訴搜尋引擎你的站點的製作的作者
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"> 指定字符集
<meta http-equiv="refresh" content="n;url="> 定時讓網頁在指定的時間n內跳轉
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> 可以用於設定網頁的到期時間，一旦過期則必須到伺服器上重新呼叫。需要注意的是必須使用GMT時間格式
<meta http-equiv="pragma" content="no-cache"> 禁用快取
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"> cookie設定，如果網頁過期，存檔的cookie將被刪除。需要注意的也是必須使用GMT時間格式

文件宣告的作用?

DOCTYPE是docunment type（文件定義）的簡寫，用來說明web設計中所用的html或xhtml的型別，指出瀏覽器或者其他閱讀程式按照什麼樣的規則（W3C所釋出的一個文件型別定義即DTD）集去解釋文件中的標記.

嚴格模式和混雜模式指什麼?

嚴格模式： 又稱標準模式，是指瀏覽器按照 W3C 標準解析程式碼。

混雜模式： 又稱怪異模式或相容模式，是指瀏覽器用自己的方式解析程式碼。

如何區分： 瀏覽器解析時到底使用嚴格模式還是混雜模式，與網頁中的 DTD 直接相關。

  1. 如果文件包含嚴格的 DOCTYPE ，那麼它一般以嚴格模式呈現。（嚴格 DTD ——嚴格模式）
  2. 包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源識別符號，就是宣告最後的地址）會導致頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）
  3. DOCTYPE 不存在或形式不正確會導致文件以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式）
  4. HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經儘可能大的實現了向後相容。（ HTML5 沒有嚴格和混雜之分）

意義： 嚴格模式與混雜模式存在的意義與其來源密切相關，如果說只存在嚴格模式，那麼許多舊網站必然受到影響，如果只存在混雜模式，那麼會回到當時瀏覽器大戰時的混亂，每個瀏覽器都有自己的解析模式。

嚴格模式與混雜模式的語句解析不同點有哪些？
1）盒模型的高寬包含內邊距padding和邊框border

8353883-5d4645986ace91d0

  • 在W3C標準中，如果設定一個元素的寬度和高度，指的是元素內容的寬度和高度，而在IE5.5及以下的瀏覽器及其他版本的Quirks模式下，IE的寬度和高度還包含了padding和border。

2）可以設定行內元素的高寬

  • 在Standards模式下，給span等行內元素設定wdith和height都不會生效，而在quirks模式下，則會生效。

3）可設定百分比的高度

  • 在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設定高度，子元素設定一個百分比的高度是無效的。

4）用margin:0 auto設定水平居中在IE下會失效

  • 使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性:body{text-align:center};#content{text-align:left}

5）quirk模式下設定圖片的padding會失效

6）quirk模式下Table中的字型屬性不能繼承上層的設定
7）quirk模式下white-space:pre會失效

<!doctype html> 的作用?

<!DOCTYPE>宣告叫做檔案型別定義（DTD），宣告的作用為了告訴瀏覽器該檔案的型別。讓瀏覽器解析器知道應該用哪個規範來解析文件。<!DOCTYPE>宣告必須在 HTML 文件的第一行，這並不是一個 HTML 標籤。

補充內容：

一、常用的具體宣告：

1、HTML5（一種）：`<!DOCTYPE html>`

2、HTML 4.01（三種）：嚴格模式包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font），不允許框架集（Framesets）；過渡模式包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font），不允許框架集（Framesets）；框架模式等同於過渡模式，但允許框架集內容。

HTML 4.01 Strict ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


3、XHTML 1.0（四種）：前三種模式同上，XHML 必須以格式正確的 XML 來編寫標記。

XHTML 1.0 Strict ：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional ：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 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，但允許新增模型。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


二、嚴格模式與混雜模式的來源

當年Netscape4（網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，並沒有遵循W3C提出的標準。Netscape4 提供了糟糕的支援，而IE4 雖然接近標準，但依舊未能完全正確的支援標準。儘管IE 5 修復了IE4 許多的問題，但是依然延續CSS實現中的其它故障（主要是盒模型問題）。

為了保障自己的網站在各個瀏覽器上顯示正確，網頁開發者們不得不依據各個瀏覽器自身的規範來使用css，因此大部分網站的css實現並不符合W3C規範的標準。

然而隨著標準一致性越來越重要，瀏覽器開發商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。但是改變現有的 css，完全去遵循標準，會使許多舊網站或多或少受到破壞，如果瀏覽器突然以正確的方式解析現存的css，陳舊的網站的顯示必然會受到影響。所以，所有的瀏覽器都需要提供兩種模式：混雜模式服務於舊式規則，而嚴格模式服務於標準規則。

瀏覽器亂碼的原因是什麼？如何解決

原因： 網頁原始碼與瀏覽器使用了不一致的編碼方式。

  1. 比如網頁原始碼是gbk的編碼，而內容中的中文字是utf-8編碼的，這樣瀏覽器開啟即會出現html亂碼。反之網頁是編碼utf-8，內容是gbk也會出現亂碼。
  2. html網頁編碼是gbk，而程式從資料庫中調出呈現是utf-8編碼的內容也會造成編碼亂碼。
  3. 瀏覽器不能自動檢測網頁編碼，造成網頁亂碼。

解決方法： 修改編碼方式，使之一致。

常見的瀏覽器有哪些，什麼核心

Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;]
Webkit核心：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

列出常見的標籤，並簡單介紹這些標籤用在什麼場景

標籤 場景
head head標籤是頁面的“頭部”， 一般來說，只有6個標籤能放在<head>標籤內<title>、<meta>、<link>、<style>、<script>、<base>
body body標籤是頁面的“身體”
h1~h6標籤 設定不同的標題
p標籤 使用p標籤來標記一段文字
br/ 換行
<div> 主要用來為HTML文件內大塊的內容提供結構和背景
ul 無序列表
ol 有序列表
form 設定一個表單
img 設定一個影像
a 連線

補充資料
編碼規範
編碼與亂碼
飢人谷參考答案

相關文章