Web開發——HTML基礎

文檔資料參考：

• 參考：MDN官網
• 參考：http://www.runoob.com，W3School
• 參考：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics
• 參考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
• 實踐網站：https://jsbin.com/?html,output
• 實踐網站：https://thimble.mozilla.org/zh-CN/
• API網站參考：https://devdocs.io/
• 前端涉及的全部知識體系參考：http://www.cnblogs.com/Leo_wl/p/5879684.html

建立HTML項目方式：

•  本地計算機上建立實例
• 在線編碼程序：JSBin、Thimble、jsfiddle.net、Tinkerbin、Rendur等

專業人員使用哪些工具：

• 計算機，也許這對你來講是很明顯的，可是大家中有些人們是經過手機或者圖書館的計算機來閱讀這篇文章的。對於正經的 Web 開發，最好仍是使用運行 Windows，Mac，或者 Linux 系統的臺式計算機或筆記本電腦。
• 文本編輯器，用來編寫代碼。這能夠是純文本編輯器，好比 Sublime，Brackets， Atom 或 Visual Studio Code；也能夠是混合的編輯器，如 Dreamweaver 或者WebStorm。Office 文檔編輯器不適合在此使用，由於他們依賴的隱藏元素會干擾瀏覽器渲染機制。
• 瀏覽器，用來測試你的代碼。現在使用最多的瀏覽器有 Firefox，Chrome，Opera， Safari，Internet Explorer 和 Microsoft Edge。你同時須要在移動設備和任何你的目標用戶可能使用的老式瀏覽器（如 IE 8-10）中測試你的網頁表現如何。
• 圖像編輯器，像 The GIMP，Paint.NET，或 Photoshop，用來編輯你的網頁所需的圖像。
• 版本控制系統，用來管理服務器文件，支持項目中的團隊協做，共享代碼與資源，以及避免編輯衝突。當今最流行的版本控制工具是 Git，同時 GitHub 這個基於 Git 的代碼託管服務網站也很是流行。 
• FTP 工具軟件，在舊式使用網絡帳戶管理的服務器上，一般咱們使用 FTP 進行文件管理（Git 正在取代 FTP）。有不少 (S)FTP 工具軟件，好比 Cyberduck，Fetch，和 FileZilla。
• 自動化構建工具， 好比 Grunt 或 Gulp，來自動完成重複的任務，例如壓縮代碼和運行測試。
• 模板，庫，框架等等，任何用來加快編寫常規功能的工具。
• 還有更多工具喲！

文本編輯器，推薦使用Visual Studio Code

1. 下載安裝NodeJs環境（若是已經安裝能夠忽略）；
2. 下載安裝VS Code編譯器（官方下載地址：http://code.visualstudio.com/，VS Code官方插件地址：https://marketplace.visualstudio.com/vscode，http://code.visualstudio.com/docs）
3. 使用Typing工具配置VS Code的智能提示（參考連接：https://blog.csdn.net/u011127019/article/details/56671511）
4. 建立一個JavaScript的Demo

 　　切換語言（默認爲英文）：在Extension中搜索language，安裝簡體中文語言安裝包，而後按下F1 輸入language，選擇「Configure Display Language」，修改 "locale":"zh-CN" 爲 "locale":"zh-CN"，重啓VS Code便可。

 　　切換背景顏色：按下F1 輸入color，進行背景顏色選擇便可。

書籍資源下載：

• 參考：https://www.jqhtml.com/download

---

目錄：

• 一、涵蓋主題
• 二、JSLint——JavaScript語法檢查器和校驗器
• 三、HTML簡介
• 四、解析一個HTML元素
  • 4.1 嵌套元素
  • 4.2 空元素（圖像）
  • 4.3 塊與內聯元素
  • （1）HTML <div> 元素
    
  • （2）HTML <span> 元素
  • （3）HTML 分組標籤
  • （4）HTML 類
  • • （4.1）分類塊級元素
    • （4.2）分類行內元素
• 五、解析HTML文檔
  • 5.1 主動學習：添加了一些功能到HTML文檔
  • 5.2 HTML部分中空格
  • 5.3 實體引用：在HTML 編輯部分中包含特殊字符
  • 5.4 HTML評論（註釋）
  • 5.5 HTML中顯示中文
  • 5.6 重點和重要性編輯
    • （1）重點部分
    • （2）很是重要的部分
    • （3）斜體，粗體，下劃線...... 
• 六、HTML的元數據
  
  • 6.1 什麼是HTML頭？
  • 6.2 元數據：<meta>元素
    • （1） 指定文檔的字符編碼
    • （2） 添加做者和描述
    • （3） 主動學習：描述在搜索引擎中的使用 
    • （4） 其餘類型的元數據
  • 6.3 將自定義圖標添加到您的網站編輯（自定義左上角網頁圖標）
  • 6.4 將CSS和JavaScript應用於HTML
    • （1）CSS應用於HTML
    • （2）JavaScript應用於HTML
    • （3）主動學習：將CSS和JavaScript應用於頁面
  • 6.5 設置文檔的主要語言編輯
• 七、建立超連接
  
  • 7.1 什麼是超連接？
  • 7.2 連接剖析編輯
  • 7.3 關於URL和路徑的快速入門編輯
    • （1）文件碎片
    • （2）絕對與相對URL
  • 7.4 連接最佳實踐
    
    • （1）儘量使用相對連接
    • （2）連接到非HTML資源 - 留下明確的路標
  • 7.5 主動學習：建立導航菜單
    
  • 7.6 電子郵件連接
    • （1）指定詳細信息
      
• 八、HTML CSS和JavaScript
  
  • 8.1 HTML CSS
    
    • （1）外部樣式表
      
    • （2）內部樣式表
    • （3）內聯樣式
  • 8.2 HTML Script
    • （1）HTML script 元素
      
    • （2）<noscript> 標籤
    • （3）將CSS和JavaScript應用於HTML
• 九、HTML框架集與佈局、Frame/Iframe、HTML5新標籤
  • 9.1 Frameset佈局
    
  • 9.2 Table佈局
  • 9.3 Div佈局
    • （1）通常經常使用的Div頁面佈局
      
    • （2）HTML5新增語義化標籤
  • 9.4 從對象到iframe-其它嵌入技術
    
  • 9.5 HTML框架 Frame/Iframe 經過使用在同一個瀏覽器中顯示不止一個頁面
    • （1）舉例1（垂直框架）
      
    • （2）舉例2（水平框架）
    • （3）舉例3（使用 <noframes> 標籤）
    • （4）舉例4（混合框架結構）
    • （5）舉例5（三個網頁，上1下2，下左邊爲列表網頁，內容均在下右邊網頁中打開）
    • （6）舉例6（含有 noresize="noresize" 屬性的框架結構）
    • （7）Iframe框架的使用
• 十、標籤和屬性
• 十一、HTML事件屬性
  • 11.1 全局事件屬性
    
  • 11.2 Window 事件屬性
  • 11.3 Form 事件
  • 11.4 Keyboard 事件
  • 11.5 Mouse 事件
  • 11.6 Media 事件

---

一、涵蓋主題

　　如下是 MDN 學習區涵蓋的全部主題列表：

　　 Web入門

　　爲初學者提供一個實用的 Web 開發入門。

　　 HTML — 構建網站

　　HTML 是咱們用來構造網站內容的不一樣部分並定義它們的意義或目的的語言。本主題詳細講授 HTML。

　　 CSS — 美化網站

　　咱們能夠使用 CSS 這個語言來設計和佈局咱們的 Web 內容，以及添加像動畫一類的行爲。這個主題提供了詳細的 CSS 指導。

　　 JavaScript — 動態客戶端腳本語言

　　JavaScript 是用於向 Web 頁面添加動態功能的腳本語言。本主題講授了編寫和理解JavaScript 所需的全部基本要點。

　　 可訪問性 — 讓網站能被任何人使用

　　可訪問性是將 Web 內容儘量地提供給儘量多的人的實踐，而無論殘疾、設備、地區或其餘不一樣的因素。這個主題給了您全部您須要瞭解的內容。

　　 工具集與測試

　　本主題介紹了開發人員用來促進其工做的工具，如跨瀏覽器測試工具。

　　 服務端網站編程

　　即便您專一於客戶端 Web 開發，瞭解服務器和服務端代碼功能如何工做仍然是有用的。本主題提供服務器以及服務端代碼特性如何工做的概述，並詳細介紹瞭如何使用最流行的兩個框架—— Django（Python）以及 Express（node.js）創建一個服務端的應用程序。

二、JSLint——JavaScript語法檢查器和校驗器

• JSLint在線網址爲：http://www.jslint.com/
• JSLint本地安裝和使用：原文連接：http://www.javashuo.com/article/p-depcqavu-u.html

npm install -g jslint

　　接下來驗證JSLint是否安裝成功，新建一個JavaScript的Demo，spa.js（假設存放到桌面）：

 1 /*jslint
 2 browser : true,  continue :  true,    devel    :  true,
 3 indent   : 2,       maxerr    :  50,      newcap :  true,
 4 nomen  : true,   plusplus  :  true,    regexp  :  true,
 5 sloppy   : true,   vars        :  false,    white   :  true,
 6 */
 7 var spa = (function(){
 8     var initModule = function ( $container ) {
 9             $container.html(
10                 '<h1 style="display:inline-block;margin:25px;">'
11                  + ' hello World' 
12                  + '</h1>'
13             );
14     };    
15     return {
16         initModule : initModule
17     };
18 }());

　　輸出結果：略。

　　在Windows的CMD窗口下，輸入jslint命令編譯驗證spa.js文件，出現spa.js is OK，表示JSLint已經安裝完成。

三、HTML簡介

　　HTML 並非編程語言，它是一種用於定義內容結構的標記語言。HTML 由一系列的元素（elements）所組成，這些元素能夠用來封裝不一樣部分的內容，使其以某種方式呈現或者工做。 閉合標籤（ tags）能夠使得一個文字或者一張圖片超連接到其餘地方，能夠使得文字變爲斜體，可以讓文字變大或者變小等等。 例如，鍵入下面一行內容：

My cat is very grumpy

　　若是咱們想要讓這行單獨呈現，咱們能夠將其封裝成爲一個段落（paragraph）元素：

<p>My cat is very grumpy</p>

　　設置字體爲斜體：

<em>This is my text.</em>

四、解析一個HTML元素

　　讓咱們深刻探索一下這個段落元素。

<p>My cat is very grumpy</p>
解析以下
<p>: Opening tag
</p>: Closing tag
My cat is very grumpy: Content
<p>My cat is very grumpy</p>: Element

　　這個元素的主要部分有：

　　開始標籤（The opening tag）：這裏包含了元素的名稱（本例爲 p），被開、閉尖括號所包圍。這表示元素今後開始或者開始起做用——在本例中即段落由此開始。

• 閉合標籤（The closing tag）：與開始標籤類似，只是其在元素名以前包含了一個斜槓。這表示着元素的結尾——這表示元素在此結束——在本例中即段落在此結束。初學者經常會犯忘記包含閉合標籤的錯誤，這可能會產生一些奇怪的結果。
• 內容（The content）：這是一個元素的內容，這個例子中就是所輸入的文本自己。
• 元素（The element）：開標籤、閉標籤與內容相結合，即是一個完整的元素。

　　屬性（Attribute）包含了關於元素的一些額外的信息，這些信息自己並不須要被顯如今內容中。在這個例子中，class 是一個屬性名稱，editor-note 是屬性的值 。class 屬性容許你爲元素提供一個標識名稱，以便進一步爲元素指定樣式或進行其餘操做時使用。

　　一個屬性應該包含：

1. 在屬性與元素名稱（或上一個屬性，若是有超過一個屬性的話）之間的空格符。
2. 屬性的名稱，並接上一個等號。
3. 由引號所包圍的屬性值。

4.1 嵌套元素

　　你也能夠將一個元素置於其餘元素之中——這被稱做嵌套。若是你想代表你的貓很是的暴躁，咱們能夠將 「很是」 用 <strong> 元素包裹，這意味着這個單詞將被強調：

