HTML文本格式化标签

HTML文本格式化标签大全 – 小白指南

HTML文本格式化标签大全

专为编程小白设计的HTML文本格式化指南 – 用大白话讲解,一看就懂!

📚 什么是HTML文本格式化?

HTML文本格式化就是通过特定的”标签”改变文字的外观和含义,比如让文字变粗倾斜高亮等。就像在Word文档中使用工具栏按钮改变文字样式一样!

重要提示: HTML标签通常成对出现,例如 <strong>重要内容</strong>, 其中<strong>是开始标签,</strong>是结束标签。内容放在这对标签之间才会生效!
<b> 加粗文本

纯粹视觉上加粗,没有特殊语义含义。就像用记号笔把文字描粗一样。

<b>这段文字会变粗</b>
这段文字会变粗
<strong> 重要文本

表示内容非常重要!视觉上也是加粗,但告诉浏览器和搜索引擎这段内容很关键。就像说话时提高音量强调重点。

<strong>警告:操作不可逆!</strong>
警告:操作不可逆!
💡 小提示:<b><strong>看起来一样,但含义不同。重要内容优先用<strong>
<i> 斜体文本

纯粹视觉上倾斜,没有特殊含义。就像把文字向右斜着写。

<i>斜体文字示例</i>
斜体文字示例
<em> 强调文本

表示内容需要强调!视觉上也是斜体,但有语义含义。就像说话时刻意拉长某个词。

<em>你确定要删除吗?</em>
你确定要删除吗?
<u> 下划线文本

给文字添加下划线。常用于标注拼写错误或不常用术语。

<u>带下划线的文字</u>
带下划线的文字
️ 注意:网页中链接默认有下划线,避免使用下划线标记普通文本,防止用户误以为是链接
<mark> 标记文本

像荧光笔一样高亮标记重要内容,吸引读者注意力。

<mark>关键信息高亮显示</mark>
关键信息高亮显示
<small> 小号文本

让文字变小一号,常用于版权声明、注释等次要信息。

<small>版权信息</small>
版权信息 © 2023
<del> 删除文本

表示内容已被删除,显示为带删除线的文字。常用于展示文档修改历史。

<del>原价:100元</del>
原价:100元
<ins> 插入文本

表示内容是新插入的,显示为带下划线的文字。常与配合使用展示修改。

<ins>特价:79元</ins>
特价:79元
<sub> 下标文本

用于化学式、数学公式等需要下标的场景。文字会变小并降低到基线下方。

H<sub>2</sub>O
H2O
<sup> 上标文本

用于指数、脚注等需要上标的场景。文字会变小并提升到基线上方。

10<sup>2</sup> = 100
102 = 100
<code> 代码文本

用于显示代码片段,通常以等宽字体显示。适合展示单行代码。

<code>console.log(“Hello”);</code>
console.log("Hello");
<pre> 预格式化文本

保留文本中的空格和换行,常用于展示多行代码或诗歌。

<pre> function hello() { console.log(“Hello World”); } </pre>
function hello() {
  console.log("Hello World");
}
<blockquote> 块级引用

用于引用大段内容(如名人名言、文章摘录),通常会缩进显示。

<blockquote> 这是被引用的著名文字… </blockquote>
想象力比知识更重要,因为知识是有限的,而想象力概括着世界上的一切…
<q> 短引用

用于短引用,浏览器通常会自动添加引号

<q>这是短引用</q>
这是短引用

🎨 格式化标签综合效果展示

现代网页设计中,正确使用文本格式化标签非常重要。

例如,强调内容应该使用<em>而不是<i>,因为前者有语义意义。

数学公式:E = mc2,化学式:H2O

价格更新:原价299元特价199元

良好的网页应该同时兼顾视觉效果和语义结构

注:以上内容仅为示例,并非实际建议

HTML文本格式化标签知识点汇总 | 编程小白必备指南

记住:语义化标签 > 纯视觉标签 | 合理使用让网页更专业!

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部