第04章 文本
4.1 文本简介
一个静态页面一般由四种元素组成：文字、图片、超链接、音频和视频
4.2 标题标签
标题标签：<hn>标题内容</hn>
在HTML中，共有六个级别的标题标签：h1、h2、h3、h4、h5、h6
h是header的缩写，h1字体最大，h6字体最小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
4.3 段落标签
段落标签：<p>段落内容</p>
段落标签会自动换行，并且段落与段落之间有一定的间距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>段落标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p> <!--段落标签-->
<p>举头望明月，低头思故乡。</p> <!--段落标签-->
</body>
</html>
换行标签：<br/>
<br/>是换行，<p>是分段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
</body>
</html>
4.4 文本标签
在HTML中使用文本标签对文字进行修饰，常用的文本标签有八种：
粗体标签：strong、b
斜体标签：i、em、cite
上标标签：sup
下标标签：sub
中划线标签：s
下划线标签：u
大字号标签：big
小字号标签：small
粗体标签：strong、b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明<strong>月光</strong>，疑是地上霜。</p>
<p>举头望<b>明月</b>，低头思故乡。</p>
</body>
</html>
斜体标签：i、em、cite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3><cite>静夜思</cite></h3>
<p><i>床前明月光，疑是地上霜。</i></p>
<p><em>举头望明月，低头思故乡。</em></p>
</body>
</html>
上标标签：sup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上标标签</title>
</head>
<body>
<p>(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></p>
</body>
</html>
下标标签：sub
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下标标签</title>
</head>
<body>
<p>H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
删除线标签：s
对于删除线效果实现，一般用CSS来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>删除线标签</title>
</head>
<body>
<p>新西兰奇异果</p>
<p><s>原价:￥6.50/kg</s></p>
<p>现价仅售:￥4.00/kg</p>
</body>
</html>
下划线标签：u
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下划线标签</title>
</head>
<body>
<h3><u>静夜思</u></h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>
大字号标签：big和小字号标签：small
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>大字号和小字号标签</title>
</head>
<body>
<h3><u>静夜思</u></h3>
<p><big>床前明月光，疑是地上霜。</big></p>
<p><small>举头望明月，低头思故乡。</small></p>
</body>
</html>
4.5 水平线标签
水平线标签：<hr/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>大字号和小字号标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<hr />
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>
4.6 div标签
div标签：<div></div>
div标签主要用来划分区域，结合CSS对该区域进行样式控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div标签</title>
</head>
<body>
<div>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</div>
</body>
</html>
4.7 自闭合标签
在HTML中，标签分为一般标签和自闭合标签，一般标签都是成对出现的。
自闭合标签有：<meta/>、<link/>、<br/>、<br/>、<img/>、<input/>、
4.8 块元素和行内元素
块元素：在HTML中，在浏览器显示状态下将占据一整行，并且排斥其他元素与其位于同一行。在代码中，可以容纳其他块元素和行内元素。
行内元素：可以与其他行内元素位于同一行的，只可以容纳其他行内元素，不可以容纳块元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div标签</title>
</head>
<body>
<div>
<h3>静夜思</h3>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<strong>举头望明月，</strong>
<em>低头思故乡。</em>
</div>
</body>
</html>
4.9 特殊符号
空格：&bnsp;
与：&
长破折号：—
度：°