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里的内容

所有浏览器都支持 标签。