HTML/基础

维基教科书,自由的教学读本
跳到导航 跳到搜索

本页面将介绍基本HTML格式,及常用标签。

HTML格式[编辑]

HTML的基本格式:

<html>

<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>Paragraph 1.</p>

<p>Paragraph 2.</p>

</body>
</html>
HTML basic form example.png

HTML常用标签[编辑]

<html>标签[编辑]

<html></html>标签之间的内容被浏览器识别为HTML代码。有时HTML文件中还包含其他标记如<php></php>,其内容被识别为PHP等其他语言代码。若没有语言说明,浏览器往往默认为HTML代码。一般HTML代码都要放在<html></html>标签内。

示例:

<html>
<body>

<h1>Heading In HTML Label</h1>

<p>Paragraph in HTML label.</p>

</body>
</html>

<h1>Heading Out of HTML Label</h1>

<p>Paragraph out of HTML label.</p>

显示:

HTML html label example.png

<body>标签[编辑]

<body></body>之间的内容是被显示的可见的页面内容。这意味着:

  • <body></body>包含全部可见的页面元素。
  • 不显示的页面元素,如网页标题,应该放在<body></body>之外。
  • <body></body>之外的可见元素,默认也会被显示。

示例:

<html>

<head>
<title>The Title Of This Page</title>
</head>

<body>
<h1>Heading In Body Label</h1>
<p>Paragraph in body lable.</p>
</body>

<h1>Heading Out of Body Label</h1>
<p>Paragraph out of body lable.</p>

</html>

结果:

HTML body label example.png

<h1>-<h6>标签[编辑]

<h1> - <h6>标签是可使用的六个级别的标题。<h1>定义为等级最高的标题,字体最大。<h6>定义等级最低的标题字体最小。

<h1> - <h6>仅应当被用作标题,而不应该被用作格式化文本(浏览器和搜索引擎会将它们识别为标题,产生误解)。

示例:

<html>

<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>Paragraph.</p>

</body>
</html>

结果:

HTML h1-h6 label example.png

<p>标签[编辑]

<p>标签定义段落。

  • 在HTML中,不能直接通过代码来换行,所有连续的回车和空格都会被视为一个空格。
  • 默认为左对齐,可以由参数或者样式设置其他格式类型。
  • 浏览器会自动在其前后设置空白。默认间距由浏览器决定,也可以由样式决定。
  • 如果文本没有被<p></p>包含,那么它们将作为一个段落。
<html>
<body>

<p>You can't

go to a new line by typing Enter twice.</p>

<p>The text will be left-aligned. The text will be left-aligned. The text will be left-aligned. The text will be left-aligned. The text will be left-aligned. The text will be left-aligned.</p>

If you enter something between two p label,
they will be one paragraph.

<p align="right">Right align.</p>

<p align="center">Center align.</p>

<p>Any attributes of p label are not recommended. Please use style instead.</p> 

</body>
</html>

结果:

HTML p label example.png

<a>标签[编辑]

<a> 标签可定义锚。锚 (anchor) 有两种用途:

  • 通过使用 href 属性,创建指向另外一个文档的链接(或超链接)
  • 通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)

前者就是我们所熟悉的超链接,是最基本的页面元素之一;后者也称作锚点,是较为复杂的高级用法,将会在后续介绍。

<a>元素最重要的属性是 href 属性,它指定链接的目标。属性一般放在首标签的尖括号内,用空格与标签名分开,放于后面。例如: <a href="https://zh.wikibooks.org">Go to Wikibooks</a>

超链接文本的默认外观是:

  • 未访问链接:下划线,蓝色
  • 已访问链接:下划线,紫色

由于可以更改样式来修改超链接外观,有些网站的超链接可能是其他外观样式。

示例:

<html>
<body>

<a href="https://zh.wikibooks.org">Go to Wikibooks</a>

<p>Do you want to <a href="https://zh.wikibooks.org">go to Wikibooks</a>?</p>

</body>
</html>

结果:

HTML a label example.png

<!--...-->标签[编辑]

<!--...-->标签中的内容定义注释,注释不会显示在网页中。

<html>

<body>

<!--Comment won't show in your page.-->

<p>This is a paragraph.</p>

</body>
</html>

结果:

HTML comment tag example.png