什么是HTML

HTML，全称 Hyper Text Markup Language，又称作超文本标记语言。很多人误以为学习编程，就需要使用编程语言。No，在学习 HTML 之前，我们一定要清晰地知道 HTML 并不是一门编程语言，而是一门描述性的“标记语言”。

HTML 也是一种计算机语言，不仅可以将普通文本转换在 web 层面使用，还可以为普通的无结构文本提供结构，读者需要这种结构来帮助他们阅读。如果没有结构，单纯的文本将会汇合在一起，容易造成混淆。

HTML 是由一系列标签（tag）组成的，基本语法如下：
<标签符>文本内容</标签符>

标签符一般都是成对出现，包含一个开始符号和一个结束符号

1. 什么是网页？

网页其实就是放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到我们本地的电脑，然后再由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。

网页文件的后缀有很多种，比如.html、.php、.jsp、.asp等，相信读者在浏览器的地址栏里也都见到过，如下图所示：
在这里插入图片描述

但不管网页的后缀是什么，它的本质都是一样的，就是由 HTML 代码构成的纯文本文件。

我们可以使用记事本、Notepad++、Sublime Text、Vim 等文本编辑器打开网页文件，看到它的所有内容，就像下面这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
</head>
<body>
    <p>这是一段文本</p>
    <a href="http://c.biancheng.net/">这个一个超链接</a>
    <ul>
        <li>条目1</li>
        <li>条目2</li>
        <li>条目3</li>
    </ul>
</body>
</html>

这就是 HTML 代码！我们可以看到很多由<>包围的特殊标记，这叫做 HTML 标签（Tag），浏览器通过识别这些 HTML 标签来渲染出各种界面和效果。

每种 HTML 标签都有不同的含义，适用于不同的场景，能展示出不同的效果，例如：

< html> 标签用来包围当前网页的所有 HTML 代码，可以把它看做一个外壳。
< head> 标签表示网页的头部，用来设置一些网页的参数，在浏览器中是看不到的：
< meta charset=“UTF-8”> 用来指明当前网页的编码格式是 UTF-8；
< title> 用来设置当前网页的标题，相当于文件的名字，它会显示在浏览器的标题栏。
< body> 标签表示网页的正文内容，也就是需要在浏览器主界面中显示的内容：
< p> 标签用来表示一个段落，能容纳一段文本；
< a> 标签用来表示一个超链接，用鼠标点击后可以跳转到其它网页；
< ul> 标签用来表示一个列表，其中的每个
都是子标签，用来表示一个列表项。

将上面的代码保存到 index.html，拖到浏览器中运行，可以看到如下的效果：

这是一个非常简陋的网页，仅作为例子来演示，真实网页的 HTML 代码远比这复杂，你可以在网页上单击鼠标右键，然后在弹出菜单中选择“查看网页源代码”，就可以查看当前网页的 HTML 代码。
2. 什么是网站？
一个网站由很多网页组成，可以将多个网页放在一个文件夹中，这个文件夹还可以嵌套其它子文件夹，最终形成一个树状结构，如下图所示：
在这里插入图片描述

如果我们给顶级目录 program 绑定一个域名 www.domain.com，那么用户就可以通过 www.domain.com 来访问 program 文件夹中的所有文件（包括子文件夹），例如：
www.domain.com/demo.html
www.domain.com/python/
www.domain.com/java/spring.html
www.domain.com/java/maven/profile.html

可以认为，网站就是一个绑定了域名的文件夹，该文件夹中可以包含子文件夹以及各种各样的文件，这些文件都可以通过域名来访问。当我们在地址栏中输入一个 URL 时，它其实已经展示了服务器上的目录结构，例如 http://deom/linux/ln.html，就表示访问 linux 目录下的 ln.html 文件。

当然，你也可以不绑定域名，只要在服务器上设置某个文件夹提供 Web 服务，用户也可以通过 IP 地址来访问。

互联网上的所有服务器都是通过 IP 地址来定位的，域名只是 IP 地址的一种助记符，帮助用户记住网站的链接以及品牌。使用域名访问网站时，浏览器会先找到域名对应的 IP 地址，然后再通过 IP 地址请求服务器上的文件；这个过程叫做域名解析，是通过 DNS 服务器来完成的。

网站的作用是把计算机上的数据（文章、博客、图片、视频等）分享出去，让别人也能获取到有用的信息；同时，别人也能发布自己的数据（发布文章、留言、上传视频等），让网站的内容更加丰富。网站和用户之间是一个相互促进的关系，网站用户越多，积累的数据也就越多，然后就会吸引更多用户继续分享数据，这是一个良性循环，是一个健康的生态。

网站是互联网的基石，它让用户获取信息，也让用户分享信息，所以现在的互联网才能丰富多彩。

网站可以认为是放在服务器上的一个文件夹，它包含了很多网页文件以及很多子文件夹。用户访问网站就是读取文件的内容，用户分享数据就是修改文件的内容，或者删除现有的文件，或者创建一个新的文件。

好了，话不多说，咱们直接进入正题吧

如果是 HTML 初学者，建议在使用图片前新建一个存放图片的文件夹，方便后期图片的整理。这是一个良好的习惯。

开发过程中，经常使用图像来美化页面，图像已经成为大多数网站的一个重要组成部分。都说一图胜千言，好的图像有助于制作出精美的网站，从而与那些外观平平的网站区别开来。在 HTML 中，使用 < img> 标签来插入图像，其语法格式如下：
< img src=“url” />

< img> 是图片 image 的简称，它只包含属性，没有闭和标签。src 是它的必选属性，用来表示图片的路径来源。下面，我们来详细分析一下标签的 src 属性。

HTML 标签（插入图片）

开发过程中，经常使用图像来美化页面，图像已经成为大多数网站的一个重要组成部分。都说一图胜千言，好的图像有助于制作出精美的网站，从而与那些外观平平的网站区别开来。在 HTML 中，使用 < img> 标签来插入图像，其语法格式如下：

< img src=“url” />

< img> 是图片 image 的简称，它只包含属性，没有闭和标签。src 是它的必选属性，用来表示图片的路径来源。下面，我们来详细分析一下 < img> 标签的 src 属性。

1. src属性

src 是 source 的简称，用来声明图像文件的来源，也就是定义图片的引用地址。图片可以是.jpg、.png、.gif等多种格式，引用地址可以是相对 url，也可以是绝对 url。下面我们来看两个示例。

引用网络图片

可以这样引用网络图片：

< img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994"/>

运行结果如下图所示：

c语言中文网logo

引用本地图片

如果在项目的当前文件中，想要引入上一层 image 目录下的一张图片 logo.jpg，可以这样引用：

< img src="../image/logo.jpg"/>

运行结果如下图所示：

c语言中文网logo

此处../可以进入上一层目录，然后进入 image 文件夹，最后找到 img.jpg。

提示：图片的名称尽量不要使用中文，否则即使路径正确，浏览器也可能无法识别，从而显示不出图片。

1.2 其他属性

前面讲述了 < img> 标签的必选属性 src，接下来再看一下它的可选属性。< img> 标签常用的可选属性有alt、title、width以及height等，我们来分别看一下：

alt 属性用来对图像进行文本说明。一般情况下，当浏览器因某种原因无法载入图像时，就会显示这段文本。虽然 alt 属性值可以为空，但还是建议读者给 alt 属性设置符合图像信息的文本；
title 用来设置鼠标移动到图片上的提示文字。它的值一般与 alt 的值相同，最大的区别是显示的前提条件不同，alt 属性是图片加载失败后显示，而 title 属性则是图片加载成功后鼠标放到它上面才显示；
width 用来设置图片的宽度，使用时不需要加单位，默认是像素（px）；
height 用来设置图片的高度，和 width 一样在使用时不需要加单位，默认是像素（px）。

具体使用方法如下：

< img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994"       width="200"        height="200"       title="这是C语言中文网的logo"       alt="这是C语言中文网的logo" />

在浏览器中运行结果如下图所示：

C语言中文网logo

在这段代码中，首先引入了文件的路径，紧接着对图片的宽高进行了设置，均是 200px；其次又设置了 title 属性，当鼠标移动到图片上时，会显示 title 的内容；最后设置了 alt，当图片加载不出来会显示 alt 的内容。

建议读者为页面上的图像都加上 alt 属性，这样不仅有助于更好的显示信息，而且对于那些使用屏幕阅读软件（存在视觉障碍的人使用的一类软件）的人来说帮助很大。

1.3. 总结

从上面的讲述中我们可以收获以下几点内容：

src 表示图片的引用地址，这个地址可以是相对 url，也可以是绝对 url；
alt 表示图片加载失败时显示的内容；
title 表示鼠标移动到图片上时显示的文字；
width 表示图片的宽，默认单位是像素（px）；
height 表示图片的高，默认单位也是像素（px）。

HTML < a>标签（超链接）

在 HTML 中，我们使用 < a> 标签来表示超链接。

超链接（Hyperlink）是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成，超链接使得网页之间不再独立，它就像一根线，把网页连接在一起，形成一个网状结构。互联网之所以能够称之为“网”，就是因为有超链接的存在。

< a> 标签的语法格式如下：

< a href=“url” target=“opentype”>链接文本

其中，href 属性用来指明要跳转到的 url，target 属性用来指明新页面的打开方式，链接文本需要写在 < a> 和 < /a> 之间。

例如，链接到C语言中文网首页可以这样写：

<a href="http://c.biancheng.net" target="_blank">C语言中文网</a>:

