##########################################HTML介绍##########################################
HTML文件是什么？
HTML表示超文本标记语言（Hyper Text Markup Language）。
HTML文件是一个包含标记的文本文件。
这些标记保速浏览器怎样显示这个页面。
HTML文件必须有htm或者html扩展名。
HTML文件可以用一个简单的文本编辑器创建。
---------------------------------------
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
---------------------------------------
HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。
在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。
在<b>和</b>标签之间的文本会以加粗字体显示。
为什么使用小写标签？
HTML标签是大小写无关的：<B>跟<b>含义相同。当你上网的时候，你会注意到多数教程在示例中使用大写的HTML标签，我们总是使用小写标签。为什么？
假如你想投入到下一代HTML中，你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签，XHTML（下一代HTML）也需要小写标签。
标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：
<body bgcolor="red">
标签<table>定义了一个HTML表格。使用一个附加的border属性，你可以告诉浏览器：这个表格是没有边框的，代码是：
<table border="0">
属性通常由属性名和值成对出现，就像这样：name="value"。属性通常是附加给HTML元素的开始标签的。
属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。
在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。
比如：name='John "ShotGun" Nelson'。
注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。
##########################################HTML介绍##########################################
##########################################HTML基本标签##########################################
----------------------------------------------------------
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
----------------------------------------------------------
段落
<p> </p> --> HTML自动在一个段落前后各添加一个空行。
标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。
----------------------------------
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
----------------------------------
换行<br>
当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。
<p>This <br> is a para<br>graph with line breaks</p>
<br>标签是一个空标签，它没有结束标记。
HTML中的注释
注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你。
<!-- This is a comment -->
注意：你需要在左括号“<”后面跟一个感叹号，右括号不用。
基本注意点——有用的技巧:
当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。
HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。
使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。（但是不要用<br>标签来创建列表，我们后面会专门学习HTML列表的。）
你也许注意到了段落可以不写结束标记</p>。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签。
HTML自动在某些元素前后增加额外的空行，就像在段落和标题元素的前后一样。
使用水平线（<hr>标签）来分隔
------------------------------------------------------------
<html>
<body bgcolor="blue">
<hr>
<center><p>This is a test page <br>This is a test page</p>
<hr>
</body>
</html>
------------------------------------------------------------
-----------------------------------------
<html>
<body>
<b>This text is bold</b>
<br>
<strong>
This text is strong
</strong>
<br>
<big>
This text is big
</big>
<br>
<em> <! -- 强调 -->
This text is emphasized
</em>
<br>
<i> <! -- 斜体 -->
This text is italic
</i>
<br>
<small>
This text is small
</small>
<br>
This text contains
<sub> <! -- 下标 -->
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup> <! -- 上标 -->
</body>
</html>
-----------------------------------------
-----------------------------------------
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
----------------------------------------
<!-- pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 -->
##########################################HTML基本标签##########################################
##########################################HTML实体##########################################
有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。
想要在HTML中显示一个小于号“<”，需要用到字符实体。
一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）
想要在HTML文档中显示一个小于号，我们必须这样写：<或者<
使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。
注意：实体名是大小写敏感的。
-------------------------------------------
<html>
<body>
<p>This is a character entity: {</p>
<p>
</body>
</html>
##########################################HTML实体##########################################
##########################################HTML链接##########################################
-----------------------------------------------------------
<html>
<body>
<p>
<a href="lastpage.htm">
This text</a> is a link to a page on this Web site.
</p>
<p>
<a href="http://www.microsoft.com/">
<! -- 创建链接 其中<a href="http://www.microsoft.com/" target="_blank">
<! -- 以上表示在新标签打开链接，不加的话会在当前标签覆盖原网页打开 -->
This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>
-----------------------------------------------------------
------------------------------------------
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<!-- name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。 -->
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
------------------------------------------
##########################################HTML链接##########################################
##########################################HTML框架##########################################
------------------------------------------
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm"> <! -- 这个例子说明了如何创建一个有三个页面的垂直分栏。src=填网页名称 -->
<frame src="frame_c.htm">
</frameset>
</html>
------------------------------------------
------------------------------------------
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm"> <! -- 这个例子说明了如何创建一个有三个页面的水平分栏。src=填网页名称 -->
<frame src="frame_c.htm">
</frameset>
</html>
------------------------------------------
<frame>标签定义了每个框架中放入什么文件
基本注意点——有用的技巧
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。如果不想让用户改变大小，可以在<frame>标签中加入：noresize="noresize"。
##########################################HTML框架##########################################
##########################################HTML表格##########################################
<tr> 标签定义 HTML 表格中的行。
--------------------------------------
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
-------------------------------------
##########################################HTML表格##########################################