<p>My cat is <strong>very</strong> grumpy.</p>

　　你必須保證你的元素被正確地嵌套：在這個例子中咱們首先使用 p 標籤，而後是 strong 標籤，接着咱們須要先閉合 strong 標籤，最後再閉合 p 標籤。下面是一個錯誤示範：

<p>My cat is <strong>very grumpy.</p></strong>

　　元素必須正確地開始和閉合，才能清楚地顯示出正確的嵌套。若是它們像上面這樣，那麼你的瀏覽器將盡可能地猜想你想要表達的意思，可是你很大程度上不會獲得你指望的結果。因此千萬不要這樣作！

4.2 空元素（圖像）

　　有一些元素並不包含內容，它們被稱爲空元素。看看咱們 HTML 代碼中已經存在的 <img> 元素：

　　它包含了兩個屬性，可是這裏並無 </img> 閉合標籤，也沒有內部內容。由於圖像元素不須要包含內容來產生效果，它的做用是向其所在的位置嵌入一個圖像。

　　圖像：

　　讓咱們從新回到 <img> 元素：

<img src="images/firefox-icon.png" alt="My test image">

// images/firefox-icon.png爲圖片路徑
// My test image爲當圖片沒法打開（好比路徑不正確）顯示的文字

　　像咱們以前說過的，它將圖像嵌入到元素所在位置。它經過包含圖像文件路徑的 src (source) 屬性實現這一功能。

　　可是這一元素也要包括 alt (alternative) 屬性 —— 這個屬性應該是圖像的描述內容，當圖像不能被某些用戶看見時，多是由於：

1. 他們是盲人或者有視覺障礙。某些有嚴重視覺損傷的用戶常用屏幕閱讀器來爲他們讀出 alt 屬性裏的內容。
2. 有些代碼裏的錯誤讓圖像不能被展現出來。舉個例子，試着故意將 src 屬性裏的路徑改錯。若是你保存而且從新加載頁面，你應該能在圖像的位置看到：

　　alt 屬性的關鍵就是要「能夠描述圖像的文本」。當被讀出來時， alt 裏面的內容應該向用戶傳遞足夠圖像表達的意思。因此咱們如今的文本 "My test image" 並不合適。一個描述火狐Logo的更好的文本應該是 "The Firefox logo: a flaming fox surrounding the Earth."。

　　如今爲你的圖像嘗試一些更好的 alt 文本。

　　提示： 點擊 MDN 無障礙着陸頁 查看更多。

4.3 塊與內聯元素

• 參考：塊級元素和內聯元素

　　HTML中有兩個重要的元素類別，它們是塊級元素和內聯元素。

• 塊級元素在頁面上造成一個可見的塊 - 它們將顯示在前面的任何內容的新行上，而且在它以後的任何內容也將出如今新行上。塊級元素每每是頁面上的結構元素，例如，段落，列表，導航菜單，頁腳等。塊級元素不會嵌套在內聯元素中，但它可能嵌套在內部另外一個塊級元素。
• 內聯元素是包含在塊級元素中的元素，僅包含文檔內容的小部分，而不是整個段落和內容分組。內聯元素不會致使新行出如今文檔中; 它們一般出如今文本段落中，例如<a>元素（超連接）或強調元素，如<em>或<strong>。

　　大多數 HTML 元素被定義爲塊級元素或內聯元素。

　　編者注：「塊級元素」譯爲 block level element，「內聯元素」譯爲 inline element。

　　塊級元素在瀏覽器顯示時，一般會以新行來開始（和結束）。

　　例子：<h1>, <p>, <ul>, <table>

　　內聯元素在顯示時一般不會以新行開始。

　　例子：<b>, <td>, <a>, <img>

　　採用如下示例：

<em>first</em><em>second</em><em>third</em>  // 內聯元素
<p>fourth</p><p>fifth</p><p>sixth</p>  // 塊級元素

　　<em>是一個內聯元素，以下所示，前三個元素位於同一條線上，二者之間沒有空格。

　　另外一方面，<p> 是一個塊級元素，所以每一個元素都出如今一個新行上，每一個元素的上方和下方都有空格（間距是因爲瀏覽器應用於段落的默認CSS樣式）。

　　注意：HTML5從新定義了HTML5中的元素類別：請參閱元素內容類別。雖然這些定義比之前更準確，更模糊，但它們比「阻塞」和「內聯」更難理解，所以咱們將在整個主題中堅持這些定義。

　　注意：本主題中使用的術語「塊」和「內聯」不該與具備相同名稱的CSS框的類型相混淆。雖然它們默認關聯，但更改CSS顯示類型不會更改元素的類別，也不會影響它能夠包含哪些元素以及能夠包含哪些元素.HTML5刪除這些術語的緣由之一是防止這種至關常見的混亂。

（1）HTML <div> 元素

　　HTML <div> 元素是塊級元素，它是可用於組合其餘 HTML 元素的容器。

　　<div> 元素沒有特定的含義。除此以外，因爲它屬於塊級元素，瀏覽器會在其先後顯示折行。

　　若是與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。

　　<div> 元素的另外一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的做用是顯示錶格化的數據。

（2）HTML <span> 元素

　　HTML <span> 元素是內聯元素，可用做文本的容器。

　　<span> 元素也沒有特定的含義。

　　當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。

（3）HTML 分組標籤

標籤	描述
<div>	定義文檔中的分區或節（division/section）。
<span>	定義 span，用來組合文檔中的行內元素。

（4）HTML 類

　　對 HTML 進行分類（設置類），使咱們可以爲元素的類定義 CSS 樣式。

　　爲相同的類設置相同的樣式，或者爲不一樣的類設置不一樣的樣式。

　　舉例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <style>.cities {
 8             background-color:black;
 9             color:white;
10             margin:20px;
11             padding:20px;
12         }
13         </style>
14     </head>
15     
16     <body>
17         <!--<div>容器,設置class屬性是爲了在<head>中配置css樣式-->
18         <div class="cities">
19             <h2>London</h2>
20             <p>
21                 London is the capital city of England. 
22                 It is the most populous city in the United Kingdom, 
23                 with a metropolitan area of over 13 million inhabitants.
24             </p>
25         </div>
26 
27     </body>
28 </html>

　　輸出結果：

（4.1）分類塊級元素

　　HTML <div> 元素是塊級元素。它可以用做其餘 HTML 元素的容器。

　　設置 <div> 元素的類，使咱們可以爲相同的 <div> 元素設置相同的類：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <style>.cities {
 8             background-color:black;
 9             color:white;
10             margin:20px;
11             padding:20px;
12         }
13         </style>
14     </head>
15     
16     <body>
17         <!--<div>容器,設置class屬性是爲了在<head>中配置css樣式-->
18         <div class="cities">
19             <h2>London</h2>
20             <p>
21                 London is the capital city of England. 
22                 It is the most populous city in the United Kingdom, 
23                 with a metropolitan area of over 13 million inhabitants.
24             </p>
25         </div>
26             
27         <div class="cities">
28             <h2>Paris</h2>
29             <p>Paris is the capital and most populous city of France.</p>
30         </div>
31 
32         <div class="cities">
33             <h2>Tokyo</h2>
34             <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
35             and the most populous metropolitan area in the world.</p>
36         </div>
37 
38     </body>
39 </html>

　　輸出結果：

（4.2）分類行內元素

　　HTML <span> 元素是行內元素，可以用做文本的容器。

　　設置 <span> 元素的類，可以爲相同的 <span> 元素設置相同的樣式。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <style>
 8             span.red{
 9                 color: red
10             }
11         </style>
12     </head>
13     
14     <body>
15 
16         <h1>My <span class="red">Important</span> Heading</h1>
17 
18     </body>
19 </html>

　　輸出結果：

五、解析HTML文檔

　　上面咱們介紹了一些基本的 HTML 元素，可是它們本身不是頗有用。如今咱們看看如何將它們組合起來成爲一個完整的 HTML 頁面。讓咱們從新看看  index.html 示例裏的內容（咱們先前在文件處理裏建立的）：

　　舉例1：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

　　這裏咱們有：

• <!DOCTYPE html> — 文檔類型。在 HTML 剛剛出現的時期裏（大約是1991/2 年），文檔類型是用來連接一些好的 HTML 應該遵照的規則，有點像自動校訂等。然而如今已經沒有人關心這些，只是由於歷史緣由必須它必須包含在代碼中。如今你只須要知道這些就能夠。
• <html></html> — <html> 元素。這個元素包含了整個頁面的內容，有時也被稱做根元素。
• <head></head> — <head> 元素。這個元素能夠包含你想添加的全部內容，可是不會被用戶所看到。這裏麪包括像想被搜索引擎搜索到的關鍵字（keywords）和頁面描述，CSS 樣式表和字符編碼聲明等。
• <body></body> — <body> 元素。這個元素包含了你想讓用戶在訪問你的頁面時看到的內容，無論是文本，圖像，視頻，遊戲，可播放的音軌或其餘內容。
• <meta charset="utf-8"> — 這個元素指定了你的文檔須要使用的字符編碼是 UTF-8 ，它包括了很是多人類已知語言的字符。基本上 UTF-8 能夠處理任何文本內容。咱們沒有任何理由不去設定字符編碼，並且也能夠避免之後可能出現的問題。
• <title></title> — <title> 元素。這個元素設置了頁面的標題，標題顯示在瀏覽器標籤頁上，並且在你將網頁添加到收藏夾或喜好中時將做爲默認名稱。

　　舉例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test page</title>
    </head>
    <body>
        <p>This is my page</p>
    </body>
</html>

　　咱們在這裏：

1. <!DOCTYPE html>：doctype。在時間的迷霧中，當HTML年輕時（約爲1991/2），doctypes意味着充當HTML頁面必須遵循的一組規則的連接，被認爲是好的HTML，這可能意味着自動錯誤檢查和其餘有用的東西。他們過去看起來像這樣：

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

   然而，如今沒有人真正關心它們，它們實際上只是一個歷史性的工件，須要包含在一切工做中。 <!DOCTYPE html>是最短的字符串，被視爲有效的doctype; 這就是你真正須要知道的。
2. <html></html>：<html>元素。此元素包裝整個頁面上的全部內容，有時也稱爲根元素。
3. <head></head>：<head>元素。此元素充當您要包含在HTML頁面上的全部內容的容器，該頁面不是您向頁面查看者顯示的內容。這包括您但願在搜索結果中顯示的關鍵字和頁面描述，用於設置內容樣式的CSS，字符集聲明等內容。您將在本系列的下一篇文章中瞭解更多相關信息。
4. <meta charset="utf-8">：此元素將文檔應使用的字符集設置爲UTF-8，其中包括絕大多數人類書面語言中的大多數字符。從本質上講，它如今能夠處理您可能放在其上的任何文本內容。沒有理由不設置它，它能夠幫助避免之後的一些問題。
5. <title></title>：<title>元素。這將設置頁面的標題，即加載頁面的瀏覽器選項卡中顯示的標題，用於在書籤/收藏頁面時描述頁面。
6. <body></body>：<body>元素。這包含您在訪問網頁時要向網絡用戶顯示的全部內容，不管是文本，圖片，視頻，遊戲，可播放的音軌仍是其餘任何內容。

5.1 主動學習：添加了一些功能到HTML文檔

　　若是您想嘗試在本地計算機上編寫一些HTML，您能夠：

1. 複製上面列出的HTML頁面示例。
2. 在文本編輯器中建立一個新文件。
3. 將代碼粘貼到新文本文件中。
4. 將文件另存爲index.html。

　　注意：您還能夠在MDN學習區域Github存儲庫中找到此基本HTML模板。

　　所以，在本練習中，您能夠在計算機上本地編輯代碼，如上所述，或者您能夠在下面的可編輯示例窗口中編輯代碼（<body>在這種狀況下，可編輯示例窗口僅表明元素的內容。）