链接到C语言中文网里面的一个 HTML 页面可以这样写：

<a href="http://c.biancheng.net/view/7410.html" target="_blank">网站到底是什么</a>

下面，我们来详细分析一下 < a> 标签的各个属性。

1. href 属性

href 属性指定链接的目标，也就是要跳转到什么位置。href 可以有多种形式，例如：

href 可以指向一个网页（.html、.php、.jsp、.asp等格式），这也是最常见的形式，例如 href=“http://c.biancheng.net/view/1719.html”；
href 可以指向图片（.jpg、.gif、.png 等格式）、音频（.mp3、.wav等格式）、视频（.mp4、.mkv格式）等媒体文件，例如 href="/uploads/allimg/181221/134I32557-0.jpg"；
href 可以指向压缩文件（.zip、.rar等格式）、可执行程序（.exe）等，一些下载网站的链接就可以写成这种形式，例如 href="./…/uploads/data_package/ComputerFoundation.zip"；
href 甚至还可以指向本机的文件，只是很少这样使用，例如 href=“D:/Program Files/360/360safe/360Safe.exe”。

你看，href 本质上就是指向一个文件，这个文件几乎可以是任意格式的。如果浏览器支持这种格式，那么它就可以在浏览器上显示，比如常见的图片、音频、视频等，如果浏览器不支持这种格式，那么就提示用户下载。

另外，href 使用的路径可以是绝对路径，也可以是相对路径。绝对路径往往以域名为起点，例如 http://www.baidu.com/view/1719.html；相对路径往往以当前文件或者当前域名为起点，例如 ./…/uploads/data_package/ComputerFoundation.zip。

2. target属性

在创建网页时，默认情况下，超链接在当前的浏览器窗口打开，但是我们可以使用 target 属性来改变目标窗口的打开方式。常见的打开方式如下表所示：

属性值	说明
_self	默认，在现有的窗口中打开新页面，原窗口将被覆盖。
_blank	在新的窗口中打开新页面。
_parent	在当前框架的上一层打开新页面。
_top	在顶层框架中打开新页面。

绝大部分情况下，target 属性要么不写，保持默认的 _self，要么把它的值设置为 _blank，在新的窗口中打开链接。例如：

<!DOCTYPE html>
<html lang="en"><head>  
  <meta charset="UTF-8">  
  <title>a标签</title></head>
  <body>  
      <a href="http://c.biancheng.net/" target="_blank">C语言中文网（新窗口打开）</a>  
      <a href="http://c.biancheng.net/">C语言中文网（现有窗口打开）</a>
 </body>
</html>

运行结果如下图所示：

a标签打开窗口方式

这两种效果在浏览器预览中看不出来区别，但是当我们点击一下超链接，会发现它们的窗口打开方式是有区别的，请读者自己试一试。

3. < a>标签的默认样式

1) 鼠标样式

当鼠标移入网页上的某个超链接时，其样式会变为一只小手；当鼠标移出超链接区域时，样式会再次回到箭头形状。

2) 颜色及下划线

任何 HTML 元素都有默认的样式，< a> 标签也不例外。在浏览器下，超链接被点击后颜色会发生改变：超链接被点击之前是蓝色的，点击之后会变成紫色。

超链接默认是带下划线的，下划线颜色和文本颜色保持一致。浏览器根据历史记录来判断超链接是否被点击过，如果 < a> 标签的 href 属性和历史记录中的某条 URL 重合，那就说明该链接被点击了，否则是没有被点击的。所以，清空浏览器的历史记录会让超链接的颜色再次变回蓝色。

URL结构解析

1. URL的构成

URL 遵守一种标准的语法，它由协议、主机名、域名、端口、路径、以及文件名这六个部分构成，其中端口可以省略。具体语法规则如下：

scheme://host.domain:port/path/filename

在上述语法规则中，scheme 表示协议，host 表示主机名，domain 表示域名，port 表示端口（可以省略），path 表示文件的路径，filename 表示文件名称。接下来我们详细看一下这几部分到底是如何使用的。

1) 协议

协议用来指明客户端和服务器之间通信的类型。我们经常用到的协议有四种：http、https、ftp 以及 file。这四种协议的使用场景如下表所示：

协议使用场景

协议	使用场景
http（HyperText Transfer Protocol）	超文本传输协议。http 协议可以将编码为超文本的数据从一台计算机传送到另一台计算机，不进行加密。
https（HyperText Transfer Protocol over SecureSocket Layer）	安全超文本传输协议。以安全为目标的 http 通道，安全网页，加密所有信息交换。
ftp（File Transfer Protocol）	文件传输协议。
file	本机上的文件。

2 主机名

主机名可以向浏览器提供文件站点的名称。www 是我们常见的主机名，例如百度的网址 https://www.baidu.com/、淘宝的网址 https://www.taobao.com/ 使用的都是 www 的主机名。除此之外，还有很多网站使用的是其它主机名。例如C语言中文网的网址 http://c.biancheng.net/ 的主机名是c，网易云音乐的网址 https://music.163.com/ 的主机名是 music。

3 域名

域名和主机名一起使用，被用来定义服务器的地址。Web 服务器遵守数字网际协议（Internet Protocol，IP），每一台连接到因特网的计算机都有一个固定的 IP 地址。域名即 IP 地址的别名，因为一般的 IP 地址都是长串的数字，为了方便记忆所以使用域名进行替代。简单来说，没有域名（IP）我们就不能上网。

4 端口

端口用来定义主机上的端口号。如果不写，http 的默认端口号是 80，https 的默认端口号是 443，ftp 的默认端口号是 21。还是拿 C语言中文网举例说明，不论用户输入 http://c.biancheng.net/ 还是 http://c.biancheng.net/:80，浏览器都会解析为 C语言中文网的链接。

5 路径

路径指定服务器上文件的所在位置。就像我们自己在计算机上保存文件时所指定的文件夹一样，Web 服务器上的文件也有可能是存放在子目录（就是文件夹中的子文件夹）中的。如果是这样，路径中的相邻文件夹需要使用斜线（/）隔开。例如 http://www.baidu.com/view/views/7410.html 这个网址，它的路径就是 /view/views。

6 文件名

文件名用来定义文档或资源的名称。和路径类似，路径指的是文件夹，而它指的是文件夹中的文件。网页文件的后缀有很多种，比如.html 、.php、 .jsp、.asp等。

协议需要与 URL 的其它部分用://隔开。百度的网址后面的.com以及 C语言中文网的.net又称作域后缀（扩展名），用于表明该主机所在的域的类型。

HTML块级元素及行内元素

在 HTML 中，标签（tag）通常又被称作元素（element）。例如 < a> 标签又叫做 < a> 元素，< p> 标签也叫作 < p> 元素。

HTML 元素根据其表现形式可以分为 2 种：

块级元素
行内元素

任何 HTML 元素都属于这两者中的任意一种。

提示：块级元素和行内元素的概念极其重要，同时也是学习 CSS 的基础知识之一，请读者不要忽略。

1. 块级元素

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表：

块级元素	说明
div	最典型的块元素
p	表示段落
h1-h6	表示1-6级标题（默认加粗）
br	表示换行
ol	有序列表
ul	无序列表

2. 行内元素

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：

行内元素

行内元素	说明
a	超链接
span	常用行级
strong	加粗，强调
b	加粗，不强调
em	斜体，强调
i	斜体，不强调
img	图片
input	输入框
select	下拉列表

1 实例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素与行内元素</title>
</head>
<body>
    <div>div标签（块级标签）</div>
    <p>p标签（块级标签）</p>
    <span>span标签（行内标签）</span>
    <a href="#">a标签（行内标签）</a>
</body>
</html>

