【前端】前端学习一之HTML从入门到精通

本文作为前端学习的第一篇文章，我们知道前端学习的核心是：HTML、CSS 和 JavaScript这三种技术。而本文介绍的是HYML，那么我们就需要明确它在网页开发中的地位。如下所示：

HTML用来表示结构， 决定网页有什么（标题、图片、按钮）；CSS负责美化，决定网页长什么样（颜色、字体、布局）；JavaScript 负责的是功能，决定网页能做什么（点击交互、数据提交）。

所以，学习HTML就是学习前端的第一步。

一、什么是HTML？

HTML 不是一种编程语言，而是一种"标记语言"。它的全称是超文本标记语言。

超文本： 意味着它不仅仅包含文本，更重要的是它可以通过链接将文本、图片、视频等不同资源关联起来，实现页面间的跳转。
标记语言： 它通过用尖括号 < > 包裹的标签来'标记'内容的，告诉浏览器这些内容的结构和含义（例如：这是一个标题，这是一个段落），关于标签在接下面会解释。

而一个 HTML 页面是运行在浏览器上的。

二、VS Code 如何搭建快速编写 .html 文件的环境？

HTML 文件本质上是一个纯文本文件。你只需要：

用任何文本编辑器（甚至 Windows 自带的"记事本"）编写 HTML 代码。
然后将文件保存为 .html 后缀。
最后双击该文件，或者用浏览器都可以打开它。

而我问了通过代码编写运行的效率，我们建议使用VS Code编译器来写 HTML 的代码。在VSCode中，要快速编写和运行 .html 文件，我们建议可以直接安装一下以下三种插件：

下面我们简单介绍一下这个三个插件的功能：

Auto Rename Tag：这个插件的功能是自动同步修改配对的标签名称，方便我们写代码。
view-in-browser：这个插件可以让我们在VS Code中直接打开，比较方便。
Live Server：当你保存代码文件时，浏览器会自动刷新页面，可以快速查看我们写的代码运行出想效果，也很方便。

关于第2和第3种插件打开方式，如图所示：

如果我们没有安装view-in-browser，Live Server插件，我则需要先将鼠标垫在这个文件上，然后右击鼠标，选择【在文件资源管理器中显示】（中文）或则【eveal in File Explorer】（英文）

三、初步认识HTML结构

1. 标签

HTML 代码是由很多个 "标签" 构成的，每一个标签都是有一个 " < > " 加一个 " 标签名 " 构成。如：

html 复制代码

<body>
   Hello HTML!
</body>

大部分标签都是成对出现的，比如<body>是开始标签，<\body>是结束标签，它们是一对，这是双标签；也有少部分是只有开始标签，如一些特殊符号如空格（&nbsp）等，这是单标签。

开始标签和结束标签之间，写的是标签的内容，同时开始标签中可能会带有 "属性"，来控制标签中的内容格式。

2. HTML基本结构

以下就是我们HTML代码的基本结构：

html 复制代码

<html>
    <head>
        <title>这是第一个页面</title>
    </head>
    <body>
        这是我们写的内容，如Hello HTML！
    </body>
</html>

其中各个标签解释如下：

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性
title 标签中写的是页面的标题.
body 标签中写的是页面上需要显示的内容

上述代码在浏览器上的运行结果如下所示：

3. VS Code快速生成代码框架的快捷键

在 VS Code 中创建文件 xxx.html 后，在文件中直接输入 ! , 然后按回车或者Tab键，此时该文件中就能自动生成HTML代码的主体框架了，自动生成的代码如下所示：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

下面我们简单解释一下这段代码的意思，具体细节我们当前可以不用深究。

