转载于我最喜欢的C语言中文网：http://c.biancheng.net/view/9395.html
之间写了篇如何使用Markdown内嵌HTML来更改字体颜色，简单了解了一下在Markdown中内嵌HTML的使用方法，我平时不用HTML，但是Markdown是每天都会使用的，有时候觉得单纯的Markdown功能稍微有点单调，因此来简单学一下HTML，在以后使用Markdown来写博客时，会有更加丰富的形式。
HTML 是 Hyper Text Markup Language 的简写，表示超文本标记语言，同时 HTML 也是我们学习前端开发的基础。随着 web 前端技术的飞速发展，HTML 和 CSS 也成为了编程者的必备技能。
这套「HTML教程」可以帮助读者快速入门，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。
HTML 标签非常注重语义化，很多标签都是通俗易懂的，大大降低了我们学习的难度。这套 HTML 教程更是为了避免初学者走太多的弯路，指出了许多其它 HTML 教程中没有提到的学习误区，并且给初学者提供了一个具体的学习思路，除了注重 HTML 知识点的讲解，更加注重 web 前端开发技巧和思维。请读者在学习过程中保持不骄不躁的学习心态，认真学习每一个知识点。
学海无涯，苦做舟，学习如同修行，只有潜心才可以领悟真谛。HTML 中的每一个小知识点都可以让页面发生不同的变化，现在就让我们行动起来，跟着 HTML 教程的步伐，让我们一起走进 HTML 的世界。
网站是由一个一个网页构成的，要想理解网站是什么，首先要理解网页是什么。
网页其实就是放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到我们本地的电脑，然后再由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。
网页文件的后缀有很多种，比如.html、.php、.jsp、.asp等，相信读者在浏览器的地址栏里也都见到过，如下图所示：
图1：在浏览器地址栏中查看 URL
但不管网页的后缀是什么，它的本质都是一样的，就是由 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 标签都有不同的含义，适用于不同的场景，能展示出不同的效果，例如：
标签用来表示一个段落，能容纳一段文本； - 标签用来表示一个超链接，用鼠标点击后可以跳转到其它网页； -
将上面的代码保存到 index.html，拖到浏览器中运行，可以看到如下的效果：
图2：一个简单的网页
这是一个非常简陋的网页，仅作为例子来演示，真实网页的 HTML 代码远比这复杂，你可以在网页上单击鼠标右键，然后在弹出菜单中选择“查看网页源代码”，就可以查看当前网页的 HTML 代码。
一个网站由很多网页组成，可以将多个网页放在一个文件夹中，这个文件夹还可以嵌套其它子文件夹，最终形成一个树状结构，如下图所示：
图3：一个简单的网站结构
如果我们给顶级目录 program 绑定一个域名 www.domain.com，那么用户就可以通过 www.domain.com 来访问 program 文件夹中的所有文件（包括子文件夹），例如：
可以认为，网站就是一个绑定了域名的文件夹，该文件夹中可以包含子文件夹以及各种各样的文件，这些文件都可以通过域名来访问。当我们在地址栏中输入一个 URL 时，它其实已经展示了服务器上的目录结构，例如 http://c.biancheng.net/linux/ln.html，就表示访问 linux 目录下的 ln.html 文件。
当然，你也可以不绑定域名，只要在服务器上设置某个文件夹提供 Web 服务，用户也可以通过 IP 地址来访问。
互联网上的所有服务器都是通过 IP 地址来定位的，域名只是 IP 地址的一种助记符，帮助用户记住网站的链接以及品牌。使用域名访问网站时，浏览器会先找到域名对应的 IP 地址，然后再通过 IP 地址请求服务器上的文件；这个过程叫做域名解析，是通过 DNS 服务器来完成的。
网站的作用是把计算机上的数据（文章、博客、图片、视频等）分享出去，让别人也能获取到有用的信息；同时，别人也能发布自己的数据（发布文章、留言、上传视频等），让网站的内容更加丰富。网站和用户之间是一个相互促进的关系，网站用户越多，积累的数据也就越多，然后就会吸引更多用户继续分享数据，这是一个良性循环，是一个健康的生态。
网站是互联网的基石，它让用户获取信息，也让用户分享信息，所以现在的互联网才能丰富多彩。
我们都知道网站放在服务器上，服务器其实就是一台计算机，它和我们平时使用的笔记本、台式机并没有什么区别，都由主板、CPU、内存、风扇等部件构成。不过，服务器一般是不带显示器、键盘、音响等外设的（当然它也支持这些外设），因为服务器的唯一用途就是运行网站，没有其它作用，所以用家庭台式机的主机箱来类比服务器更加恰当。
服务器一般放在专业的机房中，这些机房温度恒定、网络畅通、有备用电源、有容灾备份，能够保证服务器 7×24 小时不间断运行。
另外，为了让服务器能够放入机柜中，避免占用太多空间，服务器一般看起来很薄，是扁平的，这就是人们常说的“刀片”。
图4：刀片式服务器
图5：服务器机柜
网站可以认为是放在服务器上的一个文件夹，它包含了很多网页文件以及很多子文件夹。用户访问网站就是读取文件的内容，用户分享数据就是修改文件的内容，或者删除现有的文件，或者创建一个新的文件。
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 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。
超链接是互联网的纽带，它能将众多网页连接起来，让它们交织在一起，形成一张“网”。没有超链接，就没有互联网。
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 页面的基本结构如下所示，其中包含了各种创建网页所需的标签（例如 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 文档属于文本文件，所以我们可以使用任何文本编辑器来创建和修改 HTML 文件，对于初学者来说最好使用系统自带的文本编辑器，例如 Windows 记事本、Linux Vim 和 Mac OS TextEdit，当有了一定的基础之后再选用专业的文本编辑器，例如 Notepad++、Sublime Text、VS Code 等。
另外，您必须将 HTML 文档保存为.html或者.htm格式才可以直接在浏览器中打开并浏览其中的内容。例如上面的示例代码，将其保存在一个名为 index.html 的文件中，双击即可在浏览器中看到运行结果，如下图所示：
HTML 中的标签就像关键字一样，每个标签都有自己的语义（含义），例如<p>标签代表段落，<b>标签代表加粗。根据标签的不同，浏览器会使用不同的方式展示标签中的内容。
在实际开发中，有时我们也将 HTML 标签称为 HTML 元素。
一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写，如下所示：
属性
↓
<div class="foo">C语言中文网</div>
↑ ↑ ↑
开始标签 内容 结束标签
除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。
注意，虽然 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 标签构成，如下例所示：
<!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>
对代码的说明：
标签中嵌套了多种标签，其中：
_blank表示从新标签中打开。是一种不被建议使用的标签，HTML 5 已经不再支持，请尽量使用 CSS 来设置文本样式。
HTML 标签的嵌套层次是没有限制的，但是我们应尽量保持 HTML 文档的简洁。上面代码中嵌套层次最深的标签是 ，它的嵌套路径为：
body -> p -> font -> sup。
以上代码结果如下图所示：
通过前面的学习，我们已经对 HTML 标签有了简单的认识，知道可以在标签中可以添加一些属性，这些属性包含了标签的额外信息，例如：
本节我们就来讲解一下 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 中的 标签就有 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>
对代码的说明：
除了自带的属性，HTML 也允许我们自定义属性，这些属性虽然可以被浏览器识别，但是并不会添加什么特殊效果，我们需要借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为。
例如，C语言中文网首页的顶部板块为了在手机端实现标签切换（tab 切换）效果，就为
tabno，用以指明当前 tab 的编号，请看下图：
图1：HTML 自定义属性演示
HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用，下面来简单介绍一下它们的用法。
id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。
为标签定义 id 属性可以给我们提供很多便利，比如：
注意：在一个 HTML 文档中 id 属性的值必须是唯一的。
示例代码如下所示：
<input type="text" id="username" />
<div id="content">C语言中文网</div>
<p id="url">http://c.biancheng.net/</p>
与 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 属性的标签中。
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 属性演示
将鼠标在链接处悬停片刻才能看到提示框。
使用 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 中提供了从<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 属性来调整空白区域的大小。
关于标题标签的使用，有以下几点需要注意：
提示：应该使用<h1>标签来标记最重要的标题，该标题通常位于页面顶部，而且一个 HTML 文档中通常应该有且仅有一个<h1>标题，至于较低级别的标题标签（例如<h2>、<h3>、<h4>等）的使用则可以不加限制。
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 标签除了具有一定的语义（含义）外，还有默认的样式，例如<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 中，我们使用 标签来表示超链接。
超链接（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 使用的路径可以是绝对路径，也可以是相对路径。绝对路径往往以域名为起点，例如 http://c.biancheng.net/view/1719.html；相对路径往往以当前文件或者当前域名为起点，例如 ./…/uploads/data_package/ComputerFoundation.zip。对 URL 结构不了解的读者，请转到《绝对路径与相对路径》进行学习。
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>
浏览器会为 标签设置一些默认样式。
当鼠标移入链接区域时，会变成一只小手；当鼠标移出链接区域时，会变回箭头形状。
超链接被点击之前为蓝色，超链接被点击之后变成紫色。超链接默认带有下划线，下划线颜色和文本颜色保持一致。
浏览器根据历史记录来判断超链接是否被点击过，如果 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 使用 标签插入图片，img 是 image 的简称。 是自闭和标签，只包含属性，没有结束标签。 标签的语法格式如下：
对属性的说明：
【示例】使用 标签插入图片：
<!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 属性的两点建议：
有时我们需要按照比例来放大或缩小图片的尺寸以适应不同的设备，避免图片过大超出屏幕的范围，为此 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>
注意：图片映射不能应用于网站导航，因为它对搜索引擎并不友好。图像映射经常与地图一起使用，有许多工具都可以创建图像映射，例如 Adobe Dreamweaver 就可轻松创建图像地图。
在 标签中可以通过 shape 属性来定义可点击区域的形状，并通过 coords 属性来定义形状所对应的坐标。其中 shape 属性的可选值有三个，分别是 rect（矩形）、circle（圆形）和 poly（多边形），coords 属性中坐标的值则取决于可点击区域的形状。
假如定义一个矩形的可点击区域，示例代码如下：
其中 x1、y1 代表矩形的左上角坐标，x2、y2 代表矩形的右下角坐标。
假如定义一个圆形的可点击区域，示例代码如下：
其中 x、y 代表圆心的坐标，而 radius 则是圆的半径。
假如定义一个多边形的可点击区域，示例代码如下：
其中每对 x 和 y 的值都代表一个多边形的顶点坐标。
注意：所有坐标都是相对于图片的左上角来计算的。
在 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 列的表格。第一行为表头，其余三行为内容。
在上述代码中，我们使用了
、、| 及 | 四个标签： |
|---|
默认情况下，表格是没有边框的。但是我们可以使用
标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中我们将表格的边框宽度设置为 1px。注意，px 是默认的单位，不用显式指明。细心的读者可能已经发现了，网页中常见的表格样式大多为单层边框，上例中展示的表格为双层边框。为了避免这种情况，我们可以利用 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 允许使用 标签来为表格设置标题，标题用来描述表格的内容。
我们常见的表格一般都有标题，表格的标题使用 标签来表示。默认情况下，表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题，也就是说
标签中只能有一个请看下面的例子：
<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 也支持单元格的合并，包括跨行合并和跨列合并两种。
具体格式如下：
单元格内容 单元格内容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：合并单元格后的表格
通过运行结果可以发现：
提示：即使一个单元格中没有任何内容，我们仍需使用 或 元素来表示一个空单元格的存在，建议在 或 中加入 （空格），否则低版本的 IE 可能无法显示出这个单元格的边框。
HTML 列表（List）可以将若干条相关的内容整理起来，让内容看起来更加有条理。在列表内您可以放置文本、图像、链接等，也可以在一个列表中定义另一个列表（列表嵌套）。
HTML 为我们提供了三种不同形式的列表：
在 HTML 中，
我们来看一个简单的实例：
<!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 有序列表演示
有序列表需要使用
注意，
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 无序列表演示
无序列表需要使用
注意，
在 HTML 中，
定义列表具体语法格式如下：
定义列表需要使用
可以认为
定义了一个概念（术语），注意，
和我们来看一个简单的例子：
<!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 定义列表演示
浏览器会对列表设置一些默认样式，包括外边距、内边距和列表项标记，我们可以通过 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 列表的默认样式
| 列表分类 | 说明 |
|---|---|
| 有序列表 |
|
| 无序列表 |
|
| 定义列表 |
|
当您想要通过网页来收集一些用户的信息（例如用户名、电话、邮箱地址等）时，就需要用到 HTML 表单。表单可以接收用户输入的信息，然后将其发送到后端应用程序，例如 PHP、Java、Python 等，后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。
表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。
在 HTML 中创建表单需要用到<form>标签，具体语法如下所示：
对属性的说明：
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 表单中可以包含如下表所示的控件：
| 控件/标签 | 描述 |
|---|---|
| 定义输入框 | |
| 定义文本域（一个可以输入多行文本的控件） | |
| 为表单中的各个控件定义标题 | |
| 定义一组相关的表单元素，并使用边框包裹起来 | |
| 定义 元素的标题 | |
| 定义下拉列表 | |
| 定义选项组 | |
| 定义下拉列表中的选项 | |
| 定义一个可以点击的按钮 | |
| 指定一个预先定义的输入控件选项列表 | |
| 定义表单的密钥对生成器字段 | |
| 定义一个计算结果 |
这里我们不再一一列举各种控件的用法，请读者点击链接跳转到对应页面学习，下面我们通过一个完整的示例来演示一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML form表单演示</title>
</head>
<body>
<form action="./userinfo.php" method="POST">
<!-- 文本输入框控件 -->
<label>用户名： </label><input name="username" type="text"><br>
<!-- 密码框控件 -->
<label>密 码： </label><input name="password" type="password"><br>
<!-- 下拉菜单控件 -->
<label>性 别：</label>
<select name="sex">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
</select>
<br>
<!-- 复选框控件 -->
<label>爱 好：</label>
<input type="checkbox" name="hobby" value="1">听音乐
<input type="checkbox" name="hobby" value="2">看电影
<input type="checkbox" name="hobby" value="3">打游戏
<br>
<!-- 单选按钮控件 -->
<label>学 历：</label>
<input type="radio" name="education" value="1">小学
<input type="radio" name="education" value="2">中学
<input type="radio" name="education" value="3">本科
<input type="radio" name="education" value="4">硕士
<input type="radio" name="education" value="5">博士
<br>
<!-- 按钮 -->
<input type="submit" value="提 交">  
<input type="reset" value="重 置">
</form>
</body>
</html>
运行结果如下图所示：
图1：HTML form 表单演示
填写好用户数据，点击“提交”按钮，即可使用 POST 方式将数据提交到当前目录下的 userinfo.php 页面，在服务器端通过 PHP 代码可以接收提交的数据。
HTML 注释主要用来对文档中的代码进行解释说明，注释也是代码的一部分，但浏览器会自动忽略注释的内容，所以用户在网页中是看不到注释的。
我们在编写代码时应该善用注释，因为一个完整的 HTML 文档往往由成百上千行代码组成，当我们想要修改其中的某个部分时可能需要花费很长的时间才能找到想要修改的地方。有了注释就不一样了，我们可以根据功能或者其它条件将程序划分为若干个部分并通过注释进行标记，这样可以帮助您和他人阅读您的代码，提高代码的可读性。
在 HTML 中您可以使用<!-- -->在代码中添加注释，<!--和-->之间的所有内容都会被视为注释。示例代码如下：
<!DOCTYPE html><html lang="en"><!-- head 开始 --><head> <meta charset="UTF-8"> <!-- 当前文档采用UTF-8编码 --> <title>HTML注释的写法</title></head><!-- head 结束 --><!-- body 开始 --><body> <!-- 一段文本 --> <p>欢迎来到C语言中文网学习HTML教程，请记住地址：http://c.biancheng.net/html/</p></body><!-- body 结束 --></html>
运行结果如下所示：
图1：HTML 注释的写法
注释可以出现在 HTML 文档的任意位置，包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。
前面我们主要演示的是单行注释，在 HTML 中同样支持多行注释。多行注释与单行注释的区别并不大，我们只需要保证注释的内容在<!--和-->之间即可，如下所示：
使用注释除了可以对代码进行说明外，还可以用来注释程序中的代码，例如当不希望某段代码执行时，就可以先将它们注释掉，这样浏览器就不会执行这段代码了。
条件注释仅对 Windows 系统上的 Internet Explorer（IE）浏览器中有效，其他的浏览器会忽略它们。从 IE5 开始支持条件注释，您可以使用条件注释为使用 IE 浏览器的用户提供一些说明。如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IE浏览器条件注释</title>
</head>
<body>
<h4>根据不同的 IE 版本显示不同的内容</h4>
<!-- 如果使用 IE，则显示 -->
<!--[if IE]>
<p>您正在使用IE浏览器</p>
<![endif]-->
<!-- 如果使用 IE8，则显示 -->
<!--[if IE 8]>
<p>您正在使用 IE8</p>
<![endif]-->
<!-- 如果不是使用 IE7，则显示 -->
<!--[if !IE 7]>
<p>您使用的不是 IE7</p>
<![endif]-->
<!-- 如果版本小于 IE10，则显示 -->
<!--[if lt IE 10]>
<p>您正在使用 IE10 以下的版本</p>
<![endif]-->
<!-- 如果版本大于等于 IE6，则显示 -->
<!--[if gte IE 6]>
<p>您正在使用 IE6 及其以上的版本</p>
<![endif]-->
</body>
</html>
在 IE8 下的运行效果：
图2：条件注释在 IE8 下的运行效果
在 Chrome 浏览器下的运行效果：
图3：条件注释在 Chrome 下的运行效果
条件注释可以检测当前浏览器是否是 IE，以及 IE 版本，开发人员可以根据不同的 IE 浏览器加载不同的样式表或者 JS 脚本。
比较 IE 版本将会用到如下关键字：
IE 浏览器对 HTML5 支持不太友好，低版本的行为更是怪异，IE 已经逐渐退出市场，各大互联网巨头也不再兼容 IE，大家在开发过程中也不用重点考虑 IE。
HTML 仅能呈现一些信息，表现能力非常有限，需要结合 CSS 一起使用，以使页面更加精美。
CSS 样式既可以作为单独的文件（.css类型的文件）引入到 HTML 文档中，也可以直接写在 HTML 文档中，大致分为如下四种方法：
第1种和第2种方法都是将 CSS 样式写到当前 HTML 文档中，第3种和第4种方法都是将 CSS 样式放在外部文件中，然后再导入到当前 HTML 文档中。
行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。
【示例1】针对段落、
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
<p style="background-color: #999900">行内元素，控制段落-2</p>
<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
<em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>
页面演示效果如下图所示：
图1：行内样式的应用
在上面示例中，行内样式由 HTML 元素的 style 属性嵌入，即将 CSS 代码放入style=""引号内即可，多个 CSS 属性值则通过分号;间隔。例如示例中的
段落
标签设置背景色为褐色（background-color: #999900），标题
标签设置字体为 30 像素（font-size:30px;），
两个段落
标签，虽内容不同，但使用一样的背景色设置，却添加两次 CSS 行内属性设置背景色 background-color: #999900。
行内元素虽然编写简单，但通过示例可以发现存在以下缺陷：
网络上有些网页通过查看源文件可以看到这种编写方式，虽然一个网页只有一部分是如此做的， 但需要分情况：
内嵌样式通过将 CSS 写在网页源文件的头部，即在 和 之间，通过使用 HTML 标签中的
【示例2】为段落设置内嵌式样式书写方法，减少代码量。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
text-align: left; /*文本左对齐*/
font-size: 18px; /*字体大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进2个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
margin-bottom: 20px; /*段落下边距 20 像素*/
}
</style>
</head>
<body>
<p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。在这之后，由于在搜索引擎中，大都有动物形象来形象，如 SOHU 的狐，如 GOOGLE 的狗，而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。</p>
<p>在百度那次更换 LOGO 的计划中，百度给出的 3 个新 LOGO 设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。</p>
<p>此次更换 LOGO 的行动共进行了 3 轮投票，直到第 2 轮投票结束，新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把 3 个新 LOGO 方案彻底否决。</p>
</body>
</html>
页面演示效果如下图所示：
图2：内嵌样式的应用
在上面示例中，段落进行如下设置：文本左对齐、字体为 14 号、行高 25 像素、宽度 500 像素、下边距 20 像素、浏览器下居中、首行缩进两个文字大小空间。首行缩进使用相对单位，此设置的作用是当字体大小改变时（如font-size: 18px;）依然能够实现缩进两个文字大小空间。
行内样式带来了样式修改的不方便，例如上个示例中两个段落都使用同样的样式，但需要编写两遍；而使用内嵌式样式后，就可以将所有的段落样式放在一起。
style 不仅可定义 CSS 样式，还可以定义 JavaScript 脚本，故使用 style 时需要注意。当 style 的 type 值为text/css时，内部编写 CSS 样式；若 style 的 type 值为text/javascript时，内部编写 JavaScript 脚本。
style 中有一个比较特殊的属性 title，使用 title 可以为不同的样式设置一个标题，浏览者就可以根据标题选择不同的样式达到浏览器中切换的效果，但 IE 浏览器不支持，Firefox 浏览器支持此效果。
【示例3】分别为火狐浏览器设置两种字体大小样式，通过火狐“查看”菜单进行修改。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" title="字体14号">
p{
text-align: left; /*文本左对齐*/
font-size: 14px; /*字体大小 14 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进两个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
}
</style>
<style type="text/css" title="字体 18 号">
p{
text-align: left; /*文本左对齐*/
font-size: 18px; /*字体大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进两个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
color: #6699FF; /*字体颜色的改变*/
}
</style>
</head>
<body>
<p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。</p>
</body>
</html>
页面演示效果如下图所示。
图3：火狐浏览器内嵌式更换样式
在上面不例中，通过<style type="text/css" title="名称">定义了两种字体大小，通过火狐浏览器“查看”菜单下的“页面样式”子菜单中有两个选项：字体14号、字体18号，默认情况下显示的是第一次书写的<style type="text/css" title="名称">，通过菜单可以改变该页面样式。
链接式通过 HTML 的 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。
【示例4】使用链接式为 HTML 代码应用样式，书写、更改方便。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
<h3>楼上的，<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>
页面演示效果如下图所示：
图4：链接式的应用
在上面示例中，通过 link 链接两个 CSS 文件，且都有效，这也是网站制作者将公共部分放入一个 CSS 文件，当前页面样式编写新的样式文件。
lianjie.css 文件代码：
h3{
font-weight: normal; /*取消标题默认加粗效果*/
background-color: #66CC99; /* 设置背景色 */
height: 50px; /*设置标签的高度*/
line-height:50px; /* 设置标签的行高 */
}
span{
color: #FFOOOO; /* 字体颜色 */
font-weight:bold; /* 字体加粗 */
}
lianjie-2.css 文件代码：
p{
color: #FF3333; /*字体颜色设置*/
font-weight: bold; /* 字体加粗 */
border-bottom: 3px dashed #009933; /* 设置下边框线 */
line-height: 30px; /* 设置行高 */
}
链接式样式使 CSS 代码和 HTML 代码完全分离，达到结构与样式的分开，使 HTML 代码专门构建页面结构，而美化工作由 CSS 完成。
链接式导入 CSS 样式的好处：
导入样式使用 @import 命令导入外部样式表。导入样式有 6 种书写方式：
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");
【示例5】导入样式表 lianjie.css 和 daoru.css 以及书写 标签的背景色，注意导入样式表和 标签样式的前后不可颠倒。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url(lianjie.css);
@import url(daoru.css);
body { background-color: #e4e929; }
</style>
</head>
<body>
<div>
<p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
<h3>褛上的，<span>lianjie.css</span>文件给我穿的花衣服。</h3>
</div>
</body>
</html>
页面演示效果如下图所示。
图5：导入样式应用
在上面示例中，必须是@import url("lianjie-2.css"); p{text-indent: 3em;}，而不能是p{text-indent:3em;} @import url("lianjie-2.css");，否则将导入效果无效。在 CSS 文件中也需要将 @import 放在前面，后面加入 CSS 样式，否则也是无效。
lianjie.css 文件代码，同上一个示例即链接式。
daoru.css 文件代码：
@import url("lianjie-2.css");p { text-indent: 3em; }
HTML 标签（元素）可以分为两个类别，分别是块级元素和内联元素（也叫行内元素）。
块级元素最主要的特点是它们自己独占一行，块级元素中最具代表性的就是<div>，此外还有<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<h1>~<h6>等。
块级元素一般都具有特定的语义，可以使代码的可读性更强。
块级元素的主要特征如下所示：
<br>，块级元素总是在新行上开始；内联元素也可以称为行内元素，行内元素中最常用的是<span>，此外还有<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>和<var>等。
内联元素往往带有某种特殊的显示效果，可以代替部分 CSS 样式，非常实用，例如：
<b>和<i>标签可以修饰字体；<sub>和<sup>两个标签分别用来定义下标文本和上标文本。行内元素的主要特征如下所示：
对于行内元素的使用，需要注意如下几点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><div>标签演示</title>
</head>
<body>
<p>C语言中文网的《<a href="http://c.biancheng.net/html/" target="_blank">HTML教程</a>》是我们花费了数月时间倾力打造的，它通俗易懂，并且贴近实用。</p>
<div style="padding:0px 20px;border:1px solid #ccc; background-color:#eee;">
<h4>HTML教程目录（部分）</h4>
<ul>
<li><a href="/view/7410.html" target="_blank">网站到底是什么</a></li>
<li><a href="/view/9381.html" target="_blank">HTML是什么</a></li>
<li><a href="/view/9382.html" target="_blank">HTML标签的语法格式</a></li>
<li><a href="/view/9383.html" target="_blank">HTML属性的概念和使用</a></li>
</ul>
</div>
</body>
</html>
运行效果如下图所示：
图1：HTML
HTML 中的<span>标签是一个内联元素，可以对 HTML 文档中的内容进行修饰，此标签不会为文档内容提供任何视觉效果，但可以与 CSS 结合使用来美化网页。下面通过一个示例来演示<span>标签的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#profile span{
display: inline-block;
padding: 2px 4px;
border: 1px solid #ddd;
background-color: #f6f6f6;
border-radius: 3px;
}
</style>
<title><span>标签演示</title>
</head>
<body>
<h1>C语言中文网<span style="font-size:18px; color:#666;">简介</span></h1>
<p id="profile">
C语言中文网，一个在线学习<b>编程</b>的网站，目前已经发布了将近 50<sup>①</sup> 套教程，包括 <span>C语言</span>、<span>C++</span>、<span>Java</span>、<span>Python</span> 等，请<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。
<hr />
<span style="font-size:14px;">注①：C语言中文网会持续更新优质教程，教程数量将远远超过 50 套。</span>
</p>
</body>
</html>
运行结果如下图所示：
图2：HTML 标签演示
标签本身并没有什么特殊效果，通常需要借助 CSS 来改变内容的样式，比如字体、颜色、大小、边框、背景等。
那些不被推荐的 HTML 内联标签，比如 、、 等，建议使用 + CSS 样式来代替；但是那么具有明确语义的内联标签，比如 、、、、、 等，还是应该坚持使用，这些标签比 更加具有语义，更有助于搜索引擎理解页面内容。
大部分 HTML 元素都可以相互嵌套，并且嵌套深度也没有明确限制，这包括：
值得注意的是，一般不建议在内联元素中嵌套块级元素，这样不仅不符合开发规范，还会导致内联元素被撑开，独自占据一行。但是有时候又不得不这样做，比如C语言中文网首页的教程列表，一个板块链接到一套教程，为了让读者点击板块的任何一个地方都能跳转到教程页面，我们就在 标签中嵌套了
标签，代码如下：
<a href="/html/" target="_blank" class="clearfix">
<div class="image">
<img align="center" src="/templets/new/images/index_pc/icon_html.png" alt="HTML图标">
</div>
<div class="desc">
<h4>HTML教程</h4>
<p>HTML是一种专门开发网页的标记语言，由浏览器解析。</p>
</div>
</a>
总之，这是一条建议，不是强制规定。
标签的很多默认行为都可以借助 CSS 改变，显示类型也不例外，我们可以通过 CSS display 属性将块级元素修改为内联元素，或者将内联元素修改为块级元素，或者兼具两者优点，将标签设置为行内块级元素。
CSS 虽然可以改变标签的显示类型，但是不能改变标签的语义，读者还是应该根据语义去使用标签，例如：
标签用来显示文本，而不用来布局；
网页布局是创建一个网站时一个必不可少的过程，通过布局可以改变网页中内容的排列方式，让网页看起来更加合理、美观。在布局的过程中您还可以使用 CSS 来修改 HTML 标签的样式或者使用 JavaScript 来为网页添加一些特殊效果。
前面在介绍《HTML块级元素和内联元素》时提到过
为了改进传统布局模式，HTML5 提出了多个专门用于布局的标签，它们用来定义网页的不同部分，语义更加明确。HTML5 布局标签如下：
| 标签 | 说明 |
|---|---|
|
| 用于定义网页的头部，头部中一般包含一些介绍性的内容，例如网站名称、logo 或者作者的信息。 |
| 用于定义网页中的导航栏。 | |
| 用于在网页中定义一个单独的部分，其中可以包含文本、图像、表格等等。
| |
| 用于定义文章或者其它独立的信息，代表一个页面中自成一体的内容，例如论坛的帖子、博客上的文章、一篇用户的评论等。 | |
| 用于定义网页内容以外的部分，例如网页的侧边栏。 | |
| 用于定义网页的底部，例如作者、版权等信息。 | |
| 用于定义一些详细信息，并且可以根据需要隐藏或显示这些详细信息。 | |
| 用于为标签定义标题。 |
各个标签适用的板块如下图所示：
图1：HTML 布局标签演示
下面通过一个示例来演示如何使用上面介绍的标签来为网页布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML网页布局</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
header {
padding: 10px 20px;
background: #acb3b9;
}
header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
nav, section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
section {
width: 80%;
}
nav {
width: 20%;
background: #d4d7dc;
}
nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
nav ul li a {
color: #333;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>C语言中文网</h1>
</header>
<div class="wrapper clearfix">
<nav>
<ul>
<li><a href="http://c.biancheng.net/">首页</a></li>
<li><a href="http://c.biancheng.net/html/">HTML教程</a></li>
<li><a href="http://c.biancheng.net/css3/">CSS教程</a></li>
<li><a href="http://c.biancheng.net/js/">JS教程</a></li>
<li><a href="http://c.biancheng.net/java/">Java教程</a></li>
<li><a href="http://c.biancheng.net/python/">Python教程</a></li>
</ul>
</nav>
<section>
<h2>网站简介</h2>
<p>C语言中文网创办于 2012 年初，是一个在线学习<b>编程</b>的网站。C语言中文网已经发布了众多优质编程教程，包括C语言、C++、Java、Python 等，它们都通俗易懂，深入浅出。</p>
<p>C语言中文网将会持续更新，并且不忘初心，坚持创作优质教程。</p>
</section>
</div>
<footer>
<p>www.biancheng.net</p>
</footer>
</div>
</body>
</html>
运行结果如下：
图2：HTML 布局示例
HTML 中的 标签是所有头部标签的容器，这些头部标签用来定义有关 HTML 文档的元数据（描述数据的数据）以及所需资源的引用（例如 CSS 样式文件、JavaScript 脚本文件），对文档能够在浏览器中正确显示起到了非常重要的作用。根据我们的需求，可以在 HTML 头部定义大量的元数据，也可以定义很少或者根本就不定义。虽然头部标签是 HTML 文档的一部分，但其中的内容并不会显示在浏览器中。
在 标签中可以使用的头部标签有
注意，在
下面的示例演示了如何在 HTML 文档中使用
<head>
<meta charset="utf-8">
<title>C语言中文网：一个在线学习编程的网站</title>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><base>标签演示</title>
<base href="http://c.biancheng.net/">
</head>
<body>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="html/index.html">HTML教程</a></li>
</ul>
</body>
</html>
上面的示例中第一个
注意，HTML 文档中的 标签必须出现在任何引用外部资源的标签之前，而且一个 HTML 文档中仅允许定义一个 标签。
HTML 标签中可以包含任意数量的 标签。
使用
<head>
<title>此处书写标题</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head>
注意：对于文档中的唯一样式可以使用
charset 属性用来指定 HTML 文档的字符编码，上面的示例中，我们将文档的字符编码设置为了“UTF-8”。
定义页面的描述信息有利于搜索引擎的搜索。
关键字用于为搜索引擎提供与页面有关的信息。
通过某些内容管理系统可以自动提取作者信息。
上例中的代码用于向浏览器发送一个指令，使浏览器在经过指定的时间间隔（30 秒）后自动刷新页面。在 content 属性中除了可以指定时间间隔外，还可以再指定一个链接，这时页面将在指定的时间后重定向到链接所指向的页面，如下例所示：
有关
当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时，可以在 标签中定义一些内容来替代不能运行的 JavaScript 脚本或者给用户一些提示。除了
<head>
<title>C语言中文网</title>
<noscript>
<p>您的浏览器不支持 JavaScript 或者您禁用了 JavaScript，请<a href="http://c.biancheng.net/">点击这里</a>了解如何启用 JavaScript。</p>
</noscript>
</head>