4. HTML常用标签—标题、段落、换行、文本格式化标签

目录

4.1 标题标签 

4.2 段落标签

4.3 换行标签

4.4 文本格式化标签

4.5  div 和 span 标签

---

4.1 标题标签 

为了使网页更具有语义化，我们经常会在页面中用到标题标签。html 提供了6个等级的网页标题，即 <h1> ~ <h6> 。

<h1> 我是一级标题 </h1>

h 就是 head 的缩写，意为头部、标题。

<h1> </h1> 为一级标题。

标签语义：作为标题使用，并且依据重要性递减（即一级标题比二级标题更重要，二级比三级更重要，以此类推）。 

特点：

1. 加了标题的文字会加粗，字号也会依次变大。
2. 一个标题独占一行，标题后面若有其他其内容，则会将该内容显示到下一行。

4.2 段落标签

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。 

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

p为 paragrah 的缩写，意为段落。

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

特点：

1. 文本在一个段落中会根据浏览器窗口的大小自动换行
2. 段落和段落之间保有空隙

4.3 换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。

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

<br />

br 单词 break 的缩写，意为 打断、换行。

标签语义： 强制换行

特点：

1. <br / > 是个单标签
2. <br / > 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到文本格式化标签，使文字以特殊的方式显示。

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签加粗，语义更强烈
倾斜	<em></em>或者<i></i>	更推荐使用<em>标签，语义更强烈
删除线	<del></del>或者<s></s>	更推荐使用<del>标签，语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>标签，语义更强烈

标签语义：突出重要性，比普通文字更重要。 

4.5  div 和 span 标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容。

<div> 这是头部 </div>

<span> 今日价格 </span>

div 是 division 的缩写，表示分割、分区。

span 意为跨度、跨区。

特点：

1. <div> 标签用来布局，一个 <div> 标签单独占一行，大盒子
2. <span> 标签用来布局，一行上可以放多个 <span>，小盒子