HTML 新手教程零基础易懂！（万字解析，建议收藏）^____^ 上

发布时间	版本
1989	Tim Berners-Lee 发明万维网
1991	Tim Berners-Lee 制定 HTML 规范
1993	Dave Raggett 拟定了 HTML+
1995	HTML 工作组定义 HTML 2.0
1997	W3C 推荐标准: HTML 3.2
1999	W3C 推荐标准: html 4.01
2000	W3C 推荐标准: XHTML 1.0
2008	WhatWG 首次公开 HTML5
2012	WHATWG 制定 HTML5 标准
2014	W3C 推荐标准: HTML5
2016	W3C 候选推荐： HTML 5.1
2017	W3C 推荐： HTML5.1 第二版
2017	W3C 推荐： HTML5.2

<!DOCTYPE> 声明

<!DOCTYPE>是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页。

　由于网络上文件的类型不一，因此需要正确声明 HTML 版本，以使得浏览器能够正确识别并显示您的网页内容。

doctype声明是不区分大小写的，以下方式均可使用：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册.

MDN CSS参考

中文编码

在 HTML 页面的头部声明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。

HTML 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题(w3cschool.cn)</title>
</head>
<body>
<h1>这是我的第一个标题</h1>
<p>这是我的第一个段落。</p>
</body>
</html>

HTML 编辑器的介绍及推荐

HTML 编辑器

HTML 编辑器是用于编写 HTML 的工具，使用 HTML 编辑器时以编辑主题，索引，自定义窗口，选择添加搜索页。

使用 Notepad 或 TextEdit 来编写 HTML

下列是三种专门用于编辑 HTML 的 HTML 编辑器：

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML 编辑器

不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad（PC）或 TextEdit（Mac）。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。

我们可以使用 Notepad 工具来创建 HTML 文件，具体的步骤参考如下：

步骤1：启动记事本

打开 Notepad 的步骤（ Windows 系统中）：

打开“开始”菜单
选择“所有程序”
选择“附件”
选择“记事本”

步骤2：使用记事本编辑 HTML

在记事本中输入 HTML 代码：

实例代码