**<!DOCTYPE html>**是 HTML5 文档的文档类型声明，它告诉浏览器：当前页面是按照 HTML5 标准编写的。注意它不是 HTML 标签，而是一个声明语句，必须放在 HTML 文档的最顶端、<html> 标签之前。
**<html lang="en">**其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译)。
**<meta charset="UTF-8">**描述表示浏览器解码的规则是UTF-8，需要与编码规则对应。没有这一行可能会导致中文乱码。
**<meta name="viewport" content="width=device-width, initial-scale=1.0">**这是对移动段的适配。对于我们Web前端我们可以不用关心。

另一个快捷键，表示复制+粘贴的快捷键是【 Shift + Alt + ↓】，通过选择代码，然后按下该快捷键，就可以实现一键实现复制+粘贴两个操作。

四、HTML常见标签

1. 注释标签

在HTML中的注释方法如下：

html 复制代码

<!-- 这是注释 -->

在VS Code中使用【ctrl + / 】快捷键可以快速进行注释 / 取消注释.

2. 标题标签：h1~h6

HTML中的标题标签有6个，从 h1 - h6，数字越大, 则字体越小。使用方法如下所示：

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>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

运行结果：

3. 段落标签：p

p 标签是用来表示一个段落的。它是一个双标签，开始标签是<p>，结束标签是</p>。比如以下截取的是朱自清的《荷塘月色》部分段落，通过<p></p>标签就可以各个段落分割开来，使用代码如下所示：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <p>
            这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
        </p>
        <p>
            沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。

        </p>
        <p>
            路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
        </p>
    </body>
</html>

通过浏览器打开它，其展示结果就分成了三段，如图所示：

关于p标签，我们还需要注意一个细节：在<p></p>中的内容如果出现了回车，则通过浏览器展示的结果就会将代码中的回车解析为一个空格 ，如下所示：

4. 换行标签：br

br 是 break 的缩写. 表示换行.

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样段落与段落之间带有一个很大的空隙.
换行标签的规范写法是</br>，在HTML5中写成<br/>也可以

比如：

5. 格式化标签（加粗，倾斜，删除线，下划线）

格式化标签包括加粗，倾斜，删除线，下划线，能够表示它们效果的都有两种标签，并且都是双标签，如下所示：

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

使用效果演示：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>strong的加粗</strong>
    <b>b的加粗</b>

    <em>倾斜</em>
    <i>倾斜</i>

    <del>删除线</del>
    <s>删除线</s>
    
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

展示结果：

6. 图片标签：img

设置图片的标签是 img ，img 标签必须带有 src 属性来表示图片的路径。路径可以分为相对路径和绝对路径。

如果使用相对路径，则可以通过上级路径（../）或者当前路径（./）来获取路径。
如果使用绝对路径，我们也有两种方式，一种是我们电脑上磁盘的路径，一种是网络资源的路径（即图片链接）

比如：

html 复制代码

<!-- 相对路径 -->
<img src="./rose.jpg"> 
<img src="../image/rose.jpg">

<!-- 绝对路径 -->
<img src="D:/image/rose.jpg">
<img src="https://img95.699pic.com/photo/50050/6061.jpg_wh300.jpg!/fh/300/quality/90">

img 标签除了src属性外，还有其他的属性，一些常见属性如下所示：

align：控制对齐方式。主要可以取值左（left），右（right）。
alt: 替换文本。当图片不能正确显示的时候，会显示一个替换的文字.
title: 提示文本。鼠标放到图片上, 就会有提示 title 属性中的内容.
width/height: 控制宽度高度。高度和宽度一般改一个就行, 另外一个会等比例缩放。
border: 边框。参数是宽度的像素，但是一般使用 CSS 来设定.

注意事项：

属性可以有多个, 不能写到标签之前；属性之间用空格或换行来分割；属性之间不分先后顺序；属性使用 "键值对" 的格式（即属性="..."）来表示.

关于上述一些属性的使用理解，其使用示例如下，比如：
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        如图所示是一个长颈鹿图片：<img src="https://img95.699pic.com/photo/60030/8604.jpg_wh860.jpg">
    </p>