在浏览器中运行效果如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yr6SFHBV-1610100667565)(http://c.biancheng.net/uploads/allimg/200410/10-2004101J049362.png)]

通过运行结果可以发现，< div> 标签和 < p> 标签分别独占一行，因为它们是块级元素；而 < span> 标签和 < a> 标签在同一行中显示，因为它们是行内元素。

注意，这里我们说的独占一行是指元素在浏览器中的运行效果，并不是在编辑器中独占一行。在编辑器中，不论怎么书写代码，都不会影响它在浏览器中的运行效果。

3. 元素的嵌套

HTML 中的各个元素之间是可以互相嵌套的，例如：

块元素可以嵌套块元素
块元素可以嵌套行内元素
行内元素可以嵌套行内元素
行内元素可以嵌套块元素

值得注意的是我们不建议在行内元素中嵌套块元素，这样不仅不符合开发规范，还会导致行内元素也独占一行。

下面来看一段元素之间互相嵌套的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素间的嵌套</title>
</head>
<body>
    <!-- 块级元素嵌套块级元素 -->
    <div>
        <p>p标签（块级元素）</p>
        <div>div标签（块级元素）</div>
    </div>
    <!-- 块级元素嵌套行内元素 -->
    <div>
        <span>span标签（行内元素）</span>
    </div>
    <!-- 行内元素嵌套 -->
    <span>
        <span>span标签（行内元素）</span>
        <a href="#">a标签（行内元素）</a>
    </span>
</body>
</html>

浏览器运行效果如下图：

元素间的嵌套

4. 总结

块级元素的宽度是 100%，在浏览器中默认独占一行。
行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
块级元素内部可以嵌套块级元素或行内元素。
建议行内元素里面只嵌套行内元素。

HTML有序列表+无序列表+定义列表

在网站开发过程中，我们经常会使用到列表（list）。列表可以将若干条相关的内容进行整理，让内容看起来更加有条理。例如，C语言中文网首页的「推荐阅读」、「精品教程」以及「最近更新」中的内容都使用了列表进行排列。接下来咱们看一下列表的具体使用方法。

HTML 为我们提供了 3 种不同的列表：

有序列表
无序列表
定义列表

1. 有序列表

在 HTML 中， < ol> 标签用来表示有序列表。有序列表之间的内容有先后顺序之分，例如菜谱中的一系列步骤，这些步骤需要按顺序完成，这时就可以使用有序列表。

我们来看一个简单的实例：

<!DOCTYPE html><html lang="en"><head>  
<meta charset="UTF-8">   
<title>HTML有序列表</title></head>
<body>  
    <!-- 有序列表 --> 
    <ol>    
    <li>先将水煮沸</li>    
    <li>加入一勺米</li>     
    <li>搅拌均匀</li>   
    </ol>
</body>
</html>

在浏览器中运行效果如图所示：

HTML有序列表

上述代码中使用了 < ol>、< li> 标签，接下来我们来分别看一下这两个标签：

< ol> 是 order list 的简称，表示有序列表。它可以为列表的每一项进行编号，默认从数字 1 开始；
< li> 是 list item 的简称，表示列表的每一项。列表中还可以包含文本或其它元素，甚至是新的列表。< ol> 中有多少个 < li> 就表示有多少条内容。

提示：在使用 < ol> 时，它一般和 < li> 配合使用，不会单独出现。而且不建议在 < ol> 中直接使用除 < li> 之外的其他标签。

2. 无序列表

在 HTML 中，我们使用

标签来表示无序列表。无序列表和有序列表类似，都是使用
标签来表示列表的每一项，但是无序列表之间的内容是没有顺序的。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。

实例：

<!DOCTYPE html><html lang="en"><head>  
<meta charset="UTF-8">  
<title>HTML无序列表</title></head>
<body> 
    <!-- 无序列表 -->  
    <ul>    
    <li>鸡蛋</li>  
    <li>牛奶</li>    
    <li>面包</li>  
    </ul>
</body>
</html>

浏览器运行结果如图所示：

HTML无序列表

上述代码中使用了 < ul>、< li> 标签，那么我们来分别看一下这两个标签又是什么含义呢？

< ul> 是 unordered list 的简称，表示无序列表。默认情况下，无序列表的每一项都使用●符号表示；
< li> 同 < ol> 中的 < li> 一样，它也表示列表中的每一项。

提示：< ul> 一般和 < li> 配合使用，不会单独出现。而且不建议在 < ul> 中直接使用除 < li> 之外的其他标签。

3. 定义列表

在 HTML 中，

标签用于创建定义列表。它是由定义标题和定义描述两部分组成的，而且至少要包含一条定义标题或定义描述。一般情况下，当要展示的列表形式包括标题和描述两部分时，使用定义列表再合适不过了。

具体语法格式如下：

< dl>
< dt>定义标题< dt>
< dd>定义描述< dd>
< dd>定义描述< dd>
< dd>定义描述< dd>
< /dl>

上述代码中使用了 < dl>、< dt> 及 < dd> 标签，我们来分别看一下这三个标签：

< dl> 是 definition list 的简称，表示定义列表；
< dt> 是 definition term 的简称，表示定义术语，也就是我们常说的定义标题。一般情况下，每个定义标题都会对应若干条定义描述；
< dd> 是 definition description 的简称，表示定义描述。定义描述一般是对定义标题的解释说明。

请读者注意此处的 < dt>、< dd> 是同级标签，都是 < dl> 的子标签。

具体使用场景如下示例：

<!DOCTYPE html>
<html lang="en"><head>    
<meta charset="UTF-8">    
<title>HTML定义列表</title>
</head>
<body>    
    <!-- 定义列表 -->    
    <dl>        
        <dt>Web前端简介</dt>        
        <dd>HTML（超文本标记语言）</dd>        
        <dd>CSS（层叠样式表）</dd>        
        <dd>JavaScript（脚本语言）</dd>    
    </dl>       
    <dl>        
        <dt>C语言中文网</dt>        
        <dd>HTML教程</dd>       
        <dd>CSS教程</dd>      
        <dd>JavaScript教程</dd>  
    </dl>
</body>
</html>

浏览器运行效果如下图：

定义列表

通过运行结果可以发现，< dt>、< dd> 标签的联系与区别：

都在浏览器中独占一行，属于块级元素；
< dt> 充当了列表的标题，多个 < dt> 之间可以没有关系；
一般情况下，< dd> 标签中间的内容是对 < dt> 的描述。

提示：< dl> 一般与 < dt> 或 < dd> 配合使用，不会单独出现。不建议在 < dl> 中直接使用除 < dt>、< dd> 之外的其他标签。

4. 总结

列表分类	说明
有序列表	< ol> 表示有序列表，< li> 表示列表中的每一项，默认使用阿拉伯数字编号。
无序列表	< ul> 表示无序列表，配合 < li> 实现，默认使用`●`符号显示。
定义列表	< dl> 与< dt>、< dd> 配合实现，< dt> 充当列表的标题，< dd> 是对 < dt> 的解释说明。

绝对路径和相对路径

我们在使用 HTML 中的 < a> 标签、< img> 标签、< link> 标签以及 < script> 标签时往往会涉及到路径。例如 < a> 标签，如果我们在写路径时，使用了错误的路径，就会导致跳转失败，为了避免这种情况，我们需要学习一下 HTML 的路径。在 HTML 中，路径具体分为绝对路径和相对路径。

提示：< img> 、< link>、< script>标签我们会面陆续讲到。其中，< img> 标签用来引入图片，< link> 标签用来引入 CSS 样式，< script> 标签用来引入 js 文件。此处只需了解即可。

1. 绝对路径

绝对路径分为本地绝对路径和网络绝对路径两种。本地绝对路径一般指从盘符开始，到文件名称结束；网络绝对路径指从网站的域名开始，到文件名结束，在使用时需要加上协议。绝对路径之所以称为绝对，是指当所有页面引用同一个文件时，使用的路径都是一样的。

示例如下：

①D:/Hbulider/HBuilder/tools/nview/index.js
②C:/Users/admin/Desktop/C语言中文网/url/url.html
③http://www.baidu.com/view/7410.html
④http://www.baidu.com:80/view/7410.html
⑤http://www.baidu.com

我们来具体分析一下：

① 和 ② 表示本地绝对路径，因为它们是从盘符开始的；
③ ④ ⑤表示网络绝对路径，其中，③ 和 ④ 表示的地址是相同的（因为 http 默认端口号是 80，而且可以省略），类似于 ⑤ 这种省略路径和文件名的 url 属于特例，浏览器在解析时会自动解析项目里的 index.html 文件。

2. 相对路径

相对路径与绝对路径类似，不同的是在描述目录或文件路径时，所采用的参考点不同。绝对路径以域名或盘符为参考点，到文件名称结束；相对路径以当前文件位置为参考点，到文件名称结束。

接下来，我们看一个示例。假设读者现有的项目目录如下图所示：

相对路径目录结构

目前有一个需求，在 index.html 页面中有一个 < a> 标签，点击它要跳转到 login.html，那么我们可以怎么实现呢？

毫无疑问，可以使用上面讲过的绝对路径 < a href=“http://demo/html/login.html”>< /a> 来跳转到 login.html；此处我们还可以使用相对路径实现。具体有以下几种方式：

< a href="./html/login.html">跳转到login.html
< a href=“html/login.html”>跳转到login.html
< a href="…/html/login.html">跳转到login.html

在上述3种方式中，我们使用了 ./ 以及 …/，接下来看一下他们分别代表什么呢？

./ 表示同级目录；
…/ 表示上一级目录， …/…/ 表示上两级目录，以此类推。

其中，./可以省略不写，也就是说./html/login.html与html/login.html被浏览器解析为同一个路径。

相对路径的写法可以有多种，我们只需要把./以及../代表的含义搞清楚，就可以应对所有的相对路径。

HTML < table>标签（表格）

在 HTML 中，我们使用 < table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。

在学习表格之前，我们不妨先来看一段简单的 HTML 代码：

<table border="1">
   <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
   </tr>
   <tr>
     <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
   </tr>
    <tr>
     <td>百度</td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
     </tr>
   <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
    </tr>
</table>

运行效果如下图：

普通table表格

这是一个 4 行 3 列的表格。第一行为表头，其余三行为内容。

在上述代码中，我们使用了< table>、< tr>、< td> 及 < th> 四个标签：

< table> 表示表格，表格的所有内容需要写在 < table> 和 < /table> 之间。
< tr> 是 table row 的简称，表示表格的行。表格中有多少个 < tr> 标签就表示有多少行数据。
< td> 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
< th> 是 table heading 的简称，表示表格的表头。< th> 其实是 < td> 单元格的一种变体，本质上还是一种单元格。< th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。

默认情况下，表格是没有边框的。但是我们可以使用 < table> 标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中我们将表格的边框宽度设置为 1px。注意，px 是默认的单位，不用显式指明。

1. 表格的边框合并：

细心的读者可能已经发现了，网页中常见的表格样式大多为单层边框，上例中展示的表格为双层边框。为了避免这种情况，我们可以利用 CSS 中的 border-collapse 属性来设置表格的边框。border-collapse 是“边框塌陷”的意思，当属性值为 collapse 时，可以使表格的双边框变为单边框。

示例代码如下：

<table border="1" style="border-collapse: collapse;">
   <tr>
      <th>名称</th>
      <th>官网</th>
      <th>性质</th>
    </tr>
    <tr>
       <td>C语言中文网</td>
      <td>http://c.biancheng.net/</td>
      <td>教育</td>
     </tr>
    <tr>
        <td>百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
   </tr>
   <tr>
       <td>当当</td>
      <td>http://www.dangdang.com/</td>
      <td>图书</td>
   </tr>
</table>

运行效果如下图所示：

表格的边框合并

2. 表格的标题

HTML 允许使用 < caption> 标签来为表格设置标题，标题用来描述表格的内容。

我们常见的表格一般都有标题，表格的标题使用 < caption> 标签来表示。默认情况下，表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题，也就是说 < table> 标签中只能有一个 < caption> 标签。

请看下面的例子：

<table border="1" style="border-collapse: collapse;">
  <caption>这是表格的标题</caption>
  <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
  </tr>
   <tr>
     <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
  </tr>
  <tr>
     <td></td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
  </tr>
  <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
  </tr>
</table>

浏览器运行结果如图：

带标题的表格

3. 单元格的合并

和 Excel 类似，HTML 也支持单元格的合并，包括跨行合并和跨列合并两种。

rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

具体格式如下：

< td rowspan=“n”>单元格内容< /td>
< td colspan=“n”>单元格内容< /td>

n 是一个整数，表示要合并的行数或者列数。

此处需注意，不论是 rowspan 还是 colspan 都是 < td> 标签的属性。

下面的例子中，我们将表格第 1 列的第 3、4 行单元格合并（跨行合并），将第 4 行的第 2、3 列合并（跨列合并）。具体代码如下：

<table border="1" style="border-collapse: collapse;">
    <tr>
       <th>名称</th>
     <th>官网</th>
     <th>性质</th>
    </tr>
    <tr>
      <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
    </tr>
    <tr>
      <td rowspan="2">百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
    </tr>
    <tr>
      <td colspan="2">http://www.dangdang.com/</td>
    </tr>
</table>

运行效果如图：

合并单元格的表格

通过运行结果可以发现：

rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。
每次合并 n 个单元格都要少写 n-1 个< td>标签。

提示：即使一个单元格中没有任何内容，我们仍需使用 < td> 或 < th> 元素来表示一个空单元格的存在，建议在 < td> 或 < th> 中加入（空格），否则低版本的 IE 可能无法显示出这个单元格的边框。

HTML锚点链接

锚点链接是超链接中的一种。锚点的妙处之一在于，你可以使用它链接到文档中的某个特定位置。例如，有些网页内容较多，页面过长，用户需要不停的使用浏览器上的滚动条来查看文档中的内容。这时为了增强用户体验，可以在网页中插入锚点链接。

锚点链接的具体使用场景有 2 种：

跳转到当前页面的指定位置
跳转到其他页面的指定位置

1. 跳转到当前页面的指定位置

在浏览网页时，用户通过点击锚点链接就可以跳转到当前页面的指定位置。这个位置可以是任意的，例如我们经常会看到网页中有一个回到顶部的功能，点击它，可以迅速回到网页的顶部，使用的就是锚点链接。下面我们来看一下用代码如何实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点链接</title>
</head>
<body>
    <p id="content"></p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <a href="#content">回到顶部</a>
</body>
</html>

在上述代码中，使用了两步来完成锚点的具体操作：

在要跳转到的位置所在的标签中添加了id属性，并为其赋值；
使用 < a> 标签设置锚点，href 属性值为#+id属性值。

运行结果如下图所示：

点击回到顶部

通过比较地址栏的变化可以发现，当点击锚点链接后，页面回到了#content的位置。这样写虽然也可以实现迅速回到顶部功能，但在实际开发过程中有更加简便的方法。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点链接</title>
</head>
<body>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <p>这是页面内容</p>
    <a href="#top">回到顶部</a>
</body>
</html>

点击锚点链接后，运行结果如下图所示：

锚点链接

通过滚动条可以发现，页面回到了顶部。我们来观察此时的地址栏，地址栏中为#top，其中#表示位置信息，网页的顶端默认是#top，所以如果是跳转到浏览器的顶端，不需要写锚点的第一步操作,，也就是说不需要为标签设置 id 属性。

注意：href 属性中的 top 也可以省略，不影响正常使用。

2. 跳转到其他页面的指定位置

使用锚点链接，也可以跳转到其他页面的指定位置。与跳转到当前页面的指定位置相比，它需要在#前加上要跳转到的页面的路径。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index页面</title>
</head>
<body>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <p>index页面</p>
    <h2 id="index">这是h2标题</h2>
</body>
</html>
纯文本复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点链接</title>
</head>
<body>
    <a href="./index.html#index">跳转到index页面</a>
</body>
</html>

运行结果如下图所示：

跳转到其他页面

在 < a> 标签中，href 属性指向了 index.html 页面中 id 为 index 的标签。点击后，发生相应的跳转。

HTML的基本结构

在学习 HTML 的基本结构之前，我们先来看一段简单的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
</body>
</html>

这些由<（左尖角号）、内容以及>（右尖角号）组成的叫做标签（tag），三者缺一不可。在 HTML 中，使用<>包围标签的目的是方便将它们与普通文本进行区分。

上述代码描述的是 HTML 的基本结构，主要使用了 <!DOCTYPE>、< html>、< head>、< title> 以及 < body> 等标签。我们来分别看一下：

是 Document Type Declaration 的简称，用来声明文档，也就是告知 web 浏览器当前页面使用了哪种 HTML 版本编写代码，此处使用的是 HTML 5 的版本。声明文档必不可少，而且必须位于 HTML 文档的第一行；
< html> 表示页面编写的代码都是 HTML 代码。它是成对出现的标签，直到 </ html> 结束。除了声明文档外的所有代码都必须写在 < html>< /html> 中间；
< head> 表示页面的"头部"，页面的 title（标题）一般写在 < head></ head> 中间；
< title> 表示页面的标题；
< body> 表示页面的"身体"，页面中的绝大部分内容都可以写在 < body></ body> 之间。

HTML 中的标签根据闭合状态可以分为 2 种，单闭合标签和自闭和标签。接下来看一下它们之间的区别。

1. 单闭合标签

HTML 基本结构中的 <html></html>、<head></head>、<title></title> 以及 <body></body> 标签都属于单闭合标签。其中 <html>、<head>、<title> 以及<body>标签叫做起始标签，</html>、</head>、</title> 以及 </body> 标签叫做结束标签。由此我们可以看出，单闭合标签是指起始标签和结束标签同时存在的标签。

2. 自闭和标签

自闭和标签与单闭合标签的区别在于，它的结束标签可以使用/（结尾斜线）替代，直接写在起始标签的尾部。例如图像标签可以写成，换行标签 < br> 可以写成 < br />。在后面的讲述中我们会讲解 < img /> 标签以及 < br />，这里只需要了解。

HTML < head>标签

上一节我们介绍了 HTML 的基本结构，在 HTML 的基本结构中，使用 < head> 标签来定义头部的内容。接下来我们一起看一下 < head> 标签内部又可以放哪些内容（或标签）呢？

请读者先看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="expires" content="31 Dec 2090">
    <title>文档的标题</title>
    <link rel="stylesheet" href="url">
    <style></style>
    <script src="url"></script>
</head>
<body>
</body>
</html>

从这段代码中我们可以看出，< meta>、< title>、< link>、< style> 以及 < script> 标签是可以放在 < head> 标签内部的，我们来分别解释一下各个标签的含义。

标签会在下一节进行详细讲解。

1. < title>标签

< title> 标签用来表示文档的标题，我们通过一段简单的代码来加以说明：

<!DOCTYPE html><html lang="en">
<head> 
   <title>文档的标题</title>
   </head>
   <body>  </body>
   </html>

运行效果如下图所示：

title文档的标题

2. < link>标签

在 HTML 中，允许使用 < link> 标签配合 href 属性来引用外部 CSS（Casecading Style Sheets）文件，其中 href 属性值为外部 CSS 文件的路径。在 CSS 章节中会详细进行讲解，这里不做过多解释。

3. < style>标签

<style> 标签同 <link> 标签类似，不同的是，<link> 标签是引用外部 CSS 样式文件，而 <style> 标签则是用来在内部编写 CSS 样式。

我们建议在 < head> 标签中使用 < link> 或 < style> 标签，而不是在其他标签中使用。
当浏览器加载页面时，会自上而下执行代码。如果这两个标签写的靠近下方，在加载页面样式时，
可能会有短暂的延迟，影响用户使用效果。

4. < script>标签

<script> 标签用来引入外部文件。与 <link> 标签不同的是，
<script> 标签配合 src 属性引入外部 JavaScript 文件，
而 <link> 标签则是配合 href 属性引用外部 CSS 文件。
一个是使用 href，另一个是使用 src，那么它们到底有什么区别呢？

5. href与src的区别

src 是 source 的简写，表示来源地址，用来引入地址中的内容。引入的内容会嵌入到当前标签所在的位置，所以浏览器在解析引入文件时，会停止对后续文档的处理，直到 src 的内容加载完毕。
href 是 Hypertext Reference 的简写，表示超文本引用。在使用 href 时，浏览器不会停止解析当前文件。因为 href 属性中的内容只是与当前页面有关联，然后当前页面对它进行一次引用。

提示：以上讲到的标签不是必须写在 < head>< /head> 里面，只是 < head> 里面可以写入这些标签。例如， < script> 标签我们就不建议写在 < head>< /head> 内部，因为浏览器在解析 src 的路径时会停下对后续文档的处理，造成页面的短暂阻塞。

HTML < form>标签（表单）

从传统意义上讲，"表单"这个词指代的是一个文档，这个文档中有一些空白区域可供用户填写信息。区别于传统意义上的表单，HTML 中的表单不仅可以供用户填写信息还可以为用户提供信息。

例如，C语言中文网的登录或注册页面使用的就是表单。当用户填写了相应信息后，这些信息就会经过表单服务器被提交到网站的后台，后台管理人员可以经过一系列操作拿到用户输入的信息来判断是否允许用户登录或注册。接下来我们看一下在网页中是如何使用表单的。

1. 简述< form>标签

HTML 中规定，使用 < form> 标签来表示表单。我们都知道表格的行、列及单元格需要放在 < table>< /table> 标签中，表单里的元素也不例外，同样需要放在 < form>< /form> 标签中。< form> 标签有几个常用的属性，见下表：

常用属性	属性值	说明
action	url	用户点击提交按钮时，表单被提交到的位置。
method	get / post	表单提交时所使用的 http 请求方法，只能是 get 或 post 中的任意一种。
name	自定义	表单的名称，不能包含特殊字符和空格。

具体语法如下：

< form action=“url” method=“post” name=“formName”>

此处使用提交方法为post，还可以设置为get。我们来看一下两者之间有什么区别：

get ：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，get提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
post：如果表单包含密码这种敏感信息，建议使用post方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

get提交

2. < form>标签所有属性

以上我们列举的是 < form> 标签的常用属性，接下来看一下它的所有属性：

所有属性	描述
action	规定用户点击提交按钮时，表单被提交到的位置。
method	规定表单提交时所使用的 http 请求方法，只能是 get 或 post 中的任意一种。
name	定义表单的名称，不能包含特殊字符和空格。
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

如果某个文档要加入多个表单，< form> 标签不可以互相嵌套。

HTML < meta>标签

标签内的信息不会显示在页面中，定义标签的主要目的是因为它对机器是可读的。标签有很多功能，它可以定义文档中的关键字，也可以对文档进行描述，还可以配合自身的属性设置网页的过期时间等等。当我们定义了页面的关键字或者描述信息后，搜索引擎蜘蛛（也就是常说的网络爬虫）就可以利用它们来搜索这个页面的信息。下面来看一下标签的常用属性：

<meta> 标签内的信息不会显示在页面中，定义
<meta> 标签的主要目的是因为它对机器是可读的。
<meta> 标签有很多功能，它可以定义文档中的关键字，也可以对文档进行描述，还可以配合自身的属性设置网页的过期时间等等。当我们定义了页面的关键字或者描述信息后，搜索引擎蜘蛛（也就是常说的网络爬虫）就可以利用它们来搜索这个页面的信息。
下面来看一下 <meta> 标签的常用属性：

name属性

name 属性可以用来定义网页的关键字、描述、作者以及版权信息等等。我们来看一下它的常用属性值：

常用属性值	说明
keywords	用来定义网页的关键字。关键字可以是多个，之间需要用英文逗号`,`隔开。
description	用来定义网页的描述。
author	用来定义网页的作者。
copyright	用来定义网页的版权信息。

当 name 属性规定好这些信息后，后面还需紧跟 content 属性设置具体的内容，这样才可以生效。具体使用语法如下：

<meta name="keywords"   content="<head>标签描述">
<meta name="description"   content="这篇文章主要对<head>标签进行详细讲解">
<meta name="author"   content="author">
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则将追究法律责任。">

charset属性

charset 是 HTML 5 中的新属性，用来定义页面的编码格式。它的常用属性值见下表：

常用属性值	说明
ISO-8859-1	表示网页的默认编码格式。
UTF-8	表示万国码，是目前最常用的编码格式。
gb2312	表示国际汉字码，不包含繁体。
gbk	表示国家标准扩展版。增加了繁体，包含所有亚洲字符集。

具体代码如下所示：

<head>  
<meta charset="UTF-8">  
<meta charset="gb2312">  
<meta charset="ISO-8859-1"> 
<meta charset="gbk">
</head>

以上为语法演示，在使用时根据需求，只使用其中一个即可。

http-equiv属性

所有主流浏览器都支持 http-equiv 属性。它可以设置网页的过期时间，自动刷新等，有以下几个常用属性值：

常用属性值	说明
expires	设置网页的过期时间。
refresh	设置网页自动刷新的时间间隔，单位是秒。
content-type	定义文件的类型，用来告诉浏览器该以什么格式和编码来解析此文件。

我们通过一段简单的代码来看一下如何使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html">
    <meta http-equiv="expires" content="Dec 20 2090">
    <meta http-equiv="refresh" content="1000">
    <title>Document</title>
</head>
<body>
</body>
</html>

Document

上面使用了 < meta> 的几个常用属性，我们来看一下：

< meta charset=“UTF-8”> 设置了网页的编码格式为 utf-8
< meta http-equiv=“content-type” content=“text/html”> 用来告诉浏览器本网页编写的是 HTML 代码，需要用 HTML 的格式来进行解析。在下面会附上 content-type 常用文件类型值讲解；
< meta http-equiv=“expires” content=“Dec 20 2090”> 定义网页于 2090 年 12 月 20 日过期；
< meta http-equiv=“refresh” content=“1000”> 设置了页面每隔 1000 秒就会进行一次刷新。

设置了网页的编码格式为 utf-8；用来告诉浏览器本网页编写的是 HTML 代码，需要用 HTML 的格式来进行解析。在下面会附上 content-type 常用文件类型值讲解；定义网页于 2090 年 12 月 20 日过期；设置了页面每隔 1000 秒就会进行一次刷新。

我们可以看出，http-equiv 属性和 name 属性一般与 content 属性配合使用，有点类似固定搭配。以上只是 < meta> 标签常用的属性，实际上它的属性远远不止这些，但是到目前为止，我们只需会用上面讲过的这几个属性即可。

content-type常用属性值

常用属性值	说明
text/html	表示该文档是 HTML 格式的文档。
text/plain	表示该文档是纯文本格式的文档。
text/xml	表示该文档是 XML 格式的文档。
image/gif	表示该文档是 gif 图片格式的文档。
image/jpeg	表示该文档是 jpg 图片格式的文档。
image/png	表示该文档是 png 图片格式的文档。

HTML < input>标签

在HTML 中，< form> 标签内部有 4 种元素，分别是 input、option、select 以及 textarea 元素。本节我们先来对 input 元素进行整体介绍。

1. input元素

很多表单元素都是由一个个的 input 元素组成的。它是自闭合标签，根据其 type 属性值的不同分为很多种，例如单行文本框、密码框、单选按钮、复选框、隐藏域、文件上传域、普通按钮、提交按钮以及重置按钮等。我们先来看一下它的语法格式：

< input type=“表单类型” />

接下来再看一下 type 常用属性值：

常用属性值	说明
text	表示单行文本框
password	表示密码框
hidden	表示隐藏域
radio	表示单选按钮
checkbox	表示复选框
file	表示文件上传域
button	表示普通按钮
submit	表示带提交功能的按钮
reset	表示带重置功能的按钮

具体使用方法请看如下代码：

<body>
    <form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
        用户名:<input type="text" name="name"><br/>
        密码:<input type="password" name="password"><br/>
        性别:<input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女<br/>
        爱好:读书<input type="checkbox" name="read" value="read">
        跑步<input type="checkbox" name="run" value="run">
        逛街<input type="checkbox" name="shopping" value="shopping">
        看电影<input type="checkbox" name="movie" value="movie"><br/>
        隐藏域<input type="hidden"  name="hidden"><br/>
        文件上传域<input type="file" name="file" src="url"><br/>
        <input type="submit" value="提交">
        <input type="button" value="确定">
        <input type="reset" value="重置">
    </form>
</body>

因为提交信息中含有密码字段，所以本次提交选用的是"post"请求。运行结果如下图：

input元素

上述代码中使用了 type 属性中的 text、password、radio、checkbox、hidden、file、submit 以及 reset。我们来分别看一下：

text 表示常规文本框，一般用来输入一些对用户可见的文字。
password 表示密码框，输入的内容对用户不可见。
radio 表示单选按钮。当 type 属性值为 radio 时，必须为其指定相同的 name 属性值，否则实现不了单选的效果。
checkbox 表示复选框，可以选择多条内容。
hidden 表示隐藏域，在页面中对于用户是不可见的。在表单中插入隐藏域可以方便收集或发送信息。当表单提交时，隐藏域的信息也被一起提交。
file 表示上传文件域，src 属性表示文件的路径。
submit 表示提交按钮，默认值为提交，也可以根据需求使用 value 属性进行设置。点击按钮后，表单中的值会提交到预先设定好的 url 中。
button 表示普通按钮，没有提交功能。默认没有 value 值，需要手动设置，如果需要提交，建议使用 submit 按钮。
reset 表示重置按钮，同 submit 一样也有默认 value 值，默认为重置。点击按钮后，表单中填写的所有数据将被清空。

细心的读者已经发现，我们为每一个字段都设置了 name 属性，那么为什么这么做呢，不这样做行不行？

2. name属性

当用户向表单输入信息时，服务器需要知道这个数据到底输入到了表单的哪个字段（控件）。例如登录页面，服务器需要知道哪条数据是作为用户名输入的，哪条数据是作为密码输入的。因此，HTML 规定如果表单要想正确地被提交给表单处理器，必须为每个字段都设置 name 属性。如果未设置，默认不提交其数据信息。

3. disabled属性

如果为标签的某个控件设置了disabled="disabled"，表示将禁用该控件，使其不能再获得焦点或被修改。被禁用后，它的值不会提交到后台。如果是按钮被禁用，它的点击效果就会失效。

示例如下：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
      用户名:<input type="text" name="name" disabled="disabled" value="username"><br/>
      密码:<input type="password" name="password" disabled="disabled"><br/>
</form>

运行结果如图所示：

disabled属性

通过运行结果可以发现，预先设置好的 value 值可以正常显示，但是不能更改其内容。

4. readonly属性

readonly 属性表示只读。它有以下特点：

一般用在单行文本框和密码框中；
控件的值可以显示，但不能修改；
控件可以获取焦点；
如果有预先设置好的值，会一起提交到服务器。

HTML单行文本框

在 HTML 中，把 < input> 标签的 type 属性设置为 text 可以表示单行文本框，又叫做常规文本框。具体语法格式如下：

< input type=“text” />

接下来我们看一个具体的例子：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
    用户名:<input type="text" name="username" value="C语言中文网"/>
</form>

运行效果如图所示：

单行文本框

通过运行结果可以发现，文本框中的值为定义的 value 属性的值。当需要告知用户某一栏数据时，我们通常这样写。如果只是想获取用户输入的数据，通常不设置 value 属性值，由用户自行输入。

注意：文本框的默认数据用户可以进行删除、修改，也可以让它继续保持现有值，提交时会按照文本框现有内容进行提交。

当 < input> 标签作为单行文本框使用时，除了 value 属性还可能用到以下两个属性：

1 maxlength属性

在 < form> 表单中，允许使用 maxlength 属性设置文本框中最多可以输入的字符数量（包括空格）。如果我们要对年龄输入框设置，可以这样写：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
     年龄:<input type="text" name="age" maxlength="3" />
</form>

我们都知道，年龄没有超过三位数的，所以我们为年龄文本框设置最多可以输入 3 字符，当用户输入第 4 个字符时，不再允许输入。

2) size属性

