HTML5系列 04 文本系标签

最新推荐文章于 2025-02-27 08:51:48 发布
最新推荐文章于 2025-02-27 08:51:48 发布
阅读量478 收藏 3
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43422005/article/details/118701714
版权
本文详细介绍了HTML5中的一系列文本标签，包括标题标签（h1-h6）、段落（p）、换行（br）、水平线（hr）、居中（center）、普通文字（font）、原样显示（pre）、文本容器（span）等。还涵盖了描述文本、强调文本和引用文本的标签，如time、abbr、code、progress、address、em、strong、del、ins、mark、cite、blockquote和q等，解析了它们的用途、特点和渲染效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

基础文本系标签

h~ 标题标签

h系列的标题标签拥有6个，即h1 - h6。

h系列标签会根据等级的大小，字体的粗细会发生相应的变化，h1最大、h6最小。

它是一个块级的自闭和标签，其内部只能嵌套内联标签，不能嵌套块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>h1 element</h1>
    <h2>h2 element</h2>
    <h3>h3 element</h3>
    <h4>h4 element</h4>
    <h5>h5 element</h5>
    <h6>h6 element</h6>
</body>
</html>

渲染结果：

image-20210708162125719

p 段落标签

p标签用于定义一段文本的内容，具有换行的功能。

p标签内只能存放文字系、图片系、表单系标签，其他的一律不要放进来，此外还需要注意p标签与br标签的区别。

它是一个块级标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>This is p element</p>
    <p>This is p element</p>
</body>
</html>

渲染结果：

image-20210708161453990

br 换行标签

br标签用于对内容进行换行，注意与p标签的区别。

它是一个内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>This is p element</p>
    <p>This is p element</p>
    this is a text
    <br>
    this is a text
</body>
</html>

渲染结果：

image-20210708161625055

hr 水平线

hr标签会生成一条水平线，主要是用于对内容区域的划分。

它是一个块级标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>this is p element</p>
    <hr>
    <p>this is p element</p>
</body>
</html>

image-20210708162315946

center 居中显示

center标签会将它内部的元素进行居中处理，h5中已经不推荐使用了。

它是一个块级标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center><h1>h1 element center</h1></center>
    <hr>
    <h2>h2 element don't center</h2>
</body>
</html>

渲染结果：

image-20210708162558966

font 普通文字

font标签没什么特别的效果，只有一个语义规定它应该包裹一串文字。被font包裹的文字可设置字体、尺寸和颜色，但是不推荐设置。

它是一个内联标签。

属性表：

属性值描述
colorrgb(x, x, x) or #xxxxxx or color_name设置字体颜色
facefont_family设置字体样式
sizenumber设置字体带下，1-7

如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>this is <font color="red" size="4" face="verdana">font</font></h1>
</body>
</html>

渲染结果：

image-20210708163422614

pre 原样显示

浏览器在渲染时，会对显示进行特殊处理，如多个空格压缩成一个。

此时可以选择使用pre标签对显示内容进行包裹，这样浏览器就不会特殊处理这一段显示内容了。

它是一个块级标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>
        A      B      C
        D      E      F
    </pre>
</body>
</html>

渲染结果：

image-20210708173616799

span 文本容器

span标签用于存放一些文本，它的语义并不是很明确，属于一个模糊的定位。

被span标签包裹的文本有极大的可能性后期会通过CSS进行样式修改，但若单纯使用HTML则没有任何明显的功能。

它是一个内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #span-1{
        color: red;
        font-style: italic;
        text-shadow: #ddd 5px 5px 0.4px;
        font-size: 22px;
        font-weight: bold;
    }
</style>
<body>
    <p>This is a <span id="span-1">text</span></p>
</body>
</html>

搭配CSS的渲染效果：

image-20210708174537502

描述文本系标签

time 时间文本

time标签根据语义来进行区分的话可以用于存放时间类型的文本。

它是一个内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>current time <time>2016-02-18</time></p>
</body>
</html>

渲染效果：

image-20210708180013962

abbr 描述文本

abbr标签用于存放一些具有描述的文本，它拥有一个title属性，title属性中可以放入一些描述信息。

当鼠标悬浮在abbr标签上，就可以显示title中所定义的描述信息。

它是一个内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <abbr title="翻译：我想说你好世界">I want to say hello world</abbr>
</body>
</html>

渲染效果，虽然具有下划线但是不必在意，后期CSS会帮你干掉他：

image-20210708180415295

sup - sub 角标

sup和sub用于定义上下角标，在书写一些数学公式时有用。

它们都是内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    sup : 3 <sup>2</sup>
    <br>
    sub : 3 <sub>2</sub>
</body>
</html>

渲染效果：

image-20210708180744375

code 代码文本

code标签中应当存放一些代码相关的文本，但是他没有任何特殊处理。

所以我们可以在外部套上pre标签，来达到代码原样显示的目的，这样代码的缩进才不会发生混乱。

它是内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<pre>
    <p>Here is a js code</p>
    <hr>
    <code>
    function show(){
        console.log("hello world");
    }
    show()
    </code>
    <hr>
