HTML入门教程（非常详细）_html的教程
-
标签用来包围当前网页的所有 HTML 代码，可以把它看做一个外壳。
-
标签表示网页的头部，用来设置一些网页的参数，在浏览器中是看不到的： - 用来指明当前网页的编码格式是 UTF-8； - 用来设置当前网页的标题，相当于文件的名字，它会显示在浏览器的标题栏。
-
标签表示网页的正文内容，也就是需要在浏览器主界面中显示的内容： - 标签用来表示一个段落，能容纳一段文本； - 标签用来表示一个超链接，用鼠标点击后可以跳转到其它网页； -
- 标签用来表示一个列表，其中的每个
- 都是子标签，用来表示一个列表项。
将上面的代码保存到 index.html，拖到浏览器中运行，可以看到如下的效果：
图2：一个简单的网页
这是一个非常简陋的网页，仅作为例子来演示，真实网页的 HTML 代码远比这复杂，你可以在网页上单击鼠标右键，然后在弹出菜单中选择“查看网页源代码”，就可以查看当前网页的 HTML 代码。
2. 什么是网站？
一个网站由很多网页组成，可以将多个网页放在一个文件夹中，这个文件夹还可以嵌套其它子文件夹，最终形成一个树状结构，如下图所示：
图3：一个简单的网站结构
如果我们给顶级目录 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://c.biancheng.net/linux/ln.html，就表示访问 linux 目录下的 ln.html 文件。
当然，你也可以不绑定域名，只要在服务器上设置某个文件夹提供 Web 服务，用户也可以通过 IP 地址来访问。
互联网上的所有服务器都是通过 IP 地址来定位的，域名只是 IP 地址的一种助记符，帮助用户记住网站的链接以及品牌。使用域名访问网站时，浏览器会先找到域名对应的 IP 地址，然后再通过 IP 地址请求服务器上的文件；这个过程叫做域名解析，是通过 DNS 服务器来完成的。
网站的作用是把计算机上的数据（文章、博客、图片、视频等）分享出去，让别人也能获取到有用的信息；同时，别人也能发布自己的数据（发布文章、留言、上传视频等），让网站的内容更加丰富。网站和用户之间是一个相互促进的关系，网站用户越多，积累的数据也就越多，然后就会吸引更多用户继续分享数据，这是一个良性循环，是一个健康的生态。
网站是互联网的基石，它让用户获取信息，也让用户分享信息，所以现在的互联网才能丰富多彩。
1) 网站服务器（Server）
我们都知道网站放在服务器上，服务器其实就是一台计算机，它和我们平时使用的笔记本、台式机并没有什么区别，都由主板、CPU、内存、风扇等部件构成。不过，服务器一般是不带显示器、键盘、音响等外设的（当然它也支持这些外设），因为服务器的唯一用途就是运行网站，没有其它作用，所以用家庭台式机的主机箱来类比服务器更加恰当。
服务器一般放在专业的机房中，这些机房温度恒定、网络畅通、有备用电源、有容灾备份，能够保证服务器 7×24 小时不间断运行。
另外，为了让服务器能够放入机柜中，避免占用太多空间，服务器一般看起来很薄，是扁平的，这就是人们常说的“刀片”。
图4：刀片式服务器
图5：服务器机柜
3. 总结
网站可以认为是放在服务器上的一个文件夹，它包含了很多网页文件以及很多子文件夹。用户访问网站就是读取文件的内容，用户分享数据就是修改文件的内容，或者删除现有的文件，或者创建一个新的文件。
HTML是什么？HTML简介
HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。
使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。
每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多 HTML 文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站，这一点已经在《网站到底是什么》中提及。
HTML 到底是什么？
首先，HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息。
我们从 HTML 中文全称来分析一下它的本质：
1) 超文本
也即超越纯文本，这意味着 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。
超链接是互联网的纽带，它能将众多网页连接起来，让它们交织在一起，形成一张“网”。没有超链接，就没有互联网。
2) 标记语言
HTML 是一种计算机语言，但它不能编程，只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：
- 标签表示一张图片；
- 标签表示一个链接；
- 标签表示一个表格；
- 标签表示一个输入框；
- 标签表示一段文本；
- 标签表示文本加粗效果；
- 标签表示块级布局。
本文最后给出的示例中演示了 HTML 标签的用法，您也可以转到《HTML标签与元素》学习 HTML 标签的具体语法格式。
总结
HTML 是一种用来开发网页的计算机语言，它通过标签（标记式指令）将文本、音视频、图片、表格、按钮、输入框等内容显示出来。也就是说，HTML 是用来给网页内容进行排版和布局的。
HTML 版本
自 HTML 诞生以来，经过不断的发展，市面上出现了许多 HTML 版本，有关 HTML 版本的简要介绍如下所示：
| HTML版本 | 版本说明 |
|---|---|
| HTML 1.0 | HTML 的第一个版本，发布于 1991 年。 |
| HTML 2.0 | HTML 的第二个版本，发布于 1995 年，该版本中增加了表单元素以及文件上传等功能。 |
| HTML 3.2 | HTML 的第三个版本由 W3C 于 1997 年初发布，该版本增加了创建表格以及表单的功能。 |
| HTML 4.01 | HTML 4.01 于 1999 年 12 月发布，该版本增加了对样式表（CSS）的支持。HTML 4.01 是一个非常稳定的版本，是当前的官方标准。 |
| HTML 5 | HTML5 的初稿于 2008 年 1 月发布，是公认的下一代 Web 语言，极大地提升了 Web 在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。 |
HTML 4 和 HTML 5（简称 H5）是两个最重要版本，HTML 4 适应了 PC 互联网时代，HTML 5 适应了移动互联网时代。
HTML 5 在 HTML 4 的基础上增加了很多语义化的标签，功能更加强大，除了较低版本的 IE 浏览器，几乎所有其它浏览器都能很好地支持 HTML 5。如果您的用户很少使用 IE 浏览器，那么请放心地使用 HTML 5。
HTML标签
如上所述，HTML 是一种标记语言，使用各种标签来格式化内容，标签的特点如下所示：
- HTML 标签由尖括号包围的关键词构成，比如 ；
- 除了少数标签外，大多数 HTML 标签都是成对出现的，比如 和 ；
- 成对出现的标签中，第一个标签称为开始标签，第二个标签称为结束标签（闭合标签）。
HTML 中的不同标签具有不同的含义，学习 HTML 其实就是学习各个标签的含义，根据实际场景的需要，选择合适的标签，从而制作出精美的网页。
HTML文档结构
HTML 页面的基本结构如下所示，其中包含了各种创建网页所需的标签（例如 doctype、html、head、title 和 body 等）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML演示</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<a href="http://c.biancheng.net/" target="\_blank">这是一个链接，指向C语言中文网首页</a>
<ul>
<li>HTML教程</li>
<li>CSS教程</li>
<li>JavaScript教程</li>
</ul>
<input type="text" placeholder="请输入内容" />
</body>
</html>
语法说明如下：
- ：这是文档类型声明，用来将文档声明为 HTML 文档（从技术上来说它并不是标签），doctype 声明不区分大小写；
- ：该标签是 HTML 页面的根标签，其他所有的标签都需要在 和 标签之间定义；
- ：该标签中用来定义 HTML 文档的一些信息，例如标题、编码格式等等；
- ：用来指明当前网页采用 UTF-8 编码，UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码；
- ：该标签用来定义网页的标题，网页标题会显示在浏览器的标签栏；
- ：该标签用来定义网页中我们能通过浏览器看到的所有内容，例如段落、标题、图片、链接等等；
-
：该标签用来定义标题；
- ：该标签用来定义段落；
- ：该标签用来定义链接；
- ：该标签用来定义列表；
- ：该标签用来定义列表项；
- ：用来定义一个输入框。
由于 HTML 文档属于文本文件，所以我们可以使用任何文本编辑器来创建和修改 HTML 文件，对于初学者来说最好使用系统自带的文本编辑器，例如 Windows 记事本、Linux Vim 和 Mac OS TextEdit，当有了一定的基础之后再选用专业的文本编辑器，例如 Notepad++、Sublime Text、VS Code 等。
另外，您必须将 HTML 文档保存为.html或者.htm格式才可以直接在浏览器中打开并浏览其中的内容。例如上面的示例代码，将其保存在一个名为 index.html 的文件中，双击即可在浏览器中看到运行结果，如下图所示：
HTML标签的语法格式
HTML 中的标签就像关键字一样，每个标签都有自己的语义（含义），例如<p>标签代表段落，<b>标签代表加粗。根据标签的不同，浏览器会使用不同的方式展示标签中的内容。
在实际开发中，有时我们也将 HTML 标签称为 HTML 元素。
HTML 标签的语法格式
一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写，如下所示：
属性
↓
<div class="foo">C语言中文网</div>
↑ ↑ ↑
开始标签 内容 结束标签
除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。
注意，虽然 HTML 标签在语法上不区分大小写，但是为了规范和专业，强烈建议在定义标签时一律采用小写。
当使用浏览器打开我们编写的 HTML 文档时，浏览器会从上到下依次读取文档中的内容，并根据 HTML 标签和属性将标签中的内容呈现在浏览器中。
一个 HTML 文档中必须具有一些基本的标签，以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签，但有以下几点需要注意：
- 所有 HTML 标签都必须放在尖括号
< >内； - HTML 中不同的标签可以实现不同的效果；
- 如果使用了某个标签，则必须使用对应的结束标签来结尾（自闭和标签除外）。
自闭和标签
有一些 HTML 标签没有单独的结束标签，而是在开始标签中添加/来进行闭合，这种标签称为自闭和标签。请看下面的例子：
<img src="./logo.png" alt="C语言中文网Logo" /> <!-- 图像 -->
<hr /> <!-- 分割线 -->
<br /> <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" /> <!-- 文本输入框 -->
自闭和标签不用包围内容，所以不需要单独的结束标签。只有少部分 HTML 标签是自闭和的。
表示 HTML 注释，用来对 HTML 代码进行说明，浏览器会忽略注释内容，所以用户在网页中看不到注释，我们将会在《HTML注释》中详细讲解。
嵌套HTML标签
大多数 HTML 元素都是可以嵌套使用的，也就是说一个 HTML 标签中可以包含其他的 HTML 标签，我们编写的 HTML 文档就是由相互嵌套的 HTML 标签构成，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签的嵌套</title>
</head>
<body>
<h1>C语言中文网<font size="4" color="#666">简介</font></h1>
<p>
C语言中文网，一个在线学习<b>编程</b>的网站，目前已经发布了将近 <font color="red">50<sup>①</sup></font> 套教程，包括<i>C语言</i>、<i>C++</i>、<i>Java</i>、<i>Python</i> 等，请<a href="http://c.biancheng.net/sitemap/" target="\_blank">猛击这里</a>查看所有教程。
<hr />
<small>注①：C语言中文网会持续更新优质教程，教程数量将远远超过 50 套。</small>
</p>
</body>
</html>
对代码的说明：
-
第 8 行代码，在 ## 标签中嵌套了 标签。 标签用来设置文本样式，此处我们使用 size 属性设置了文本大小，使用 color 属性设置了文本颜色。
-
第 9~13 行代码，在 标签中嵌套了多种标签，其中：
- 标签用来加粗文本。
- 标签用来设置上角标。
- 标签用来设置斜体文本。
- 标签用来设置超链接，其中 target 属性用来指明打开方式，
_blank表示从新标签中打开。 -
标签用来设置分割线，它是一个自闭和标签。
- 标签用来呈现小号字体。
是一种不被建议使用的标签，HTML 5 已经不再支持，请尽量使用 CSS 来设置文本样式。
HTML 标签的嵌套层次是没有限制的，但是我们应尽量保持 HTML 文档的简洁。上面代码中嵌套层次最深的标签是 ，它的嵌套路径为：
body -> p -> font -> sup。
以上代码结果如下图所示：
HTML属性的概念和使用
通过前面的学习，我们已经对 HTML 标签有了简单的认识，知道可以在标签中可以添加一些属性，这些属性包含了标签的额外信息，例如：
- href 属性可以为 标签提供链接地址；
- src 属性可以为 标签提供图像的路径；
- style 属性可以为几乎所有标签定义 CSS 样式。
本节我们就来讲解一下 HTML 标签属性的概念和用法。
什么是属性
属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：
attr=“value”
attr 表示属性名，value 表示属性值。属性值必须使用双引号" "或者单引号' '包围。
注意，虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。
一个标签可以没有属性，也可以有一个或者多个属性。
使用 HTML 属性的例子：
<p id="user-info" class="color-red">欢迎 <font color="red" size="3">Tom</font> 来到C语言中文网，您已经使用本站 3 年了，这是您第 12 次登录。<p>
<div class="clearfloat">
<p class="left">这里显示 Tom 的账号信息</p>
<p class="right">这里显示 Tom 的个性签名</p>
</div>
专用属性
HTML 属性有很多，大体可以分为两类：
- 有些属性适用于大部分或者所有 HTML 标签，我们将这些属性称为通用属性；
- 有些属性只适用于一个或者几个特定的 HTML 标签，我们将这些属性称为专用属性。
HTML 中的 标签就有 src 和 alt 两个专用属性， 标签也有 href 和 target 两个专用属性，如下例所示：
<img src="./logo.png" alt="C语言中文网Logo" width="100" height="50">
<a href="http://c.biancheng.net/" target="\_blank">C语言中文网</a>
对代码的说明：
- 标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。
- 标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式。
自定义属性
除了自带的属性，HTML 也允许我们自定义属性，这些属性虽然可以被浏览器识别，但是并不会添加什么特殊效果，我们需要借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为。
例如，C语言中文网首页的顶部板块为了在手机端实现标签切换（tab 切换）效果，就为
- 和
标签添加了一个自定义属性
tabno，用以指明当前 tab 的编号，请看下图：
-
图1：HTML 自定义属性演示
通用属性介绍
HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用，下面来简单介绍一下它们的用法。
1) id
id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。
为标签定义 id 属性可以给我们提供很多便利，比如：
+ 如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；
+ 如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。注意：在一个 HTML 文档中 id 属性的值必须是唯一的。
示例代码如下所示：
<input type="text" id="username" />
<div id="content">C语言中文网</div>
<p id="url">http://c.biancheng.net/</p>
2) class
与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值，如下所示：
<div class="className1 className2 className3"></div>
<p class="content">C语言中文网</p>
<div class="content">http://c.biancheng.net/</div>
当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。
3) title
title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<a href="http://c.biancheng.net/html/" title="HTML教程">HTML教程</a>
</body>
</html>
运行结果如下图所示：
图2：HTML title 属性演示
将鼠标在链接处悬停片刻才能看到提示框。
4) style
使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<p style="color:red;">http://c.biancheng.net/html/</p>
<img src="./logo.png" style="height:50px;" alt="C语言中文网LOGO">
<div style="padding:10px;border:2px solid #999;text-align:center;">C语言中文网</div>
</body>
</html>
运行结果如下图所示：
图3：HTML style 属性演示
除了上述的属性外，HTML 中的属性还有许多许多，这里简单了解一下即可，后面我们会详细介绍。
HTML标题标签
到
HTML 中提供了从<h1>到<h6>六个级别的标题标签，<h1>标签的级别最高，<h6>标签的级别最低，通过这些标签可以定义网页中的标题（与 word 中的标题类似），合理使用标题可以使网页的层次结构更加清晰。
提示：HTML 中的标题可帮助搜索引擎理解网页的结构和内容。
默认情况下，浏览器会以比普通文本更大和更粗的字体显示标题中的内容，使用<h1>标签定义的标题字体最大，而使用<h6>标签定义的标题字体最小，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标题标签演示</title>
</head>
<body>
<h1>h1 标题</h1>
<h2>h2 标题</h2>
<h3>h3 标题</h3>
<h4>h4 标题</h4>
<h5>h5 标题</h5>
<h6>h6 标题</h6>
</body>
</html>
运行结果如下图所示：
图1：HTML 标题标签演示
注意：在网页上使用标题标签时，浏览器内置的样式会在每个标题的上下添加一定的空白区域（外边距），您可以使用 CSS margin 属性来调整空白区域的大小。
关于标题标签的使用，有以下几点需要注意：
+ HTML 标题标签只能用来定义标题，不可以使用标题标签来对文本进行加粗设计；
+ 由于搜索引擎（例如百度）是使用标题来索引网页结构和内容的，因此使用标题标签有利于搜索引擎的抓取；
+ 标题标签并不是随意使用的，要根据具体的使用环境，按照级别由高到低的使用标题标签。提示：应该使用`<h1>`标签来标记最重要的标题，该标题通常位于页面顶部，而且一个 HTML 文档中通常应该有且仅有一个`<h1>`标题，至于较低级别的标题标签（例如`<h2>`、`<h3>`、`<h4>`等）的使用则可以不加限制。
HTML段落标签
HTML 中可以使用段落标签 <p>来将文档中的内容分割为若干个段落，语法格式如下：
段落中的内容。
段落标签由开始标签<p>和结束标签</p>组成，开始和结束标签之间的内容会被视为一个段落。段落标签是一个非常基本的标签，我们在网页上发布文章时就会用到它，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML段落标签演示</title>
</head>
<body>
<p>C语言中文网，一个在线学习编程的网站，网址：<a href="http://www.biancheng.net/" target="\_blank">http://www.biancheng.net/</a></p>
<p>C语言中文网目前已经发布了将近 <b>50</b> 套教程，包括 HTML、CSS、JavaScript 等，您可以<a href="http://c.biancheng.net/sitemap/" target="\_blank">猛击这里</a>查看所有教程。</p>
<p>我们的 Slogan：千锤百炼，只为大作；精益求精，句句斟酌；这种教程，看一眼就倾心。</p>
</body>
</html>
运行结果如下图所示：
图1：HTML 段落标签演示
注意：浏览器内置的样式会在段落的上下自动添加一定的空白区域（外边距），您可以使用 CSS margin 属性来设置空白区域的大小。
在 HTML4 以及更早的版本中，可以省略段落标签的结束标签，浏览器会自动补全缺失的结束标签，如下所示：
C语言中文网
HTML教程
http://www.biancheng.net/html/
段落中的空白符
默认情况下，段落标签会对文本中的空白符进行合并，将多个连续的空白符显示为一个空格的效果，具体表现为：
+ 如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个；
+ 如果段落中出现多个连续的换行，浏览器会将这些换行转换成一个空格。下面通过一个示例来演示段落中的空白符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML段落中的空白符</title>
</head>
<body>
<p>C语言中文网</p>
<p>http: //c.biancheng.net/html/</p>
<p>
HTML 教
程</p>
</body>
</html>
运行结果如下图所示：
图2：演示 HTML 段落中的空白符
如果想要在段落中换行，需要使用专门的换行标签<br />，<br />标签属于自闭和标签，因此不需要对应的结束标签</br>，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用<br>标签换行</title>
</head>
<body>
<p>C语言中文网<br />http://c.biancheng.net/html/<br />HTML教程</p>
</body>
</html>
运行结果如下图所示：
图3：换行标签的使用
HTML文本格式化
一些 HTML 标签除了具有一定的语义（含义）外，还有默认的样式，例如<b>（加粗）、<em>（倾斜）等，通过这些标签我们无需借助 CSS 就可以为网页中的内容定义样式。在这些具有语义和默认样式的标签中，有许多是针对文本的，通过这些标签我们可以格式化文本（为文本添加样式），例如使文本加粗、倾斜或者添加下划线等。
HTML 中有许多用来格式化文本的标签，如下表所示：
| 标签 | 描述 |
|---|---|
| … | 加粗标签中的字体 |
| … | 强调标签中的内容，并使标签中的字体倾斜 |
| … | 定义标签中的字体为斜体 |
| … | 定义标签中的字体为小号字体 |
| … | 强调标签中的内容，并将字体加粗 |
| … | 定义下标文本 |
| … | 定义上标文本 |
| … | 定义文档的其余部分之外的插入文本 |
| 在文本内容上添加删除线 | |
… |
定义一段代码 |
… |
用来表示文本是通过键盘输入的 |
… |
定义程序的样本 |
| … | 定义变量 |
…
| 定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体 |
| … | 用来表示标签中的内容为缩写形式 |
| … | 用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行 |
| … | 定义标签中的文字方向 |
|
…
| 定义一段引用的文本，例如名人名言，文本会换行输出，并在左右两边进行缩进 |
| … | 定义一段短的引用，浏览器会将引用的内容使用双引号包裹起来 |
| … | 表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示 |
| … | 用来定义一个术语，标签中的文本会以斜体呈现 |
按照作用的不同，可以将这些用来格式化文本的标签分为两类：
+ 物理标签：这类标签用来为设置文本的外观；
+ 逻辑标签：这类标签用来赋予文本一些逻辑或语义值。通过上表可以看出，有些标签的呈现效果虽然相同，但语义却不同，例如`<strong>`和`<b>`标签、`<em>`和`<i>`标签，下面就来详细介绍一下。
和标签之间的区别****
默认情况下，<strong>和<b>标签都可以使文本以粗体展示标签中的文本，但是<strong>标签的语义是标签中的内容具有很高的重要性，而<b>标签的语义仅仅是加粗文本以引起读者的注意，并没有特殊的意思。
示例代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><strong>和<b>标签演示</title>
</head>
<body>
<p>当您决定使用C语言中文网，您已经超越了 <strong>90%</strong> 的程序员，请记住网址 <b>http://c.biancheng.net/</b>。</p>
</body>
</html>
此处给90%添加 标签是为了强调C语言中文网的重要性，以及它带来的震撼效果；而给网址添加 标签仅仅是为了视觉上的加粗效果，这样能引起读者的注意。
运行结果如下图所示：
图1： 和 标签示例
和标记之间的区别**
同样，<em>和<i>标签默认情况下均以斜体显示标签中的文本，但是<em>标签具有强调的语义，用来表示标签中的内容很重要，而<i>标签仅仅用于定义斜体文本。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><em>和<i>标签演示</title>
</head>
<body>
<p>当您决定使用C语言中文网，您已经超越了 <em>90%</em> 的程序员，请记住网址 <i>http://c.biancheng.net/</i>。</p>
</body>
</html>
同上例一样，给90%添加 标签是为了强调C语言中文网带来的震撼效果，而给网址添加 标签仅仅是为了引起读者的注意。
运行结果如下图所示：
图2： 和 标签示例
根据 HTML5 的规范，标题应该用<h1>~<h6>标签定义，被强调的文本应该用<em>标签定义，重要的文本应该用<strong>标签定义，被标记的或者高亮显示的文本应该用<mark>标签定义等等，类似这样的规范还有很多，后面我们会一一为大家介绍。
HTML超链接标签
在 HTML 中，我们使用 标签来表示超链接。
超链接（Hyperlink）通常简称为链接（Link），是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是当前网页中的其它位置，还可以是图片、文件、应用程序等。链接的两端分别称为源锚点和目标锚点，通过点击源锚点即可以跳转到目标锚点。
超链接是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。网站由众多网页构成，超链接使得网页之间不再独立，它就像一根线，把网页连接在一起，形成一个网状结构。互联网之所以能够称之为“网”，就是因为有超链接的存在。
标签的语法格式如下：
其中，href 属性用来指明要跳转到的 url，target 属性用来指明新页面的打开方式，链接文本需要写在 和 之间。
例如，链接到C语言中文网首页，并在浏览器新窗口中打开：
<a href="http://c.biancheng.net" target="\_blank">C语言中文网</a>
链接到 HTML 教程的第一篇文章，并在当前窗口中打开：
<a href="http://c.biancheng.net/view/7410.html" target="\_blank">网站到底是什么</a>
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://c.biancheng.net/view/1719.html；相对路径往往以当前文件或者当前域名为起点，例如 ./…/uploads/data_package/ComputerFoundation.zip。对 URL 结构不了解的读者，请转到《绝对路径与相对路径》进行学习。
target 属性
target 是可选属性，用来指明新页面的打开方式。默认情况下，新页面在当前浏览器窗口中打开，我们可以使用 target 属性来改变新页面的打开方式。常见的打开方式如下表所示：
| 属性值 | 说明 |
|---|---|
| _self | 默认，在现有窗口中打开新页面，原窗口将被覆盖。 |
| _blank | 在新窗口中打开新页面，原窗口将被保留。 |
| _parent | 在当前框架的上一层打开新页面。 |
| _top | 在顶层框架中打开新页面。 |
绝大部分情况下，target 属性要么不写，保持默认的 _self，要么将它的值设置为 _blank，在新窗口中打开页面。例如：
<a href="http://c.biancheng.net/html/" target="\_blank">HTML教程（新窗口打开）</a>
<a href="http://c.biancheng.net/css3/">CSS教程（当前窗口打开）</a>
标签的默认样式
浏览器会为 标签设置一些默认样式。
1) 鼠标样式
当鼠标移入链接区域时，会变成一只小手；当鼠标移出链接区域时，会变回箭头形状。
2) 颜色及下划线
超链接被点击之前为蓝色，超链接被点击之后变成紫色。超链接默认带有下划线，下划线颜色和文本颜色保持一致。
浏览器根据历史记录来判断超链接是否被点击过，如果 href 属性和历史记录中的某条 URL 重合，那么说明该链接被点击了。清空浏览器的历史记录会让超链接的颜色再次变回蓝色。
【示例】HTML 超链接的多种形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML <a>标签演示</title>
</head>
<body>
<p>
<a href="http://c.biancheng.net/html/" target="\_blank">HTML教程（新窗口打开）</a><br>
<a href="http://c.biancheng.net/css3/">CSS教程（当前窗口打开）</a><br>
<a href="http://c.biancheng.net/js/">JS教程（被点击过）</a>
</p>
</body>
</html>
运行效果：
图1：HTML 超链接演示
HTML插入图片：标签
一图胜千言，图片比文字更具表现力，恰当地使用图片可以让网页更加精美。
HTML 使用 标签插入图片，img 是 image 的简称。 是自闭和标签，只包含属性，没有结束标签。 标签的语法格式如下：
对属性的说明：
+ src 是必选属性，它是 source 的简称，用来指明图片的地址或者路径。src 支持多种图片格式，比如 jpg、png、gif 等。src 可以使用相对路径，也可以使用绝对路径。
+ alt 是可选属性，用来定义图片的文字描述信息。当由于某些原因（例如图片路径错误、网络连接失败）导致图片无法加载时，就会显示 alt 属性中的信息。【示例】使用 标签插入图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML插入图片</title>
</head>
<body>
<!-- 使用绝对路径插入网络图片 -->
<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" alt="C语言中文网Logo"> <br>
<!-- 在当前 HTML 文档的上层目录中有一个 images 文件夹，该文件夹下有一张图片 html5.png -->
<img src="../images/html5.png" alt="HTML5 Logo">
</body>
</html>
显示效果：
图1：HTML 插入图片示例
可以看到，图片 html5.png 不存在，加载失败，此时显示出 alt 属性中的文本信息。
设置图片的宽度和高度
在 标签中可以使用 width 和 height 属性来指定图片的宽度和高度。默认情况下，这些属性的值都是以像素为单位的。
<img src="./logo.gif" alt="C语言中文网Logo" width="150" height="150">
<img src="./html5.png" alt="HTML5 Logo" width="100" height="100">
除此之外，您也可以使用 style 属性指定图片的宽度和高度，如下所示：
<img src="./logo.gif" alt="C语言中文网Logo" style="width: 100px; height: 100px;">
<img src="./html5.png" alt="HTML5 Logo" style="width: 150px; height: 150px;">
注意，width 和 height 属性只是临时修改图片的尺寸，并不会改变图片原始文件的大小。
关于 width 和 height 属性的两点建议：
+ 一般建议为图片设置 width 和 height 属性，以便浏览器可以在加载图片之前为其分配足够的空间，否则图片加载过程中可能会导致您的网站布局失真或闪烁。
+ 如果您的页面使用响应式布局（自适应布局），建议在上传图片之前裁剪好尺寸，而不要设置 width 和 height 属性，这样图片能够跟随屏幕宽度自动改变尺寸，从而不会变形，或者超出屏幕宽度。### HTML5 中的图片属性
有时我们需要按照比例来放大或缩小图片的尺寸以适应不同的设备，避免图片过大超出屏幕的范围，为此 HTML5 中增加了<picture>标签，该标签允许您针对不同类型的设备定义多个版本的图片。
在 标签中包含零个或多个 标签，通过 标签中的 media 属性可以设定匹配条件（允许哪个版本的图片显示），通过 srcset 属性可以定义图片的路径。另外，在 标签的最后还需要定义一个 标签。如下例所示：
<picture>
<source media="(min-width: 1000px)" srcset="logo-large.png">
<source media="(max-width: 500px)" srcset="logo-small.png">
<img src="logo-default.png" alt="C语言中文网默认Logo">
</picture>
浏览器将评估每个 标签，并在其中选择最合适的 标签，如果未找到匹配项，则使用 标签所定义的图片。另外， 必须是 标签的最后一个子元素。
图像映射
图像映射允许您在一个图片中定义超链接，实现思想就是在图像中划分一些区域，并在这些区域中定义超链接。例如，我们可以按照地图的划分为每个国家或城市所在的区域定义超链接。
下面通过示例来演示一下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML图片映射</title>
</head>
<body>
<img src="logo.png" usemap="#objects" alt="C语言中文网Logo">
<map name="objects">
<area shape="rect" coords="0,0,82,126" href="http://c.biancheng.net/html/" alt="HTML教程">
<area shape="circle" coords="90,58,3" href="http://www.biancheng.net/css3/" alt="CSS教程">
<area shape="circle" coords="124,58,8" href="http://www.biancheng.net/js/" alt="JavaScript教程">
</map>
</body>
</html>
标签的 name 属性对应的是 标签的 usemap 属性，标签用于定义图片的可点击区域，您可以在图像中定义任意数量的可点击区域。
注意：图片映射不能应用于网站导航，因为它对搜索引擎并不友好。图像映射经常与地图一起使用，有许多工具都可以创建图像映射，例如 Adobe Dreamweaver 就可轻松创建图像地图。
shape 和 coords 属性
在 标签中可以通过 shape 属性来定义可点击区域的形状，并通过 coords 属性来定义形状所对应的坐标。其中 shape 属性的可选值有三个，分别是 rect（矩形）、circle（圆形）和 poly（多边形），coords 属性中坐标的值则取决于可点击区域的形状。
假如定义一个矩形的可点击区域，示例代码如下：
其中 x1、y1 代表矩形的左上角坐标，x2、y2 代表矩形的右下角坐标。
假如定义一个圆形的可点击区域，示例代码如下：
其中 x、y 代表圆心的坐标，而 radius 则是圆的半径。
假如定义一个多边形的可点击区域，示例代码如下：
其中每对 x 和 y 的值都代表一个多边形的顶点坐标。
注意：所有坐标都是相对于图片的左上角来计算的。
HTML 标签（表格）
在 HTML 中，我们使用
标签来定义表格。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>
运行效果如下图：
图1：普通 table 表格
这是一个 4 行 3 列的表格。第一行为表头，其余三行为内容。
在上述代码中，我们使用了
、、
| 及 | 四个标签： |
+ 表示表格，表格的所有内容需要写在
和
之间。
+ 是 table row 的简称，表示表格的行。表格中有多少个 标签就表示有多少行数据。
+ 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
+ 是 table heading 的简称，表示表格的表头。 其实是 单元格的一种变体，本质上还是一种单元格。 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。默认情况下，表格是没有边框的。但是我们可以使用
标签中的 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：合并边框后的表格
2. 表格的标题
HTML 允许使用 标签来为表格设置标题，标题用来描述表格的内容。
我们常见的表格一般都有标题，表格的标题使用 标签来表示。默认情况下，表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题，也就是说
标签中只能有一个
标签。
请看下面的例子：
<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：带标题的表格
3. 单元格的合并
和 Excel 类似，HTML 也支持单元格的合并，包括跨行合并和跨列合并两种。
+ rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
+ colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。具体格式如下：
单元格内容 单元格内容
n 是一个整数，表示要合并的行数或者列数。
此处需注意，不论是 rowspan 还是 colspan 都是 标签的属性。
下面的例子中，我们将表格第 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>
运行效果如图：
图4：合并单元格后的表格
通过运行结果可以发现：
+ rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。
+ 每次合并 n 个单元格都要少写 n-1 个标签。提示：即使一个单元格中没有任何内容，我们仍需使用 或 元素来表示一个空单元格的存在，建议在 或 中加入 （空格），否则低版本的 IE 可能无法显示出这个单元格的边框。
HTML列表标签：
+ 1.
HTML 列表（List）可以将若干条相关的内容整理起来，让内容看起来更加有条理。在列表内您可以放置文本、图像、链接等，也可以在一个列表中定义另一个列表（列表嵌套）。
HTML 为我们提供了三种不同形式的列表：
+ 有序列表，使用
1. +
2. 标签
3. 无序列表，使用
- +
- 标签
- 定义列表，使用
+
+
标签### 1. 有序列表
在 HTML 中，
1. 标签用来表示有序列表。有序列表之间的内容有先后顺序之分，例如菜谱中的一系列步骤，这些步骤需要按顺序完成，这时就可以使用有序列表。
我们来看一个简单的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML有序列表</title>
</head>
<body>
<p>煮米饭的步骤：</p>
<ol>
<li>将水煮沸</li>
<li>加入一勺米</li>
<li>搅拌均匀</li>
<li>继续煮10分钟</li>
</ol>
</body>
</html>
在浏览器中运行效果如图所示：
图1：HTML 有序列表演示
有序列表需要使用
1. 和
2. 标签：
+ 1. 是 order list 的简称，表示有序列表，它可以为列表的每一项进行编号，默认从数字 1 开始。
+
+ 是 list item 的简称，表示列表的每一项，
1. 中有多少个
2. 就表示有多少条内容。列表项中可以包含文本、图片、链接等，甚至还可以是另外一个列表。注意，
1. 一般和
2. 配合使用，不会单独出现，而且不建议在
1. 中直接使用除
2. 之外的其他标签。
2. 无序列表
HTML 使用
+ 标签来表示无序列表。无序列表和有序列表类似，都是使用
+ 标签来表示列表的每一项，但是无序列表之间的内容没有顺序。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。
我们来看一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML无序列表</title>
</head>
<body>
<p>早餐的种类：</p>
<ul>
<li>鸡蛋</li>
<li>牛奶</li>
<li>面包</li>
<li>生菜</li>
</ul>
</body>
</html>
浏览器运行结果如图所示：
图2：HTML 无序列表演示
无序列表需要使用
+ 和
+ 标签：
+ - 是 unordered list 的简称，表示无序列表。
+ - 和
1. 中的
2. 一样，都表示列表中的每一项。默认情况下，无序列表的每一项都使用`●`符号表示。注意，
+ 一般和
+ 配合使用，不会单独出现，而且不建议在
- 中直接使用除
- 之外的其他标签。
3. 定义列表
在 HTML 中，
标签用于创建定义列表。定义列表由标题（术语）和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。
定义列表具体语法格式如下：
标题1
描述文本2
标题2
描述文本2
标题3
描述文本3
定义列表需要使用
、
和
标签：
+ 是 definition list 的简称，表示定义列表。
+ 是 definition term 的简称，表示定义术语，也就是我们说的标题。
+ 是 definition description 的简称，表示定义描述 。可以认为
定义了一个概念（术语），
用来对概念（术语）进行解释。
注意，
和
是同级标签，它们都是
的子标签。一般情况下，每个
搭配一个
，一个
可以包含多对
和
。
我们来看一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML定义列表</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HTML 是一种专门用来开发网页的标记语言，您可以转到《<a href="http://c.biancheng.net/html/" target="\_blank">HTML教程</a>》了解更多。</dd>
<dt>CSS</dt>
<dd>CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页，您可以转到《<a href="http://c.biancheng.net/css3/" target="\_blank">CSS教程</a>》了解更多。</dd>
<dt>JavaScript</dt>
<dd>JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言，您可以转到《<a href="http://c.biancheng.net/js/" target="\_blank">JS教程</a>》了解更多。</dd>
</dl>
</body>
</html>
浏览器运行效果如下图：
图3：HTML 定义列表演示
和
虽然是同级标签，但是它们的默认样式不同，
带有一段缩进，而
顶格显示，这样层次更加分明。
4. 列表的默认样式
浏览器会对列表设置一些默认样式，包括外边距、内边距和列表项标记，我们可以通过 CSS 样式表的 margin、padding 和 list-style 属性来修改它们，请看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改HTML列表的默认样式</title>
</head>
<body>
<p style="margin:0px auto;">煮米饭的步骤：</p>
<ol style="margin:0px auto; padding-left:20px; list-style:upper-latin;">
<li>将水煮沸</li>
<li>加入一勺米</li>
<li>搅拌均匀</li>
<li>继续煮10分钟</li>
</ol>
<p style="margin-bottom:0px;">早餐的种类：</p>
<ul style="margin:0px auto; padding-left:20px; list-style:square;">
<li>鸡蛋</li>
<li>牛奶</li>
<li>面包</li>
<li>生菜</li>
</ul>
<dl style="margin-bottom:0px;">
<dt><b>HTML</b></dt>
<dd style="margin:auto auto 10px 0px;">HTML 是一种专门用来开发网页的标记语言。</dd>
<dt><b>CSS</b></dt>
<dd style="margin:auto auto 10px 0px;">CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页。</dd>
<dt><b>JavaScript</b></dt>
<dd style="margin:auto auto 10px 0px;">JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言。</dd>
</dl>
</body>
</html>
对 CSS 样式的说明：
+ `margin:0px auto;`将上下外边距设置为 0 像素，将左右外边距设置为自动。
+ `margin-bottom:0px;`将下方外边距设置为 0 像素。
+ `margin:auto auto 10px 0px;`将上方和右侧外边距设置为自动，将下方外边距设置为 10 像素，将左侧外边距设置为 0 像素。
+ `padding-left:20px;`将左侧内边距设置为 20 像素。
+ `list-style:upper-latin;`将列表项标记设置为大写拉丁字母。
+ `list-style:square;`将列表项标记设置为实心方块。上述代码在浏览器中的运行效果：
图4：修改 HTML 列表的默认样式
5. 总结
| 列表分类 | 说明 |
|---|---|
| 有序列表 |
1. 表示有序列表，
2. 表示列表中的每一项，默认使用阿拉伯数字编号。 |
| 无序列表 |
+ 表示无序列表，
+ 表示列表中的每一项，默认使用●符号作为作为每一项的标记。 |
| 定义列表 |
表示定义列表，
表示定义术语、
表示定义描述。一般情况下，每个
搭配一个
，一个
可以包含多对
和
。
|
HTML表单：标签
当您想要通过网页来收集一些用户的信息（例如用户名、电话、邮箱地址等）时，就需要用到 HTML 表单。表单可以接收用户输入的信息，然后将其发送到后端应用程序，例如 PHP、Java、Python 等，后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。
表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。
在 HTML 中创建表单需要用到<form>标签，具体语法如下所示：
表单中的其它标签
对属性的说明：
+ action 属性用来指明将表单提交到哪个页面；
+ method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下：
- GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，GET 提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
- POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。### 表单属性
HTML 为<form>标签提供了一些专用的属性，如下表所示：
| 属性 | 可选值 | 描述 |
|---|---|---|
| accept | MIME_type | HTML5 中不再支持，设置服务器要接收的文件类型 |
| accept-charset | character_set | 设置表单数据的字符集（默认为 HTML 文档字符集） |
| action | URL | 设置要将表单提交到何处（默认为当前页面） |
| autocomplete | on、off | 设置是否启用表单的自动完成功能（默认开启） |
| enctype | application/x-www-form-urlencoded、 multipart/form-data、 text/plain | 设置在提交表单数据之前如何对数据进行编码（适用于 method=“post” 的情况） |
| method | get、post | 设置使用哪种 HTTP 方法来提交表单数据（默认为 get） |
| name | text | 设置表单的名称 |
| novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证 |
| target | _blank、_self、_parent、_top | 设置在何处打开 action 属性设定的链接（默认为 _self） |
action 和 method 是最常用的两个属性。
表单控件
表单用来收集用户数据，这些数据需要填写在各种控件中。HTML 控件也通过标签来实现，只是它们会呈现一些特殊的外观，并具有一些交互功能。
HTML 表单中可以包含如下表所示的控件：
| 控件/标签 | 描述 |
|---|---|
| 定义输入框 | |
| 定义文本域（一个可以输入多行文本的控件） | |
| 为表单中的各个控件定义标题 | |
| 定义一组相关的表单元素，并使用边框包裹起来 | |
| 定义 元素的标题 | |
| 定义下拉列表 |
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0
一个
，一个
可以包含多对
和
。
|
HTML表单：标签
当您想要通过网页来收集一些用户的信息（例如用户名、电话、邮箱地址等）时，就需要用到 HTML 表单。表单可以接收用户输入的信息，然后将其发送到后端应用程序，例如 PHP、Java、Python 等，后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。
表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。
在 HTML 中创建表单需要用到<form>标签，具体语法如下所示：
表单中的其它标签
对属性的说明：
+ action 属性用来指明将表单提交到哪个页面；
+ method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下：
- GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，GET 提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
- POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。### 表单属性
HTML 为<form>标签提供了一些专用的属性，如下表所示：
| 属性 | 可选值 | 描述 |
|---|---|---|
| accept | MIME_type | HTML5 中不再支持，设置服务器要接收的文件类型 |
| accept-charset | character_set | 设置表单数据的字符集（默认为 HTML 文档字符集） |
| action | URL | 设置要将表单提交到何处（默认为当前页面） |
| autocomplete | on、off | 设置是否启用表单的自动完成功能（默认开启） |
| enctype | application/x-www-form-urlencoded、 multipart/form-data、 text/plain | 设置在提交表单数据之前如何对数据进行编码（适用于 method=“post” 的情况） |
| method | get、post | 设置使用哪种 HTTP 方法来提交表单数据（默认为 get） |
| name | text | 设置表单的名称 |
| novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证 |
| target | _blank、_self、_parent、_top | 设置在何处打开 action 属性设定的链接（默认为 _self） |
action 和 method 是最常用的两个属性。
表单控件
表单用来收集用户数据，这些数据需要填写在各种控件中。HTML 控件也通过标签来实现，只是它们会呈现一些特殊的外观，并具有一些交互功能。
HTML 表单中可以包含如下表所示的控件：
| 控件/标签 | 描述 |
|---|---|
| 定义输入框 | |
| 定义文本域（一个可以输入多行文本的控件） | |
| 为表单中的各个控件定义标题 | |
| 定义一组相关的表单元素，并使用边框包裹起来 | |
| 定义 元素的标题 | |
| 定义下拉列表 |
[外链图片转存中…(img-MQCnYQUI-1725690541289)]
[外链图片转存中…(img-iXFxA5T3-1725690541290)]
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0