</body>
</html>
结果展示：如果这个长颈鹿图片的链接错了，则会替换成alt属性中写的文本，如下所示：如果我们想要当我们的鼠标放在图片上就提示一段文字（比如：这是一个长颈鹿），我们就需要使用 title 属性，如下所示：
html 复制代码
如图所示是一个长颈鹿图片：<img src="https://img95.699pic.com/photo/60030/8604.jpg_wh860.jpg" 
alt="当前长颈鹿图片无法展示" title="这是一个长颈鹿">
结果展示：

我们也可以控制图片的宽和高（使用width和height），一般我们只需要控制一个即可，另一个会根据比例自动放大和缩小。我们也可以使用border来控制图片的边框。比如：
html 复制代码
如图所示是一个长颈鹿图片：<img src="https://img95.699pic.com/photo/60030/8604.jpg_wh860.jpg" 
alt="当前长颈鹿图片无法展示" title="这是一个长颈鹿" width="200px" border="2px">
这里的px表示的单位是像素，关于单位我们后面再解释。展示结果：

7. 超链接标签：a

超链接标签是a，是一个双标签，即<a> </a>，其中标签中间包裹的内容，就是用户在网页上实际看到并能点击的部分。

它的属性，我们需要掌握两个：

href ：必须具备。表示点击后，将要跳转到哪个页面。一般赋值为其他页面的链接，如果不想做任何的跳转，则可以将href设为"#"，它表示空链接，即href="#"。除了赋值为链接外，还可以赋值其他东西，从而达到不同的效果，比较特殊的就是如果是一个文件，则就是一个下载链接，点击后会下载这个文件。
target ：表示页面的打开方式，如果 target="_slef"，表示覆盖当前页面打开，即在当前页面打开新页面；如果会是 target="_blank"，表示的是在新的标签页面打开，原页面不会被覆盖。如果不写target属性，则会默认以覆盖当前页面打开。

关于href的使用示例，比如，我们如果想要通过一个文本直接跳转到百度网页，则可以如下所示方法使用：
html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        跳转到 <a href="https://www.baidu.com/"> 百度网页 </a>
    </body>
</html>
展示结果如下：

当然，除了文本可以来跳转，通过图片也可以实现跳转，比如：
html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        这是一个百度的图标：
        <a href="https://www.baidu.com/">
            <img src="./baidu.jpg">
        </a>
    </body>
</html>
展示结果：
还有一个比较常用的链接形式，即锚点链接：它可以快速定位到页面中的某个位置。它的使用方法如下：

在需要定位的地方使用 id 属性来定义锚点，即你可以将 id 属性添加到任何 HTML 元素上，然后再使用 <a> 标签的 href 属性，赋值为"#描点的id属性的值"。比如：
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#one">第一集</a>
    <a href="#two">第二集</a>
    <a href="#three">第三集</a>
    <p id="one">
        第一集剧情 <br>
        第一集剧情 <br>
        ...
    </p>
    <p id="two">
        第二集剧情 <br>
        第二集剧情 <br>
        ...
    </p>
    <p id="three">
        第三集剧情 <br>
        第三集剧情 <br>
        ...
    </p>
</body>
</html>
展示结果：

一般，这都是在内容比较多时使用，来快速定位到对应内容的。

6. 表格标签：table

（1）基础标签

表示整个表格是table 标签，在这个标签中有一些几种基础的子标签，它们都是双标签。如下所示：

tr: 表示表格的一行
td: 表示一行中的一个单元格，一般使用<tr></tr>内。
thead: 表格的头部区域 (注意和 th 区分, 范围是比 th 要大的)
th: 表示表头单元格，使用在<thead></thead>中。其中的内容会居中加粗
tbody: 表格得到主体区域