size 属性用来定义文本框可见的字符数。可以这样使用：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
     年龄:<input type="text" name="age" size="3" />
</form>

与 maxlength 不同的是，size 定义的是文本框可见的字符数，当用户输入的字符数超出这个值时，还可以输入只是不再显示。

不建议为文本框设置 size 属性，目前很少有人这么做。如果需要，应该使用 CSS 设置文本框的宽度。

HTML密码框

在 HTML 中，把 < input> 标签的 type 属性设置为 password 可以表示密码框。具体语法格式如下：

< input type=“password” />

接下来我们看一个具体的例子：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
       密码:<input type="password" name="psd">
</form>

运行效果如图所示：

密码框

从运行结果来看，密码框在外观上和单行文本框相同，但是两者之间是有区别的：

单行文本框输入的字符可见；
密码框输入的字符不可见，会被▪代替。请读者自己试一试。

注意：密码框设置输入字符被▪代替的原因，只是防止用户周围的人看到密码，后台是可以拿到输入的内容的。

密码框同单行文本框一样，也有 maxlength、 value 以及 size 等属性。接下来我们看一下：

1 maxlength属性

maxlength 属性表示密码框最多可以输入的字符数量。如果我们需要设置用户输入的密码不得超过 6 位，可以这样写：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
       密码:<input type="password" name="psd" maxlength="6">
