HTML常用标签

1 标签语义

标签语义，简单理解就是指 标签的含义、作用 。

学习标签，重点是记住每个标签的语义。根据标签的语义， 在合适的地方

给一个最为合理的标签，可以让页面结构更清晰 。

2 常用标签

2.1标题标签<h~>

<h1>  1 级标题</h1>
<h2>  2 级标题</h2>
<h3>  3 级标题</h3>
<h4>  4 级标题</h4>
<h5>  5 级标题</h5>
<h6>  6 级标题</h6>

标签语义： 1~6级标题， 重要程度依次递减 。

加了标题标签的文字，具有以下 特点 ：

文字都有 加粗  

从h1 → h6文字逐渐变小；

文字 独占一行 。

2.2段落标签<p>

在新闻、公告等文章类页面中，使用段落标签，分段显示文字。

<p> 我是一个段落标签 </p>

标签语义：把 HTML 文档分割为若干段落。

加了段落标签的文字，具有以下 特点 ：

• 分段显示，段落和段落之间保有 空隙 。

• 标签内的文字会根据浏览器窗口的大小自动换行。

2.3换行标签<br>

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口

的右端，然后才自动换行。

如果希望某段文本强制换行显示，就需要使用 换行标签 <br> 。

<br>

标签语义：强制换行。

特点：

<br> 是个单标签。

<br> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插

入一些垂直的间距。

2.4水平线标签<hr>

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清

晰，层次分明。

水平线可以通过 <hr>标签 来定义。

<hr>

标签语义：主题分割。

特点：

<hr> 是个单标签。

<hr> 标签，在页面中显示一条水平线

2.5文本格式化标签

使用文本格式化标签，为文字设置 粗体、斜体 或 下划线 等效果。

标签	显示效果
<b></b>和<strong></strong>	文字以 粗体 方式显示（推荐使用strong）
<i></i>和<em></em>	文字以 斜体 方式显示（推荐使用em）
<s></s>和<del></del>	文字以 加删除线 方式显示（推荐使用del）
<u></u>和<ins></ins>	文字以 加下划线 方式显示（推荐使用ins）

注：em标签有强调作用

2.6图片标签

<img> 标签 用于定义 HTML 页面中的图片。

<img src="图片URL">

src 用于指定图片文件的 路径和文件名 ， 是<img>标签的 必须属性 。

所谓属性，简单理解就是属于这个图片标签的特性。

关于标签的属性，记住以下几点：

① 属性采取 键值对 的格式，即 key= "value" 的格式，属性 =“属性值”。

② 标签 可以有多个属性 ，属性之间不分先后顺序、均以空格分开。

③ 属性 必须写在标签名的后面 ，与标签名以空格分开。

2.6.1图片标签属性

注：

1）如果不设置，图片会按它的原始尺寸显示。

2）如果只设置其中一个，另一个会按原图等比例显示。（通常只设置其中一个）

3）如果同时设置了两个，且其比例与原图大小的比例不一致，显示的图片可能

会变形或失真。

2.7超链接标签<a>

使用超链接标签 <a></a> ，可以实现页面之间的跳转

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图片 </a>

关于超链接，注意以下2点：

暂时没有确定链接目标时，通常将<a>标签的href属性值定义为

“#”（即 href="#" ），表示该链接暂时为一个空链接。

不仅可以创建文本超链接，在网页中各种网页元素，如 图片、 表

格、音频、视频等 都可以添加超链接。

2.7.1锚点链接

如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，

来查看所需要的内容，效率较低、不方便。为了提高信息的检索速度，

HTML语言提供了一种特殊的链接—— 锚点链接 。

通过创建锚点链接，用户能够 快速定位到目标内容 。

创建锚点链接分为两步：

1）使用“<a href= "#id名" >链接文本</a>”创建链接文本。
如：<a href="#two"> 第2集 </a>
2）使用相应的id名标注跳转目标的位置。
如：<h3 id="two">第2集介绍</h3>

2.8<div>和<span>标签

<div> 和 <span> 没有语义，可以理解为 一个盒子 ，用来装内容。

实际网页设计工作中 应用频繁 。

<div> 这是头部 </div>
<span> 今日价格 </span>

特点：

<div>标签：一行只显示一个（独占一行）。常用于 布局页面 。

<span> 标签：一行可以显示多个。常用于定义网页中某些特殊

显示的文本。