04.文本标签

一、文本简介

1、页面组成元素

1）以淘宝购物官网为例，分析网页：
在淘宝购物官网的首页上，我们可以看到它是由超链接，文字，图片等元素构成。
2）页面组成元素
①一个静态页面绝大部分由以下四种元素组成：

• 文本
• 图片
• 超链接
• 音频和视频
  ②思考：符合以下特点的网页是静态还是动态页面？
• 带有音频和视频
• 带有flash动画
• 带有css动画
• 带有JavaScript特效
  不是。动态页面和静态页面区别在于：是否用到了后端技术，以及是否与服务器进行数据交互。

2、常见文本形式

• 标题文本
• 段落文本
• 上标文本
• 下标文本
• 水平线文本
• 特殊符号
• …

二、标题标记

1. 标题标记的作用
标题标记主要用于把文字标记为标题。
2. 标题标记的语法和分类

<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>

一个页面中只能使用一个

标记，常常被用在网站的logo部分。
其他标题标记次数不限。

3. 标题标记的对齐属性
语法格式：

<h1>一级标题h1>
<h2 align="left">二级标题h2>
<h3 align="right">三级标题h3>
<h4 align="center">四级标题h4>

4. title标签和h1标签的区别？

• 书写位置不同：title写在head里，h写在body里
• 显示位置不同：title显示在网页选项卡，h显示在内容区
• 作用不同：title用于设置网页标题，h用于设置文章标题

三、段落和换行标记

1、段落标记

1）段落标记的作用
段落标记主要用于把文字标记为段落，使其有条理的显示出来。
2）段落标记的语法

<p>段落文本p>

3）段落标记的对齐属性

<h3>爱莲说h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！p>

4）段落标记的特征

• 段落与段落之间会换行显示
• 段落与段落之间会有较大间距
• 段落内文本占满一行会自动换行

2、换行标记

1）换行标记的作用：
换行标记主要用于段落内强制换行效果。

注意：在代码中对文本使用回车换行只是代码的换行，在网页显示时是没有换行效果的

2）换行标记的语法：

<p>使用HTML制作网页时通过br标记<br/>可以实现换行效果p>

3）换行标记的特征：

• 换行标记是单标记（自闭合标记）
• 使用br标记换行，两行文字之间间隙较小
• br标记只是单纯的给文字强制换行

四、常见文本标记

1. 文本标记的作用：
文本标记用于对文字进行修饰，比如加粗、倾斜…
2.文本标记的语法及分类：

<strong>粗体显示，推荐使用strong>
<b>粗体显示b>

<i>斜体显示i>
<em>斜体显示，推荐使用em>
<cite>斜体显示cite>

<sup>文本上标sup>
<sub>文本下标sub>

<s>中划线，一般用css来实现，不推荐使用s>
<u>下划线，一般用css来实现，不推荐使u>
<big>字体变大，一般用css来实现，不推荐使big>
<small>字体变小，一般用css来实现，不推荐使small>

五、水平线标记

1. 水平线标记的作用：
水平线用于段落与段落之间隔开，使得文档结构清晰，层次分明。
**2. 水平线标记的语法：

---

<h3>爱莲说h3>
<hr/>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！p>

3. 水平线标记的属性：
语法格式：

---

属性名	含义	属性值
align	设置水平线的对齐方式	可选择left、right、center三种值，默认为center，居中对齐
size	设置水平线的粗细	以像素为单位，默认为2像素
color	设置水平线的颜色	可用颜色名称、十六进制#RGB、rgb(r,g,b)
width	设置水平线的宽度	可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

<h3>爱莲说h3>
<hr align="left" size="4px" color="red" width="200px"/>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！p>

六、块元素和行内元素

1、元素分类

在HTML中根据元素的表现形式，一般分为两类：

• 块元素：
  • 浏览器显示状态下将独自占据一整行
  • 常用于网页布局和网页结构的搭建
  • 通常可以容纳其他块元素和行内元素

h1~h6、p、div、hr、ol、ul、li、dl、dt、dd

• 行内元素：
  • 浏览器显示状态下可和其他行内元素同行
  • 依靠自身内容撑开宽度
  • 可以容纳其他行内元素，但不能放块元素

strong、b、em、i、cite、sub、sup、span、s、u、big、small、img、a、input、select

2、注意事项

• 块元素总是单独占一行，不与其他元素同行。

  浏览器显示状态下块元素的不同行显示，与代码是否同行无关

• 行内元素亦然。

七、特殊符号

1、如何实现段落首行缩进两个字符
①空格法：空格键在代码中是对代码进行排版的，对浏览器显示产生的影响很小（多个会合并为1个）。
②代码法：在HTML中需要显示在页面上的空格需要用代码来实现 

<h3>爱莲说h3>
<p>    水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。p>
<p>    予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！p>

注意：浏览器对空格符“ ”的解析是有差异的，导致了使用空格符的页面在各个浏览器中显示效果的不同，因此不推荐使用，可使用CSS样式替代。
2、其他特殊符号

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方2（上标2）	²
³	立方3（上标3）	³