html - 常用标签简介

一、标题：<h1> - <h6>

示例代码：

<h1>This is a heading h1</h1>
<h2>This is a heading h2</h2>
<h3>This is a heading h3</h3>

示例效果：

This is a heading h1

This is a heading h2

This is a heading h3

---

标题很重要
- 请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
- 搜索引擎使用标题为您的网页的结构和内容编制索引。
- 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
- 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

二、段落：<p> 内容 </p>

示例代码：

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

示例效果：

This is a paragraph.

This is another paragraph.

---

• 浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
• 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

三、链接：<a> 内容 </a>

示例代码：

<a href="http://www.w3school.com.cn">这是一个有下划线的链接</a>

示例效果：
这是一个有下划线的链接

---

• 通过在<a>标签中加入文字形成链接文字，若加入图片则形成图片链接
• 在 href 属性中指定链接的地址

• 也可以通过使用样式生成一个没有下划线的链接，例如：
  <a href="/example/html/lastpage.html" style="text-decoration:none">这是一个没下划线的链接！</a>
  这是一个没下划线的链接！

• 如果把链接的 target 属性设置为 “_blank”，该链接会在新窗口中打开，例如：
  <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
  Visit W3School!

四、图像：<img>

示例代码：

<img src="w3school.jpg" width="104" height="142" />

示例效果：

---

• 通过在src中设置图片地址
• 该标签没有闭合标签，一个标签插入一个图片
• 图像的名称和尺寸是以属性的形式提供的，以及在属性中可提供更多的设置

五、水平线：<hr />

示例代码：

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

示例效果：

This is a paragraph

---

This is a paragraph

---

This is a paragraph

---

• ---

  标签在 HTML 页面中创建水平线。
• hr 元素可用于分隔内容。

六、注释：<!-- 注释内容 -->

示例代码：

<!-- This is a comment -->

示例效果：

• 可以看到注释不会再网页中显示
• 可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们
• 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要

七、换行：<br />

示例代码：

一段<br />二段<br />三段

示例效果：
一段
二段
三段

---

• 您也许发现 <br> 与 <br /> 很相似。
• 在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
• 即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

八、自定义缩写：<abbr>

示例代码：

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

示例效果：

The PRC was founded in 1949.

• 当把鼠标移动到PRC上时会显示一个额外框PRC的完整解释，即title里的内容
• 所有浏览器都支持 标签。