HTML简明教程（一）
**内容主体来自：W3School **
一、HTML 简介
二、HTML 基础
三、HTML 元素
四、HTML 属性
五、HTML 标题
六、HTML 段落
七、HTML 文本格式化
八、HTML 样式CSS
九、HTML 链接
一、HTML简介
什么是 HTML？
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
什么是HTML 标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
例子解释
-
<html> 与 </html>之间的文本描述网页 -
<body> 与 </body>之间的文本是可见的页面内容 -
<h1> 与 </h1>之间的文本被显示为标题 -
<p> 与 </p>之间的文本被显示为段落
二、HTML基础
HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
注释：在 href 属性中指定链接的地址。
HTML 图像
HTML 图像是通过 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
注释：图像的名称和尺寸是以属性的形式提供的。
三、HTML 元素
HTML 文档是由 HTML 元素定义的。
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
<p> |
This is a paragraph | </p> |
<a href="default.htm" > |
This is a link | </a> |
<br /> |
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
HTML元素的嵌套
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。HTML 文档由嵌套的 HTML 元素构成。例如：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
不要忘记结束标签
虽然即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。HTML5 版本不允许省略结束标签。
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素,它定义换行。
在 XHTML、XML 以及新版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
HTML 提示：使用小写标签
虽然大写标签还一直存在，但是请使用小写标签，从开始就形成良好的习惯！
四、HTML 属性
属性为 HTML 元素提供附加信息。
请使用英文小写的属性名
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称=值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性例子 1:
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
属性例子 2:
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
属性例子 3:
<table> 定义 HTML 表格。
<table border="1"> 拥有关于表格边框的附加信息。
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'
完整的 HTML 参考手册
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
更多关于标准属性的信息请访问：
HTML 标准属性参考手册
五、HTML 标题
HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题很重要
请确保将 HTML heading标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
HTML 水平线<hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。
HTML 注释
浏览器会忽略注释，也不会显示它们。注释是这样写的：
<!-- This is a comment -->
注释：开始括号之后需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
六、HTML 段落
段落是通过<p>标签定义的。
注释：浏览器会自动地在段落的前后添加空行。（因为它是块级元素）
提示：不要使用空的段落标记 <p></p> 去插入一个空行。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
HTML 空行和空格的输出
我们无法确定 HTML被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于HTML，您无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
七、HTML 文本格式化
文本格式化标签
| 标签 | 描述 |
|---|---|
<b> |
定义粗体文本。 |
<big> |
定义大号字。 |
<em> |
定义着重文字。 |
<i> |
定义斜体字。 |
<small> |
定义小号字。 |
<strong> |
定义加重语气。 |
<sub> |
定义下标字。 |
<sup> |
定义上标字。 |
<ins> |
定义插入字。 |
<del> |
定义删除字。 |
<s> |
不赞成使用。使用 |
<strike> |
不赞成使用。使用 |
<u> |
不赞成使用。使用样式（style）代替。 |
“计算机输出”标签
| 标签 | 描述 |
|---|---|
<code> |
定义计算机代码。 |
<kbd> |
定义键盘码。 |
<samp> |
定义计算机代码样本。 |
<tt> |
定义打字机代码。 |
<var> |
定义变量。 |
<pre> |
定义预格式文本。 |
<listing> |
不赞成使用。使用
代替。 |
<plaintext> |
不赞成使用。使用
代替。 |
<xmp> |
不赞成使用。使用
代替。 |
| 标签 | 描述 |
|---|---|
<abbr> |
定义缩写。 |
<acronym> |
定义首字母缩写。 |
<address> |
定义地址。 |
<bdo> |
定义文字方向。 |
<blockquote> |
定义长的引用。 |
<q> |
定义短的引用语。 |
<cite> |
定义引用、引证。 |
<dfn> |
定义一个定义项目。 |
八、HTML 样式CSS
所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表： 外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
访问CSS 教程，学习更多有关样式的知识。
九、HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。
通过使用 <a> 标签在 HTML 中创建链接。
有两种使用<a> 标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
- 通过使用 target 属性 - 定义被链接的文档在何处显示
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。提示："链接文本"不必一定是文本。图片或其他HTML元素都可以成为链接。
HTML 链接 - target 属性
使用 Target 属性，可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.sina.com.cn/" target="_blank">Visit sina!</a>
HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（namedanchors）时，可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
实例
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.sina.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中，将#符号和锚名称添加到URL的末端，就可以直接链接到 tips 这个命名锚了。
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。百度百科中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
基本的注意事项 - 有用的提示：
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.sina.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.sina.com.cn/html/"。