HTML5笔记004 - 第04章 文本

第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;
与：&amp;
长破折号：&mdash;
度：&deg;
posted @ 2020-08-16 07:46  测试工匠麻辣烫  阅读(162)  评论(0)  编辑  收藏  举报