</pre>
</body>
</html>

渲染结果：

image-20210708181520579

progress 进度条

progress可生成一个进度条，它具有2个属性。

  • max：进度条长度
  • value：当前进度

后期可配合Js来进行控制。

它是一个内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<pre>
    <progress max="100" value="20"></progress>
</pre>
</body>
</html>

渲染结果：

image-20210708181735818

address 地址信息

address用于设置地址信息。一般放在footer页脚中。

它是一个块级标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<footer>
    <address>地址 : 北京市海淀区</address>
</footer>
</body>
</html>

渲染结果：

image-20210708182131656

强调文本系标签

em - i 比较重要

em和i标签都意味着这段文字比较重要。

它们同属于内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <em>this is em element</em>
    <br>
    <i>this is i element</i>
</body>
</html>

渲染结果：

image-20210708182342022

strong - b 非常重要

strong和b标签都意味着这段文字非常重要。

它们同属于内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>this is strong element</strong>
    <br>
    <b>this is b element</b>
</body>
</html>

渲染结果：

image-20210708182433375

del - s 已废弃

del和s标签都意味着这段文字已经废弃。

它们同属于内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <del>this is strong element</del>
    <br>
    <s>this is b element</s>
</body>
</html>

渲染结果：

image-20210708182535130

ins - u 已修正

ins和u标签都意味着这段文字已经修正，常和del与s标签搭配使用。

它们同属于内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <del>原价：998</del>
    <br>
    <ins>现价：9.8</ins>
</body>
</html>

渲染结果：

image-20210708182708165

mark 值得记录

mark标签都意味着这段文字值得记录，会以突出的方式进行显示。

它是一个内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><font>普通文本</font></p>
    <p><mark>值得记录</mark></p>
</body>
</html>

渲染结果：

image-20210708182921422

引用文本系标签

cite 引用信息

cite标签通常表示它所包含的文本对某个参考文献的引用，或文章作者的名字。

它属于块级标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <cite>--再别康桥</cite>
    <p>&nbsp;&nbsp;轻轻的我走了，正如我轻轻地来</p>
</body>
</html>

渲染结果：

image-20210708183139325

blockquote 块引用

blockquote标签通常来表示该段内容引用至其他地方。

它属于块级标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <cite>--狂人日记</cite>
    <blockquote>
        凡事总需研究，才会明白，古来时常吃人，我也还记得，可是不甚清楚。
        我翻开历史一查，这历史没有年代，歪歪斜斜的每页上都写着“仁义道德”几个字。
        我横竖睡不着，仔细看了半夜，才从字缝里看出来，满本都写着两个字是“吃人”！
    </blockquote>
</body>
</html>

渲染结果：

image-20210708183520107

q 行内应用

q标签用于表示行内引用文本，在大部分浏览器中会加上引号。

它属于内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <cite>--狂人日记</cite>
    <blockquote>
        凡事总需研究，才会明白，古来时常吃人，我也还记得，可是不甚清楚。
        我翻开历史一查，这历史没有年代，歪歪斜斜的每页上都写着“仁义道德”几个字。
        我横竖睡不着，仔细看了半夜，才从字缝里看出来，满本都写着两个字是“吃人”！
    </blockquote>
    <p>鲁迅先生的<q>吃人</q>一词用的恰到好处！</p>
</body>
</html>

渲染效果：

image-20210708183700133

