开始使用HTML

HTML指的是超文本标记语言（HyperText Markup Language），是用来描述网页的一种语言。

HTML使用标签来描述网页。

编辑器与浏览器

HTML文档实际上是纯文本文档，所以一般的文本编辑器都可以使用。

请不要使用Office、记事本等软件。

我推荐使用Atom或者Visual Studio Code编辑器。

浏览器我推荐使用Chrome或者Firefox。

床前明月光

下面是一个HTML实例：

<!DOCTYPE html>
<html>
<head>
    <title>静夜思（李白）</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>静夜思</h1>
    <p>李白</p>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</body>
</html>

实例中的第一行<!DOCTYPE html>声明这是一个HTML5（HTML的一个版本）文档。

<html>标签是HTML页面的最根本的标签，页面的内容包含在此标签中。

<head>标签用于定义文档的头部，它是所有头部元素的容器。在本例中，<title>标签和<meta>标签包含于<head>标签中。

<title>标签描述了文档的标题。

<meta>标签定义了文档的元数据，本例中，通过charset定义了文档的编码方式。

<body>标签描述了页面的可见内容。

<h1>标签定义了文档的一级标题。

<p>标签定义了一个段落。

在浏览器中打开，显示如下：

在浏览器中的“静夜思”

在Chrome浏览器中，在页面上单击右键，选择“查看网页源代码”，即可查看网页源代码。

在Chrome浏览器中，在页面上单击右键，选择“检查”，即可进入开发人员工具箱，可以在这里查看HTML源代码。

在Chrome中查看源代码

标题与段落

HTML中标题通过<h1>-<h6>描述，共六级标题，其中<h1>描述一级标题，<h2>描述二级标题……<h6>描述六级标题。

使用<p>得到一个段落。

下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML中的标题</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    <p>这是一个段落</p>
    <h2>这是一个二级标题</h2>
    <p>这是一个段落</p>
    <h3>这是一个三级标题</h3>
    <p>这是一个段落</p>
</body>
</html>

在浏览器中打开，显示如下（下图中左侧显示的是源代码）：

HTML中的标题

<hr>标签创建一条水平线。

<br>标签在一个段落内换行。

下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML中的水平线与换行</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>这是一个一级标题</h1>
    <hr>
    <h2>这是一个二级标题</h2>
    <p>这是一个段落<br>
    同一个段落中的换行</p>
    <h2>这是一个二级标题</h2>
    <p>这是一个段落</p>
</body>
</html>

浏览器中显示如下：

HTML中的水平线与换行

像<hr>和<br>这样的标签称为空标签，它们只有一个标签，没有区分开始标签和结束标签。之前讲的<p>标签则不是空标签，它的开始标签是<p>，结束标签是</p>。

注释

在HTML中，将注释放在``之间。

注释帮助开发人员了解程序，浏览器会自动忽略他们。

<!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>举头望明月，低头思故乡。</p>
</body>
</html>

在上面的例子中，有三个注释。分别是：

文档开头部分，是一个多行注释，写明了文档标题、时间和作者。
<h1>标签上面，内容为题目。
第一个</p>标签右边，内容为作者。

浏览器会自动忽略注释，所以浏览器中显示如下：

HTML中的注释

链接

HTML使用超链接实现文档与文档的链接。

HTML使用<a>标签描述超链接，它的语法如下：

<a href="url">链接文本</a>

例如，

<a href="html_start.html">静夜思</a>

在浏览器中，点击文字静夜思会跳转到文件html_start.html。

下面是一个实例：

<!DOCTYPE html>
<html>
<head>
    <title>关于月亮的古诗</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>关于月亮的古诗</h1>
    <p>点击查看古诗<a href="html_start.html">静夜思</a>。</p>
</body>
</html>

在浏览器中显示如下：

HTML中的链接

点击链接后会跳转到指定的页面：

在HTML中使用超链接跳转

可以在标签中设置属性，属性可以在标签中添加附加信息，属性一般以名称="值"的形式出现。

属性一般放在开始标签中。

介绍<a>标签中的一个属性：target。

在标签<a>中使用target属性指定该链接的打开方式，比如_blank指定在新窗口中打开链接：

<a href="http://www.baidu.com" target="_blank">百度一下</a>

这个例子中，点击链接后会在新窗口中打开百度。

文本格式化

这里介绍5个文本格式化标签：<strong>、<em>、<sub>、<sup>和<del>。

它们的作用如下：

<strong>，加重语气。
<em>，着重文字。
<sub>，下标字。
<sup>，上标字。
<del>，删除字。

下面是一个实例：

<!DOCTYPE html>
<html>
<head>
    <title>HTML文本格式化</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>HTML文本格式化</h1>
    <p>在HTML中，em表示内容的<em>着重点</em>，strong表示内容<strong>很重要</strong>。</p>
    <p>sub表示<sub>下标</sub>字。</p>
    <p>sup表示<sup>上标</sup>字。</p>
    <p>del表示<del>删除</del>字。</p>