• 在<body>元素的開始標記下方，添加文檔的主標題。這應該包含在<h1>開始標記和</h1>結束標記內。
• 編輯段落內容以包含有關您感興趣的內容的一些文本。
• 經過將它們包裝在<strong>開始標記和</strong>結束標記內，使任何重要單詞以粗體顯示
• 添加指向段落的連接，如本文前面所述。
• 圖像添加到您的文檔，段後，如本文前面所解釋的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test page</title>
        <p>This is my page</p>
    </head>
    <body>
         
    </body>
</html>

　　在網頁的開頭能看到：This is my page

• <h1>在瀏覽器中加載時，頁面上會顯示該元素 - 一般每頁應使用一次，以標記頁面內容的標題（故事標題，新聞標題或適合您使用的任何內容）。
• 該<title>元素是表明整個HTML文檔的標題元數據（而不是文檔的內容。）

5.2 HTML部分中空格

　　在上面的例子中，可能已經注意到代碼清單中包含了不少空白 - 這根本不是必需的; 如下兩個代碼段是等效的：

<p>Dogs are silly.</p>
等效於
<p>Dogs        are
         silly.</p>

　　輸出結果：

Dogs are silly.
Dogs are silly.

　　不管使用多少空格（包括空格字符，還包括換行符），HTML解析器在渲染代碼時都會將每一個空格減小到一個空格。那麼爲何要使用這麼多的空白呢？答案是可讀性 - 若是你的代碼格式很好，那麼理解你的代碼中發生的事情要容易得多，而不只僅是在一個大混亂中彙集在一塊兒。在咱們的HTML中，咱們將每一個嵌套元素縮進兩個空格，而不是它所在的空間。你能夠使用什麼樣的格式（例如，每一個縮進級別有多少個空格），但應該考慮對其進行格式化。

5.3 實體引用：在HTML 編輯部分中包含特殊字符

• 參考： HTML 實體符號參考手冊以及HTML 4.01 符號實體

　　在HTML，好比<，>，"，'和&特殊字符。它們是HTML語法自己的一部分，所以如何在文本中包含其中一個字符，例如，若是您真的想要使用＆符號或少於符號，而不是像某些瀏覽器那樣將其解釋爲代碼？

　　咱們必須使用字符引用 - 表示字符的特殊代碼，而且能夠在這些確切的狀況下使用。每一個字符引用以＆符號（＆）開頭，以分號（;）結束。

　　在下面的示例中，您能夠看到兩個段落，它們討論的是Web技術：

<p>In HTML, you define a paragraph using the <p> element.</p>

　　輸出結果（出錯）：

In HTML, you define a paragraph using the
element. 

　　咱們用字符引用替換了尖括號：

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

　　輸出結果（正確）：

In HTML, you define a paragraph using the <p> element.

　　注意：能夠在Wikipedia上找到全部可用HTML字符實體引用的圖表：XML和HTML字符實體引用列表。請注意，您不須要對任何其餘符號使用實體引用，由於只要HTML的字符編碼設置爲UTF-8，現代瀏覽器就會處理實際符號。

5.4 HTML評論（註釋）

　　在HTML中，與大多數編程語言同樣，有一種機制可用於在代碼中編寫註釋 - 註釋被瀏覽器忽略而且對用戶不可見，其目的是容許您在代碼中包含註釋以說明您的註釋代碼工做，代碼的不一樣部分作什麼，等等。若是你回到你已經工做六個月的代碼庫，而且不記得你作了什麼 - 或者若是你手你的代碼交給其餘人來處理。

　　要打開你的HTML文件中一段內容爲註釋，你須要把它包在特殊標記<!--和-->，例如：

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

　　輸出結果：I'm not inside a comment（第一段顯示在實時輸出中，但第二段不顯示）

5.5 HTML中顯示中文

　　參考代碼：

<!DOCTYPE html>
<html>
    <head>
        <!--<meta charset="utf-8">-->
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>頁面標題</title>
        
    </head>
    
    <body>
    
    </body>
</html>

　　輸出結果：略。

5.6 重點和重要性編輯

　　在人類語言中，咱們常常強調某些詞語來改變句子的含義，咱們常常但願以某種方式將某些詞語標記爲重要或不一樣。HTML提供了各類語義元素，容許咱們用這樣的效果標記文本內容，在本節中，咱們將介紹一些最多見的內容。

（1）重點部分

　　當咱們想要強調口語時，咱們會強調某些詞語，巧妙地改變咱們所說的含義。一樣地，在書面語言中，咱們傾向於經過將它們用斜體來強調詞語。例如，如下兩個句子具備不一樣的含義。

　　我很高興你沒遲到。

　　我很高興你沒遲到。

　　第一句聽起來真的鬆了一口氣，這我的沒有遲到。相比之下，第二個聽起來是諷刺性的或被動式的，表達了這我的遲到的煩惱。

　　在HTML中，咱們使用<em>（emphasis）元素來標記這樣的實例。除了使文檔閱讀更有趣以外，這些文檔還被屏幕閱讀器識別並以不一樣的語調說出來。默認狀況下，瀏覽器將此樣式設置爲斜體，但您不該僅使用此標記來獲取斜體樣式。要作到這一點，你要使用一個<span>元素和一些CSS，或者一個<i>元素（見下文）。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

　　輸出結果：I am glad you weren't late.

（2）很是重要的部分

　　爲了強調重要的話，咱們傾向於強調他們在語言和大膽他們在書面語言。例如：

　　這種液體毒性很大。

　　我期望着你。別遲到了！

　　在HTML中，咱們使用<strong>（強重要性）元素來標記這樣的實例。除了使文檔更有用以外，屏幕閱讀器還能夠識別這些文檔，並以不一樣的語調使用。默認狀況下，瀏覽器將其設置爲粗體文本，但您不該僅使用此標記來得到粗體樣式。要作到這一點，你要使用一個<span>元素和一些CSS，或者一個<b>元素（見下文）。

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

　　輸出結果：

　　This liquid is highly toxic.

　　I am counting on you. Do not be late!

　　若是須要，能夠在彼此內部強大並強調：

<p>This liquid is <strong>highly toxic</strong> --
if you drink it, <strong>you may <em>die</em></strong>.</p>

　　輸出結果：This liquid is highly toxic -- if you drink it, you may die.

　　舉例1：

<h1>Important notice</h1>
<p>On Sunday January 9th 2010, a gang of goths were
spotted stealing several garden gnomes from a
shopping center in downtown Milwaukee. They were
all wearing green jumpsuits and silly hats, and
seemed to be having a whale of a time. If anyone
has any information about this incident, please
contact the police now.</p>

（3）斜體，粗體，下劃線......

　　到目前爲止咱們討論過的元素都有明確的語義關聯。有這種狀況<b>，<i>和<u>稍微複雜一些。他們的出現使得人們能夠在CSS仍然支持不良或根本不支持的時代寫出粗體，斜體或帶下劃線的文本。像這樣的元素，隻影響表示而不是語義，被稱爲表示元素，不該再使用，由於正如咱們以前所見，語義對於可訪問性，SEO等很是重要。

　　HTML5從新定義<b>，<i>而且<u>具備新的，有些使人困惑的語義角色。

　　這是最好的經驗法則：若是沒有更合適的元素<b>，它可能適合使用，<i>或<u>傳達傳統上用粗體，斜體或下劃線表達的含義。可是，保持可訪問性思惟方式始終相當重要。斜體的概念對於使用屏幕閱讀器的人或使用拉丁字母之外的書寫系統的人來講並非頗有幫助。

• <i> 用來表達傳統上用斜體傳達的含義：外來詞，分類學名稱，技術術語，思想......
• <b> 用來傳達傳統上用粗體表達的含義：關鍵詞，產品名稱，主導句......
• <u> 用於表達傳統上由下劃線傳達的含義：正確的名稱，拼寫錯誤......

　　關於下劃線的一種警告：人們強烈地將下劃線與超連接聯繫起來。所以，在Web上，最好只加下連接。在<u>語義上合適時使用該元素，但考慮使用CSS將默認下劃線更改成更適合Web的內容。下面的例子說明了如何完成它。

<!-- scientific names -->
<p>
    The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
    is the most common hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
    The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
    <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>
    Someday I'll learn how to <u>spel</u> better.
</p>

<!-- Highlight keywords in a set of instructions -->
<ol>
    <li>
        <b>Slice</b> two pieces of bread off the loaf.
    </li>
    <li>
        <b>Insert</b> a tomato slice and a leaf of
        lettuce between the slices of bread.
    </li>
</ol>

　　輸出結果：

　　The Ruby-throated Hummingbird (Archilochus colubris) is the most common hummingbird in Eastern North America.

　　The menu was a sea of exotic words like vatrushka, nasi goreng and soupe �� l'oignon.

　　Someday I'll learn how to spel better.

1. Slice two pieces of bread off the loaf.
2. Insert a tomato slice and a leaf of lettuce between the slices of bread.

六、HTML的元數據

6.1 什麼是HTML頭？

• 參考：What’s in the head? Metadata in HTML

　　舉例HTML文檔：

 1 <!DOCTYPE html>
 2 <ht
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     <body>
 8         <p>This is my page</p>
 9         </body>
10 </html>

　　HTML頭是<head>元素的內容 - 與元素的內容<body>（在瀏覽器中加載時顯示在頁面上）不一樣，頭部的內容不會顯示在頁面上。相反，負責人的工做是包含有關文檔的元數據。在上面的例子中，頭部很是小：

1 <head>
2     <meta charset="utf-8">
3     <title>My test page</title>
4 </head>

　　然而，在較大的頁面中，頭部能夠變得很是飽滿。嘗試訪問一些您喜歡的網站，並使用開發人員工具查看他們的頭部內容。咱們的目標不是向您展現如何使用可能放在頭部的全部東西，而是教您如何使用您想要包含在頭部的主要元素，並給您一些熟悉。讓咱們開始吧。

6.2 元數據：<meta>元素

　　元數據是描述數據的數據，HTML具備向文檔添加元數據的「官方」方式 - <meta>元素。固然，咱們在本文中討論的其餘內容也能夠被視爲元數據。

（1） 指定文檔的字符編碼

　　在咱們上面看到的示例中，包括如下行：

1 <meta charset="utf-8">

　　此元素僅指定文檔的字符編碼 - 容許文檔使用的字符集。utf-8是一個通用字符集，包括來自任何人類語言的幾乎任何字符。這意味着您的網頁將可以處理顯示任何語言; 所以，最好在您建立的每一個網頁上進行設置！例如，您的頁面能夠正常處理英語和日語：

 1 <!DOCTYPE html>
 2 <html>
 3     head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     <body>
 8         <p>Japanese example: ご飯が熱い</p>
 9     </body>
10 </html>

　　輸出結果：Japanese example: ご飯が熱い

　　例如，若是將字符編碼ISO-8859-1設置爲（拉丁字母的字符集），則頁面渲染可能會顯示爲亂糟糟的：

 1 <!DOCTYPE html>
 2 <html>
 3     head>
 4         <meta charset="ISO-8859-1">
 5         <title>My test page</title>
 6     </head>
 7     <body>
 8         <p>Japanese example: ご飯が熱い</p>
 9     </body>
10 </html>

　　輸出結果：Japanese example: ã」飯が熱い

　　注意：某些瀏覽器（例如Chrome）會自動修復不正確的編碼，所以根據您使用的瀏覽器，您可能沒法看到此問題。您仍應utf-8在頁面上設置編碼，以免在其餘瀏覽器中出現任何潛在問題。

　　添加中文參考代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>頁面標題</title>
 8         
 9     </head>
10     
11     <body>
12     
13     </body>
14 </html>

 　　輸出結果：略。

（2） 添加做者和描述

　　許多<meta>元素包括name和content屬性：

• name指定元素的類型; 它包含什麼類型的信息。
• content 指定實際的元內容。

　　在頁面上包含兩個有用的元元素定義頁面的做者，並提供頁面的簡明描述。咱們來看一個例子：

