# 常用标签

我们的所有用来定义文档内容的 html 标签都写在<body>标签里面

# 标题 <h></h>

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>这是一个h1标题。</h1>
<h2>这是一个h2标题。</h2>
<h3>这是一个h3标题。</h3>
<h4>这是一个h4标题。</h4>
<h5>这是一个h5标题。</h5>
<h6>这是一个h6标题。</h6>

注意

不要使用较低级别来减少标题字体大小：请改用 CSS font-size 属性。
避免跳过标题级别：始终从<h1>下次使用开始，<h2>等等。
h1 标签主要是用来向搜索引擎强调重要内容的一种标签，切记，任何情况下，一个页面只能存在一个 h1 标签。

# 标题很重要

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。 （课外知识：搜索引擎的工作原理）

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

上面例子同学们注意到没有，我并没有写html body标签，也同样可以在网页显示h标签的内容, 这个是浏览器自动帮我们生成了html body标签，这时大家可以在浏览器按F12，去查看页面结构是怎么样的。

不过这里也不推荐大家这样简写，还是要养成习惯，写好HTML网页的基础结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <h1>这是一个h1标题。</h1>
    <h2>这是一个h2标题。</h2>
    <h3>这是一个h3标题。</h3>
    <h4>这是一个h4标题。</h4>
    <h5>这是一个h5标题。</h5>
    <h6>这是一个h6标题。</h6>
</body>
</html>

# 段落 <p></p>

HTML 可以将文档分割为若干段落。

段落是通过 <p> 标签定义的。

<p>这是一个段落 </p>
<p>这是另一个段落</p>

注意：浏览器会自动地在段落的前后添加空行。（p标签是块级元素）

# 折行 <br /> 单标签

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

<p>这个<br />段落<br />演示了分行的效果</p>

# 水平线 <hr /> 单标签

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

# 容器 <div></div>

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div>我是一个普通的容器，可以用来装载所有类型的内容！</div>
  </body>
</html>

# <span></span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<span>我是文本内容</span>

# 链接 <a></a>

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

点我体验跳转页面

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 <a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

# HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">链接文本</a>

href 属性描述了链接的目标地址。

<a href="http://www.baidu.com">百度</a>

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

# HTML 链接 - target 属性

值	描述
_self	默认。在相同的框架中打开被链接文档。
_blank	在新窗口中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。

<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com" target="_parent">百度</a>
<a href="http://www.baidu.com" target="_top">百度</a>

# HTML 链接- id 属性锚点

id属性可用于创建在一个HTML文档书签标记（锚点）。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中插入id ( 即书签标记，锚点 )

<h1 id="title"> 我是h1标签 </h1>

在HTML文档中创建一个链接到 "id为title的书签标记" ：

<a href="#title">访问到我是h1标签所在位置</a>

提示：您可以使用 name 属性来替代 id 属性，命名锚点同样有效。

常规应用：
<a href="http://www.baidu.com">外部链接</a>
<a href="about.html">内部链接 </a>

其他应用：
<a href="mailto:邮箱地址">邮件链接</a>
<a href="tel:电话号码">一键拨打</a>
<a href="sms:139xxxxxxx">一键发送短信</a>

# 文本格式化

<b>定义粗体文本</b>
<em>定义着重文字</em>
<pre>定义预格式文本</pre>
<mark>定义记号文本</mark>
<u>定义下划线文本</u>
<strong>定义加重语气</strong>
<i> 定义斜体文本 </i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>

# <b>标签

HTML 提醒注意元素（<b>）用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。

注意

<b> 应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其它特别强调）。
不要将<b>元素与 <strong>、<em>或<mark>元素混淆。 <strong>元素表示某些重要性的文本，<em>强调文本，而<mark>元素表示某些相关性的文本。 <b>元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它。
类似的，也不要用 <b> 元素来标记标题。
以前 <b> 元素的意思就是让文本变成粗体。但从 HTML4 开始，不赞成标签表示带样式信息，于是 <b> 元素的含义发生了变化。

# <em>标签

HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容，表示着重强调其内容，通常的，该元素会被浏览器展示为斜体文本， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。

# <i>标签

HTML 元素 <i> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

注意：<em> 标签表示着重强调其内容，而 <i> 标签表示从正常的散文中区分出的文本, 如电影或书籍的名字，一个外来词, 或者当文本指的是一个字的定义，而不是其自身代表的语义。

# <strong>标签

Strong 元素 (<strong>)表示文本十分重要，一般用粗体显示。

为什么在一个渲染的网站上会有这么多方式来表达同样的东西。Bold 和 Strong 可能就是这其中的一种。为什么使用<strong></strong>而不是<b></b>? 使用 strong 的话你不得不打更多的字母，却产生出和 b 同样的效果，对吧？

strong 是一个逻辑状态，而 bold 是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用 strong 呈现出的表现形式不同于单纯的加粗。因为 bold 是一个物理状态，他没有区分表现形式和内容。如果让 bold 做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。

同样应该注意<b></b> 还有其他用途，比如想单纯地吸引注意而不增加其重要性。

# <pre>标签

HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

# <mark>标签

这个 HTML mark 标签代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词。

# <sup>标签

HTML<sup> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。

# <del>标签

HTML 的<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins> 标签的作用恰恰于此相反：表示文档中添加的内容。

# <u>标签

HTML <u> 元素使文本在其内容的基线下的一行呈现下划线。在 HTML5 中, 此元素表示具有未标注的文本跨度，显示渲染，非文本注释，例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或将文本标记为拼写错误。

# HTML 注释标签

您能够通过如下语法向 HTML 源代码添加注释：

<!-- 在此处写注释 -->

注释：在开始标签中有一个惊叹号，但是结束标签中没有。

浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

您可以利用注释在 HTML 中放置通知和提醒信息：

<!-- 这是一段注释 -->

<p>这是一个段落。</p>

<!-- 记得在此处添加信息 -->

注释对于 HTML 纠错也大有帮助，因为您可以一次注释一行 HTML 代码，以搜索错误：

<!-- 此刻不显示div标签内容：
  <div>我是一个div</div>
-->

# 条件注释

您也许会在 HTML 中偶尔发现条件注释：

<!--[if IE 6]>
    .... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer (ie 6) 执行的 HTML 标签。

← html介绍和结构分析文件的路径 →