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>标签定义的。
<p>This is another paragraph</p>
HTML自动在一个段落前后各添加一个空行。
--------------------------------------------------------------------------------
换行
当需要结束一行，并且不想开始新段落时，使用<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>
<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显示格式的一些问题。
标题元素：
<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中显示标题元素的标签。
居中的标题元素：
<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文档中如何插入隐藏的注释。
背景色：
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
这个例子说明了如何给页面设置背景色。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