</form>

进行设置后，当用户输入的密码大于 6 位，不再允许输入。

2 value属性

value 属性用来表示密码框的默认值，一般密码都是由用户自行输入的，但是有的情况我们需要给用户一个默认密码，就可以这样写：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
       密码:<input type="password" name="psd" value="123456">
</form>

运行效果如图所示：

带密码的密码框
图2：键入了默认密码的密码框

通过运行结果可以发现，默认的密码"123456"被▪代替。

3 size属性

同单行文本框中的 size 属性相同，也表示文本框可见的字符数。

注意：一般我们只需设置 maxlength 来限制用户输入的密码不大于多少位，不使用 size 属性。

HTML单选按钮

在 HTML 中，把 < input> 标签的 type 属性设置为 radio 可以表示单选按钮。具体语法格式如下：

< input type=“radio” />

同单行文本框和密码框一样，单选按钮要想被正确提交，也必须设置 name 属性。除了 name 属性之外，单选按钮还有几个其它属性，我们来看一下。

1. 单选按钮其它属性

其它属性	说明
checked	用来规定在页面加载时应该被预先选定的 input 元素。
value	用来定义被选中时发送到服务器的值。同一组中每个按钮的值应该不同，这样服务器才能辨别提交的是哪一项。
id	规定 HTML 元素的唯一 id。id 值在整个页面是唯一的，不会重复。