1 <meta name="author" content="Chris Mills">
2 <meta name="description" content="The MDN Web Docs Learning Area aims to provide
3 complete beginners to the Web with all they need to know to get
4 started with developing web sites and applications.">

　　指定做者在如下幾個方面頗有用：若是您想要聯繫他們有關內容的問題，那麼可以找出編寫頁面的人是頗有用的。一些內容管理系統具備自動提取頁面做者信息並使其可用於此目的的工具。

　　由於它使你的網頁出如今搜索引擎中進行相關搜索更高的潛力，指定包括關鍵字與您的網頁內容的描述是有用的（這種活動被稱爲搜索引擎優化或SEO）。

（3） 主動學習：描述在搜索引擎中的使用 

　　該描述也用於搜索引擎結果頁面。讓咱們經過練習來探索這個

1. 轉到The Mozilla Developer Network的首頁。
2. 查看頁面的來源（右鍵/ Ctrl點擊頁面，從上下文菜單中選擇查看頁面源。）
3. 找到描述元標記。它看起來像這樣（儘管它可能會隨着時間而改變）：
4. 如今在您最喜歡的搜索引擎中搜索「MDN Web Docs」（咱們使用了Google。）您會注意到搜索結果中使用的描述<meta>和<title>元素內容 - 絕對值得擁有！

1 <meta name="description" content="The MDN Web Docs site 
2   provides information about Open Web technologies 
3   including HTML, CSS, and APIs for both Web sites and 
4   progressive web apps.">

　　注意：在Google中，您會看到主要主頁連接下方列出的MDN Web文檔的一些相關子頁面 - 這些子頁面稱爲附加連接，能夠在Google的網站管理員工具中配置- 這種方式可讓您的網站在Google搜索引擎中得到更好的搜索結果。

　　注意：許多<meta>功能再也不使用。例如，關鍵字<meta>element（<meta name="keywords" content="fill, in, your, keywords, here">） - 應該爲搜索引擎提供關鍵字，以肯定該網頁對不一樣搜索字詞的相關性 - 被搜索引擎忽略，由於垃圾郵件發送者只是在關鍵字列表中填充了數百個關鍵字，偏向結果。

（4） 其餘類型的元數據

• 參考：https://www.cnblogs.com/zhongxinWang/p/4105915.html

　　例如，Open Graph Data是Facebook發明的一種元數據協議，用於爲網站提供更豐富的元數據。在MDN Web Docs源代碼中，您會發現：

1 <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
2 <meta property="og:description" content="The Mozilla Developer Network (MDN) provides
3 information about Open Web technologies including HTML, CSS, and APIs for both Web sites
4 and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
5 <meta property="og:title" content="Mozilla Developer Network">

　　這樣作的一個結果是，當您在Facebook上連接到MDN Web Docs時，該連接將與圖像和描述一塊兒顯示：爲用戶提供更豐富的體驗。

　　Twitter也有本身相似的專有元數據，當網站的URL顯示在twitter.com上時，效果相似。例如：

1 <meta name="twitter:title" content="Mozilla Developer Network">

　　meta是用來在HTML文檔中模擬HTTP協議的響應頭報文。META標籤是HTML語言HEAD區的一個輔助性標籤，它位於HTML文檔頭部的<HEAD>標記和<TITLE>標記之間，它提供用戶不可見的信息。meta標籤一般用來爲搜索引擎robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它能夠用於鑑別做者，設定頁面格式，標註內容提要和關鍵字；還能夠設置頁面使其能夠根據你定義的時間間隔刷新本身,以及設置RASC內容等級，等等。

name 屬性

1 <meta name="Generator" contect="">用以說明生成工具（如Microsoft FrontPage 4.0）等；
2 <meta name="KEYWords" contect="">向搜索引擎說明你的網頁的關鍵詞；
3 <meta name="DEscription" contect="">告訴搜索引擎你的站點的主要內容；
4 <meta name="Author" contect="你的姓名">告訴搜索引擎你的站點的製做的做者；
5 <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">

　　其中的屬性說明以下：

　　設定爲all：文件將被檢索，且頁面上的連接能夠被查詢；

　　設定爲none：文件將不被檢索，且頁面上的連接不能夠被查詢；

　　設定爲index：文件將被檢索；

　　設定爲follow：頁面上的連接能夠被查詢；

　　設定爲noindex：文件將不被檢索，但頁面上的連接能夠被查詢；

　　設定爲nofollow：文件將不被檢索，頁面上的連接能夠被查詢。

http-equiv屬性

1 <meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">和 <meta http-equiv="Content-Language" contect="zh-CN">用以說明主頁製做所使用的文字以及語言；又如英文是ISO-8859-1字符集，還有BIG五、utf-八、shift-Jis、Euc、Koi8-2等字符集；
2 <meta http-equiv="Refresh" contect="n;url=http://yourlink">定時讓網頁在指定的時間n內，跳轉到頁面http://yourlink；
3 <meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">能夠用於設定網頁的到期時間，一旦過時則必須到服務器上從新調用。須要注意的是必須使用GMT時間格式；
4 <meta http-equiv="Pragma" contect="no-cache">是用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定後一旦離開網頁就沒法從Cache中再調出；
5 <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie設定，若是網頁過時，存盤的cookie將被刪除。須要注意的也是必須使用GMT時間格式；
6 <meta http-equiv="Pics-label" contect="">網頁等級評定，在IE的internet選項中有一項內容設置，能夠防止瀏覽一些受限制的網站，而網站的限制級別就是經過meta屬性來設置的；
7 <meta http-equiv="windows-Target" contect="_top">強制頁面在當前窗口中以獨立頁面顯示，能夠防止本身的網頁被別人看成一個frame頁調用；
8 <meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">設定進入和離開頁面時的特殊效果，這個功能即FrontPage中的「格式/網頁過渡」，不過所加的頁面不可以是一個frame頁面。

Open Graph Protocol

　　Meta Property=og標籤是什麼呢?
　　og是一種新的HTTP頭部標記，即Open Graph Protocol：

　　The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }

　　即這種協議可讓網頁成爲一個「富媒體對象」。
　　用了Meta Property=og標籤，就是你贊成了網頁內容能夠被其餘社會化網站引用等，目前這種協議被SNS網站如Fackbook、renren採用。
　　SNS已經成爲網絡上的一大熱門應用，優質的內容經過分享在好友間迅速傳播。爲了提升站外內容的傳播效率，2010年F8會議上Facebook公佈 了一套開放內容協議(Open Graph Protocol)，任何網頁只要遵照該協議，SNS就能從頁面上提取最有效的信息並呈現給用戶。

 1 <meta property=」og:type」 content=」video」/>
 2 <meta property=」og:title」 content=」五月天_忽然好想你MV現場版」/>
 3 <meta property=」og:image」 content=」http://g1.ykimg.com/0100641F464A ... 9-76EA-E5E20A1887C4″/>
 4 <meta property=」og:url」 content=」http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html」/>
 5 <meta property=」og:videosrc」 content=」http://player.youku.com/player.p ... AutoPlay=true/v.swf」/>
 6 <meta property=」og:width」 content=」500″ />
 7 <meta property=」og:height」 content=」416″ />
 8 <meta property=」og:type」 content=」video」/>
 9 <meta property=」og:title」 content=」五月天_忽然好想你MV現場版_AA」/>
10 <meta property=」og:image」 content=」http://g1.ykimg.com/0100641F464A ... EA-E5E20A1887C44444″/>
11 <meta property=」og:url」 content=」http://v.youku.com/v_show/id_XMTIyMTY5NzMyyyyyyyyyyyyyyyy.html」/>
12 <meta property=」og:videosrc」 content=」http://player.youku.com/player.p ... AutoPlay=true/y.swf」/>
13 <meta property=」og:width」 content=」600″ />
14 <meta property=」og:height」 content=」716″/>

 　　輸出結果：略。

6.3 將自定義圖標添加到您的網站編輯（自定義左上角網頁圖標）

　　爲了進一步豐富您的網站設計，您能夠在元數據中添加對自定義圖標的引用，這些將在特定上下文中顯示。最經常使用的是favicon（「收藏夾圖標」（Favicon Icon）的縮寫，指的是它在瀏覽器中的「收藏夾」或「書籤」列表中的使用）。

　　卑微的圖標已經存在不少年了。它是此類型的第一個圖標：在多個位置使用的16像素方形圖標。您可能會看到（取決於瀏覽器）包含每一個打開頁面的瀏覽器選項卡中顯示的圖標，以及書籤面板中帶書籤的頁面旁邊的圖標。

　　首先要生成一個favicon.ico的文件。下面是鏈接：http://www.bitbug.net/（友情提示這個上傳的圖片不要超過512K，否則生成不出來），或者參考《教你製做完美的FAVICON圖標》。

　　能夠經過如下方式將favicon添加到您的頁面：

1. 將其保存在與網站索引頁面相同的目錄中，以.ico格式保存（大多數瀏覽器將支持更常見格式的圖標，.gif或者.png，但使用ICO格式將確保它能夠像Internet Explorer 6同樣工做。）
2. 將如下行添加到HTML <head>塊中以引用它（type屬性，type="image/x-icon"是指定文件的類型爲icon）：

1 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

　　下面介紹設置favicon的幾種方式：（參考：https://blog.csdn.net/YLXB2/article/details/53336962）

第一種方法：放在根目錄（全站的）

　　這種方法最簡單，在服務器根目錄下放一個 favicon.ico 的文件，瀏覽器發現後就會使用。

第二種方法：link標籤（能夠針對某個網頁單獨設置ico）

　　在head裏面加入代碼：

1 <link rel="shortcut icon" href="ico文件url">

　　第二種方法有兩種語法（上述列出了其中一種語法），對好比下：

1 <link rel="icon" href=".../favicon.ico">

　　或者

1 <link rel="shortcut icon" href=".../favicon.ico">

　　icon的link還有個type屬性，指定文件的類型爲icon。

1 <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

 　　還有不少其它圖標類型須要考慮。例如，能夠在MDN Web Docs主頁的源代碼中找到它：

 1 <!-- third-generation iPad with high-resolution Retina display: -->
 2 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
 3 <!-- iPhone with high-resolution Retina display: -->
 4 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
 5 <!-- first- and second-generation iPad: -->
 6 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
 7 <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
 8 <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
 9 <!-- basic favicon -->
10 <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

　　這些評論解釋了每一個圖標的用途 - 這些元素涵蓋了提供一個漂亮的高分辨率圖標，以便在網站保存到iPad的主屏幕時使用的內容。

　　注意：若是您的站點使用內容安全策略（CSP）來加強其安全性，則該策略將應用於favicon。若是您在加載favicon時遇到問題，請驗證Content-Security-Policy標頭的img-src指令是否阻止訪問它。

6.4 將CSS和JavaScript應用於HTML

　　幾乎全部你在現代都會使用的網站都會使用CSS來讓它們看起來很酷，而JavaScript則能夠提供互動功能，例如視頻播放器，地圖，遊戲等等。這些最經常使用於分別使用<link>元素和<script>元素的網頁。

（1）CSS應用於HTML

（1.1）外部引用

　　該<link>元素老是轉到您的文檔的頭內。這須要兩個屬性，rel =「stylesheet」，它表示它是文檔的樣式表，而href，它包含樣式表文件的路徑：

1 <link rel="stylesheet" href="my-css-file.css">

　　規範寫法：

1 <link rel="stylesheet" type="text/css" href="my-css-file.css">

（1.2）內部引用

1 <style>
2     <!--css樣式設置-->
3 </style>

（2）JavaScript應用於HTML

（2.1）外部引用

　　該<script>元素沒有在頭上去; 事實上，一般最好將它放在文檔正文的底部（就在結束</body>標記以前），以確保瀏覽器在嘗試將JavaScript應用到它以前已經讀取了全部HTML內容（若是JavaScript嘗試訪問尚不存在的元素，瀏覽器將拋出錯誤。）

1 <script src="my-js-file.js"></script>

