本文详细介绍了HTML的基本概念，包括HTML文件的结构、标签、元素和属性。强调了HTML文档由元素组成，如标题、段落、换行、注释等，并提供了各种元素的示例，如标题、段落、链接、图片和字符实体。还讨论了如何查看HTML源代码，以及如何创建超级链接，包括目标属性和命名锚。此外，还提到了如何创建邮件链接和跳出框架的链接。
目录
HTML介绍
HTML文件是什么？
HTML表示超文本标记语言（Hyper Text Markup Language）。
HTML文件是一个包含标记的文本文件。
这些标记保速浏览器怎样显示这个页面。
HTML文件必须有htm或者html扩展名。
HTML文件可以用一个简单的文本编辑器创建。
想不想尝试一下？
假如你运行的是windows系统，打开记事本在其中输入以下文本：
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>将此文件保存为“mypage.htm”。
启动浏览器。在文件菜单中选择“打开”（或者“打开页面”）， 这时将出现一个对话框。选择“浏览”（或者“选择文件”），定位到你刚才创建的HTML文件-----“mypage.htm”，选择它，单击“打开”。然后在对话框中，你将看到这个文件的地址，比如说“C:\MyDocuments\mypage.htm”。单击“确定”，浏览器将显示此页面。
例子解释
HTML文档中，第一个标签是<html>.这个标签告诉浏览器这时HTML文档的开始。HTML文档的最后一个标签是</html>,这个标签告诉浏览器这是<HTML>文档的终止。
在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。
在<b>和</b>标签之间的文本会以加粗字体显示。
关于HTML编辑器：
用一些所见即所得的编辑器，比如frontpage，dreamwaver，你可以很容易创建一个页面，而不需要在纯文本中编写代码。
但是假如你想成为一名熟练的网络开发者，我们强烈推荐你用纯文本编辑器编写代码，这有助于学习HTML基础。
常见问题
问：我编写完了HTML文件，但是不能在浏览器中看见结果，为什么？
答：请确认你保存了文件，并且使用了正确的文件名和扩展名，例如：“c:\mypage.htm”，并且确认你用浏览器打开时使用同样的文件名。
问：我编辑了HTML文件，但是修改结果并没有在浏览器中显示，为什么？
答：浏览器缓存了你的页面，所以它不需要两次读取同样的页面。你修改了这个页面，浏览器并不知道。请使用“刷新/重载”按钮来强迫浏览器读取编辑过的页面。
HTML文档是由HTML元素组成的文本文件。
HTML元素是预定义的正在使用的HTML标签。
HTML标签
HTML标签用来组成HTML元素。
HTML标签两端有两个包括字符：“<”和“>”,这两个包括字符被称为角括号。
HTML标签通常成对出现，比如<b>和</b>。一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。
HTML标签是大小写无关的，<b>跟<B>表示的意思是一样的。
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元素：
<b>This text is bold</b>此HTML元素以开始标签<b>起始， 内容是：This text is bold，以结束标签</b>中止。<b>标签的目的是定义一个需要被显示成粗体的HTML元素。
下面也是一个HTML元素：
<body>
This is my first homepage.
<b>This text is bold</b>
</body>此HTML标签以开始标签<body>起始，终止于结束标签</body>。<body>标签的目的是定义一个HTML元素，使其包含HTML文档的主体。
为什么使用小写标签？
我们刚说过，HTML标签是大小写无关的：<B>跟<b>含义相同。当你上网的时候，你会注意到多数教程在示例中使用大写的HTML标签，我们总是使用小写标签。为什么？
假如你想投入到下一代HTML中，你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签，XHTML（下一代HTML）也需要小写标签。
标签属性
标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。
标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：
<body bgcolor="red">标签<table>定义了一个HTML表格。使用一个附加的border属性，你可以告诉浏览器：这个表格是没有边框的，代码是：
<table border="0">
属性通常由属性名和值成对出现，就像这样：name="value"。属性通常是附加给HTML元素的开始标签的。
引号样式
属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。
在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。
比如：name='John "ShotGun" Nelson'。
注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。
HTML基本标签
HTML中最重要的标签是定义标题元素，段落和换行的标签。
学习HTML的最好方法是编辑运行示例代码。我们为您创建了一个十分方便的HTML编辑器。在这个编辑器里，您可以编辑HTML源代码，按下“运行代码”按钮后，就可以看见结果。
请自己尝试一下这个例子
一个非常简单的HTML文档：
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>这个例子是一个非常简单的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>这个例子说明了段落元素中的文本是如何在浏览器中显示的。
在这个页面的底部，还有更多例子。
标题元素
标题元素由标签<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>
HTML自动在一个标题元素前后各添加一个空行。
段落
段落是用<p>标签定义的。
HTML自动在一个段落前后各添加一个空行。
换行
当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。
<br>标签是一个空标签，它没有结束标记。
HTML中的注释
注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你。
注意：你需要在左括号“<”后面跟一个感叹号，右括号不用。
基本注意点——有用的技巧
当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。
HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。
使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。（但是不要用<br>标签来创建列表，我们后面会专门学习HTML列表的。）
你也许注意到了段落可以不写结束标记</p>。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签。
HTML自动在某些元素前后增加额外的空行，就像在段落和标题元素的前后一样。
我们使用了水平线（<hr>标签）来分隔我们教程的章节。
多个段落：
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>这个例子说明了段落的一些默认行为。
换行：
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>这个例子说明了在HTML文档中换行的使用。
格式的问题：
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser simply ignores your formatting!</p>
</body>
</html>标题元素：
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>
</body>
</html>居中的标题元素：
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>
</body>
</html>水平线：
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>隐藏的注释：
<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>背景色：
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>HTML格式
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>“计算机输出”标签：
<html>
<body>
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p>
<b>Note:</b> These tags are often used to display computer/programming code.
</p>
</body>
</html>地址：
<html>
<body>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>
</body>
</html>缩写和首字母缩略法：
<html>
<body>
<abbr title="United Nations">UN</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
<p>This only works for the acronym element in IE 5.</p>
<p>This works for both the abbr and acronym element in Netscape 6.2.</p>
</body>
</html>文字方向：
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>块引用：
<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
Here comes a short quotation:
<q>
This is a short quotation
</q>
<p>
With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
</p>
</body>
</html>删除和插入文字：
<html>
<body>
<p>
a dozen is
<del>twenty </del>
<ins>twelve </ins>
pieces
</p>
<p>
Most browsers will overstrike deleted text and underline inserted text.
</p>
<p>
Some older browsers will display deleted or inserted text as plain text.
</p>
</body>
</html>如何查看HTML源文件
你有没有看过一些网页，并且想知道它是如何做出来的呢？
在浏览器菜单中选择查看——源文件，将弹出一个窗口，这个页面的HTML代码就在其中。
HTML实体
有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。
想要在HTML中显示一个小于号“<”，需要用到字符实体。
字符实体
在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。
一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）
想要在HTML文档中显示一个小于号，我们必须这样写：<或者<
使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。
注意：实体名是大小写敏感的。
下面这个例子能够让你针对HTML实体实践一下。
不可拆分的空格
在HTML中，最常见的字符实体就是不可拆分空格。
通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体：
最常用的字符实体
| 显示结果 | 描述 | 实体名 | 实体号 |
| 不可拆分的空格 | |   | |
| < | 小于 | < | < |
| > | 大于 | > | > |
| & | and符号 | & | & |
| " | 引号 | " | " |
| ' | 单引号 | ' |
其他一些常用的字符实体
| 显示结果 | 描述 | 实体名 | 实体号 |
| ¢ | 分 | ¢ | ¢ |
| £ | 英镑 | £ | £ |
| ¥ | 人民币元 | ¥ | ¥ |
| § | 章节 | § | § |
| © | 版权 | © | © |
| ® | 注册 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
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/">
This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>图片作为链接：
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src=".\images\next.gif">
</a>
</p>
</body>
</html>锚标签和href属性
HTML使用锚标签（<a>）来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。
创建一个锚的语法：
锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。
标签<a>被用来创建一个链接指向的锚，href属性用来指定连接到的地址，在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。
这个锚定义了一个到W3Schools的链接：
上面这段代码在浏览器中显示的效果如下：
target属性
使用target属性，你可以定义从什么地方打开链接地址。
下面这段代码打开一个新的浏览器窗口来打开链接：
锚标签和name属性
name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。
下面是命名锚的语法：
你可以为锚随意指定名字，只要你愿意。下面这行代码定义了一个命名锚：
你应该注意到了：命名锚的显示方式并没有什么与众不同的。
想要直接链接到“tips”章节的话，在URL地址的后面加一个“#”和这个锚的名字，就像这样：
一个链接到本页面中某章节的命名锚是这样写的：
基本注意点——有用的技巧
尽量在子目录路径后面加一个左斜杠。假如你像下面这样写：href="http://www.w3schools.com/html"，将会产生向服务器产生两个HTTP请求，因为服务器会在后面追加一个左斜杠，产生一个新的请求，就像这样：href="http://www.w3schools.com/html/"。
命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚，到这些锚的链接被放在页面的顶端。
如果浏览器无法找到指定的命名锚，它将转到这个页面的顶部，而不显示任何错误提示。
更多实例
<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</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>
<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>
<body>
<p>Locked in a frame?</p>
<a href="http://www.w3schools.com/" target="_top">Click here!</a>
</body>
</html>创建一个邮件链接：
<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>这个例子说明了如何链接到一个邮件信息（只有安装了邮件程序才有效）。
创建一个邮件链接2：
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
