第01課 HTML 入門 · 學習講義 2019

## 一、概述 HTML 是網頁使用的語言，定義了網頁的結構和內容。瀏覽器訪問網站，其實就是從服務器下載 HTML 代碼，然后渲染出網頁。 HTML 的全名是`超文本標記語言`（HyperText Markup Language），上個世紀90年代由歐洲核子研究中心的物理學家蒂姆·伯納斯-李（Tim Berners-Lee）發明。它的最大特點就是支持超鏈接，可以跳轉到其他網頁，從而構成了整個互聯網。1999年，HTML 4.01 版發布，成為廣泛接受的 HTML 標準。2014年，HTML 5 發布，這是目前正在使用的版本。瀏覽器的網頁開發，涉及三種技術：HTML、CSS 和 JavaScript。HTML 語言定義網頁的結構和內容，CSS 樣式表定義網頁的樣式，JavaScript 語言定義網頁與用戶的互動行為。 ## 二、網頁的概念 ### 2.1 標簽 HTML 代碼由許許多多不同的標簽（tag）構成。下面代碼中，`<title>`和`</title>`就是一對標簽。 ~~~html <title>網頁標題</title> ~~~ 標簽用來告訴瀏覽器，如何處理這段代碼。標簽的內容就是瀏覽器所要渲染的、展示在網頁上的內容。標簽放在一對尖括號里面（比如`<title>`），大多數標簽都是成對出現的，分成開始標簽和結束標簽，結束標簽在標簽名之前加斜杠（比如`</title>`）。但是，也有一些標簽不是成對使用，而是只有開始標簽，沒有結束標簽。 ### 2.2 元素瀏覽器渲染網頁的時候，會把 HTML 源碼解析成一個標簽樹，每個標簽都是一個節點`node`，稱為網頁元素`element`。嵌套的標簽就構成了網頁元素的層級關系。 “標簽”和“元素”基本上是同義詞，只是使用的場合不一樣：標簽是源碼角度來看，元素是從編程角度來看，比如`<p>`標簽對應網頁的`p`元素。 ~~~html <div><p>hello world</p></div> ~~~ ### 2.3 屬性屬性`attribute`是標簽的額外信息，使用空格與標簽名和其他屬性分隔。 ~~~html <img src="demo.jpg" width="500"> ~~~ 上面代碼中，`<img>`標簽有兩個屬性：`src`和`width`。 ### 2.4 注釋 HTML 代碼可以包含注釋，瀏覽器會自動忽略注釋。注釋以``結尾。注釋有助于理解代碼的含義，復雜的代碼塊前面最好加上注釋。 ```  ``` ## 三、網頁的基本標簽符合語法標準的網頁，應該滿足下面的基本結構。 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>文檔標題</title> </head> <body> </body> </html> ~~~ * `<!doctype>`通常是網頁的第一個標簽，表示文檔類型，告訴瀏覽器如何解析網頁。 * `<html>`標簽是網頁的頂層容器，也稱為根元素（root element），其他元素都是它的子元素。一個網頁只能有一個`<html>`標簽。 * `<head>`標簽是一個容器標簽，用于放置網頁的元信息。它的內容不會出現在網頁上，而是為網頁渲染做準備。`<head>`是`<html>`的第一個子元素。如果網頁不包含`<head>`，瀏覽器會自動創建一個。 * `<meta>`標簽用于設置或說明網頁的元數據，必須放在`<head>`里面。一個`<meta>`標簽就是一項元數據，網頁可以有多個`<meta>`。 * `<title>`標簽用于指定網頁的標題，會顯示在瀏覽器窗口的標題欄。 * `<body>`標簽是一個容器標簽，用于放置網頁的主體內容。瀏覽器顯示的頁面內容，都是放置在它的內部。它是`<html>`的第二個子元素，緊跟在`<head>`后面。 ## 四、文本標簽歷史上，網頁的主要功能是文本展示。所以，HTML 提供了大量的文本處理標簽。 * `<div>`是一個通用標簽，表示一個區塊（division）。它沒有語義，如果網頁需要一個塊級元素容器，又沒有其他合適的標簽，就可以使用這個標簽。 ~~~html <div class="article"> <div class="title"> <h1>文章標題</h1> </div> </div> ~~~ * `<span>`是一個通用目的的行內標簽（即不會產生換行），不帶有任何語義。 ~~~html <div>這是一句<span>重要</span>的句子。</div> ~~~ * HTML 提供了6個標簽，用來表示文章的標題。按照標題的等級，一共分成六級。 ~~~html <body> <h1>JavaScript 語言介紹</h1> <h2>概述</h2> <h2>基本概念</h2> <h3>網頁</h3> <h3>鏈接</h3> <h2>主要用法</h2> </body> ~~~ * `<p>`標簽是一個塊級元素，代表文章的一個段落（paragraph）。不僅是文本，任何想以段落顯示的內容，比如圖片和表單項，都可以放進`<p>`元素。 ~~~html <p>hello world</p> ~~~ * `<br>`讓網頁產生一個換行效果。該標簽是單獨使用的，沒有閉合標簽。 ~~~html hello<br>world ~~~ * `<hr>`用來在一篇文章中分隔兩個不同的主題，瀏覽器會將其渲染為一根水平線。該標簽是單獨使用的，沒有閉合標簽。 ~~~html <p>第一個主題</p> <hr> <p>第二個主題</p> ~~~ * `<strong>`是一個行內元素，表示它包含的內容具有很強的重要性，需要引起注意。瀏覽器會以粗體顯示內容。 ~~~html <p>開會時間是<strong>下午兩點</strong>。</p> ~~~ * `<b>`與`<strong>`很相似，也表示它包含的內容需要引起注意，瀏覽器會加粗顯示。它沒有語義，是一個純樣式的標簽，違反了語義與樣式分離的原則，因此不建議使用。 ~~~html <p>開會時間是<b>下午兩點</b>。</p> ~~~ * `<em>`是一個行內標簽，表示強調（emphasize），瀏覽器會以斜體顯示它包含的內容。 ~~~html <p>我們<em>已經</em>討論過這件事情了。</p> ~~~ * `<i>`標簽與`<em>`相似，也表示與其他地方有所區別，瀏覽器會以斜體顯示。它是 Italic 的縮寫。`<i>`標簽的語義不強，更接近是一個純樣式的標簽，不建議使用。 ~~~html <p>我心想，這件事是<i>真的</i>嗎？</p> ~~~ * `<sub>`標簽將內容變為下標，`<sup>`標簽將內容變為上標。它們都是行內元素，主要用于數學公式、分子式等。 ~~~html <p>水分子是 H<sub>2</sub>O。</p> ~~~ ## 五、圖片標簽圖片是互聯網的重要組成部分，讓網頁變得豐富多彩。 `<img>`標簽用于插入圖片。它是單獨使用的，沒有閉合標簽。`<img>`默認是一個行內元素，與前后的文字處在同一行。 ``` <img src="logo.png"> <img src="http://noi.dodoke.com/images/logo.png"> ``` `src`屬性指定圖片的網址，第一個是相對地址，表示圖片與網頁在同一個目錄。 ## 六、鏈接標簽鏈接（hyperlink）是互聯網的核心。它允許用戶在頁面上，從一個網址跳轉到另一個網址，從而把所有資源聯系在一起。鏈接通過`<a>`標簽表示，用戶點擊后，瀏覽器會跳轉到指定的網址。鏈接不僅可以指向另一個網頁，也可以指向文本、圖像、文件等資源。可以這樣說，所有互聯網上的資源，都可以通過鏈接訪問。 ``` <a href="https://www.dodoke.com/">渡課首頁</a> ``` `<a>`標簽內部不僅可以放置文字，也可以放置其他元素，比如段落、圖像、多媒體等等。 ``` <a href="https://noi.dodoke.com/"> <img src="http://noi.dodoke.com/images/logo.png"> </a> ``` * href 屬性：給出鏈接指向的網址。它的值應該是一個 URL 或者錨點。 ``` <a href="https://www.dodoke.com/">渡課首頁</a> ``` * target 屬性：指定如何展示打開的鏈接。`target`常用屬性值為`_self`和`_blank`。 ``` <a href="http://www.dodoke.com" target="_blank">渡課首頁</a> ``` ## 七、列表標簽列表是一系列排列好的項目，主要分成兩類：有序列表和無序列表。 * `<ol>`標簽是一個有序列表容器（ordered list），會在內部的列表項前面產生數字編號。 ~~~html <ol> <li>列表項 A</li> <li>列表項 B</li> <li>列表項 C</li> </ol> ~~~ * `<ul>`標簽是一個無序列表容器（unordered list），會在內部的列表項前面產生實心小圓點，作為列表符號。 ~~~ <ul> <li>列表項 A</li> <li>列表項 B</li> <li>列表項 C</li> </ul> ~~~ * `<dl>`標簽是一個塊級元素，表示一組術語的列表（description list）。術語名（description term）由`<dt>`標簽定義，術語解釋（description detail）由`<dd>`標簽定義。`<dl>`常用來定義詞匯表。 ~~~ <dl> <dt>CPU</dt> <dd>中央處理器</dd> <dt>Memory</dt> <dd>內存</dd> <dt>Hard Disk</dt> <dd>硬盤</dd> </dl> ~~~ ## 八、表單標簽表單（form）是用戶輸入信息與網頁互動的一種形式。表單由一種或多種的小部件組成，比如輸入框、按鈕、單選框或復選框。 ### 8.1 `<form>`簡介 `<form>`標簽用來定義一個表單，所有表單內容放到這個容器元素之中。 ~~~ <form>  </form> ~~~ ~~~ <form action="https://example.com/api" method="post"> <label for="username">用戶名：</label> <input id="username" type="text" name="username"> <input type="submit" value="提交"> </form> ~~~ * `action`：服務器接收數據的 URL。 * `method`：提交數據的 HTTP 方法，可能的值有`post`（表單數據作為 HTTP 數據體發送），`get`（表單數據作為 URL 的查詢字符串發送）。 ## 8.2 `<label>`標簽 `<label>`標簽是一個行內元素，提供控件的文字說明，幫助用戶理解控件的目的。 ~~~ <label for="user">用戶名：</label> <input type="text" name="user" id="user"> ~~~ ### 8.3 `<input>` 標簽 `<input>`標簽是一個行內元素，用來接收用戶的輸入。它是一個單獨使用的標簽，沒有結束標志。它有多種類型，取決于`type`屬性的值，默認值是`text`，表示一個輸入框。 ~~~ <input>  <input type="text"> ~~~ * `type="text"`是普通的文本輸入框，用來輸入單行文本。 ~~~ <input type="text" id="name" name="name" required minlength="4" maxlength="8"> ~~~ * `type="button"`是沒有默認行為的按鈕，建議盡量不使用這個類型，而使用`<button>`標簽代替。 ~~~ <input type="button" value="點擊"> ~~~ * `type="submit"`是表單的提交按鈕。用戶點擊這個按鈕，就會把表單提交給服務器。 ~~~ <input type="submit" value="提交"> ~~~ * `type="reset"`是一個重置按鈕，用戶點擊以后，所有表格控件重置為初始值。 ~~~ <input type="reset" value="重置"> ~~~ * `type="checkbox"`是復選框，允許選擇或取消選擇該選項。`checked`屬性表示默認選中。 ~~~ <input type="checkbox" name="agreement" checked> <label for="agreement">是否同意</label> ~~~ * `type="radio"`是單選框，表示一組選擇之中，只能選中一項。多個單選框的`name`屬性的值，應該都是一致的。 ~~~ <fieldset> <legend>性別</legend> <div> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> </div> <div> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </div> </fieldset> ~~~ * `type="password"`是一個密碼輸入框。用戶的輸入會被遮擋，字符通常顯示星號（`*`）或點（`·`）。 ~~~ <input type="password" name="password" minlength="8" required> ~~~ * `type="file"`是一個文件選擇框，允許用戶選擇一個或多個文件，常用于文件上傳功能。 ~~~ <input type="file" name="avatar" accept="image/png, image/jpeg"> ~~~ ### 8.4 `<button>`標簽 `<button>`標簽會生成一個可以點擊的按鈕，沒有默認行為，通常需要用`type`屬性或腳本指定按鈕的功能。 ~~~ <button>點擊</button> ~~~ ### 8.5 `<select>`標簽 `<select>`標簽用于生成一個下拉菜單。`<option>`有一個布爾屬性`selected`，一旦設置，就表示該項是默認選中的菜單項。 ~~~ <label for="pet-select">寵物：</label> <select id="pet-select" name="pet-select"> <option value="">--請選擇一項--</option> <option value="dog">狗</option> <option value="cat">貓</option> <option value="others">其他</option> </select> ~~~ ### 8.6 `<textarea>`標簽 `<textarea>`是一個塊級元素，用來生成多行的文本框。 ~~~ <textarea rows="5" cols="33"> 這是一個很長的故事。 </textarea> ~~~