1) checked属性

checked 属性用来设置页面加载时单选按钮的选中状态。当属性值为“checked”时，单选按钮会被选中。下面我们通过一个简单的示例来进行演示：

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性别：<input type="radio" name="girl" checked="checked">女
       <input type="radio" name="boy" checked="checked">男
</form>

运行结果如图所示：

name属性值不同的单选按钮

从运行结果可以看出，两个单选按钮都被选中。读者可能会考虑是因为我们同时给两个单选按钮设置了checked="checked"属性，其实还有一个原因，两个单选按钮的 name 属性值不同也会产生这样的结果。

注意：当 type 属性值为 radio 时，name 属性值必须保持一致。本例只是为了演示问题才会为所有按钮加checked="checked"属性，在实际开发中不会这样写。checked="checked"可以简写为 checked。

2 name属性

上述代码因为 name 属性值不同，两个单选按钮被同时选中。接下来我们就来看一下当 name 属性值相同时，给两个按钮都设置选中，会产生什么效果：

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性别：<input type="radio" name="sex" checked>女
       <input type="radio" name="sex" checked>男
</form>

运行结果如图所示：

单选按钮

通过运行结果可以发现，后面的按钮被选中，而前面的按钮没有。这是因为当 name 属性值相同而且 type 属性为 radio 时，浏览器会认为是相同字段，默认只能选择一个。然而又因为我们为两个按钮同时设置了选中效果，根据代码的执行顺序后者会覆盖前者。

3 value属性

上面我们提到了单选按钮也有 value 属性，接下来就来看一下该如何使用它呢？我们来看一段代码:

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性别：<input type="radio" name="sex" value="girl">女
       <input type="radio" name="sex" value="boy" checked="checked">男
</form>

运行效果如图所示：

带属性值的单选按钮

通过运行结果发现，value 值并不会显示在页面中。之所以建议为每个按钮添加 value 值，是因为最终提交表单时，服务器可以根据 value 属性值辨别提交的是哪一项。

4 id属性

在为单选按钮设置 id 属性时，一般有 3 种用途：

配合 < label> 标签使用；
通过 JavaScript 获取元素，对元素进行一系列操作；
通过 CSS 选择元素，为其添加样式。

本节中，我们将讲述第一种。那么我们就来看一下 id 属性是如何与标签配合使用的：

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
        性别：<input type="radio" name="girl" value="girl" id="girl"><label for="girl">女</label>
        <input type="radio" name="girl" value="boy" id="boy" checked="checked"><label for="boy">男</label>
</form>

通过以上代码可以发现，< label> 标签中的 for 属性与 < input> 元素的 id 属性值相同，我们可以说它们之间进行了一个绑定。那么 < label> 标签到底是用来做什么的呢？

< label> 标签主要用来为 < input> 元素定义标记，又因为 < label> 标签中的 for 属性可以与 < input> 元素的 id 属性进行绑定，所以当点击 < label> 标签中的内容（< label for=“girl”>女< /label>）时，也相当于对 < input> 中的元素（< input type=“radio” name=“girl” value=“girl” id=“girl”>）进行了点击。

运行结果如下图所示：

与label标签绑定的单选按钮

从运行结果来看没有任何变化，但是当读者点击 < label> 标签中的“男”或“女”时，会发现对应的按钮也会有相应变化。这是在开始时没有加 < label> 标签时所做不到的。

我们建议每个单选按钮都和 < label> 标签配合使用，一是为了用户体验，二是为了在后期使用 JavaScript 语言操作数据时更方便。

要想单选按钮被正确提交到后台，必须为每个字段设置 name 属性；
当 < input> 标签用作单选按钮时，其 name 属性值必须相同，这样浏览器才会认为是同一个字段，从而实现单选效果；
value 属性值不会显示在页面上，但是在提交数据时，后台接收的是我们设置的 value 属性值；
< label> 标签用来为 < input> 元素定义标记，当 < label> 标签中的 for 属性与 < input> 元素的 id 属性绑定时，点击 < label> 标签中的内容，也相当于点击了 < input> 中的元素。

HTML复选框

在 HTML 中，把 < input> 标签中的 type 属性设置为 checkbox 可以实现多选框的效果。具体语法格式如下：

< input type=“checkbox” />

1. 复选框的常用属性

常用属性	说明
checked	用来规定在页面加载时应该被预先选定的 input 元素，当属性值为 checked 时，可以省略。
value	用来定义被选中时发送到服务器的值。同一组中每个按钮的值应该不同，这样服务器才能辨别提交的是哪一项。
id	规定 HTML 元素的唯一 id。id 值在整个页面是唯一的，不会重复。

1 checked属性

checked 属性用来设置页面加载时复选框的选中状态。当属性值为“checked”时，对应的复选框会被选中。下面我们通过一个简单的示例来进行演示：

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     爱好：<input type="checkbox" name="running" checked>跑步
     <input type="checkbox" name="reading" checked>阅读
     <input type="checkbox" name="shopping" checked>购物