所以，如果要表示一个表格，就需要将表头放在thead标签中，表格的内容放在tbody标签中。如果创建单元格呢？通过tr先创建一行，然后创建单元格，如果是表头则使用th标签，如果是表格主体内容，则是td标签。使用示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格 -->
    <table>
        <!-- 表头 -->
        <thead> 
            <!-- 一行内容 -->
            <tr>
                <th> 姓名 </th>
                <th> 性别 </th>
                <th> 年龄 </th>
            </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
            <tr>
                <td> 张三 </td>
                <td> 男 </td>
                <td> 19 </td>
            </tr>
            <tr>
                <td> 李四 </td>
                <td> 男 </td>
                <td> 20 </td>
            </tr>
            <tr>
                <td> 小红 </td>
                <td> 女 </td>
                <td> 18 </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

展示结果：

（2）表格属性的标签

通过上述基础标签，我们可以基本建成一个以表格规则布局的内容了，但是并不完整。比如表格边框，位置等等控制都没有实现，所以我们还需要控制一下表格的属性，这些属性可以用于设置大小边框等。注意属性的设置是在table标签中设置的。常见属性有一些几种：

border 表示边框。以数字来设置边框(数字越大, 边框越粗)，"0" 和 "" 都表示没边框。
width / height：控制宽高来设置尺寸。
cellpadding：内容距离边框的距离，默认 1 像素（单位px）
cellspacing：单元格之间的距离，默认为 2 像素（单位px）
align：整个表格相对于周围元素的对齐方式，比如 align="center" (不是内部元素的对齐方式) 就是居中对齐。

其中，我们需要注意一下边框的展示是什么？比如我们将上述表格的代码的边框属性 border ="5"，即：

html 复制代码

<table border="5">

展示的边框如下：

（3）表格单元格的合并

要合并单元格，我们是通过一下两种属性（rowspan和colspan）实现的，它们都是作为 th 或 tr 单元格的属性使用的：

跨行合并: rowspan="n"，它是以当前单元格为基础，向下合并n个单元格
跨列合并: colspan="n"，它是以当前单元格为基础，向右合并n个单元格

需要注意的是，我们如果要合并，在写了上述两个属性后，还需要删除多余的单元格。

7. 列表标签

HTML中的标签我们分为了三种：无序列表 (<ul>)、有序列表 (<ol>) 和自定义列表 (<dl>)。

（1）无序列表：ul、li

通过 ul 标签嵌套 li 标签构成，通过<ul></ul>标签包含表示这个是一个无序列表，然后在其中嵌套 <li> </li>来表示列表元素来。默认情况下的样式是实心圆点(•)，我们也可以通过ul标签的属性type来改变样式，如：

disc就是实心圆点
circle就是空心圆
square就是实现方块。

使用示例如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <ul type="disc">
            <li>第一个无序标签</li>
            <li>第二个无序标签</li>
            <li>第三个无序标签</li>
        </ul>
        <ul type="circle">
            <li>第一个无序标签</li>
            <li>第二个无序标签</li>
            <li>第三个无序标签</li>
        </ul>
        <ul type="square">
            <li>第一个无序标签</li>
            <li>第二个无序标签</li>
            <li>第三个无序标签</li>
        </ul>
    </body>
</html>

结果展示：

（2）有序列表：ol、li

通过 ol 标签嵌套 li 标签构成。通过<ol></ol>包含，表示这是有序列表，然后嵌套 <li> </li>来表示各个列表元素。关于样式，默认情况下就是数字，我们也可以通过type属性来控制：

1：表示数字，也是默认情况下的样式。
a：小写英语字母。
A：大写英语字母。
i：小写罗马数字。
I ：大写罗马数字。

说明：关于 ul 和 ol 样式的控制我们建议使用 CSS 的 list-style-type 属性来控制样式，以实现结构与样式的分离（关于CSS我们下一章再说，本章主要讲述的是HTML中的方法）