　　規範寫法：

1 <script type="text/javascript" src="my-js-file.js"></script>

　　注意：<script>元素可能看起來像一個空元素，但它不是，所以須要一個結束標記。您也能夠選擇將腳本放在<script>元素中，而不是指向外部腳本文件。

（2.2）內部引用

1 <script>
2     <!--腳本語句-->
3 </script>

（3）主動學習：將CSS和JavaScript應用於頁面

1. 要開始這種主動學習，請獲取咱們的meta-example.html，script.js和style.css文件的副本，並將它們保存在同一目錄中的本地計算機上。確保使用正確的名稱和文件擴展名保存它們。
2. 在瀏覽器和文本編輯器中打開HTML文件。
3. 按照上面給出的信息，添加HTML元素<link>和<script>元素，以便將CSS和JavaScript應用於HTML。

　　meta-example.html內容以下：

 1 <!DOCTYPE html>
 2 <html lang="en-US">
 3   <head>
 4     <meta charset="utf-8">
 5     <title>Meta examples</title>
 6     
 7     <meta name="author" content="Chris Mills">
 8     <meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
 9 
10     <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
11     <meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
12     <meta property="og:title" content="Metadata; The HTML &lt;head&gt;, on MDN">
13 
14     <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
15     <link rel="stylesheet" href="my-css-file.css">
16   </head>
17   <body>
18     <h1>Meta examples</h1>
19 
20     <p>Japanese example: ご飯が熱い。</p>
21     
22     <script src="my-js-file.js"></script>
23   </body>
24 </html>

　　my-js-file.js內容以下：

 1 var list = document.createElement('u1');
 2 var info = document.createElement('p');
 3 var html = document.querySelector('html');
 4 
 5 info.textContent = 'Below is a dynamic list. Click anywhere outside the list to add a new list item. Click an existing list item to change its text to something else.';
 6 
 7 document.body.appendChild(info);
 8 document.body.appendChild(list);
 9 
10 html.onclick = function() {
11     var listItem = document.createElement('li');
12     var listContent = prompt('What content do you want the list item to have?');
13     listItem.textContent = listContent;
14     list.appendChild(listItem);
15 
16     listItem.onclick = function(e) {
17         e.stopPropagation();
18         var listContent = prompt('Enter new content for your list item');
19         this.textContent = listContent;
20     }
21 };

　　my-css-file.css內容以下：

 1 html {
 2   background-color: green;
 3   font-size: 20px;
 4 }
 5 
 6 ul {
 7   background: red;
 8   padding: 10px;
 9   border: 1px solid black;
10 }
11 
12 li {
13   margin-left: 20px;
14 }

　　輸出結果：

• JavaScript在頁面中添加了一個空列表。如今，當您單擊列表中的任意位置時，將彈出一個對話框，要求您爲新列表項輸入一些文本。按「肯定」按鈕時，新列表項將添加到包含文本的列表中。單擊現有列表項時，將彈出一個對話框，容許您更改項目的文本。
• CSS致使背景變綠，文字變得更大。它還設置了JavaScript添加到頁面的一些內容（帶有黑色邊框的紅色條是CSS添加到JS生成列表中的樣式。）

6.5 設置文檔的主要語言編輯

 　　最後，值得一提的是，您能夠（而且確實應該）設置頁面的語言。這能夠經過將lang屬性添加到開始HTML標記來完成（如meta-example.html中所示，以下所示）。

1 <html lang="en-US">

　　這在不少方面都頗有用。若是設置了語言，您的HTML文檔將被搜索引擎更有效地編制索引（例如，容許它在特定語言的結果中正確顯示），而且對於有視力障礙的人使用屏幕閱讀器（例如，單詞）法語和英語中都有「六」，但發音不一樣。）

　　您還能夠將文檔的子部分設置爲可識別爲不一樣的語言。例如，咱們能夠將日語部分設置爲日語，以下所示：

1 <p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

　　這些代碼由ISO 639-1標準定義。您能夠在HTML和XML中的語言標籤中找到有關它們的更多信息。

七、建立超連接

• 參考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

　　超連接很是重要 - 它們是使Web 成爲網絡的緣由。本文介紹了建立連接所需的語法，並討論了連接最佳實踐。

7.1 什麼是超連接？

　　超連接是Web提供的最激動人心的創新之一。它們從一開始就是Web的一個特性，但它們是使Web 成爲Web的緣由 - 它們容許咱們將文檔連接到咱們想要的任何其餘文檔（或其餘資源），咱們也能夠連接對於文檔的特定部分，咱們能夠在簡單的網址上提供應用程序（與原生應用程序造成對比，必須安裝並完成全部業務。）幾乎任何Web內容均可以轉換爲連接，這樣當單擊（或以其餘方式激活）它將使Web瀏覽器轉到另外一個Web地址（URL）。

　　注意：URL能夠指向HTML文件，文本文件，圖像，文本文檔，視頻和音頻文件以及能夠在Web上生存的任何其餘內容。若是Web瀏覽器不知道如何顯示或處理該文件，它將詢問您是否要打開該文件（在這種狀況下，打開或處理該文件的任務將傳遞給設備上合適的本機應用程序）或下載文件（在這種狀況下，您能夠嘗試稍後處理它。）

7.2 連接剖析編輯

　　經過將要轉換爲元素內的連接的文本（或其餘內容，請參閱塊級連接）包裝<a>，併爲其提供將包含該元素的href屬性（也稱爲超文本引用或目標）來建立基本連接。您但願連接指向的網址。

　　舉例1：

<p>I'm creating a link to <a href="https://www.baidu.com">the Baidu homepage</a>.</p>

　　輸出結果：I'm creating a link to the Baidu homepage.

　　舉例2：

• href：此href屬性將您但願連接指向的Web地址指定爲其值; 單擊連接時瀏覽器導航到的位置。例如，href="https://www.mozilla.org/"，href="#"（表明回到頁面的頂部，如<a href="#">回到頂部</a>）。
• title：該title屬性指定有關連接的額外信息，例如您要連接到的頁面。例如，title="The Mozilla homepage"。這將在懸停時顯示爲工具提示。
• target：該target屬性指定將用於顯示連接的瀏覽上下文。例如，target="_blank"將在新選項卡中顯示該連接。若是要在當前選項卡中顯示連接，請忽略此屬性。
• name：該name屬性規定錨（anchor）的名稱，能夠使用 name 屬性建立 HTML 頁面中的書籤。書籤不會以任何特殊方式顯示，它對讀者是不可見的。當使用命名錨（named anchors）時，咱們能夠建立直接跳至該命名錨（好比頁面中某個小節）的連接，這樣使用者就無需不停地滾動頁面來尋找他們須要的信息了。

<p>I'm creating a link to <a href="https://www.baidu.com" title="Baidu" target="_blank">the Baidu homepage</a>.</p>

　　輸出結果：I'm creating a link to the Baidu homepage.

值	描述
_blank	在新窗口中打開被連接文檔。
_self	默認。在相同的框架中打開被連接文檔。
_parent	在父框架集中打開被連接文檔。
_top	在整個窗口中打開被連接文檔。
framename	在指定的框架中打開被連接文檔。

塊級連接

　　如前所述，您能夠將任何內容轉換爲連接，甚至是塊級元素。若是您有想要變成連接的圖像，則能夠將圖像放在<a></a>標記之間。

<a href="https://www.baidu.com" title="Baidu" target="_blank">
    <img src="baidu.png" alt="baidu log that link to the Baidu homepage">
</a>

　　img中的src爲圖片路徑，img中的alt爲當圖片沒法打開時的提示語。

　　命令錨的語法：

<a name="label">錨（顯示在頁面上的文本）</a>

　　提示：錨的名稱能夠是任何你喜歡的名字。

　　提示：您能夠使用 id 屬性來替代 name 屬性，命名錨一樣有效。

　　舉例1：

　　首先，咱們在 HTML 文檔中對錨進行命名（建立一個書籤）：

<a name="tips">基本的注意事項 - 有用的提示</a>

　　而後，咱們在同一個文檔中建立指向該錨的連接：

<a href="#tips">有用的提示</a>

　　您也能夠在其餘頁面中建立指向該錨的連接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

　　在上面的代碼中，咱們將 # 符號和錨名稱添加到 URL 的末端，就能夠直接連接到 tips 這個命名錨了。

　　舉例2（連接到同一個頁面的不一樣位置）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test page</title>

    </head>
    
    <body"> 
        <p>
            <a href="#C4">See Chapter 4</a>
        </p>
    
        <h2>Chapter 1</h2>
        <p>This chapter explains ba bla bla.</p>
        
        <h2>Chapter 2</h2>
        <p>This chapter explains ba bla bla.</p>
        
        <h2>Chapter 3</h2>
        <p>This chapter explains ba bla bla.</p>
        
        <h2><a name="C4">Chapter 4</a></h2>
        <p>This chapter explains ba bla bla.</p>

        <h2>Chapter 5</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 6</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 7</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 8</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 9</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 10</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 11</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 12</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 13</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 14</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 15</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 16</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 17</h2>
        <p>This chapter explains ba bla bla</p>
    </body>
</html>

　　輸出結果：略。

7.3 關於URL和路徑的快速入門編輯

　　要徹底瞭解連接目標，您須要瞭解URL和文件路徑。本節爲您提供實現此目的所需的信息。

　　URL或統一資源定位器只是一個文本字符串，用於定義Web上某些內容的位置。例如，Mozilla的英文主頁位於https://www.mozilla.org/en-US/。

　　URL使用路徑查找文件。路徑指定文件系統中您感興趣的文件所在的位置。讓咱們看一個目錄結構的簡單示例（請參閱creation-hyperlinks目錄。）

　　調用此目錄結構的根creating-hyperlinks。在本地使用網站時，您將擁有一個整個網站所在的目錄。在根目錄中，咱們有一個index.html文件和一個contacts.html。在真實的網站中，index.html將是咱們的主頁或登陸頁面（做爲網站或網站特定部分的入口點的網頁）。

　　咱們的根目錄中還有兩個目錄 - pdfs和projects。它們每一個都有一個文件 - 分別是PDF（project-brief.pdf）和index.html文件。請注意index.html，只要它們位於文件系統的不一樣位置，您就能夠很是高興地在一個項目中擁有兩個文件。許多網站都這樣作。第二個index.html多是項目相關信息的主要登錄頁面。

　　相同目錄：若是要包含指向內部index.html（頂層index.html）的超連接contacts.html，則只需指定要連接到的文件的文件名，由於它與當前文件位於同一目錄中。因此你要使用的URL是contacts.html：

<p>Want to contact a specific staff member?
Find details on our <a href="contacts.html">contacts page</a>.</p>

　　向下移動到子目錄：若是要在指向內部index.html（頂層index.html）中包含超連接projects/index.html，則須要projects在指示要連接到的文件以前進入目錄。這是經過指定目錄的名稱，而後是正斜槓，而後指定文件的名稱來完成的。因此你要使用的URL是projects/index.html：

<p>Visit my <a href="projects/index.html">project homepage</a>.</p>

　　返回到父目錄：若是要在projects/index.html指向內部包含超連接pdfs/project-brief.pdf，則必須進入目錄級別，而後返回到pdf目錄。使用兩個點表示「上一個目錄」 ..- 因此你要使用的URL是../pdfs/project-brief.pdf：

<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

　　注意：若是須要，您能夠將這些功能的多個實例組合到複雜的URL中，例如../../../complex/path/to/my/file.html。

（1）文件碎片

　　能夠連接到HTML文檔的特定部分（稱爲文檔片斷），而不是僅連接到文檔的頂部。要執行此操做，首先必須爲id要連接的元素指定屬性。連接到特定標題一般是有意義的，所以看起來以下所示：

• id 屬性規定 HTML 元素的惟一的 id。
• id 在 HTML 文檔中必須是惟一的。
• id 屬性可用做連接錨（link anchor），經過 JavaScript（HTML DOM）或經過 CSS 爲帶有指定 id 的元素改變或添加樣式。