<html>
<head>
<meta charset="utf-8">
<title>编程狮(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

尝试一下 »

步骤3：保存你的 HTML

在 Notepad 文件菜单中选择另存为。

您可以以.htm或者.html扩展名保存您的 HTML 文件，两者没有区别，根据您的使用习惯即可。

将该文件保存在您常用的文件夹中，比如 w3cschool

1459508307749495

步骤4：在浏览器中运行这个 HTML 文件

启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。

运行显示结果类似如下：

常用HTML编辑器下载

1、UltraEdit（编辑工具）

　UltraEdit 文本编辑器能够满足你一切编辑需要的编辑器。

　UltraEdit 文本编辑器是一套功能强大的文本编辑器。

　UltraEdit 文本编辑器内建英文单字检查，C ++ 及 VB 指令突显，可同时编辑多个文件，而且即使开启很大的文件速度也不会慢。

　UltraEdit 软件附有 HTML 标签颜色显示，搜寻替换以及无限制的还原功能，一般大家喜欢用其来修改 EXE 或 DLL 文件。

点击下载»

2、Notepad++ (代码编辑器）

Notepad++ 是在微软视窗环境之下的一个免费的代码编辑器。它使用较少的 CPU 功率，降低电脑系统能源消耗，但轻巧且执行效率高，使得 Notepad++ 可完美地取代微软视窗的记事本。

点击下载 »

3、Adobe Dreamweaver CC

Dreamweaver CC 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建 Web 页面。其成熟的代码编辑工具更适用于 Web 开发高级人员的创作！

点击下载 »

4、EditPlus (文本编辑器)

EditPlus（文字编辑器）一套功能强大，可取代记事本的文字编辑器，拥有无限制的 Undo/Redo、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能，就是它有监视剪贴簿的功能，能够同步于剪贴簿自动将文字贴进 EditPlus 的编辑窗口中，让你省去做贴上的步骤。另外它也是一个好用的 HTML 编辑器，除了可以颜色标记 HTML Tag （同时支持 C/C++、Perl、Java）外，还内建完整的 HTML 和 CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装 IE 3.0 以上版本，它还会结合 IE 浏览器于 EditPlus 窗口中，让你可以直接预览编辑好的网页（若没安装 IE，也可指定浏览器路径）。

EditPlus3 编辑器手册：EditPlus3 编辑器手册_w3cschool

点击下载»

HTML 调试

在编写 HTML 代码的时候通常会有以下两种主要类型的错误：

语法错误：由于拼写错误导致程序无法运行；通常熟悉语法并理解错误信息后很容易修复。
逻辑错误：不存在语法错误，但代码无法按预期运行；通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。

HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的。

注释：HTML 之所以以宽松的方式进行解析，是因为 Web 创建的初心就是：人人可发布内容，不去纠结代码语法。

实例

我们通过一段含有错误的 HTML 代码来讨论一下：

实例标题

<h1>HTML 调试示例</h1>
<p>什么使得 HTML 出错？
<ul>
<li>未闭合的元素：如果元素<strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。
<li>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。<strong>重点（strong）<em>重点强调（strongly emphasised）？</strong>这又是什么鬼？
</em>
<li>未闭合的属性：另一种 HTML 常见错误。来看一个示例：<a href="https://www.w3cschool.cn/>W3Cschool 主页链接</a>
</ul>

尝试一下 »

以下是上述代码出现的问题：

段落（Paragraph）和列表项（list item）元素没有结束标签。但是由于元素的结束和另一个的开始很容易推断出来，因此上图中并没有太严重的渲染错误。
第一个<strong>元素没有结束标签。这就严重了，因为该元素结束的位置难以确定。事实上所有剩余文本都加粗了。
第二个<li>元素中存在嵌套问题：对于下面这个代码，在浏览器很难做出正确解析，理由同上。
```
<strong> 重点（strong）<em> 重点强调（ strongly emphasised）？ </strong> 这又是什么鬼？ </em>
```
href属性缺少了一个双引号。从而导致了一个最严重的问题：整个链接完全没有渲染出来。

　但是浏览器会尝试修补代码错误：

<p>和<li>元素加上了关闭标签。
第一个<strong>没有明确的关闭标签，因此浏览器为之后所有独立块都补全了<strong></strong>。
浏览器（以下代码节选自Chrome修补后的页面代码）是这样修补嵌套错误的：

实例标题

<ul>

<li>未闭合的元素：如果元素

<strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。</strong>

</li>

<li>

<strong>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。

<strong>重点（strong）

<em>重点强调（strongly emphasised）？</em>

</strong>

<em>这又是什么鬼？

</em>

</strong>

</li>

<li>

<strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong>

</li>

</ul>

尝试一下 »

删除整个缺少双引号的链接。最后一个列表项就成了：

实例代码

<li>
<strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong>
</li>

尝试一下 »

阅读以上示例后，你会发现保持良好 HTML 格式的重要性。

HTML 基础

HTML 基础- 4个实例

本章介绍了 HTML 中较为常用的基础标签的实例以及 HTML 基础知识。您可能还没接触过这些实例，不过不用担心，阅读完本章您就能够掌握它们了！ 1

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的.

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。

这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：

<h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减。

实例

尝试一下 »

你也可以通过实战实验来尝试挑战一个 h2 标题的设置：

HTML标题实战实验

HTML 段落

HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样，您可以进行实战演练。

实例

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

尝试一下 »

下面这个实例讲述了标题和段落的结构层次：

实例

<h2>第一回宴桃园豪杰三结义斩黄巾英雄首立功</h2>

<p>话说天下大势，分久必合，合久必分。</p>

<h2>第二回张翼德怒鞭督邮何国舅谋诛宦竖</h2>

<p>且说董卓字仲颖</p>

<p>却说张飞饮了数杯闷酒</p>

尝试一下 »

上述实例所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要确保层次结构是合理的。在创建此类结构时，您只需要记住以下几点：

首先，您应该只对每个页面使用一次<h1>，这是主标题，所有其他标题位于层次结构中的下方。
其次，请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题，这是没有意义的，会导致奇怪的结果。
最后，在可用的六个标题级别中，您应该保证每个页面中标题级别的使用不超过三个，除非您认为有必要使用更多。具有许多标题级别的文档会变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。

HTML 中的空格

在代码中可能包含了很多的空格——这是没有必要的

下面的两个代码片段是等价的：

实例

<p>狗狗很呆萌。</p>

<p>狗狗很

呆萌。</p>

尝试一下 »

无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空格字符减少为一个单独的空格符。

为什么我们会使用那么多的空格呢?

答案就是为了可读性——如果你的代码被很好地进行格式化，那么就很容易理解你的代码，反之就会很混乱。在我们的 HTML 代码中，我们让每一个嵌套的元素以两个空格缩进。

你使用什么风格来格式化你的代码取决于你（比如所对于每层缩进使用多少个空格），但是记住你应该坚持使用某种风格。

HTML 链接

HTML 链接是通过标签<a>来定义的。a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

实例

<a href="http://www.w3cschool.cn">这是一个链接</a>

尝试一下 »

提示：在href属性中指定链接的地址。

(您将在本教程稍后的章节中学习更多有关属性的知识)

HTML链接实战测验

HTML 图像

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。

举例如下：<img src="https://www.your-image-source.com/your-image.jpg" rel="external nofollow" >

请注意：img元素是自关闭元素，不需要结束标记。

实例

尝试一下 »

注意： 图像的名称和尺寸是以属性的形式提供的。

HTML 图像实战测验

HTML 强调

在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。

在 HTML 中我们可以使用em（emphasis）元素来标记这样的情况，浏览器默认风格为斜体：

实例

尝试一下 »

在 HTML 中我们还可以使用<strong>(strong importance)元素来标记这样的请况，浏览器默认风格为粗体：

实例

<p>这种液体是<strong>高毒性的</strong>.</p>

<p>我就指望你<strong>不会</strong> 迟到!</p>

尝试一下 »

注意：为了不同的字体风格，我们应该使用元素和一些 CSS 的样式.

HTML 元素

HTML 文档由 HTML 元素定义，HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素

开始标签 *	元素内容	结束标签 *
<p>	这是一个段落	</p>
<a href="default.htm">	这是一个链接	</a>
<br>	这是一个换行标签

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

注释: 您将在本教程的 HTML 属性一章中学习更多有关属性的详细内容。

嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素（可以包含其他 HTML 元素）构成。

HTML 文档实例

实例

<!DOCTYPE html>

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

尝试一下 »

上述的实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

实例

<p>这是第一个段落。</p>

尝试一下 »

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>。
元素内容是: 这是第一个段落。

打开实战测试开始学习 <p> 标签。

<body> 元素:

实例

<body>

<p>这是第一个段落。</p>

</body>

尝试一下 »

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

实例

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

尝试一下 »

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

如果您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

实例

<p>这是一个段落

尝试一下 »

上述实例在浏览器中也能正常显示，因为关闭标签是可选的。

但您不能对此产生依赖性，因为忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

HTML 空元素即为没有内容的 HTML 元素。

HTML 空元素应该在开始标签中关闭。

HTML 的一个空元素为 <br>（用于定义换行），<br> 元素就是没有关闭标签。

HTML 空元素的关闭方法是在开始标签中添加斜杠，比如 <br />，HTML、XHTML 和 XML 都接受这种方式。

注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭，即使是空元素。

HTML 提示：使用小写标签

由于 HTML 标签对英文字母的大小写不敏感，所以 <P> 和 <p> 表达的意思相同，不过早年的大部分网站喜欢使用大写的 HTML 标签。

W3CSchool 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

在HTML4之前，HTML的标准比较混乱，所以早年的HTML代码并不是那么规范，与XML的代码会更加相似，而XML代码的一大特点就是标签喜欢使用大写，所以在HTML刚发展的几年大部分网站都喜欢使用大写的标签。

随着HTML4甚至HTML5的普及，后续的网站都遵循HTML4的推荐——使用小写，这也是为什么现在的大多数网站使用小写的HTML标签的原因。

HTML 属性

属性是为 HTML 元素提供的附加信息。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

实例

<a href="https://www.w3cschool.cn">这是一个链接使用了 href 属性</a>

尝试一下 »

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的 HTML 属性列表: HTML 标签参考手册。

下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

更多 HTML 标准属性说明： HTML 标准属性参考手册.