使用示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="1">
        <li>第一个有序标签</li>
        <li>第二个有序标签</li>
        <li>第三个有序标签</li>
    </ol>
    <ol type="a">
        <li>第一个有序标签</li>
        <li>第二个有序标签</li>
        <li>第三个有序标签</li>
    </ol>
    <ol type="A">
        <li>第一个有序标签</li>
        <li>第二个有序标签</li>
        <li>第三个有序标签</li>
    </ol>
    <ol type="i">
        <li>第一个有序标签</li>
        <li>第二个有序标签</li>
        <li>第三个有序标签</li>
    </ol>
    <ol type="I">
        <li>第一个有序标签</li>
        <li>第二个有序标签</li>
        <li>第三个有序标签</li>
    </ol>
</body>
</html>

结果展示：

start 属性

有序列表是有顺序的，一般都是从1开始列举表示。但是，这里其实也可以指定开始列表的序号，这需要使用start属性，不用关心样式是什么，直接赋值为数字即可（想从2开始计数就赋值为2，想从2开始计数就赋值为3，......），比如我们想从3开始计数，如下所示：

html 复制代码

从3开始计数
<ol type="A" start="3">
    <li>第一个有序标签</li>
    <li>第二个有序标签</li>
    <li>第三个有序标签</li>
</ol>

结果展示：

（3）自定义列表：dl、dt、dd

这是最特殊的列表，用于展示名词术语及其解释（键值对形式）。它包含三个标签（都是双标签）：

<dl>: 列表容器，表示这是自定义列表。
<dt>: 小标题。
<dd>: 围绕标题来说明。

使用示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <dl>
            <dt>这是自定义标签的小标题</dt>
            <dd>第一个自定义标签</dd>
            <dd>第二个自定义标签</dd>
            <dd>第三个自定义标签</dd>
        </dl>
    </body>
</html>

结果展示：

关于 列表的嵌套，需要注意：

列表是可以互相嵌套的，常用于制作多级导航或复杂的目录树。只需在一个 <li> 内部再写入一个<ul> 或<ol>即可。

ul / ol 中只能放 li 不能放其他标签；dl 中只能放 dt 和 dd

在写列表的标签时，我们有一个快捷方式来书写列表，比如：输入ul>*li*6 然后再回车，表示的就是快速输入6个无序列表，有序列表也是如此，具体示例如下所示：

8. 表单标签

什么是表单？它是让用户输入信息的重要途径。通过表单标签就可以来完成与服务器的异常交互。表单标签可以分为两个部分：

表单容器：包含所有表单元素的区域，表单容器是 <form> 标签定义的，一般我们的表单元素都是放在form标签内部的。
表单控件：用户实际输入或操作的元素，如文本框、复选框、单选框、按钮等，重点是 <input> 标签。

（1）表单容器标签：form

form标签描述了要把数据按照什么方式，提交到哪个页面中，即与哪个页面进行交互（关于 form 需要结合服务器和网络编程来进一步理解，当前不宜深究）。它的属性也有很多，其中最主要的就是action，它表示我们应该将表单数据应该提交到哪里。比如：

html 复制代码

<form action="https://www.baidu.com/">
    <!-- 表单控件 -->
</form>

（2）表单控件标签

input 标签

input标签就是用来表示各种表单控件，比如单行文本框, 按钮, 单选框, 复选框等等。它是一个单标签，其常用属性有如下三个：

type ：最重要的属性。决定了输入框的类型（文本、密码、按钮、复选框等）。
name ：定义表单数据的名称。当表单提交时，数据会以 name=value 的形式发送给服务器。
value ：定义输入框的初始值或默认值。对于按钮，它定义按钮上显示的文本。

而表单控件的具体类型和功能是由 type 属性决定的。常用type取值有如下所示：

文本类

text：单行文本输入框（默认值）。

password：密码输入框（输入内容会显示为圆点或星号）。

选择类

radio：单选按钮。同一组（name 属性相同）的单选按钮只能选中一个。

checkbox：复选按钮。允许选中多个。

按钮类