　　語法：

<element id="value">

　　使用示例以下：

<h2 id="Mailing_address">Mailing address</h2>

　　而後要連接到該特定的id，您將其包含在URL的末尾，前面有一個哈希/井號符號，例如：

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

　　甚至能夠單獨使用文檔片斷引用連接到同一文檔的另外一部分：

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

　　舉例1：

<h2 id="Mailing_address">Mailing address</h2>
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

　　輸出結果：

　　點擊company mailing address 連接：

　　舉例2：

 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4         function change_header()
 5         {
 6             document.getElementById("myHeader").innerHTML="Nice day!";
 7         }
 8         </script>
 9     </head>
10 
11     <body>
12 
13         <h1 id="myHeader">Hello World!</h1>
14         <button onclick="change_header()">Change text</button>
15 
16     </body>
17 </html>

　　輸出結果：略。

（2）絕對與相對URL

　　在Web上遇到的兩個術語是絕對URL和相對URL：

　　絕對URL：指向由其在Web上的絕對位置定義的位置，包括協議和域名。所以，例如，若是index.html頁面上傳到projects位於Web服務器根目錄內的目錄，而且該網站的域名是http://www.example.com，則該頁面將可用http://www.example.com/projects/index.html（或者甚至只是http://www.example.com/projects/，由於大多數Web服務器只是尋找着陸index.html若是未在URL中指定，則加載頁面。）

　　絕對URL始終指向相同的位置，不管它在何處使用。

　　相對URL：指向與您連接的文件相關的位置，更像咱們在上一節中看到的內容。例如，若是咱們想要從咱們的示例文件連接http://www.example.com/projects/index.html到同一目錄中的PDF文件，那麼URL就只是文件名 - 例如project-brief.pdf- 不須要額外的信息。若是PDF在被projects調用的子目錄中可用pdfs，則相對連接將是pdfs/project-brief.pdf（等效的絕對URL http://www.example.com/projects/pdfs/project-brief.pdf。）

　　相對URL將指向不一樣的位置，具體取決於其內部使用的文件所在的位置 - 例如，若是咱們將index.html文件移出projects目錄並進入網站的根目錄（頂層，而不是任何目錄），pdfs/project-brief.pdf它內部的相對URL連接如今指向位於的文件http://www.example.com/pdfs/project-brief.pdf，而不是位於的文件http://www.example.com/projects/pdfs/project-brief.pdf。

　　固然，project-brief.pdf文件和pdfs文件夾的位置不會由於您移動index.html文件而忽然改變- 這會使您的連接指向錯誤的位置，所以若是單擊它將沒法工做。你須要當心！

7.4 連接最佳實踐

　　在頁面上放置連接很容易。這還不夠。咱們須要讓全部讀者都能夠訪問咱們的連接，不管他們當前的背景和他們喜歡哪些工具。例如：

• 屏幕閱讀器用戶喜歡從頁面上的連接跳轉到連接，以及讀取脫離上下文的連接。
• 搜索引擎使用連接文原本索引目標文件，所以最好在連接文本中包含關鍵字以有效地描述連接的內容。
• 視覺讀者瀏覽頁面而不是閱讀每一個單詞，他們的眼睛將被吸引到突出的頁面特徵，如連接。他們會發現描述性連接文本頗有用。

　　咱們來看一個具體的例子：

　　好的連接文本：Download Firefox

<p><a href="https://firefox.com/">
    Download Firefox
</a></p>

　　壞連接文本：Click here to download Firefox

<p><a href="https://firefox.com/">
    Click here
</a>
to download Firefox</p>

　　其餘提示：

• 不要重複URL做爲連接文本的一部分 - URL看起來很醜，而且當屏幕閱讀器逐字逐句地讀出它們時聽起來更加醜陋。
• 不要在連接文本中說「連接」或「連接到」 - 這只是噪音。屏幕閱讀器告訴人們有一個連接。視覺用戶也會知道有一個連接，由於連接一般用不一樣的顏色設計並加下劃線（這種約定一般不該該被破壞，由於用戶習慣了它。）
• 保持您的連接標籤儘量短 - 長連接尤爲煩惱屏幕閱讀器用戶，他們必須聽到整個事情的讀出。
• 最小化將同一文本的多個副本連接到不一樣位置的實例。這可能會給屏幕閱讀器用戶帶來問題，他們常常會在上下文中顯示連接列表 - 全部標記爲「單擊此處」，「單擊此處」，「單擊此處」的連接會使人困惑。

（1）儘量使用相對連接

　　從上面的描述中，您可能會認爲一直使用絕對連接是個好主意; 畢竟，當頁面像相對連接同樣移動時，它們不會中斷。可是，當連接到同一網站內的其餘位置時，您應該儘量使用相對連接（當連接到另外一個網站時，您將須要使用絕對連接）：

• 首先，掃描代碼要容易得多 - 相對URL一般比絕對URL短不少，這使得閱讀代碼變得更加容易。
• 其次，儘量使用相對URL更有效。當您使用絕對URL時，瀏覽器首先在域名系統上查找服務器的實際位置（DNS ;請參閱Web如何工做以獲取更多信息），而後它轉到該服務器並找到正在進行的文件請求。另外一方面，使用相對URL，瀏覽器只在同一服務器上查找正在請求的文件。所以，若是您使用相對URL能夠執行的絕對URL，則會不斷地使您的瀏覽器執行額外的工做，這意味着它的執行效率會下降。

（2）連接到非HTML資源 - 留下明確的路標

　　連接到將要下載的資源（如PDF或Word文檔）或流式傳輸（如視頻或音頻）或具備其餘可能意外的效果（打開彈出窗口或加載Flash影片）時，應添加明確的措辭減小任何混亂。例如，它可能很是煩人：

• 若是您使用的是低帶寬鏈接，請單擊連接，而後意外啓動多兆字節下載。
• 若是您還沒有安裝Flash播放器，請單擊連接，而後忽然轉到須要Flash的頁面。

　　讓咱們看一些例子，看看這裏能夠使用哪一種文本：

 1 <p><a href="http://www.example.com/large-report.pdf">
 2   Download the sales report (PDF, 10MB)
 3 </a></p>
 4 
 5 <p><a href="http://www.example.com/video-stream/" target="_blank">
 6   Watch the video (stream opens in separate tab, HD quality)
 7 </a></p>
 8 
 9 <p><a href="http://www.example.com/car-game">
10   Play the car game (requires Flash)
11 </a></p>

　　當連接到要下載而不是在瀏覽器中打開的資源時，能夠使用該download屬性提供默認的保存文件名。這是一個帶有最新Windows版Firefox的下載連接的示例：

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

　　輸出結果：略。

7.5 主動學習：建立導航菜單

　　最終效果以下圖所示：

　　編寫HTML代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Homepage</title>
 6         <link rel="shortcut icon" href="favicon.ico" type="images/x-icon">
 7     </head>
 8     <body>
 9     
10         <ul>
11             <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html" title="title_Index" target="_blank">Index</a></li>
12             <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html" title="title_Pictures" target="_blank">Pictures</a></li>
13             <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html" title="title_Projects" target="_blank">Projects</a></li>
14             <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html" title="title_Social" target="_blank">Social</a></li>
15         </ul>
16         
17     <h2>Homepage</h2>
18     <p>Welcome to my exciting homepage</p>
19     
20     </body>
21 </html>

　　輸出結果：略。

7.6 電子郵件連接

　　能夠建立連接或按鈕，單擊這些連接或按鈕可打開新的外發電子郵件消息，而不是連接到資源或頁面。這是使用<a>元素和mailto:URL方案完成的。

　　在其最基本和最經常使用的形式中，mailto:連接僅指示預期收件人的電子郵件地址。例如：

<a href="mailto:zyjxxxx@126.com">Send email to nowhere</a>
實際舉例，即會調用郵件軟件發送郵件：
<p><a href="mailto:zyjxxxx@126.com">Send email to nowhere</a></p>

　　輸出結果：Send email to nowhere

　　實際上，電子郵件地址甚至是可選的。若是您將其遺漏（即，您href只是「mailto：」），則用戶的郵件客戶端將打開一個新的外發電子郵件窗口，該客戶端還沒有指定目標地址。這一般用做「共享」連接，用戶能夠單擊該連接將電子郵件發送到他們選擇的地址。

<a href="mailto:">Send email to nowhere</a>
實際舉例，即會調用郵件軟件發送郵件：
<p><a href="mailto:">Send email to nowhere</a></p>

　　輸出結果：Send email to nowhere 

（1）指定詳細信息

　　除了電子郵件地址，您還能夠提供其餘信息。實際上，任何標準郵件頭字段均可以添加到mailto您提供的URL中。最經常使用的是「subject」，「cc」和「body」（這不是真正的標題字段，但容許您爲新電子郵件指定短內容消息）。每一個字段及其值都指定爲查詢字詞。

　　這是一個包含cc，bcc，主題和正文的示例：

<a href="mailto:mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">Send mail with cc, bcc, subject and body</a>

　　輸出結果：

　　注意：每一個字段的值必須是URL編碼的，即非打印字符（不可見字符，如製表符，回車符和分頁符）和百分比轉義空格。還要注意使用問號（?）將主URL與字段值分開，並使用＆符號（＆）分隔mailto:URL中的每一個字段。這是標準的URL查詢表示法。閱讀GET方法以瞭解更經常使用的URL查詢符號。

八、HTML CSS和JavaScript

8.1 HTML CSS

　　經過使用 HTML4.0，全部的格式化代碼都可移出 HTML 文檔，而後移入一個獨立的樣式表。

　　舉例1（本例演示如何使用添加到 <head> 部分的樣式信息對 HTML 進行格式化）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         <style type="text/css">
 7             h1 {color: red}
 8             p {color: blue}
 9         </style>
10     </head>
11     
12     <body"> 
13         
14         <h1>Header 1</h1>
15         <p>A paragraph</p>
16     
17     </body>
18 </html>

　　輸出結果：

　　舉例2（沒有下劃線的連接）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <p><a href="https://www.baidu.com" style="text-decoration:none" target="_blank">This is a link without underline.</a></p>
11     
12     </body>
13 </html>

　　測試結果：This is a link without underline.

　　舉例3（連接到一個外部樣式）：

　　csstest1.css

h1 {
    color: red;
}

p {
    color: blue;
}

　　test.html：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7         <link rel="stylesheet" type="text/css" href="csstest1.css">
 8     </head>
 9     
10     <body"> 
11         <h1>Header 1</h1>
12         <p>This is a link without underline.</p>
13     
14     </body>
15 </html>

　　輸出結果：

（1）外部樣式表

　　當樣式須要被應用到不少頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就能夠經過更改一個文件來改變整個站點的外觀。

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

（2）內部樣式表

　　當單個文件須要特別樣式時，就能夠使用內部樣式表。你能夠在 head 部分經過 <style> 標籤訂義內部樣式表。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7         <style type="text/css">
 8             body {background-color: red}
 9             p {margin-left: 20px}
10         </style>
11     </head>
12     
13     <body"> 
14         <h1>Header 1</h1>
15         <p>This is a link without underline.</p>
16 
17     </body>
18 </html>

　　輸出結果：

（3）內聯樣式

　　當特殊的樣式須要應用到個別元素時，就能夠使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性能夠包含任何 CSS 屬性。如下實例顯示出如何改變段落的顏色和左外邊距。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body"> 
10         <h1>Header 1</h1>
11         <p style="color: red; margin-left: 20px;">This is a paragraph.</p>
12 
13     </body>
14 </html>

　　輸出結果：

8.2 HTML Script

（1）HTML script 元素

　　JavaScript 使 HTML 頁面具備更強的動態和交互性。

　　<script> 標籤用於定義客戶端腳本，好比 JavaScript。

　　script 元素既可包含腳本語句，也可經過 src 屬性指向外部腳本文件。

　　必需的 type 屬性規定腳本的 MIME 類型。