</form>

运行结果如图所示：

复选框

通过运行结果可以发现，当 name 属性值不同且为复选框都设置checked时，它们都被选中。那么如果我们为 name 属性设置相同的值，会是什么效果呢？

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     爱好：<input type="checkbox" name="running" id="run" checked>跑步
     <input type="checkbox" name="running" id="read" checked>阅读
     <input type="checkbox" name="running" id="shop" checked>购物
</form>

运行结果如图所示：

name值相同复选框

与我们预期的结果可能不太一样：在为单选按钮设置相同的 name 属性值时，只有一个可以被选中，而复选框都被选中了，那么我们是不是可以随便设置复选框的 name 属性呢？当然是不建议的，因为后台在获取用户输入数据时，如果 name 属性相同，很容易混淆。

2 value属性

复选框也有 value 属性，我们来看一下使用方法：

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     爱好：<input type="checkbox" name="running" checked value="run">
     <input type="checkbox" name="reading" checked value="read">
     <input type="checkbox" name="shopping" checked value="shop">
</form>

运行结果如图所示：

复选框

通过运行结果可以发现，与单行文本框和密码框不同，复选框的 value 值并不显示在页面上。建议为复选框设置不同的 value 属性值，这样在数据提交时，后台可以非常清楚的知道提交的是哪个字段。

3 id属性

为复选框设置 id 属性的目的与单选框相同，共分为 3 种：

配合 < label> 标签使用；
通过 JavaScript 获取元素，对元素进行一系列操作；
通过 CSS 选择元素，为其添加样式。

第一种使用方法：

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     爱好：<input type="checkbox" name="running" id="run" checked value="run"><label for="run">跑步</label>
     <input type="checkbox" name="reading" id="read" checked value="read"><label for="read">阅读</label>
     <input type="checkbox" name="shopping" id="shop" checked value="shop"><label for="shop">购物</label>
</form>

运行结果如图所示：

带id属性的复选框

复选框中的 < label> 标签和单选按钮中的 < label> 标签使用方法相同，分为 2 点：

< label> 标签主要用来为 < input> 元素定义标记；
当 < label> 标签和 for 属性配合使用时， for 属性指向< input>元素的 id 属性。当点击 < label> 标签的内容时，< input> 元素也有相应变化。

我们建议所有的复选框都与 < label> 标签配合使用，一是为了用户体验，二是为了在使用 JavaScript 语言操作数据时更加方便。

复选框可以多选，不限制选中的数量；
复选框要想被正确提交，必须设置 name 属性，而且每个复选框的 name 属性值和 value 属性值都建议不同；
复选框建议与 < label> 标签配合使用；
< label> 标签中的 for 属性指向复选框的 id 属性，类似绑定。

HTML文件上传域

文件上传是网站中一种常见的功能。例如百度网盘、QQ 邮箱以及有道云笔记都可以实现文件的上传。在 HTML 中，把 < input> 标签的 type 属性设置为 file 就可以实现上传文件的功能，又叫做文件上传域。具体语法格式如下：

< input type=“file” />

接下来我们看一下怎样才能实现文件的正确上传呢？具体代码如下：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
     <input type="file" name="file" accept="image/png"/><br/>
     <input type="submit"/>
</form>

上传文件时，需要把 method 属性设置为 post（get 方式不能提交文件）。

上述代码中，使用了 < form> 标签的 enctype 属性以及 < input> 标签的 accept 属性，我们来分别看一下：

1. enctype属性

enctype 属性规定被提交数据的编码。如果提交数据中包含文件时，需要把标签的 enctype 属性设置为 multipart/form-data。如果不这样设置，文件将无法正常提交。具体代码如下：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
     <input type="file" name="file"/><br/>
     <input type="submit"/>
</form>

运行结果如图所示：

html文件上传域

当然仅仅设置< form> 标签的 enctype 属性是不够的，如果要保证文件可以正确提交给表单服务器，还需要设置文件的类型，这时就需要使用 accept 属性。

2. accept属性

当 < input> 标签的 type 属性为 file 时，使用 accept 属性可以规定上传文件的类型。具体代码如下：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" accept="image/png"/>
</form>

此处规定上传的文件只能是.png格式的图片。如果想上传.pdf格式的图片，需要修改 accept 的属性值。

上传文件的类型有很多种，我们在文章的末尾会附上常用的文件类型。

如果 accept 的属性值为多个，它们之间需要用逗号隔开。

根据以上内容，我们总结出上传文件需要注意的 2 点：

把 < form> 标签的 enctype 属性设置为 multipart/form-data；
使用 < input> 标签的 accept 属性来设置上传文件的类型。

然而这样编写代码只能实现每次上传一个文件，如果想实现一次上传多个文件，还要用到 < input> 标签的 multiple 属性。

3. multiple属性

当给上传文件字段设置了 multiple 属性时，就表示可以同时选择多个文件一起上传。我们来看具体的代码：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" accept="image/png" multiple />
</form>

这时我们就可以一次性选择多个.png格式的图片文件，如图所示：

选择多个文件

通过运行结果可以发现，当选择多个文件时，浏览器显示的是文件个数而不再是文件名称。

4. 常用的文件类型

常用文件类型	对应的 accept 属性值
.jpg	image/jpg
.png	image/png
.gif	image/gif
.jpeg	image/jpeg
.html	text/html
.css	text/css
.js	text/javascript、application/javascript
.txt	text/plain
.zip	application/zip
.mp4	audio/mp4、video/mp4

HTML 标签（文本域）

在 HTML 中，使用 < textarea> 标签来表示多行文本框，又叫做文本域。与其它 < input> 标签不同，< textarea> 标签是单闭合标签，它包含起始标签和结束标签，文本内容需要写在两个标签中间。具体语法格式如下：

< textarea>文本内容< /textarea>

接下来我们通过一段简单的代码来看一下：

<form action="http://vip.biancheng.net/register.php" method="post">
    描述信息：<textarea name="description">此处是描述信息</textarea>
</form>

运行效果如图所示：

HTML文本域

通过运行结果可以发现，文本域的右下角有一个收缩按钮，拖拽按钮可以手动改变文本域的宽高。这个按钮默认显示，也可以隐藏，我们来看一下怎么隐藏它呢？

<form action="http://vip.biancheng.net/register.php" method="post">
    描述信息：<textarea name="description" style="resize:none;">此处是描述信息</textarea>
</form>

注意：此处用到的是 CSS 样式中的内容，读者只需了解即可。当收缩按钮隐藏后，不能手动调节文本域的宽高。

同所有表单元素相同，文本域要想正确提交，也必须设置 name 属性。除了 name 属性以外，文本域还有其它属性，接下来我们看一下：

其他属性	说明
cols	用来指定每行显示的字符数。
rows	用来指定正常情况下（没有滚动条）显示的文本行数。
id	用来定义文本域的唯一 id 属性。

1. cols属性

cols 属性用来指定每行可以显示的字符数，也就是文本域的可见宽度。一般情况下，如果内容超出文本域宽度，会自动换行显示，但是如果文本内容较长，而且在大于文本域宽度时，还没有空格可以进行换行，就会出现横向滚动条。

我们来看一个示例：

<form action="http://vip.biancheng.net/register.php" method="post">
  HTML教程描述：<textarea name="description" cols="40">这套「HTML教程」可以帮助读者快速入门，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。</textarea>
</form>

运行结果如图所示：

HTML文本域

通过运行结果可以发现，当文本内容超出了文本域的宽度时，会自动换行显示。这时，出现了纵向的滚动条是因为高度不够。下面我们就来学习一下如何设置文本域的高度。

2. rows属性

在文本域中，rows 属性用来设置文本域的可见行数，也就是文本域的高度。当文本内容超出设置高度时，会出现纵向滚动条。用户拖动滚动条可以查看全部内容。

示例如下：

<form action="http://vip.biancheng.net/register.php" method="post">
  HTML教程描述：<textarea name="description" cols="40" rows="6">这套「HTML教程」可以帮助读者快速入门，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。</textarea>
</form>

运行结果如图所示：

HTML文本域

通过运行结果可以看出，当文本高度小于文本域高度时，不会出现纵向滚动条。

注意：除了使用 rows、cols 属性设置文本域的宽高，css 也可以实现

3. id属性

id 属性用来定义文本域的唯一 id 值。为文本域添加 id 属性，主要有以下 2 个方面：

在 css 中，可以使用 id 获取元素为其添加 css 样式；
在 JavaScript 中，可以根据设置好的 id 属性获取文本域，然后对它进行一系列操作，例如操作文本域的内容。

HTML 标签（下拉列表）

下拉列表是网页中一种最节省页面空间的选择方式，默认状态下只显示一个选项，只有单击下拉按钮后才能看到全部的选项。例如，淘宝网首页的选择地区一栏，用到的就是下拉列表，我们来看一下：

HTML下拉列表
图1：淘宝网的下拉列表

我们都知道无序列表由 < ul>< li> 配合使用，有序列表由 < ol>< li> 配合使用。HTML 下拉列表与它们类似，是由 < select>< option> 配合使用的。具体语法格式如下：

< select>
< option>< /option>
< /select>

其中，< select> 标签用来创建一个下拉列表，< option> 标签表示下拉列表中的每一项（条目）。接下来我们看一个示例：

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select>
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

运行结果如图所示：

HTML下拉列表

我们先来看一下 < select> 标签的属性。

1. < select>标签属性

1name属性

