news 2026/8/9 9:23:56

HTML第二章 文本标签

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HTML第二章 文本标签

2.文本标签

2.1 标题和段落标签

  • 标题标签(块级标签)
    • 格式:h1~h6

  • 段落标签(块级标签)
    • 格式:p

块级标签,在之前和之后都换行

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>标题和段落标签</title></head><body><!-- 标题标签 h1~h6 表示不同级别的的标题 --><h1>h1 这是一个标题</h1><h2>h2 这是一个二级标题</h2><h3>h3 这是一个三级标题</h3><h4>h4 这是一个四级标题</h4><h5>h5 这是一个五级标题</h5><h6>h6 这是一个六级标题</h6><h7>h7 这是一个七级标题</h7><h8>h8 这是一个八级标题</h8><!-- 段落标签 p 表示段落 -->测试内容 这是一个段落 今天没安排繁重的计划,泡一杯温水,翻几页闲书,看着窗外云絮慢慢飘移。偶尔放空发呆,不用强迫自己时刻上进,允许自己短暂虚度光阴。人间本就庸常,那些微小的欢喜,才是支撑生活的温柔底气。<p>p 这是一个段落</p><p>p 今天没安排繁重的计划,泡一杯温水,翻几页闲书,看着窗外云絮慢慢飘移。偶尔放空发呆,不用强迫自己时刻上进,允许自己短暂虚度光阴。人间本就庸常,那些微小的欢喜,才是支撑生活的温柔底气。</p></body></html>

2.2 换行和水平线标签

  • 换行标签(行内标签)
    • 格式:<br>
  • 水平线标签(块级标签)
    • 格式:<hr>

换行标签<br>与 段落标签p的区别

  1. 段落标签
--》本行内容 空行 --》下一段内容 空行
  1. 换行标签
--》本行内容 --》下一段内容
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>换行和水平线</title></head><body><!-- 换行标签 br 表示换行 -->用户名:张三 密码:123456<br>用户名:李五 密码:654321<p>这是一个段落</p>用户名:李四 密码:65456<!-- 水平线标签 hr 表示水平线 --><hr>这是第二个段落</body></html>

2.3 * 字体标签

仅作了解——后续字体样式使用 CSS实现

标签说明
font修饰字体,已弃用
b/strong加粗,b 渲染加粗,修饰文字样式,strong 强调文字内容(声明语义重要性)
i/em斜体,i 渲染斜体,修饰文字样式,em 强调文字内容
s/del加删除线,s 使用删除线渲染文本;当表示文本编辑时,del 表示一些从文档中删除的文字内容
q段文本标签,加双引号
u/ins渲染为实线下划线,可用 CSS 替换。ins 表示文档编辑时提倡使用,使用 a 标签时尽量不使用下划线
sup上标字体
sub下标字体
big/small大小号字体
pre保留文本中的空白字符(包括空格和换行符),保持原始格式,适用于展示代码或与格式文本

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>字体标签</title></head><body>测试内容样例<hr><p><!-- font 表示字体 --><fontface="演示流云楷"size="3">这是一个段落</font></p><p><!-- b/strong 表示加粗字体 --><b>这是一个段落</b><strong>这是一个段落</strong></p><p><!-- i/em 表示斜体字体 --><i>这是一个段落</i><em>这是一个段落</em></p><p><!-- del/s 表示删除线字体 --><del>这是一个段落</del><s>这是一个段落</s></p><p><!-- q 表示引用字体 --><q>这是一个段落</q></p><p><!-- u/ins 表示下划线字体 --><u>这是一个段落</u><ins>这是一个段落</ins></p><p><!-- sub/sup 表示下标线字体 -->1<sub>这是一个段落</sub>2<sup>这是一个段落</sup></p><p><!-- big/small 表示大号字体和小号字体 --><big>这是一个段落</big><small>这是一个段落</small></p><p><!-- pre 表示预格式化字体 --><pre>静夜思 李白(唐) 床前明月光 疑是地上霜 举头望明月 低头思故乡</pre></p></body></html>

  • 特殊字符
    • 格式:&
    • 常见总结如下:
标签符号说明
&nbsp;空格符
&copy;©©版权
&lt;<<小于号
&gt;>>大于号
&yen;¥¥人民币
&quot;""引号
&reg;®®商标
&plusmn;±±加减
&permil;‰千分号
&divide;÷÷除号
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/9 9:18:51

物理AI驱动数字孪生:从可视化看板到智能决策场的架构与实践

1. 从“看板”到“大脑”&#xff1a;数字孪生演进的十字路口干了十几年工业软件和智慧城市项目&#xff0c;我见过太多所谓的“数字孪生”了。早些年&#xff0c;大家一窝蜂地搞三维建模、搞数据接入&#xff0c;弄出一个能旋转、能放大缩小的三维场景&#xff0c;再把一些实时…

作者头像 李华
网站建设 2026/8/9 9:18:09

C#项目中使用SQLite的实践与优化指南

1. 为什么选择SQLite作为C#本地数据库 在C#项目中引入本地数据库时&#xff0c;SQLite往往是最优选择。作为轻量级的嵌入式数据库引擎&#xff0c;它完全免去了传统数据库服务&#xff08;如MySQL、SQL Server&#xff09;的安装和配置过程。我曾在多个工业控制上位机项目中采用…

作者头像 李华
网站建设 2026/8/9 9:18:03

C++高性能计算优化策略与实践指南

1. 高性能计算与C优化的核心价值 在计算密集型领域&#xff0c;C始终保持着不可替代的地位。根据2023年Stack Overflow开发者调查&#xff0c;在需要极致性能的场景中&#xff0c;超过67%的开发者首选C作为开发语言。这种偏好源于C独特的零成本抽象能力——既能提供高级语言的封…

作者头像 李华
网站建设 2026/8/9 9:12:43

Kali Linux命令行入门:网络安全工程师的必备基础操作指南

很多朋友对网络安全领域充满好奇&#xff0c;甚至希望快速转型成为一名网络安全工程师。这个目标听起来宏大&#xff0c;但任何高楼都始于基石。对于初学者而言&#xff0c;掌握一个强大的工具并熟悉其基本操作&#xff0c;是迈入这个领域最坚实的第一步。Kali Linux&#xff0…

作者头像 李华
网站建设 2026/8/9 9:12:04

适合做PPT的AI工具:TRAE Work如何提升演示文稿创作效率

在日常办公和学习中&#xff0c;制作PPT是一项高频但耗时的任务。从内容构思、大纲整理到排版设计&#xff0c;每个环节都需要投入不少精力。随着AI工具的发展&#xff0c;越来越多创作者开始借助AI辅助生成PPT&#xff0c;希望减少重复劳动&#xff0c;聚焦内容本身。本文将从…

作者头像 李华
网站建设 2026/8/9 9:09:17

WorkBuddy平台开发高性能JSON格式化插件实战

1. 为什么选择WorkBuddy开发json-formatter插件作为一名长期混迹在VSCode插件市场的开发者&#xff0c;我最初注意到WorkBuddy这个平台是因为它独特的Credits激励机制。与传统的插件市场不同&#xff0c;WorkBuddy允许开发者通过贡献实用插件来获取Credits点数&#xff0c;这些…

作者头像 李华