　　JavaScript 最經常使用於圖片操做、表單驗證以及內容動態更新。

　　下面的腳本會向瀏覽器輸出「Hello World!」：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <script type="text/javascript">
11             document.write("<h1>Hello, world!</h1>")
12         </script>
13     
14     </body>
15 </html>

　　輸出結果：

（2）<noscript> 標籤

　　<noscript> 標籤提供沒法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。

　　noscript 元素可包含普通 HTML 頁面的 body 元素中可以找到的全部元素。

　　只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 noscript 元素中的內容：

　　舉例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <script type="text/javascript">
11             document.write("<h1>Hello, world!</h1>")
12         </script>
13         <noscript>Your browser does not support JavaScript!</noscript>
14     
15     </body>
16 </html>

　　輸出結果：略。

（3）將CSS和JavaScript應用於HTML

　　幾乎全部你在現代都會使用的網站都會使用CSS來讓它們看起來很酷，而JavaScript則能夠提供互動功能，例如視頻播放器，地圖，遊戲等等。這些最經常使用於分別使用<link>元素和<script>元素的網頁。

　　該<link>元素老是轉到您的文檔的頭內。這須要兩個屬性，rel =「stylesheet」，它表示它是文檔的樣式表，而href，它包含樣式表文件的路徑：

<link rel="stylesheet" href="my-css-file.css">

　　該<script>元素沒有在頭上去; 事實上，一般最好將它放在文檔正文的底部（就在結束</body>標記以前），以確保瀏覽器在嘗試將JavaScript應用到它以前已經讀取了全部HTML內容（若是JavaScript嘗試訪問尚不存在的元素，瀏覽器將拋出錯誤。）

<script src="my-js-file.js"></script>

　　（外部）CSS和（外部）JavaScript與HTML結合使用舉例以下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7         <link rel="stylesheet" href="my-css-file.css">
 8     </head>
 9     
10     <body"> 
11         <h1>Header 1</h1>
12         <p>This is a link without underline.</p>
13     
14         <script src="my-js-file.js"></script>
15     </body>
16 </html>

　　輸出結果：略。

　　注意：<script>元素可能看起來像一個空元素，但它不是，所以須要一個結束標記。您也能夠選擇將腳本放在<script>元素中，而不是指向外部腳本文件。

九、HTML框架集與佈局、Frame/Iframe、HTML5新標籤

9.1 Frameset佈局

• 參考示例網站：百穀歌度（將百度和谷歌放在一塊兒搜索，左邊爲百度搜索結果，右邊爲谷歌搜索結果）。

9.2 Table佈局

　　不多使用，逐漸被Div佈局替代。

　　註釋：<table> 元素不是做爲佈局工具而設計的。

　　<table> 元素的做用是顯示錶格化的數據。

　　使用 <table> 元素可以取得佈局效果，由於可以經過 CSS 設置表格元素的樣式：

　　test.html代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <link rel="stylesheet" href="csstest1.css">
 8     </head>
 9     
10     <body>
11         <table class="lamp">
12             <tr>
13                 <th>
14                     <img src="baidu.jpg">
15                 </th>
16                 <td>The table element was not designed to be a layout tool.</td>
17             </tr>
18         </table>
19     
20     </body>
21 </html>

　　csstest1.css代碼：

table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}

　　輸出結果：

9.3 Div佈局

　　當前最多見（流行的一種頁面佈局方式）。

DIV詳細解釋：

• div：能夠定義文檔中的分區或節
• div：標籤能夠把文檔分割爲獨立的、不一樣的部分
• div：是一個塊級元素。這意味着它的內容自動地開始一個新行
• div：一般與css進行配合，會有更增強的表現形式

佈局實例時須要用到的css屬性：

• width屬性
• height屬性
• background-color屬性
• float:left 使得div不佔據一行

（1）通常經常使用的Div頁面佈局

　　通常頁面能夠簡單分爲上中下結構，上爲頭部，中爲內容部分，下爲腳部，舉例（html結構以下）：

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

　　舉例1：

 1 <!DOCTYPE <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title>
 7         
 8     </title>
 9     <meta name="viewport" content="width=device-width, initial-scale=1">
10     <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
11     <script src="main.js"></script>
12 </head>
13    
14 <body>
15     <div class="header"></div>                    <!--在html5中能夠替換爲<header></header>-->
16     <div class="nav"></div>　　　　　　　        　　<!--在html5中能夠替換爲<nav></nav>-->
17     <div class="content">
18         <div class="content_left"></div>
19         <div class="content_right"></div>
20     </div>
21     <div class="footer"></div>                    <!--在html5中能夠替換爲<footer></footer>-->
22 </body>
23 </html>>

　　輸出結果：略。

　　舉例2（使用了四個 <div> 元素來建立多列布局）：

　　test.html代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7     </head>
 8     
 9     <body>
10 
11         <div id="header">
12             <h1>City Gallery</h1>
13         </div>
14 
15         <div id="nav">
16             London<br />
17             Paris<br />
18             Tokyo<br />
19         </div>
20 
21         <div id="section">
22             <h1>London</h1>
23             <!--<p>標籤會自動在其先後建立一些空白-->
24             <p>
25                 London is the capital city of England. It is the most populous city in the United Kingdom,
26                 with a metropolitan area of over 13 million inhabitants.
27             </p>
28             <p>
29                 Standing on the River Thames, London has been a major settlement for two millennia,
30                 its history going back to its founding by the Romans, who named it Londinium.
31             </p>
32         </div>
33 
34         <div id="footer">
35             Copyright W3School.com.cn
36         </div>
37     </body>
38 </html>

　　csstest1.css代碼：

 1 #header {
 2     background-color:black;
 3     color:white;
 4     text-align:center;
 5     padding:5px;
 6 }
 7 #nav {
 8     line-height:30px;
 9     background-color:#eeeeee;
10     height:300px;
11     width:100px;
12     float:left;
13     padding:5px; 
14 }
15 #section {
16     width:350px;
17     float:left;
18     padding:10px; 
19 }
20 #footer {
21     background-color:black;
22     color:white;
23     clear:both;
24     text-align:center;
25     padding:5px; 
26 }

　　輸出結果：

（2）HTML5新增語義化標籤

語義化標籤（<header>和<footer>等標籤，在一個頁面中不限使用的個數）：

1. header：頁面頭部
2. footer：頁面腳部，好比會在<footer>標籤中加入<addres>等信息
3. article：定義頁面獨立的內容區域，通常爲文章，標籤訂義的內容自己必須是有意義的，而且必須是獨立於文檔的其他部分，好比能夠用在的地方：論壇帖子、博客文章、新聞故事、評論等，舉例：www.haoroos.cn
4. aside：定義頁面的側邊欄內容
5. details：文檔某個部分的細節
6. summary：是details中的標題，目前chrome支持。
   

   <details>
       <summary>點擊查看更多</summary>
       <img src="img.jpg" alt="" title="">
       <h1>點擊展開後能夠看到這部分文字</h1>
   </details>

   輸出結果：略。
7. time：定義日期或時間，好比一些應用程序可以根據<time>標籤訂義的日期，把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也可以生成更智能的搜索結果。
   

   <p>
       我在<time datetime="2018-05-01">勞動節</time>出去旅遊。
   </p>

   輸出結果：略。

8. ruby：加註釋，就像小時候學漢字時，上面加的拼音。ruby是和<rt>一塊兒用的，<rt>的內容會顯示在文字的上面，至關於拼音；<rp>是在該標籤不能顯示時顯示的文字內容。
   

   <ruby>
       大<rt>da</rt>
       <rp>不能正常顯示文字內容時顯示的內容</rp>
   </ruby>

   輸出結果：略。

9. mark：標記連接，定義帶有記號的文本，它會給你要突出的文本加上背景色。
   

   <p>你最喜歡的<mark>課程</mark>是？</p>

   輸出結果：略。

10. nav：導航，並非全部的HTML文檔都要用到<nav>元素。<nav>元素只是做爲標註一個導航連接的區域。
    

    <!--舉例1-->
    <nav>
        <ul>
            <li><a href="/html">HTML<a></li>
            <li><a href="/css">CSS<a></li>
            <li><a href="/javascript">JavaScript<a></li>
            <li><a href="/jquery">jQuery<a></li>
        </ul>
    </nav>
    
    <!--舉例2-->
    <nav>
        <a href="/html">HTML<a>
        <a href="/css">CSS<a>
        <a href="/javascript">JavaScript<a>
        <a href="/jquery">jQuery<a>
    </nav>

    輸出結果：略。

11. progress：進度標籤，通常表明一個進度條，顯示數據的進度，而非<range>，<range>是指定範圍。屬性：value：當前值，max：最大值，最小值默認爲0，不用設置。
    

    <progress value="22" max="100"><progress>
    
    10:00開始<progress value=".5" max="2"><progress>12:00結束

    輸出結果：略。

12. section：文檔中的節或者文章，通常有兩個用處：（1）定義文檔中的節（section、區段）和<div>相似；（2）定義文章，這時它通常帶有標題。
    

    <section>
        <h1>PRC</h1>
        <p>The People's Republic of China was born in 1949...</p>
    </section>

    輸出結果：略。

13. video：定義視頻，<video> 標籤是 HTML 5 的新標籤。詳細請參考：https://www.cnblogs.com/zyjhandsome/p/9775736.html

    屬性	值	描述
    autoplay⭐	autoplay	若是出現該屬性，則視頻在就緒後立刻播放。
    controls⭐	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
    height⭐	pixels	設置視頻播放器的高度。
    loop⭐	loop	若是出現該屬性，則當媒介文件完成播放後再次開始播放。
    preload⭐	preload	若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。 若是使用 "autoplay"，則忽略該屬性。
    src⭐	url	要播放的視頻的 URL。
    width⭐	pixels	設置視頻播放器的寬度。

14. audio：定義音頻，<audio> 標籤是 HTML 5 的新標籤。詳細請參考：https://www.cnblogs.com/zyjhandsome/p/9775736.html

    屬性	值	描述
    autoplay⭐	autoplay	若是出現該屬性，則音頻在就緒後立刻播放。
    controls⭐	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
    loop⭐	loop	若是出現該屬性，則每當音頻結束時從新開始播放。
    muted⭐	muted	規定視頻輸出應該被靜音。
    preload⭐	preload	若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放。 若是使用 "autoplay"，則忽略該屬性。
    src⭐	url	要播放的音頻的 URL。

15. source：資源
16. datalist：提示可能的值，參考Web開發——HTML基礎（HTML表單/下拉列表/多行輸入），對比<select>標籤
17. embed：引入flash或者插件，定義嵌入的內容，好比插件、flash。它中間不要加內容，和video不一樣，會顯示出來。
    

    <embed src="deno.swf" type="application/x-shockwave-flash"></embed>

    輸出結果：略。

18. canvas：畫布標籤，<canvas>只是個容器，能夠經過控制座標
    

    <canvas id="myCanvas"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 80, 100);
    </script>

    輸出結果：

　　新增的元素包含了語義和結構元素、表單元素、新多媒體元素、繪圖元素。

　　html5的標籤是語義化的，它是H5的研究者花費大量精力研究用戶的通用行爲，好比Google分析了上百萬的頁面，從中分析出了DIV標籤的通用ID名稱而得來。

語義化的好處：

1. 去掉或樣式丟失的時候能讓頁面呈現清晰的結構
2. 搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重（若是須要「友情連接」，通常會從footer中查找）
3. 便於團隊開發和維護

　　舉例（使用 <header>, <nav>, <section>, 以及 <footer> 來建立多列布局）：

　　test.html代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <link rel="stylesheet" href="csstest1.css">
 8     </head>
 9     