同所有其它表单元素相同，下拉列表要想被正确提交，也需要设置 name 属性。代码如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select name="selectList">
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

运行结果如图所示：

HTML下拉列表

通过运行结果可以发现，name 属性并不会显示在页面上。下拉列表的 name 属性同标签的 name 属性作用相同，主要用来提交数据。

2 size属性

在文章的开始我们提到过，下拉列表默认状态下只显示一个选项。如果需要让页面显示多个选项，就要使用 size 属性。我们来看一下具体的使用方法：

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select name="selectList" size="4">
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

谷歌浏览器的运行结果：

HTML下拉选

再来看一下 IE 浏览器的运行结果：

HTML multiple属性

通过比较运行结果我们可以发现，不同浏览器对于一些标签会有不同的样式设置。

3 multiple属性

下拉列表默认只允许选择一个选项，如果允许用户选择多个，就要用到 multiple 属性。当 multiple 属性值等于 multiple 时，表示允许用户选择多个选项。我们来看一下具体使用方法：

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select name="selectList" multiple="multiple" size="4">
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

运行结果如图所示（谷歌浏览器）：

HTML multiple属性

注意：此时只需按住ctrl+鼠标左键就可以选择多个选项。multiple=“multiple” 可以简写为 multiple。

4) disabled属性

disabled 属性可以禁用下拉列表，使其不能再获得焦点或被修改。被禁用后，它的值不会提交。具体使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select name="selectList" multiple="multiple" size="4" disabled>
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

运行结果如图所示：

下拉列表禁用

通过运行结果可以发现，下拉列表的每一项都被“灰化”（gray-out）了，而且不可以被选择。

上述为 < select> 标签的属性，接下来我们看一下 < option> 标签的属性。

2. < option>标签属性

1) selected属性

在为 < select> 标签设置了 multiple 属性后，就可以通过 < option> 标签的selected="selected"实现某一项的预先选中。具体使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select name="selectList" multiple>
         <option selected="selected">18岁以下</option>
         <option>18-28岁</option>
         <option selected="selected">28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

运行结果如图所示：

selected

通过运行结果可以发现，设置了selected="selected"属性的项被预先选中，呈深灰色。

2 value属性

< option> 标签的 value 属性用来定义当下拉列表在提交时，发送给服务器的值。value 值并不会显示在页面上。使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
    年龄区间： 
    <select name="selectList" multiple>
        <option selected="selected" value="underage">18岁以下</option>
        <option value="teens">18-28岁</option>
        <option selected="selected" value="youth">28-38岁</option>
        <option value="more">38岁以上</option>
    </select>
</form>

运行结果如图所示：

selected

3) disabled属性

< option> 标签也有 disabled 属性，不同于 < selected> 标签的 disabled 属性，它只能禁用列表中的某一项。

实际上，multiple 和 size 这两个属性只要设置了其中一个，下拉列表就可以显示多项。如果只设置 size，而不设置 multiple，得到的是一个不允许多选但是可以显示多项的下拉列表；
< select> 标签的 name 属性不显示在页面上，主要用来提交数据；
< option> 标签的 value 属性也不显示在页面上，主要用来定义提交给服务器的值；
< option> 标签的 disabled 属性禁用的是列表中的某一项；
< select> 标签的 disabled 属性禁用的是整个列表。

- HTML按钮

在 HTML 中，按钮分为 3 种：

普通按钮
提交按钮
重置按钮

1. 普通按钮

普通按钮默认没有提交功能，它只是一个可点击的小装置，一般情况下，需要配合 JavaScript 脚本才能实现具体的功能。在 HTML 中，把 < input> 标签的 type 属性设置为 button 用来表示普通按钮。具体语法格式如下：

< input type=“button” />

普通按钮没有默认内容，我们需要使用 value 属性为其设置具体内容。代码如下：

<form action="http://vip.biancheng.net/login.php" method="post">
    <input type="button" value="普通按钮"/>
</form>

运行结果如图所示：

HTML普通按钮

2. 提交按钮

提交按钮可以看成是一种具有特殊功能的普通按钮。当单击提交按钮时，会对表单的内容进行提交。在 HTML 中，当< input> 标签的 type 属性值为 submit 时，用来表示提交按钮。具体语法格式如下：

< input type=“submit” />

我们通过一段简单的代码来看一下：

<form action="http://vip.biancheng.net/login.php" method="post">
    <input type="submit"/>
</form>

运行结果如图所示：

HTML提交按钮

在上述代码中，我们并没有为提交按钮设置 value 值。但是通过运行结果可以发现，提交按钮是有默认值的，默认为提交。如果需要改变其默认值，只需要设置 value 属性即可。

注意：表单中的字段需要设置 name 属性才可以进行提交，但是提交按钮的 name 属性可以根据需求进行设置，一般情况下不使用。当点击提交按钮后，表单中含有 name 属性的数据会发送到表单服务器，后台经过操作便可以拿到用户输入的内容。

3. 重置按钮

重置按钮也可以看成是一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在表单中输入的信息。把 < input> 标签的 type 属性设置为 reset 用来表示重置按钮。重置按钮也有默认值，默认值为重置。具体语法格式如下：

< input type=“reset” />

示例如下：

<form action="http://vip.biancheng.net/login.php" method="post">
  用户名 <input type="text" name="username" value="C语言中文网"/>
  密码：<input type="password" name="psd" value="123456"/>
  <input type="reset"/>
</form>

运行结果如图所示：

HTML重置按钮

接下来我们看一下点击重置按钮后的效果：

HTML重置按钮

通过运行结果发现，数据没有清空。这是为什么呢？

这里需要注意的是，reset 按钮只能清空用户在表单中输入的内容，对于提前设置好的内容不会清空。

不同浏览器对于一些标签会有不同的样式设置，以上均使用谷歌浏览器。

HTML图像按钮

在 HTML 中，把 < input> 标签的 type 属性设置为 image 可以表示图像按钮。具体语法格式如下：

< input type=“image” src=“url” />

我们还可以把图像按钮分为图像、按钮两部分来看，因为它既有图像的特点（需要使用src属性为图片添加路径），又有按钮的特点（图像按钮的行为基本上与提交按钮一致，点击它也可以实现表单数据的提交）。

图片的路径可以是相对路径，也可以是绝对路径。具体使用方法请参考

示例如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg"/>
</form>

运行结果如图所示：

HTML图像按钮

当我们点击图片按钮后，表单中的相应内容会提交。

1. 图像按钮属性

同 < img> 标签一样，图像按钮也有 alt 属性：

1 alt属性

alt 属性用来对图像进行文本说明。一般情况下，当浏览器因某种原因无法载入图像时，就会显示这段文本。虽然 alt 属性值可以为空，但还是建议读者给 alt 属性设置符合图像信息的文本。

代码如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此处为提交按钮"
     />
</form>

当网络出现问题时，运行结果如图所示：

alt属性

接下来我们看一下怎样设置图片按钮的大小。

2 width属性

width 属性表示图片的宽度，默认单位是 px，不需要显示指明。使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此处为提交按钮" 
      width="100"
     />
</form>

运行结果如图所示：

HTML图像按钮

与图 1 进行对比发现，图片的宽度和高度都发生了变化，那是因为图片随设置好的宽度进行了自适应。

3 height属性

height 属性表示图片的高度，同 width 属性一样，默认单位也是 px，不需要显示指明。具体代码如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此处为提交按钮" 
      height="100"
     />
</form>

运行结果如图所示：

HTML图像按钮

通过运行结果发现，图片的宽度也随其高度发生了变化。一般情况下，我们只需设置图片的宽度（width）或者是高度（height）即可，否则有的图片可能会失帧。

结语

其实HTML语言还是编程中比较简单、容易入门的编程语言，对于无任何经验的小白还是比较容易理解的，相比于js、jQuery甚至于C、C++……都是比较容易融会贯通的

手把手教学HTML

什么是HTML

1. 什么是网页？

HTML 标签（插入图片）

1. src属性

1.2 其他属性

1.3. 总结

HTML < a>标签（超链接）

1. href 属性

2. target属性

3. < a>标签的默认样式

1) 鼠标样式

2) 颜色及下划线

URL结构解析

1. URL的构成

1) 协议

2 主机名

3 域名

4 端口

5 路径

6 文件名

HTML块级元素及行内元素

1. 块级元素

2. 行内元素

1 实例演示

3. 元素的嵌套

4. 总结

HTML有序列表+无序列表+定义列表

1. 有序列表

2. 无序列表

3. 定义列表

4. 总结

绝对路径和相对路径

1. 绝对路径

2. 相对路径

HTML < table>标签（表格）

1. 表格的边框合并：

2. 表格的标题

3. 单元格的合并

HTML锚点链接

1. 跳转到当前页面的指定位置

2. 跳转到其他页面的指定位置

HTML的基本结构

1. 单闭合标签

2. 自闭和标签

HTML < head>标签

1. < title>标签

2. < link>标签

3. < style>标签

4. < script>标签

5. href与src的区别

HTML < form>标签（表单）

1. 简述< form>标签

2. < form>标签所有属性

HTML < meta>标签

name属性

charset属性

http-equiv属性

content-type常用属性值

HTML < input>标签

1. input元素

2. name属性

3. disabled属性

4. readonly属性

HTML单行文本框

1 maxlength属性

2) size属性

HTML密码框

1 maxlength属性

2 value属性

3 size属性

HTML单选按钮

1. 单选按钮其它属性

1) checked属性

2 name属性

3 value属性

4 id属性

HTML复选框

1. 复选框的常用属性

1 checked属性