9.1.3 前端 - HTML body标签 - 文本样式
body标签
想要在网页上展示出来的内容一定要放在body标签中。 把我们之前海燕那一段HTML代码贴过来，保存到一个HTML格式的文件中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>前端学习</title>
</head>
<body>
<h1>关雎</h1>
<p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
<p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
<p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
<p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
<p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
</body>
</html>
使用浏览器打开，看一下效果
文本样式标签
文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...
<b></b>：加粗 <i></i>：斜体 <u></u>：下划线 <s></s>：删除线 <sup></sup>：上标 <sub></sub>：下标
直接上代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本格式标签</title>
</head>
<body>
<div>前端html</div>
<div><b>前端html - 加粗</b>- 正常字体</div>
<div><i>前端html - 斜体</i>- 正常字体</div>
<div><u>前端html - 下划线</u>- 正常字体</div>
<div><s>前端html - 删除线</s>- 正常字体</div>
<div><sup>前端html - 上标</sup>- 正常字体</div>
<div><sub>前端html - 下标</sub>- 正常字体</div>
</body>
</html>
将上面的代码保存成html文件，然后用浏览器打开看一下实际的显示效果：浏览器运行结果
表示强调的标签
我们已经学习了展示段落的p标签和展示标题的h1~h6标签，现在如果想在一段文字中特别强调某几个字，这时候就可以用到<em>或<strong>标签。
这两个标签都是表示强调，但是两者在强调的语气上有区别:<em>表示强调，<strong>表示更强烈的强调。 在浏览器中<em>默认会用斜体表示，<strong>会用粗体来表示。两个标签相比，我们通常会推荐大家使用<strong>表示强调。
例如：电商网站的折扣数字，通常都使用<strong>标签来表示强烈的强调。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝</title>
</head>
<body>
<p>淘宝</p>
<em>强调</em>
<strong>更强烈的强调</strong>
</body>
</html>
也就是加粗了字体。
表示引用的标签
<blockquote>通常用来展示大段的文本引用。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。。</p>
<blockquote>
关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。。
</blockquote>
</body>
</html>
运行结果，从结果来看引用标签会有首尾缩进、
从上图中可以看出和普通的<p>标签相比，<blockquote>标签中的内容会有首尾缩进的效果。
表示代码的标签
表示简短的单行代码可以使用<code>标签，如果是带有缩进的大段代码就要使用<pre>标签了。<pre>标签会保留源文档中的格式(回车、空格)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JD商城</title>
</head>
<body>
<p>单行代码：</p>
<code>
print("Hello world! from xxx")
</code>
<p>代码块（多行代码）：</p>
<pre>
while True:
age = input("猜猜看啊:").strip()
try:
age = int(age)
if age > 10 or age < 10:
print("傻逼了吧，错了!")
else:
print("厉害了我的哥!")
break
except ValueError:
print("你TM的输错了!")
</pre>
</body>
</html>
运行结果
表示地址的标签
在网页上经常会有公司的联系地址信息，这个时候就需要用到<address>标签了。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>前端架构</title>
</head>
<body>
<p>前端架构：</p>
<address>
南京市鼓楼区，紫峰大厦24楼
</address>
</body>
</html>
运行
浙公网安备 33010602011771号