10     <body>
11 
12         <header>
13             <h1>City Gallery</h1>
14         </header>
15 
16         <nav>
17             London<br>
18             Paris<br>
19             Tokyo<br>
20         </nav>
21 
22         <section>
23             <h1>London</h1>
24             <p>
25             London is the capital city of England. It is the most populous city in the United Kingdom,
26             with a metropolitan area of over 13 million inhabitants.
27             </p>
28             <p>
29             Standing on the River Thames, London has been a major settlement for two millennia,
30             its history going back to its founding by the Romans, who named it Londinium.
31             </p>
32         </section>
33 
34         <footer>
35             Copyright W3School.com.cn
36         </footer>
37     </body>
38 </html>

　　輸出結果：

9.4 從對象到iframe-其它嵌入技術

• 參考：從對象到iframe-其它嵌入技術

　　嵌入各類內容類型到您的網頁：對<iframe>，  <embed>和<object>元素。<iframe>用於嵌入其餘網頁，另外兩個容許您嵌入PDF，SVG甚至Flash - 一種即將推出的技術。

9.5 HTML框架 Frame/Iframe 經過使用在同一個瀏覽器中顯示不止一個頁面

　　經過使用框架，你能夠在同一個瀏覽器窗口中顯示不止一個頁面。

• <frameset>標籤，參考：http://www.w3school.com.cn/tags/tag_frameset.asp
• <frame>標籤，參考：http://www.w3school.com.cn/tags/tag_frame.asp
• <noframes>標籤，參考：http://www.w3school.com.cn/tags/tag_noframes.asp

<frameset>標籤可選的屬性：

屬性	值	描述
cols	pixels % *	定義框架集中列的數目和尺寸。有關 cols 屬性的詳細信息。
rows	pixels % *	定義框架集中行的數目和尺寸。有關 rows 屬性的詳細信息。

　　<frameset>標籤的其它屬性：border（設置邊框的寬度）、bordercolor（邊框的顏色）、noresize="noresize"（可讓框架固定住，不可拖動）、frameborder="yes|no"（顯示或隱藏邊框）。

<frame>標籤可選的屬性（包括標準的全局屬性）：

屬性	值	描述
frameborder	0 1	規定是否顯示框架周圍的邊框。
longdesc	URL	規定一個包含有關框架內容的長描述的頁面。
marginheight	pixels	定義框架的上方和下方的邊距。
marginwidth	pixels	定義框架的左側和右側的邊距。
name	name	規定框架的名稱。
noresize	noresize	規定沒法調整框架的大小。
scrolling	yes no auto	規定是否在框架中顯示滾動條。
src	URL	規定在框架中顯示的文檔的 URL。

（1）舉例1（垂直框架）

 1 <html>
 2 
 3 <frameset cols="25%,50%,25%">
 4 
 5     <frame src="https://www.baidu.com/">
 6     <frame src="https://www.jd.com/">
 7     <frame src="https://www.taobao.com/">
 8 
 9 </frameset>
10 
11 </html>

　　輸出結果：

（2）舉例2（水平框架）

 1 <html>
 2 
 3 <frameset rols="25%,50%,25%">
 4 
 5     <frame src="https://www.baidu.com/">
 6     <frame src="https://www.jd.com/">
 7     <frame src="https://www.taobao.com/">
 8 
 9 </frameset>
10 
11 </html>

　　輸出結果：

（3）舉例3（使用 <noframes> 標籤）

 1 <html>
 2 
 3     <frameset rows="25%,50%,25%">
 4 
 5         <frame src="https://www.baidu.com/">
 6         <frame src="https://www.jd.com/">
 7         <frame src="https://www.taobao.com/">
 8         <noframes>
 9             <body>Your browser is unable to handle the framework!</body>
10         </noframes>
11     </frameset>
12 
13 </html>

　　輸出結果：略。

（4）舉例4（混合框架結構）

 1 <html>
 2 
 3     <frameset rows="50%,50%">
 4         <frame src="https://www.baidu.com/">
 5         
 6         <frameset cols="25%,75%">
 7             <frame src="https://www.jd.com/">
 8             <frame src="https://www.taobao.com/">
 9         </frameset>
10         
11     </frameset>
12 
13 </html>

　　輸出結果：

（5）舉例5（三個網頁，上1下2，下左邊爲列表網頁，內容均在下右邊網頁中打開）

　　listTest.html代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11         </script>
12         
13         <style type="text/css">
14         </style>
15 
16     </head>
17     
18     <body>
19         <ul>
20             <li><a href="https://www.baidu.com/" target="rightWin">Baidu</a></li>
21             <li><a href="https://www.taobao.com/" target="rightWin">Taobao</a></li>
22             <li><a href="https://www.jd.com/" target="rightWin">Jingdong</a></li>
23         </ul>
24     </body>
25 </html>

　　frameTest.html代碼：

 1 <html>
 2 
 3     <frameset rows="50%,50%">
 4         <frame src="https://www.baidu.com/">
 5         
 6         <frameset cols="40%,60%">
 7             <frame src="listTest.html">
 8             <frame name="rightWin" src="https://www.taobao.com/">
 9         </frameset>
10         
11     </frameset>
12 
13 </html>

　　輸出結果：

（6）舉例6（含有 noresize="noresize" 屬性的框架結構）

　　noresize="noresize"設置幾個<frame>網頁之間不可拖動

 1 <html>
 2 
 3 <frameset rows="50%,20%,30%">
 4 
 5     <frame src="/example/html/frame_a.html" noresize="noresize">
 6     <frame src="/example/html/frame_b.html">
 7     <frame src="/example/html/frame_c.html">
 8     
 9 </frameset>
10 
11 </html>

　　輸出結果：略。

（7）Iframe框架的使用

　　Iframe用於在網頁內顯示網頁。

　　語法：

<iframe src="URL"></frame>

　　Iframe設置高度和寬度

　　舉例：

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

　　Iframe刪除邊框

　　舉例：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

　　使用Iframe做爲連接的目標

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7     </head>
 8     
 9     <body>
10     
11         <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
12         <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
13         
14     </body>
15 </html>

　　輸出結果：

　　點擊W3School.com.cn後：

 十、標籤和屬性

• 參考：http://www.w3school.com.cn/tags/index.asp

十一、HTML事件屬性 

11.1 全局事件屬性

　　HTML 4 增長了使事件在瀏覽器中觸發動做的能力，好比當用戶點擊元素時啓動 JavaScript。

　　如需學習更多有關事件編程的知識，請訪問咱們的 JavaScript 教程。

　　下面列出了添加到 HTML 元素以定義事件動做的全局事件屬性。

　　⭐= HTML5 中新的事件屬性。

11.2 Window 事件屬性

　　針對 window 對象觸發的事件（應用到 <body> 標籤）：

屬性	值	描述
onafterprint	script	文檔打印以後運行的腳本。
onbeforeprint	script	文檔打印以前運行的腳本。
onbeforeunload	script	文檔卸載以前運行的腳本。
onerror	script	在錯誤發生時運行的腳本。
onhaschange	script	當文檔已改變時運行的腳本。
onload	script	頁面結束加載以後觸發。
onmessage	script	在消息被觸發時運行的腳本。
onoffline	script	當文檔離線時運行的腳本。
ononline	script	當文檔上線時運行的腳本。
onpagehide	script	當窗口隱藏時運行的腳本。
onpageshow	script	當窗口成爲可見時運行的腳本。
onpopstate	script	當窗口歷史記錄改變時運行的腳本。
onredo	script	當文檔執行撤銷（redo）時運行的腳本。
onresize	script	當瀏覽器窗口被調整大小時觸發。
onstorage	script	在 Web Storage 區域更新後運行的腳本。
onundo	script	在文檔執行 undo 時運行的腳本。
onunload	script	一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。

11.3 Form 事件

由 HTML 表單內的動做觸發的事件（應用到幾乎全部 HTML 元素，但最經常使用在 form 元素中）：

屬性	值	描述
onblur	script	元素失去焦點時運行的腳本。
onchange	script	在元素值被改變時運行的腳本。
oncontextmenu	script	當上下文菜單被觸發時運行的腳本。
onfocus	script	當元素得到焦點時運行的腳本。
onformchange	script	在表單改變時運行的腳本。
onforminput	script	當表單得到用戶輸入時運行的腳本。
oninput	script	當元素得到用戶輸入時運行的腳本。
oninvalid	script	當元素無效時運行的腳本。
onreset	script	當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。
onselect	script	在元素中文本被選中後觸發。
onsubmit	script	在提交表單時觸發。

11.4 Keyboard 事件

屬性	值	描述
onkeydown	script	在用戶按下按鍵時觸發。
onkeypress	script	在用戶敲擊按鈕時觸發。
onkeyup	script	當用戶釋放按鍵時觸發。

11.5 Mouse 事件

由鼠標或相似用戶動做觸發的事件：

屬性	值	描述
onclick	script	元素上發生鼠標點擊時觸發。
ondblclick	script	元素上發生鼠標雙擊時觸發。
ondrag	script	元素被拖動時運行的腳本。
ondragend	script	在拖動操做末端運行的腳本。
ondragenter	script	當元素元素已被拖動到有效拖放區域時運行的腳本。
ondragleave	script	當元素離開有效拖放目標時運行的腳本。
ondragover	script	當元素在有效拖放目標上正在被拖動時運行的腳本。
ondragstart	script	在拖動操做開端運行的腳本。
ondrop	script	當被拖元素正在被拖放時運行的腳本。
onmousedown	script	當元素上按下鼠標按鈕時觸發。
onmousemove	script	當鼠標指針移動到元素上時觸發。
onmouseout	script	當鼠標指針移出元素時觸發。
onmouseover	script	當鼠標指針移動到元素上時觸發。
onmouseup	script	當在元素上釋放鼠標按鈕時觸發。
onmousewheel	script	當鼠標滾輪正在被滾動時運行的腳本。
onscroll	script	當元素滾動條被滾動時運行的腳本。

11.6 Media 事件

　　由媒介（好比視頻、圖像和音頻）觸發的事件（適用於全部 HTML 元素，但常見於媒介元素中，好比 <audio>、<embed>、<img>、<object> 以及 <video>）:

屬性	值	描述
onabort	script	在退出時運行的腳本。
oncanplay	script	當文件就緒能夠開始播放時運行的腳本（緩衝已足夠開始時）。
oncanplaythrough	script	當媒介可以無需因緩衝而中止便可播放至結尾時運行的腳本。
ondurationchange	script	當媒介長度改變時運行的腳本。
onemptied	script	當發生故障而且文件忽然不可用時運行的腳本（好比鏈接意外斷開時）。
onended	script	當媒介已到達結尾時運行的腳本（可發送相似「感謝觀看」之類的消息）。
onerror	script	當在文件加載期間發生錯誤時運行的腳本。
onloadeddata	script	當媒介數據已加載時運行的腳本。
onloadedmetadata	script	當元數據（好比分辨率和時長）被加載時運行的腳本。
onloadstart	script	在文件開始加載且未實際加載任何數據前運行的腳本。
onpause	script	當媒介被用戶或程序暫停時運行的腳本。
onplay	script	當媒介已就緒能夠開始播放時運行的腳本。
onplaying	script	當媒介已開始播放時運行的腳本。
onprogress	script	當瀏覽器正在獲取媒介數據時運行的腳本。
onratechange	script	每當回放速率改變時運行的腳本（好比當用戶切換到慢動做或快進模式）。
onreadystatechange	script	每當就緒狀態改變時運行的腳本（就緒狀態監測媒介數據的狀態）。
onseeked	script	當 seeking 屬性設置爲 false（指示定位已結束）時運行的腳本。
onseeking	script	當 seeking 屬性設置爲 true（指示定位是活動的）時運行的腳本。
onstalled	script	在瀏覽器不論何種緣由未能取回媒介數據時運行的腳本。
onsuspend	script	在媒介數據徹底加載以前不論何種緣由終止取回媒介數據時運行的腳本。
ontimeupdate	script	當播放位置改變時（好比當用戶快進到媒介中一個不一樣的位置時）運行的腳本。
onvolumechange	script	每當音量改變時（包括將音量設置爲靜音）時運行的腳本。
onwaiting	script	當媒介已中止播放但打算繼續播放時（好比當媒介暫停已緩衝更多數據）運行腳本