HTML基础-文本

页面组成元素

大多数静态页面都是由以下4种元素组成
文字、图片、超链接、音频和视频

标题标签

在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写，6个标题标签在页面中的重要性是有区别的，其中h1级别的重要性最高，h6标签的重要性最低。
一个页面只能有一个h1标签，而h2到h6标签可以是多个，h1表示这个页面的大标题，例如：一篇作文只能有一个大标题，但可以有多个小标题。
举例：

<!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>

段落标签

语法：

举例：

<!DOCTYPE html>
<html>
<body>
  <h3>隔壁小胡的博客</h3>
  <p>记录生活，分享技术。</p>
  <p>hq233.cn</p>
</body>
</html>

换行标签

如果只使用p标签会导致段落与段落之间有一定间隙，而使用br标签则不会。br标签是给文字换行的，而p标签是用来给文字分段的，如果内容是两段文字，则不需要使用br标签，直接使用p标签即可。
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>换行标签</title>
</head>
<body>
  <h3>隔壁小胡的博客</h3>
  <p>记录生活，分享技术。</br>hq233.cn</p>
</body>
</html>

文本标签

strong/b	i/em/cite	sup	sub	s	u	big	small
粗体标签	斜体标签	上标标签	下标标签	中划线标签	下划线标签	大字号标签	小字号标签

粗体标签
虽然strong标签和b标签的加粗效果是一样的。但是在实际开发中，需要实现文本加粗效果，尽量使用strong标签 因为strong标签更具有语义性
对文本进行加粗，可以使用strong b标签
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>粗体标签</title>
</head>
<body>
  <p>这是普通标签</p>
  <strong>这是粗体文本</strong>
  <b>这也是粗体文本</b>
</body>
</html>

斜体标签
在HTML中，实现文本的斜体效果可以使用i标签和em标签或cite标签
在实际开发中，实现文本斜体效果，要使用em标签 因为em标签比其他两个标签语义性更好。
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>斜体标签</title>
</head>
<body>
  <i>斜体文本</i>
  <em>斜体文本2</em>
  <cite>斜体文本3</cite>
</body>
</html>

上标标签
在HTML中，实现文本的上标效果可以使用sup标签 sup是superscripted的缩写。
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>上标标签</title>
</head>
<body>
  <p><a+b><sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>

下标标签
在HTML中，实现文本的下标效果可以使用sub标签 sub是subscripted的缩写
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>下标标签</title>
</head>
<body>
  <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
</body>
</html>

中划线标签
在HTML中，实现文本的中划线效果可以使用s标签
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>中划线标签</title>
</head>
<body>
  <p>新鲜的隔壁小胡限量售卖</p>
  <p><s>原价：￥666/kg</s></p>
  <p><strong>现在仅售：￥5.20/kg</strong></p>
</body>
</html>

下划线标签
在HTML中，实现文本的下划线效果可以使用u标签
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>下划线标签</title>
</head>
<body>
  <p><u>隔壁小胡hq233.cn</u>记录生活，分享技术</p>
</body>
</html>

大字号标签和小字号标签
在HTML中，实现字体的变大效果可以使用big标签 实现字体的变小效果可以使用small标签
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>big标签和small标签</title>
</head>
<body>
  <p>普通文本</p>
  <big>大字号文本</big>
  <small>小字号文本</small>
</body>
</html>

水平线标签

在HTML中，实现一条水平线的效果可以使用hr标签 hr是horizon的缩写
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>水平线标签</title>
</head>
<body>
  <h3>隔壁小胡的博客</3>
  <p>记录生活，分享技术</p>
  <hr/>
  <h3>隔壁小胡的博客</3>
  <p>记录生活，分享技术</p>
</body>
</html>

div标签

在HTML中，可以使用div标签来划分HTML结构，从而配合css来整体控制某一块样式。
div全称division分区，用来划分一个区域，常见的“div+css”中的“div”指的是此处介绍的div标签，其中，div标签内部可以放入绝大多数其他的标签，如p标签，strong标签和hr标签等。
虽然显示的效果和上面一样，但使用div标签来划分区域，使得代码更具有逻辑性，最重要的是div标签用途是划分区域。
举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>div标签</title>
</head>
<body>
 <div>
  <h3>隔壁小胡的博客</3>
  <p>记录生活，分享技术</p>
 </div>
  <hr/>
 <div>
  <h3>隔壁小胡的博客</3>
  <p>记录生活，分享技术</p>
 </div>
</body>
</html>

自闭合标签

之前学习的标签都是一对出现的，即一个开始符号，一个结束符号，不过有些标签是没有结束符号的，如
<hr/>
上面代码中可以看出，div标签的开始符合和结束符号之间是可以插入其他标签或文字，但是meta标签和hr标签中不能插入其他标签和文字。
一般标签和自闭合标签区别：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>自闭和标签</title>
</head>
<body>
 <div>
  <h3>隔壁小胡的博客</3>
  <hr/>
  <p>记录生活，分享技术</p>
 </div>
</body>
</html>

常见的自闭合标签

<meta/>	<link/>	<br/>	<hr/>		<input/>
定义网页的信息(供搜索引擎查看)	引入“外部css文件”	换行标签	水平线标签	图片标签	表单标签

块元素和行内元素

在HTML中，根据元素的表现形式，一般可以分为两类
块元素
行内元素

块元素
在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行，一般情况下，块元素内部可以容纳其他块元素和行内元素，HTML中常见的块元素如下：

h1-h6	p	div	hr	ol	ul
标题元素	段落元素	div元素	水平线	有序列表	无序列表

举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>块元素和行内元素</title>
</head>
<body>
 <div>
  <h3>隔壁小胡的博客</3>
  <strong>隔壁小胡的博客</strong>
  <em>记录生活，分享技术</em>
 </div>
</body>
</html>

<h3>-块元素、-块元素、-行内元素、-行内元素
h3和p是块元素，它们的显示效果都是独占一行的，并且排斥任何元素与它们位于同一行；strong和em是行内元素，即使代码不位于同一行，它们的显示效果也是位于同一行的，显示效果与代码是否位于同一行没有关系。
h3、p、strong和em元素都是在div元素内部的，也就是说，块元素内部可以容纳其他块元素和行内元素。
由此可以总结出块元素具有两个特点。
块元素独占一行，排斥其他元素，包括块元素和行内元素，与其位于同一行
块元素内部可以容纳其他块元素和行内元素。

行内元素
在HTML中，行内元素与块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。
HTML中常见的行内元素如下：

strong	em	a	span
粗体元素	斜体元素	超链接	常见行内元素，结合css定义样式

特殊符号

网页中的空格
在网页排版中，让每一个段落的首行缩进两个字的空格，如果使用space键来实现空格，是无效的，空格也需要使用代码来实现，空格代码为&nbsp
一个汉字约等于3个&nbsp

网页中的特殊符号
容易通过输入法输入的不必使用代码实现，难以通过输入法输入的需要使用代码实现。

©	®	™	€	￡	¥	度
版权符	注册商标	商标	欧元	英镑	日元	度
`©`	`®`	`™`	`€`	`£`	`¥`	`°`

本文到此结束

文章标题：HTML基础-文本

文章链接：https://hq233.cn/archives/483.html

作品采用：CC BY-NC-SA 4.0 许可协议授权