1 HTML 简介
下面解释什么是HTML，以及HTML标签和HTML文档的含义。
1.1 什么是 HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言(markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
1.2 HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
1.3 HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
例子解释
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 <p> 之间的文本被显示为段落
2 HTML 基础
本章通过实例向您演示最常用的 HTML 标签。
2.1 HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
2.2 HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
2.3 HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
2.4 HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
2.5 HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
2.6 HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释是这样写的：
<!-- This is a comment -->
2.7 换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br />标签。
2.8 HTML 提示 - 如何查看源代码
您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？”
如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
3 HTML 编辑器
可以使用专业的 HTML 编辑器来编辑 HTML：
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。
通过记事本，依照以下四步来创建您的第一张网页。
- 步骤一：启动记事本。
- 步骤二：用记事本来编辑 HTML，在记事本中键入 HTML 代码。
- 步骤三：使用 .htm 或 .html 扩展名保存 HTML 文件。
- 步骤四：使用任意浏览器打开这个 HTML 文件。
4 HTML元素
HTML 文档是由 HTML 元素定义的。HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.htm" > | This is a link | </a> |
| <br/> |
4.1 HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
4.2 HTML 实例解释
<p> 元素：
<p>This is my first paragraph.</p>
这个
元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签
，以及一个结束标签 </p>。元素内容是：This is my first paragraph。
4.3 空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
4.4 HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于<p>。许多网站都使用大写的 HTML 标签。
推荐使用小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
5 HTML 属性
HTML 标签可以拥有属性。属性为 HTML 元素提供附加信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
5.1 更多 HTML 属性实例
属性例子 1:
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
属性例子 2:
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
5.2 HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。
5.3 始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'
5.4 HTML 属性参考手册
我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
如需更多关于标准属性的信息，请访问：
6 HTML 样式
style 属性用于改变 HTML 元素的样式。
6.1 HTML 的 style 属性
style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
您可以在我们的 CSS 教程中学习关于样式和 CSS 的所有知识。
6.2 不赞成使用的标签和属性
在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
应该避免使用下面这些标签和属性：
| 标签 | 描述 |
|---|---|
| <center> | 定义居中的内容。 |
| <font> 和 <basefont> | 定义 HTML 字体。 |
| <s> 和 |
定义删除线文本 |
| <u> | 定义下划线文本 |
| 属性 | 描述 |
|---|---|
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
对于以上这些标签和属性：请使用样式代替！
6.3 HTML 样式实例
背景颜色
background-color 属性为元素定义了背景颜色：
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
style 属性淘汰了“旧的” bgcolor 属性。
字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
style 属性淘汰了旧的 <font> 标签。
文本对齐
text-align 属性规定了元素中文本的水平对齐方式：
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
style 属性淘汰了旧的 "align" 属性。
7 HTML 文本格式化
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
7.1 文本格式化标签
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本。 |
| big | 定义大号字。 |
| em | 定义着重文字。 |
| i | 定义斜体字。 |
| small | 定义小号字。 |
| strong | 定义加重语气。 |
| sub | 定义下标字。 |
| sup | 定义上标字。 |
| ins | 定义插入字。 |
| del | 定义删除字。 |
| s | 不赞成使用。使用 <del> 代替。 |
| strike | 不赞成使用。使用 <del> 代替。 |
| u | 不赞成使用。使用样式（style）代替。 |
7.2 “计算机输出”标签
| 标签 | 描述 |
|---|---|
| code | 定义计算机代码。 |
| kbd | 定义键盘码。 |
| samp | 定义计算机代码样本。 |
| tt | 定义打字机代码。 |
| pre | 定义变量。 |
| listing | 定义预格式文本。 |
| <listing> | 不赞成使用。使用<pre> 代替。 |
| <plaintext> | 不赞成使用。使用<pre> 代替。 |
| <xmp> | 不赞成使用。使用<pre> 代替。 |
8 CSS 单位
尺寸
| 单位 | 描述 |
|---|---|
| % | 百分比 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| em | 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 |
| ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
| pt | 磅 (1 pt 等于 1/72 英寸) |
| pc | 12 点活字 (1 pc 等于 12 点) |
| px | 像素 (计算机屏幕上的一个点) |
颜色
| 单位 | 描述 |
|---|---|
| (颜色名) | 颜色名称 (比如 red) |
| rgb(x,x,x) | RGB 值 (比如 rgb(255,0,0)) |
| rgb(x%, x%, x%) | RGB 百分比值 (比如 rgb(100%,0%,0%)) |
| #rrggbb | 十六进制数 (比如 #ff0000) |
参考：