文本格式化标签和HTML实体转义

我有满天星辰

已于 2022-11-26 19:06:51 修改

阅读量513

点赞数

分类专栏：【前端】学习博客 # 【HTML教程】文章标签： html css 前端

于 2021-12-28 19:21:08 首次发布

本文链接：https://blog.csdn.net/beiluoL/article/details/122200603

版权

【前端】学习博客同时被 2 个专栏收录

26 篇文章 5 订阅

订阅专栏

【HTML教程】

8 篇文章 0 订阅

订阅专栏

1.标签属性

HTML元素可以通过设置属性，实现某些特定的效果。

通常由属性名 = 属性值组成，总是以名称/值对的形式出现。比如：name = “value”。
属性可以在元素中起附加信息的作用
属性一般描述于开始标签，不是所有的标签都有属性，比如br标签

<p title="段落" class="content" id="content">p标签</p>

2.文本格式化标签

就是通过标签来美化文本外观

b标签 表示以粗体形式展示内容
strong标签 和b标签都表示粗体。strong表示强调。例如，一个单词或者短语需要显示的更加高调、更响亮…总之要比一般文本更加突出。这里我们就使用strong标签在SEO中应用，告知搜索引擎我们内容强调的是什么。
i 标签 表示以斜体字体形式展示内容
em 标签 告诉浏览器把其中的文本表示为强调的内容并以斜体形式展现
pre标签 可定义预格式化的文本。被包围在pre标签元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
small 定义小型文本
sub标签 定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方。
sup标签 定义上标文本。上标文本将会显示在当前文本流中字符高度的一般为基准线的上方。

(1) b和strong

b和strong:都有加粗作用，且都是行级标签（不会自动换行），但strong除了加粗还有强调作业。
注：强调主要用于SEO时，便于提取关键字。

<!-- b和strong:都有加粗作用，且都是行级标签（不会自动换行），但strong除了加粗还有强调作业。
注：强调主要用于SEO时，便于提取关键字。-->
<b>加粗</b>
<strong>加粗且强调</strong>

(2) i 和 em

i 和 em : 使文字倾斜，且都是行级标签，em具有强调作用。如果只是简单的倾斜效果，用i标签就行，比如添加图标

	<!-- i和 em 使文字倾斜。 且都是行级标签，em具有强调作用。如果只是简单的倾斜效果，用i标签就行，比如添加图标-->
	<i>文字倾斜</i>
	<em>文字倾斜且加粗</em>

(3) pre

预格式化文本，保留换行和空格及宽度文字的字号会小一号。（块级标签）

<!-- 3. pre:预格式化文本，保留换行和空格及宽度 文字的字号会小一号-->
	<pre>预格式化文本，保留 
	换行和空格及宽度，
	文字的字号会小一号。</pre>

(4) small和big

small和big: 分别让文字缩小一号或者放大，也可以用于加载图标。big在html5中淘汰了，但是并没有被删除，后期开发尽量不要使用淘汰了的标签 big。（行级标签，不会独占一行，且不识别宽高）

	<!-- small和big: 分别让文字缩小一号或者放大 -->
	<p>我是正常的文字</p>
	<small>我是小一号的文字</small>
	<big>我是大一号的文字</big>

浏览器支持的最小字体为12px字，如果要显示比12px还小的文字效果，需要处理。

(5) sub和sup

设置文本为下标和上标

<!-- sub 和sup ：设置文本为下标 和上标 -->
<p>X1+X2=Y</p>
<p>上标: X<sub>1</sub> +X<sub>2</sub> = Y </p>
<p>下标:X<sup>2</sup>+X<sup>2</sup> = Y </p>

3.单双标签

1.单标记

单标记指的是由一个标签组成

比如：

换行符: <br/>			文本标签<input />
水平线: <hr/>			link标签：<link/>
图片标签：<img/>		   元信息标签：<meta/>

2.双标记

由开始标签和结束标签两部分组成，必须成对使用。

如：

<p></p> 段落标签，其中<p>是开始标签表示一个段落的开始，</p>是结束标签，表示一个段落的结束。
常见的双标记标签有：
<html></html> 、<head></head>、 <body></body> 、<table></table>
<span></span> 、<div></div> 、 <p></p>  、<h1></h1>等

4.HTML实体转义

在HTML中，内容编辑时候，如果是通过空格键编辑的多个空格，网页只会显示成一个，而小于号( < ) 和大于号 ( > ) ，网站则会认为是标签而无法直接显示在页面中。而这些都可以通过实体字符来解决。

HTML 中有用的字符实体

**注释：**实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格	` `
<	小于号	`<`	<
>	大于号	`>`	>
&	和号	`&`	&
"	引号	`"`	"
’	撇号	`'` (IE不支持)	'
￠	分（cent）	`¢`	¢
£	镑（pound）	`£`	£
¥	元（yen）	`¥`	¥
€	欧元（euro）	`€`	€
§	小节	`§`	§
©	版权（copyright）	`©`	©
®	注册商标	`®`	®
™	商标	`™`	™
×	乘号	`×`	×
÷	除号	`÷`	÷

如需完整的实体符号参考，请访问我们的 HTML 实体符号参考手册。