HTML指的是超文本標(biāo)記語言（HyperText Markup Language），是用來描述網(wǎng)頁的一種語言。
HTML使用標(biāo)簽來描述網(wǎng)頁。
編輯器與瀏覽器
HTML文檔實(shí)際上是純文本文檔，所以一般的文本編輯器都可以使用。
我推薦使用Atom或者Visual Studio Code編輯器。
床前明月光
下面是一個HTML實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>靜夜思（李白）</title>
<meta charset="utf-8">
</head>
<body>
<h1>靜夜思</h1>
<p>李白</p>
<p>床前明月光，疑是地上霜。</p>
<p>舉頭望明月，低頭思故鄉(xiāng)。</p>
</body>
</html>
實(shí)例中的第一行<!DOCTYPE html>聲明這是一個HTML5（HTML的一個版本）文檔。
<html>標(biāo)簽是HTML頁面的最根本的標(biāo)簽，頁面的內(nèi)容包含在此標(biāo)簽中。
<head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。在本例中，<title>標(biāo)簽和<meta>標(biāo)簽包含于<head>標(biāo)簽中。
<title>標(biāo)簽描述了文檔的標(biāo)題。
<meta>標(biāo)簽定義了文檔的元數(shù)據(jù)，本例中，通過charset定義了文檔的編碼方式。
<body>標(biāo)簽描述了頁面的可見內(nèi)容。
<h1>標(biāo)簽定義了文檔的一級標(biāo)題。
<p>標(biāo)簽定義了一個段落。
在瀏覽器中打開，顯示如下：
在Chrome瀏覽器中，在頁面上單擊右鍵，選擇“查看網(wǎng)頁源代碼”，即可查看網(wǎng)頁源代碼。
在Chrome瀏覽器中，在頁面上單擊右鍵，選擇“檢查”，即可進(jìn)入開發(fā)人員工具箱，可以在這里查看HTML源代碼。
標(biāo)題與段落
HTML中標(biāo)題通過<h1>-<h6>描述，共六級標(biāo)題，其中<h1>描述一級標(biāo)題，<h2>描述二級標(biāo)題……<h6>描述六級標(biāo)題。
使用<p>得到一個段落。
下面是一個例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的標(biāo)題</title>
<meta charset="utf-8">
</head>
<body>
<h1>這是一個一級標(biāo)題</h1>
<h2>這是一個二級標(biāo)題</h2>
<p>這是一個段落</p>
<h2>這是一個二級標(biāo)題</h2>
<p>這是一個段落</p>
<h3>這是一個三級標(biāo)題</h3>
<p>這是一個段落</p>
</body>
</html>
在瀏覽器中打開，顯示如下（下圖中左側(cè)顯示的是源代碼）：
<hr>標(biāo)簽創(chuàng)建一條水平線。
<br>標(biāo)簽在一個段落內(nèi)換行。
下面是一個例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的水平線與換行</title>
<meta charset="utf-8">
</head>
<body>
<h1>這是一個一級標(biāo)題</h1>
<hr>
<h2>這是一個二級標(biāo)題</h2>
<p>這是一個段落<br>
同一個段落中的換行</p>
<h2>這是一個二級標(biāo)題</h2>
<p>這是一個段落</p>
</body>
</html>
瀏覽器中顯示如下：
像<hr>和<br>這樣的標(biāo)簽稱為空標(biāo)簽，它們只有一個標(biāo)簽，沒有區(qū)分開始標(biāo)簽和結(jié)束標(biāo)簽。之前講的<p>標(biāo)簽則不是空標(biāo)簽，它的開始標(biāo)簽是<p>，結(jié)束標(biāo)簽是</p>。
注釋
在HTML中，將注釋放在``之間。
注釋幫助開發(fā)人員了解程序，瀏覽器會自動忽略他們。
<!DOCTYPE html>
<!--
title: 靜夜思
time: 2018-2-27
author: mwang
-->
<html>
<head>
<title>靜夜思（李白）</title>
<meta charset="utf-8">
</head>
<body>
<!-- 題目 -->
<h1>靜夜思</h1>
<p>李白</p> <!-- 作者 -->
<p>床前明月光，疑是地上霜。</p>
<p>舉頭望明月，低頭思故鄉(xiāng)。</p>
</body>
</html>
在上面的例子中，有三個注釋。分別是：
- 文檔開頭部分，是一個多行注釋，寫明了文檔標(biāo)題、時間和作者。
-
<h1>標(biāo)簽上面，內(nèi)容為題目。 - 第一個
</p>標(biāo)簽右邊，內(nèi)容為作者。
瀏覽器會自動忽略注釋，所以瀏覽器中顯示如下：
鏈接
HTML使用超鏈接實(shí)現(xiàn)文檔與文檔的鏈接。
HTML使用<a>標(biāo)簽描述超鏈接，它的語法如下：
<a href="url">鏈接文本</a>
例如，
<a href="html_start.html">靜夜思</a>
在瀏覽器中，點(diǎn)擊文字靜夜思會跳轉(zhuǎn)到文件html_start.html。
下面是一個實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>關(guān)于月亮的古詩</title>
<meta charset="utf-8">
</head>
<body>
<h1>關(guān)于月亮的古詩</h1>
<p>點(diǎn)擊查看古詩<a href="html_start.html">靜夜思</a>。</p>
</body>
</html>
在瀏覽器中顯示如下：
點(diǎn)擊鏈接后會跳轉(zhuǎn)到指定的頁面：
可以在標(biāo)簽中設(shè)置屬性，屬性可以在標(biāo)簽中添加附加信息，屬性一般以名稱="值"的形式出現(xiàn)。
屬性一般放在開始標(biāo)簽中。
介紹<a>標(biāo)簽中的一個屬性：target。
在標(biāo)簽<a>中使用target屬性指定該鏈接的打開方式，比如_blank指定在新窗口中打開鏈接：
<a target="_blank">百度一下</a>
這個例子中，點(diǎn)擊鏈接后會在新窗口中打開百度。
文本格式化
這里介紹5個文本格式化標(biāo)簽：<strong>、<em>、<sub>、<sup>和<del>。
它們的作用如下：
-
<strong>，加重語氣。 -
<em>，著重文字。 -
<sub>，下標(biāo)字。 -
<sup>，上標(biāo)字。 -
<del>，刪除字。
下面是一個實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>HTML文本格式化</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML文本格式化</h1>
<p>在HTML中，em表示內(nèi)容的<em>著重點(diǎn)</em>，strong表示內(nèi)容<strong>很重要</strong>。</p>
<p>sub表示<sub>下標(biāo)</sub>字。</p>
<p>sup表示<sup>上標(biāo)</sup>字。</p>
<p>del表示<del>刪除</del>字。</p>
</body>
</html>
瀏覽器中顯示如下：
列表
在HTML中，可以使用有序列表和無序列表。
有序列表是一個項(xiàng)目列表，由數(shù)字進(jìn)行標(biāo)記。
有序列表起始于<ol>標(biāo)簽，結(jié)束于</ol>標(biāo)簽，每一項(xiàng)使用<li>標(biāo)簽。
下面是一個有序列表的例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的有序列表</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML中的有序列表</h1>
<p>把大象放冰箱里分三步：</p>
<ol>
<li>把冰箱門打開。</li>
<li>把大象放進(jìn)去。</li>
<li>把門關(guān)上。</li>
</ol>
</body>
</html>
在瀏覽器中打開，如下：
無序列表也是一個項(xiàng)目列表，由小圓點(diǎn)進(jìn)行標(biāo)記。
無序列表起始于<ul>標(biāo)簽，結(jié)束于</ul>標(biāo)簽，每項(xiàng)用<li>標(biāo)簽。
下面是一個無序列表的例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的無序列表</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML中的無序列表</h1>
<p>形容場面熱鬧壯觀的詞：</p>
<ul>
<li>鑼鼓喧天</li>
<li>鞭炮齊鳴</li>
<li>紅旗招展</li>
<li>人山人海</li>
</ul>
</body>
</html>
在瀏覽器中打開，如下：
表格
HTML中的表格使用<table>標(biāo)簽定義。
表格中的行使用<tr>標(biāo)簽定義，單元格使用<td>標(biāo)簽定義。使用<th>定義表頭。
這是一個表格的例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的表格</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML中的表格</h1>
<h2>四象限法</h2>
<p>四象限法是一種時間管理方法，它最重要的工具是下面這一張表格：</p>
<table border="1">
<tr> <!-- 第一行，表頭 -->
<th></th>
<th>不重要</th>
<th>重要</th>
</tr>
<tr> <!-- 第二行 -->
<td>緊急</td>
<td>緊急但不重要</td>
<td>重要且緊急</td>
</tr>
<tr> <!-- 第三行 -->
<td>不緊急</td>
<td>不重要且不緊急</td>
<td>重要但不緊急</td>
</tr>
</table>
</body>
</html>
瀏覽器中顯示如下：
在本例中，表格一共有三行，其中第一行作為表頭，單元格使用了<th>標(biāo)簽；剩下的兩行，單元格使用了<td>標(biāo)簽。
可以看到，表格中使用<tr>描述行。
本例中<table>標(biāo)簽中的border屬性確定了表格的邊框?qū)挾?，默認(rèn)情況下表格沒有邊框。
在操作表格中，有時需要“合并單元格”操作，這就需要使用rowspan和colspan屬性了。
rowspan屬性定義一個單元格縱跨的表格行數(shù)，colspan屬性定義了一個單元格橫跨的表格列數(shù)。比如<td rowspan="2">表示該單元格縱向占兩行，<td colspan="3">表示該單元格橫向占三列。
對于下面這個表格：
<table border="1">
<tr>
<th colspan="3">今天的幸福</th>
</tr>
<tr>
<th>小品名稱</th>
<th>年份</th>
<th>演員</th>
</tr>
<tr>
<td rowspan="3">今天的幸福</td>
<td rowspan="3">2012</td>
<td>沈騰</td>
</tr>
<tr>
<td>艾倫</td>
</tr>
<tr>
<td>黃楊</td>
</tr>
</table>
它在瀏覽器中顯示如下：
例子中，表頭今天的幸福橫跨三列，所以屬性為colspan="3"；單元格今天的幸福和2012縱跨三行，所以屬性為rowspan="3"。
圖像，音頻，視頻
在HTML中添加圖像非常簡單，使用<img>標(biāo)簽。
<img src="media/rose.jpg" alt="玫瑰花" width="640" height="440">
在上面的語句中，一共使用了四個屬性，分別是：
-
src：指定圖片的地址。 -
alt：當(dāng)圖片無法加載時，顯示此文本。 -
width：指定圖片的寬度。 -
height：指定圖片的高度。
在瀏覽器中顯示如下：
當(dāng)圖片無法加載時，顯示如下：
使用<audio>在HTML文檔中插入音頻：
<audio controls>
<source src="media/A Himitsu - Adventures.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
例子中，<audio>表示這是一個音頻文件，屬性controls表示顯示播放控件，比如暫停、進(jìn)度條和音量等等。
<source>有兩個屬性：
-
src：指定音頻文件地址。 -
type：指定音頻文件格式。
在瀏覽器中顯示如下：
使用<video>在HTML文檔中插入視頻文件：
<video width="640" height="360" controls>
<source src="media/Adventures - A Himitsu (No Copyright Music).mp4" type="video/mp4">
您的瀏覽器不支持Video標(biāo)簽。
</video>
在上面的例子中，<video>標(biāo)簽表明這是一個視頻文件，例子中它有三個屬性：
-
width：視頻的寬度。 -
height：視頻的高度。 -
controls：顯示控制組件。比如暫停、進(jìn)度條和音量等等。
接下來的<source>標(biāo)簽具有兩個屬性：
-
src：視頻文件的地址。 -
type：視頻文件的類型。
下面的您的瀏覽器不支持Video標(biāo)簽。是當(dāng)瀏覽器不支持<video>標(biāo)簽時顯示的內(nèi)容。
在瀏覽器中顯示如下：
區(qū)塊
<div>是塊級元素，沒有特定的含義，可以用作其他HTML元素的容器。
<span>是內(nèi)聯(lián)元素，這意味著它不會在新的一行顯示，可以用作文本的容器。
表單
使用<form>標(biāo)簽定義一個表單：
<form>
...表單內(nèi)容
</form>
<input>是輸入標(biāo)簽，它的屬性type定義輸入類型，下面是一個例子：
<form>
用戶名：<input type="text" name="username"><br>
密碼：<input type="password" name="password">
</form>
在瀏覽器中顯示如下（已經(jīng)輸入文字）：
name屬性是文本域的標(biāo)識。
同樣，<input>標(biāo)簽也可以作為單選框或者復(fù)選框：
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="fruit" value="apple">蘋果<br>
<input type="checkbox" name="fruit" value="banana">香蕉
</form>
這個表單中有兩個單選框（radio），兩個復(fù)選框（checkbox）。
兩個單選框的name屬性一致，都是sex，這意味著兩個單選框是一組，只能選其中一個；兩個復(fù)選的name屬性一致，表明他們是一組，但是可以按需選擇。
在瀏覽器中顯示如下（已經(jīng)進(jìn)行選擇）：
下拉列表使用<select>標(biāo)簽進(jìn)行定義，每個選項(xiàng)使用<option>標(biāo)簽定義，屬性selected表示此選項(xiàng)被預(yù)選：
<form>
<select name="class">
<option value="1">1班</option>
<option value="2">2班</option>
<option value="3" selected>3班</option>
<option value="4">4班</option>
</select>
</form>
瀏覽器中顯示如下：
文本輸入框使用<textarea>標(biāo)簽：
<textarea rows="10" cols="30">
請在這里輸入您的描述。
</textarea>
屬性rows指定文本框的行數(shù)，cols指定文本框的列數(shù)。
瀏覽器中顯示如下：
最后，我們需要一個提交按鈕，它在<input>標(biāo)簽中的類型是<submit>：
<form>
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
在瀏覽器中顯示如下：
事實(shí)上，要讓提交按鈕正常工作，需要完成處理表單的頁面，這里不會進(jìn)行介紹。
