HTML指的是超文本標(biāo)記語(yǔ)言（HyperText Markup Language）朝抖，是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
HTML使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)晌端。
編輯器與瀏覽器
HTML文檔實(shí)際上是純文本文檔喜最，所以一般的文本編輯器都可以使用。
我推薦使用Atom或者Visual Studio Code編輯器藻治。
床前明月光
下面是一個(gè)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>聲明這是一個(gè)HTML5（HTML的一個(gè)版本）文檔雏节。
<html>標(biāo)簽是HTML頁(yè)面的最根本的標(biāo)簽胜嗓，頁(yè)面的內(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ù)埃元，本例中，通過(guò)charset定義了文檔的編碼方式牵啦。
<body>標(biāo)簽描述了頁(yè)面的可見(jiàn)內(nèi)容亚情。
<h1>標(biāo)簽定義了文檔的一級(jí)標(biāo)題妄痪。
<p>標(biāo)簽定義了一個(gè)段落哈雏。
在瀏覽器中打開(kāi)，顯示如下：
在Chrome瀏覽器中衫生，在頁(yè)面上單擊右鍵裳瘪，選擇“查看網(wǎng)頁(yè)源代碼”，即可查看網(wǎng)頁(yè)源代碼罪针。
在Chrome瀏覽器中彭羹，在頁(yè)面上單擊右鍵，選擇“檢查”泪酱，即可進(jìn)入開(kāi)發(fā)人員工具箱派殷，可以在這里查看HTML源代碼。
標(biāo)題與段落
HTML中標(biāo)題通過(guò)<h1>-<h6>描述墓阀，共六級(jí)標(biāo)題毡惜，其中<h1>描述一級(jí)標(biāo)題，<h2>描述二級(jí)標(biāo)題……<h6>描述六級(jí)標(biāo)題斯撮。
使用<p>得到一個(gè)段落经伙。
下面是一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的標(biāo)題</title>
<meta charset="utf-8">
</head>
<body>
<h1>這是一個(gè)一級(jí)標(biāo)題</h1>
<h2>這是一個(gè)二級(jí)標(biāo)題</h2>
<p>這是一個(gè)段落</p>
<h2>這是一個(gè)二級(jí)標(biāo)題</h2>
<p>這是一個(gè)段落</p>
<h3>這是一個(gè)三級(jí)標(biāo)題</h3>
<p>這是一個(gè)段落</p>
</body>
</html>
在瀏覽器中打開(kāi)，顯示如下（下圖中左側(cè)顯示的是源代碼）：
<hr>標(biāo)簽創(chuàng)建一條水平線勿锅。
<br>標(biāo)簽在一個(gè)段落內(nèi)換行帕膜。
下面是一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的水平線與換行</title>
<meta charset="utf-8">
</head>
<body>
<h1>這是一個(gè)一級(jí)標(biāo)題</h1>
<hr>
<h2>這是一個(gè)二級(jí)標(biāo)題</h2>
<p>這是一個(gè)段落<br>
同一個(gè)段落中的換行</p>
<h2>這是一個(gè)二級(jí)標(biāo)題</h2>
<p>這是一個(gè)段落</p>
</body>
</html>
瀏覽器中顯示如下：
像<hr>和<br>這樣的標(biāo)簽稱為空標(biāo)簽，它們只有一個(gè)標(biāo)簽溢十，沒(méi)有區(qū)分開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽垮刹。之前講的<p>標(biāo)簽則不是空標(biāo)簽，它的開(kāi)始標(biāo)簽是<p>张弛，結(jié)束標(biāo)簽是</p>荒典。
注釋
在HTML中，將注釋放在``之間乌庶。
注釋幫助開(kāi)發(fā)人員了解程序种蝶，瀏覽器會(huì)自動(dòng)忽略他們。
<!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>
在上面的例子中盯滚，有三個(gè)注釋踢械。分別是：
- 文檔開(kāi)頭部分，是一個(gè)多行注釋魄藕，寫明了文檔標(biāo)題内列、時(shí)間和作者。
-
<h1>標(biāo)簽上面背率，內(nèi)容為題目话瞧。 - 第一個(gè)
</p>標(biāo)簽右邊，內(nèi)容為作者寝姿。
瀏覽器會(huì)自動(dòng)忽略注釋交排，所以瀏覽器中顯示如下：
鏈接
HTML使用超鏈接實(shí)現(xiàn)文檔與文檔的鏈接。
HTML使用<a>標(biāo)簽描述超鏈接饵筑，它的語(yǔ)法如下：
<a href="url">鏈接文本</a>
例如埃篓，
<a href="html_start.html">靜夜思</a>
在瀏覽器中，點(diǎn)擊文字靜夜思會(huì)跳轉(zhuǎn)到文件html_start.html根资。
下面是一個(gè)實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>關(guān)于月亮的古詩(shī)</title>
<meta charset="utf-8">
</head>
<body>
<h1>關(guān)于月亮的古詩(shī)</h1>
<p>點(diǎn)擊查看古詩(shī)<a href="html_start.html">靜夜思</a>架专。</p>
</body>
</html>
在瀏覽器中顯示如下：
點(diǎn)擊鏈接后會(huì)跳轉(zhuǎn)到指定的頁(yè)面：
可以在標(biāo)簽中設(shè)置屬性，屬性可以在標(biāo)簽中添加附加信息玄帕，屬性一般以名稱="值"的形式出現(xiàn)部脚。
屬性一般放在開(kāi)始標(biāo)簽中。
介紹<a>標(biāo)簽中的一個(gè)屬性：target桨仿。
在標(biāo)簽<a>中使用target屬性指定該鏈接的打開(kāi)方式睛低，比如_blank指定在新窗口中打開(kāi)鏈接：
<a target="_blank">百度一下</a>
這個(gè)例子中，點(diǎn)擊鏈接后會(huì)在新窗口中打開(kāi)百度服傍。
文本格式化
這里介紹5個(gè)文本格式化標(biāo)簽：<strong>钱雷、<em>、<sub>吹零、<sup>和<del>罩抗。
它們的作用如下：
-
<strong>，加重語(yǔ)氣灿椅。 -
<em>套蒂，著重文字。 -
<sub>茫蛹，下標(biāo)字操刀。 -
<sup>，上標(biāo)字婴洼。 -
<del>骨坑，刪除字。
下面是一個(gè)實(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中，可以使用有序列表和無(wú)序列表祟霍。
有序列表是一個(gè)項(xiàng)目列表杏头，由數(shù)字進(jìn)行標(biāo)記。
有序列表起始于<ol>標(biāo)簽浅碾，結(jié)束于</ol>標(biāo)簽大州，每一項(xiàng)使用<li>標(biāo)簽续语。
下面是一個(gè)有序列表的例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的有序列表</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML中的有序列表</h1>
<p>把大象放冰箱里分三步：</p>
<ol>
<li>把冰箱門打開(kāi)垂谢。</li>
<li>把大象放進(jìn)去。</li>
<li>把門關(guān)上疮茄。</li>
</ol>
</body>
</html>
在瀏覽器中打開(kāi)滥朱，如下：
無(wú)序列表也是一個(gè)項(xiàng)目列表，由小圓點(diǎn)進(jìn)行標(biāo)記力试。
無(wú)序列表起始于<ul>標(biāo)簽徙邻，結(jié)束于</ul>標(biāo)簽，每項(xiàng)用<li>標(biāo)簽畸裳。
下面是一個(gè)無(wú)序列表的例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的無(wú)序列表</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML中的無(wú)序列表</h1>
<p>形容場(chǎng)面熱鬧壯觀的詞：</p>
<ul>
<li>鑼鼓喧天</li>
<li>鞭炮齊鳴</li>
<li>紅旗招展</li>
<li>人山人海</li>
</ul>
</body>
</html>
在瀏覽器中打開(kāi)缰犁，如下：
表格
HTML中的表格使用<table>標(biāo)簽定義。
表格中的行使用<tr>標(biāo)簽定義怖糊，單元格使用<td>標(biāo)簽定義帅容。使用<th>定義表頭。
這是一個(gè)表格的例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML中的表格</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML中的表格</h1>
<h2>四象限法</h2>
<p>四象限法是一種時(shí)間管理方法伍伤，它最重要的工具是下面這一張表格：</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ū)挾壬罚J(rèn)情況下表格沒(méi)有邊框。
在操作表格中百侧，有時(shí)需要“合并單元格”操作砰识，這就需要使用rowspan和colspan屬性了能扒。
rowspan屬性定義一個(gè)單元格縱跨的表格行數(shù)，colspan屬性定義了一個(gè)單元格橫跨的表格列數(shù)辫狼。比如<td rowspan="2">表示該單元格縱向占兩行初斑，<td colspan="3">表示該單元格橫向占三列。
對(duì)于下面這個(gè)表格：
<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中添加圖像非常簡(jiǎn)單测摔，使用<img>標(biāo)簽。
<img src="media/rose.jpg" alt="玫瑰花" width="640" height="440">
在上面的語(yǔ)句中解恰，一共使用了四個(gè)屬性锋八，分別是：
-
src：指定圖片的地址。 -
alt：當(dāng)圖片無(wú)法加載時(shí)护盈，顯示此文本挟纱。 -
width：指定圖片的寬度。 -
height：指定圖片的高度腐宋。
在瀏覽器中顯示如下：
當(dāng)圖片無(wú)法加載時(shí)紊服，顯示如下：
使用<audio>在HTML文檔中插入音頻：
<audio controls>
<source src="media/A Himitsu - Adventures.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
例子中胸竞，<audio>表示這是一個(gè)音頻文件欺嗤，屬性controls表示顯示播放控件，比如暫停撤师、進(jìn)度條和音量等等剂府。
<source>有兩個(gè)屬性：
-
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)簽表明這是一個(gè)視頻文件痒谴，例子中它有三個(gè)屬性：
-
width：視頻的寬度衰伯。 -
height：視頻的高度。 -
controls：顯示控制組件积蔚。比如暫停意鲸、進(jìn)度條和音量等等。
接下來(lái)的<source>標(biāo)簽具有兩個(gè)屬性：
-
src：視頻文件的地址。 -
type：視頻文件的類型怎顾。
下面的您的瀏覽器不支持Video標(biāo)簽读慎。是當(dāng)瀏覽器不支持<video>標(biāo)簽時(shí)顯示的內(nèi)容。
在瀏覽器中顯示如下：
區(qū)塊
<div>是塊級(jí)元素槐雾，沒(méi)有特定的含義夭委，可以用作其他HTML元素的容器。
<span>是內(nèi)聯(lián)元素募强，這意味著它不會(huì)在新的一行顯示株灸，可以用作文本的容器。
表單
使用<form>標(biāo)簽定義一個(gè)表單：
<form>
...表單內(nèi)容
</form>
<input>是輸入標(biāo)簽擎值，它的屬性type定義輸入類型慌烧，下面是一個(gè)例子：
<form>
用戶名：<input type="text" name="username"><br>
密碼：<input type="password" name="password">
</form>
在瀏覽器中顯示如下（已經(jīng)輸入文字）：
name屬性是文本域的標(biāo)識(shí)。
同樣鸠儿，<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>
這個(gè)表單中有兩個(gè)單選框（radio）屹蚊，兩個(gè)復(fù)選框（checkbox）。
兩個(gè)單選框的name屬性一致捆交，都是sex淑翼，這意味著兩個(gè)單選框是一組，只能選其中一個(gè)品追；兩個(gè)復(fù)選的name屬性一致，表明他們是一組冯丙，但是可以按需選擇肉瓦。
在瀏覽器中顯示如下（已經(jīng)進(jìn)行選擇）：
下拉列表使用<select>標(biāo)簽進(jìn)行定義，每個(gè)選項(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">
請(qǐng)?jiān)谶@里輸入您的描述泞莉。
</textarea>
屬性rows指定文本框的行數(shù)，cols指定文本框的列數(shù)船殉。
瀏覽器中顯示如下：
最后鲫趁，我們需要一個(gè)提交按鈕，它在<input>標(biāo)簽中的類型是<submit>：
<form>
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
在瀏覽器中顯示如下：
事實(shí)上利虫，要讓提交按鈕正常工作挨厚，需要完成處理表單的頁(yè)面，這里不會(huì)進(jìn)行介紹糠惫。