HTML常见文本标签解析：从基础到进阶的全面指南
吴师兄大模型的博客
01-26 1385
HTML（超文本标记语言）是构建网页的基础语言，它通过简单而强大的标签帮助开发者创建各种网页内容。无论你是一个初学者，还是已经有一定开发经验的开发者，熟悉并掌握HTML中的常见标签，尤其是文本相关标签，将帮助你在开发过程中更加得心应手。本文将深入解析HTML常见的文本标签，并通过实际案例帮助你理解这些标签在网页设计中的作用和最佳实践。无论是优化网页排版，还是提升SEO效果，这些标签都能帮助你轻松打造结构清晰、易于阅读的网页内容。通过本文的学习，您应已对HTML中常见的文本相关标签有了更加清晰的了解。
Android使用Html.fromHtml显示富文本之标签拓展-打造没有不支持的标签
热门推荐
天才小汪汪
11-23 1万+
我们知道android中TextView是可以支持富文本显示的，但是需要进行一定的处理。一般来说，我们会使用： 1.使用Html.fromHtml(html) 2.可以使用HtmlSpanner Html不需要依赖任何库但是由于自身自带的HTML支持的标签很少，不能满足我们的需求，那我们就会寻找其他解决方案，例如HtmlSpanner。 HtmlSpanner是支持大多数标签的解析库，但是...
文本系列标签
czw的博客
12-25 144
文本系列标签 注释 h1~h6 br p hr b i font <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 文本系列标签 --> <!-- - 注释 - h1~h6 - br - p - hr - b
H5文本标签
weixin_33759269的博客
01-21 1042
2019独角兽企业重金招聘Python工程师标准>>> ...
【0011】HTML其他文本格式化标签详解（em标签、strong标签、b标签、i标签、sup标签、sub标签......）
最新发布
一个结构化、系统化学习IT知识的优秀博客
02-27 1075
本文旨在深入探讨 <em>标签、<strong> 标签、<b>和 <i>标签、<q>标签、<blockquote>标签、 <mark>标签、<del>标签、<ins>和 <u>标签、<small>标签、 <sup>和 <sub>标签、<code>标签、<pre>标签、<kbd>、<samp>和 <var> 标签等。通过本文，您将能够熟练掌握这些标签的用法，从而更有效地控制网页中文本的显示和语义。
HTML--文本基础标签
疯子渣的博客
04-20 246
词组标签使用 因为我学习不是固定式地遵守文档来学习，我想按我自己能够理解的体系先系统的过一遍基础，再通过主流的w3c或者其他资料再查漏补缺，在形成自己的知识体系后再完善好它。今天学习的是最常见的文本标签，主要是一些对文本的操作，加粗，斜体等，以及一些具有特殊含义用法的总结，废话不多说，直接上效果图和代码图。 主体要注意的内容还是在于 文本的表现形式+特殊应用场景 <!DOCTYPE ...
关于<blockquote>标签
Andrea_bqy的博客
05-04 1510
标签，它可以用来使文本缩进，大概四个空格。         专业的说法是 与 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
HTML中Pre标签
祥哥的说
02-02 5495
 标签定义及使用说明 标签可定义预格式化的文本。 被包围在 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 提示和注释 提示: 标签的一个常见应用就是用来表示计算机的源代码。 在HTML 4.01 与 HTML5中的差异 在 HTML 4.01 中，"width" 属性已废弃，不可使用。 HTML5 不支持"width"属性。   参考地
JavaWeb系列一: HTML
09-05
从HTML到HTML2.0、HTML3.2、HTML4.01，再到我们现在广泛使用的HTML5，每一个版本的更新都带来了新的特性和标签。HTML5作为最新的标准，它增加了许多新的元素，如`<canvas>`、`<video>`和`<audio>`等，这些新元素的...
JS组件系列之使用HTML标签的data属性初始化JS组件
10-21
【JS组件系列之使用HTML标签的data属性初始化JS组件】 在前端开发中，尤其是在构建复杂的交互界面时，JS组件的初始化通常需要大量的JavaScript代码。为了简化这一过程并提高代码的可读性和可维护性，我们可以利用...
Polyglot Notebooks 系列：使用Html
05-27
它由一系列元素组成，这些元素通过标签来定义，如`<html>`, `<head>`, `<body>`等。HTML元素可以包含文本内容、链接、图像、表格、列表等多种网页元素。 在Polyglot Notebooks中，我们可以通过以下步骤来利用HTML：...
从零开始前端学习[1]:认识常用的标签
章飞 _906285288的博客
09-14 1266
从零开始前端学习[1]:认识常用的标签 h标签 p标签 pre标签 br标签 em和i标签 strong标签和b标签 span标签 sub和sup标签 del和ins标签 a标签 列表标签ul ol dl 弃用的标签font 提示： 作者:章飞_906285288 博客地址:http://blog.youkuaiyun.com/qq_29924041 h标签h 标签又叫做标题标签，是从h1到h6
HTML标签
mqingo的博客
10-29 320
  1.HTML:Hyper Text Markup Language 超文本标记语言     超文本:比普通文本功能更加强大,可以添加各种样式     标记语言:通过一组标签对内容进行描述&lt;关键字/&gt; 2.&lt;b&gt;&lt;/b&gt;加粗 3.&lt;i&gt;&lt;/i&gt;倾斜 4.&lt;strong&gt;&lt;/strong&gt;标签 加粗,带语义标签
02_HTML常用标签（font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签）
qq_45657848的博客
01-10 5742
font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签
html标签中h4和h5,h5与h4的区别
weixin_42138525的博客
06-15 3146
HTML5新特性HTML5 中一些有趣的新特性：①用于绘画的 canvas 元素；②用于媒介回放的 video 和 audio 元素；③对本地离线存储的更好的支持；④新的特殊内容元素，比如 article、footer、header、nav、section；⑤新的表单控件，比如 calendar、date、time、email、url、search"以上是w3c上的原话，简单说就是更符合标准，提供...
web---HTML基础知识
Allure泽宇的博客
06-11 5935
HTML基础知识内容总结
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 714
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
html中的自闭和标签
huatek_wp的博客
03-02 4774
◆<br/>：表示换行。 ◆<hr/>：表示画一条线。 ◆<area/>：标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。area 元素总是嵌套在 <map> 标签中。 ◆<base/>：标签为页面上的所有链接规定默认地址或默认目标。 ◆<img/>：放入图片。 ◆<input/>：用户输入的标签。 ◆<link/>： 标签定义文档与外部资源的关系。 标签最常见的用途
HTML中font 和 span标签有什么区别
dxm809的博客
08-22 1813
font是html4.0时代的，虽然大多数浏览器都支持，但是属于过时的，不标准的，不被w3c推荐的标签,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值