button：普通按钮。通常需要配合 JavaScript 使用，否则无默认行为。

submit：提交按钮。点击后会提交表单数据。

reset：重置按钮。点击后会清空表单内所有已填写的内容。

文件选择

file：文件上传按钮。

那么这些各种各样的表单控件又具体是怎么使用的呢？其解释如下。

单行文本输入框和密码输入框

其使用方法如下代码所示（只需要将type修改即可）：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <form >
            <!-- 文本输入 -->
            用户：
            <input type="text">
            <br>
            <!-- 密码输入 -->
            密码：
            <input type="password">
        </form>
    </body>
</html>

展示结果：

单选按钮与复选按钮

单选按钮用于从多个选项中仅选择一项。要实现互斥效果，需将一组单选按钮的 name 属性设置为相同的名称。

复选按钮允许用户同时选择多个选项。它的 name 属性不控制互斥，但用于在表单提交时标识数据名称，是数据传递的关键。

关于value属性，在这里，它是用来标识选项的实际值的，是给服务器看的 ，**不是给用户看的。**提交时发送给服务器的值实际上就是value的值。所以在实际情况下，我们都会对这些控件设置value的值来表示对应控件。使用示例：
html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <form >
            
            单选：
            <input type="radio" name="gender" value="male"> 男
            <input type="radio" name="gender" value="female"> 女
            <br>
            
            多选：
            <input type="checkbox" name="hobby" value="Reading"> 阅读
            <input type="checkbox" name="hobby" value="Swimming"> 游泳
        </form>
    </body>
</html>
结果展示：

在有些地方，我们的选择按钮的初始状态都有一个默认值，如果我们也要设置默认值，则需要通过checked属性来实现，它不需要赋值，写 checked 即可，也可以写 checked="" 或 checked="checked"，它们都是等价的。使用方法如下：
html 复制代码
<form >
    
    单选：
    <input type="radio" name="gender" value="male" checked="checked"> 男
    <input type="radio" name="gender" value="female"> 女
    <br>
    
    多选：
    <input type="checkbox" name="hobby" value="Reading" checked="checked"> 阅读
    <input type="checkbox" name="hobby" value="Swimming"> 游泳
</form>
结果展示：这是选择按钮初始时就有的状态。

各种按钮

在按钮中，value属性的取值就是展示出来的按钮名称。

普通按钮：type="button"，在HTML中点击没有什么行为，需要配合 JavaScript 使用才有效。

这里我们简单演示一下：
html 复制代码
<input type="button" value="我是个按钮">
展示结果：

提交按钮 与重置按钮

它们都必须放在 <form> 内部才能自动关联到表单的数据。

**提交按钮：**将表单内所有控件的数据发送到服务器（由 <form> 的 action 属性指定目标地址），点击后触发表单提交，页面通常会跳转或刷新

**重置按钮：**将表单内所有控件恢复为初始状态（即页面刚加载时的状态）。比如：清空输入框、取消选中单选/复选框、恢复下拉框默认值等

使用示例：
html 复制代码
<input type="submit" value="提交">
<input type="reset" value="重置">
按钮结果展示：

此时点击这里的提交或者重置，都会让所有控件恢复为初始状态

文件选择

通过type="file"就可以熟悉这个按钮，点击这个按钮选择文件后,，会弹出对话框，进行选择文件，其代码实现如下
html 复制代码
<input type="file">

lable 标签

lable标签需要和input一起使用，它可以实现的效果就是可以通过点击文字，就可以直接选中对应的单选/多选按钮，文本框等等控件（相当于点击了这个控件）。

实现这个功能，就需要使用到 lable 的 for 属性，同时配合 input 的 id 属性一起使用来绑定维对应的文字/图片，要注意for属性的值和id属性的值必须要一模一样才行。比如：

html 复制代码