</body>
</html>

浏览器中显示如下：

HTML中文本的格式化

列表

在HTML中，可以使用有序列表和无序列表。

有序列表是一个项目列表，由数字进行标记。

有序列表起始于<ol>标签，结束于</ol>标签，每一项使用<li>标签。

下面是一个有序列表的例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML中的有序列表</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>HTML中的有序列表</h1>
    <p>把大象放冰箱里分三步：</p>
    <ol>
        <li>把冰箱门打开。</li>
        <li>把大象放进去。</li>
        <li>把门关上。</li>
    </ol>
</body>
</html>

在浏览器中打开，如下：

HTML中的有序列表

无序列表也是一个项目列表，由小圆点进行标记。

无序列表起始于<ul>标签，结束于</ul>标签，每项用<li>标签。

下面是一个无序列表的例子：

<!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中的无序列表

表格

HTML中的表格使用<table>标签定义。

表格中的行使用<tr>标签定义，单元格使用<td>标签定义。使用<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>

浏览器中显示如下：

HTML中的表格

在本例中，表格一共有三行，其中第一行作为表头，单元格使用了<th>标签；剩下的两行，单元格使用了<td>标签。

可以看到，表格中使用<tr>描述行。

本例中<table>标签中的border属性确定了表格的边框宽度，默认情况下表格没有边框。

在操作表格中，有时需要“合并单元格”操作，这就需要使用rowspan和colspan属性了。

rowspan属性定义一个单元格纵跨的表格行数，colspan属性定义了一个单元格横跨的表格列数。比如<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>

它在浏览器中显示如下：

在HTML中“合并”单元格

例子中，表头今天的幸福横跨三列，所以属性为colspan="3"；单元格今天的幸福和2012纵跨三行，所以属性为rowspan="3"。

图像，音频，视频

在HTML中添加图像非常简单，使用<img>标签。

<img src="media/rose.jpg" alt="玫瑰花" width="640" height="440">

在上面的语句中，一共使用了四个属性，分别是：

src：指定图片的地址。
alt：当图片无法加载时，显示此文本。
width：指定图片的宽度。
height：指定图片的高度。

在浏览器中显示如下：

HTML中的图像

当图片无法加载时，显示如下：

HTML中图片无法加载时

使用<audio>在HTML文档中插入音频：

<audio controls>
    <source src="media/A Himitsu - Adventures.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

例子中，<audio>表示这是一个音频文件，属性controls表示显示播放控件，比如暂停、进度条和音量等等。

<source>有两个属性：

src：指定音频文件地址。
type：指定音频文件格式。

在浏览器中显示如下：

HTML中的音频

使用<video>在HTML文档中插入视频文件：

<video width="640" height="360" controls>
    <source src="media/Adventures - A Himitsu (No Copyright Music).mp4" type="video/mp4">
    您的浏览器不支持Video标签。
</video>

在上面的例子中，<video>标签表明这是一个视频文件，例子中它有三个属性：

width：视频的宽度。
height：视频的高度。
controls：显示控制组件。比如暂停、进度条和音量等等。

接下来的<source>标签具有两个属性：

src：视频文件的地址。
type：视频文件的类型。

下面的您的浏览器不支持Video标签。是当浏览器不支持<video>标签时显示的内容。

在浏览器中显示如下：

HTML中的视频

区块

<div>是块级元素，没有特定的含义，可以用作其他HTML元素的容器。

<span>是内联元素，这意味着它不会在新的一行显示，可以用作文本的容器。

表单

使用<form>标签定义一个表单：

<form>
...表单内容
</form>

<input>是输入标签，它的属性type定义输入类型，下面是一个例子：

<form>
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password">
</form>

在浏览器中显示如下（已经输入文字）：

HTML表单-文本域

name属性是文本域的标识。

同样，<input>标签也可以作为单选框或者复选框：

<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），两个复选框（checkbox）。

两个单选框的name属性一致，都是sex，这意味着两个单选框是一组，只能选其中一个；两个复选的name属性一致，表明他们是一组，但是可以按需选择。

在浏览器中显示如下（已经进行选择）：

HTML中的单选框和复选框

下拉列表使用<select>标签进行定义，每个选项使用<option>标签定义，属性selected表示此选项被预选：

<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>

浏览器中显示如下：

HTML中的下拉列表

文本输入框使用<textarea>标签：

<textarea rows="10" cols="30">
    请在这里输入您的描述。
</textarea>

属性rows指定文本框的行数，cols指定文本框的列数。

浏览器中显示如下：

HTML中的文本输入框

最后，我们需要一个提交按钮，它在<input>标签中的类型是<submit>：

<form>
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

在浏览器中显示如下：

HTML中的提交按钮

事实上，要让提交按钮正常工作，需要完成处理表单的页面，这里不会进行介绍。

开始使用HTML