HTML基本标签


HTML中最重要的标签是定义标题元素,段落和换行的标签。

学习HTML的最好方法是编辑运行示例代码。我们为您创建了一个十分方便的HTML编辑器。在这个编辑器里,您可以编辑HTML源代码,按下“运行代码”按钮后,就可以看见结果。



请自己尝试一下这个例子

一个非常简单的HTML文档:


这个例子是一个非常简单的HTML文档,拥有很少的几个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文档中换行的使用。


诗歌的问题:


这个例子说明了HTML显示格式的一些问题。


标题元素:


这个例子说明了在HTML中显示标题元素的标签。


居中的标题元素:


这个例子显示了一个居中的标题元素。


水平线:


这个例子说明了如何插入水平线。


隐藏的注释:


这个例子说明了在HTML文档中如何插入隐藏的注释。


背景色:


这个例子说明了如何给页面设置背景色。