单选：
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male"> 
<label for="female">女</label>
<input type="radio" name="gender" value="female" id="female"> 
<br>
多选：
<label for="read">阅读</label>
<input type="checkbox" name="hobby" value="Reading" id="read"> 
<label for="swim">游泳</label>
<input type="checkbox" name="hobby" value="Swimming" id="swim">

其中绑定的内容都是放在lable标签中的。

select 标签---下拉列表框

要表示下拉列表框，则需要使用select标签，而select标签只是告诉你这个是一个下拉列表框。要能够实现选择，还需要在其中使用option一起使用。比如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <select>
            <option>--请选择年份--</option>
            <option>1991</option>
            <option>1992</option>
            <option>1993</option>
            <option>1994</option>
            <option>1995</option>
        </select>
    </form>
</body>
</html>

结果展示：

注意：在下拉列表框中的第一个选项就是我们的默认选项，具体可以看看上述图中的死一个选项就是"--请选择年份--"，我们首先显示的就是它。

如果我们想要自己设置默认的选项是什么，则可以在其中一个选项的option中加上一个select="select" 属性设置。比如：

html 复制代码

<select>
    <option>--请选择年份--</option>
    <option selected="select">1991</option> <!--默认选项-->
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>

展示结果：

textarea 标签---多行文本输入框

textarea 标签最简单的使用方法如下：

html 复制代码

<textarea rows="10" cols="50"></textarea>

通过rows和cols就可以设置它的高度和宽度。其中rows="10"表示这个输入框最多显示10行内容，超过10行就会通过滚轮滑动显示。这段代码的具体展示结果：

最后需要注意：在代码<textarea></textarea>中包含的内容，如果有空格，则在展示中也会默认出现对应数目的空格，所以一般我们</textarea>都是紧贴它的开始标签的。

9. 无语义标签: div & span

div和span在HTML中都是无语义标签，并且它们都是双标签。无语义也就是说它不代表任何特定内容主要作用是来包裹内容的。

它们的区别如下：

<div> 是块级元素，是一个大盒子。其特征如下：

独占一行 ：每个 <div> 都会从新的一行开始，它后面的内容会被挤到下一行。
宽度撑满：默认宽度会自动填满其父容器的整个宽度。

所以，我们使用div来包裹一个一个的内容，这样不仅可以让代码看起来比较清晰，也可以减少换行标签的使用。

<span> 是行内元素，是一个小盒子。其特征如下：

不独占一行：它会和前后内容排在同一行，不会打断文本流。
宽度自适应：宽度仅由其包裹的内容决定，内容多宽，它就多宽。

最后要注意：它们可以嵌套使用，但是最重要的规则是：<div> 可以包含 <span>，但 <span> 不能包含 <div>。

简单演示一下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div>
        <div>
            <!-- span不会独占一行 -->
            <span>张三</span>
            <span>李四</span>
            <span>王二</span>
        </div>
        <!-- 每个div都会独占一行 -->
        <div>张三</div>
        <div>李四</div>
        <div>王二</div>
        </div>
    </body>
</html>

展示结果：

五、HTML特殊字符

在 HTML 中，特殊字符的表示方法为以**&开头，以;**结尾。特殊字符其实是很多的，这里只列举一些常用的特殊字符表示（其他字符我们可以直接在网上搜索即可），如下所示：

& nbsp; 空格
< 小于号，即 <
> 大于号，即 >
& 按位与，即&

其中大于号，小于号的特殊字符的出现是因为：html 标签就是用 < > 表示的。所以如果代码内容里如果存在 < > , 就可能会发生混淆。

在本文中我们介绍了各种各样的HTML标签的使用，通过本篇文章，咱们应该是掌握了 HTML的绝大部分知识了。相信大家看到这里，已经对HTML代码的书写，各个标签及属性的使用都应该是融会贯通了，即使遇到本文没有涉及的属性，大家简单查查资料也知道属性到底是怎么使用的了。

感谢各位观看！希望能多多支持！咱们下一章再见！