编辑“︁HTML文本样式”︁（章节）

= HTML文本样式 =

HTML文本样式是指在HTML文档中通过特定标签或属性控制文本的视觉呈现方式，包括字体、颜色、大小、粗细、对齐等。本页面将详细介绍HTML中用于文本样式控制的核心元素和属性。

== 基础文本样式标签 ==

以下是HTML中最常用的文本样式标签：

=== 物理样式标签 ===
* '''<code><nowiki><b></nowiki></code>''' - 加粗文本
* '''<code><nowiki><i></nowiki></code>''' - 斜体文本
* '''<code><nowiki><u></nowiki></code>''' - 下划线文本（不推荐使用，易与超链接混淆）
* '''<code><nowiki><s></nowiki></code>''' - 删除线文本
* '''<code><nowiki><sup></nowiki></code>''' - 上标文本
* '''<code><nowiki><sub></nowiki></code>''' - 下标文本

<syntaxhighlight lang="html">
<p>这是<b>加粗</b>文本，这是<i>斜体</i>文本，这是<s>删除线</s>文本。</p>
<p>化学公式：H<sub>2</sub>O，数学公式：x<sup>2</sup></p>
</syntaxhighlight>

输出效果：
这是'''加粗'''文本，这是''斜体''文本，这是<s>删除线</s>文本。
化学公式：H<sub>2</sub>O，数学公式：x<sup>2</sup>

=== 语义样式标签 ===
* '''<code><nowiki><strong></nowiki></code>''' - 表示重要文本（通常显示为加粗）
* '''<code><nowiki><em></nowiki></code>''' - 表示强调文本（通常显示为斜体）
* '''<code><nowiki><mark></nowiki></code>''' - 高亮文本
* '''<code><nowiki><small></nowiki></code>''' - 小号文本
* '''<code><nowiki><del></nowiki></code>''' - 表示删除的文本
* '''<code><nowiki><ins></nowiki></code>''' - 表示插入的文本

<syntaxhighlight lang="html">
<p><strong>警告！</strong>这是非常重要的信息。</p>
<p>我<em>真的</em>很喜欢这个功能。</p>
<p>原价：<del>$100</del> 现价：<ins>$80</ins></p>
</syntaxhighlight>

== 文本样式属性 ==

HTML元素可以通过'''style'''属性直接应用CSS样式：

<syntaxhighlight lang="html">
<p style="color: blue; font-size: 20px; font-family: Arial; text-align: center;">
  这段文本是蓝色的、20像素大小、Arial字体、居中对齐。
</p>
</syntaxhighlight>

=== 常用文本样式属性 ===
{| class="wikitable"
|-
! 属性 !! 描述 !! 示例值
|-
| color || 文本颜色 || red, #FF0000, rgb(255,0,0)
|-
| font-family || 字体 || Arial, "Times New Roman"
|-
| font-size || 字体大小 || 16px, 1.2em, 120%
|-
| font-weight || 字体粗细 || normal, bold, 700
|-
| font-style || 字体样式 || normal, italic
|-
| text-align || 文本对齐 || left, right, center, justify
|-
| text-decoration || 文本装饰 || none, underline, line-through
|-
| line-height || 行高 || 1.5, 24px
|}

== 文本布局元素 ==

=== 段落与换行 ===
* '''<code><nowiki><p></nowiki></code>''' - 定义段落
* '''<code><nowiki><br></nowiki></code>''' - 强制换行（空元素）

<syntaxhighlight lang="html">
<p>这是第一段文本。</p>
<p>这是第二段文本，<br>这里强制换行。</p>
</syntaxhighlight>

=== 预格式化文本 ===
'''<code><nowiki><pre></nowiki></code>'''元素保留文本中的空格和换行：

<syntaxhighlight lang="html">
<pre>
  这首诗
    保留了
      原始格式
</pre>
</syntaxhighlight>

=== 引用与代码 ===
* '''<code><nowiki><blockquote></nowiki></code>''' - 块级引用
* '''<code><nowiki><q></nowiki></code>''' - 行内引用
* '''<code><nowiki><code></nowiki></code>''' - 行内代码
* '''<code><nowiki><kbd></nowiki></code>''' - 键盘输入

<syntaxhighlight lang="html">
<blockquote cite="https://example.com">
  这是来自其他来源的长引用。
</blockquote>

<p>爱因斯坦说：<q>想象力比知识更重要。</q></p>

<p>使用<code>console.log()</code>输出信息到控制台。</p>

<p>按<kbd>Ctrl</kbd>+<kbd>S</kbd>保存文件。</p>
</syntaxhighlight>

== 高级文本样式技术 ==

=== 使用CSS类 ===
为多个元素定义统一样式：

<syntaxhighlight lang="html">
<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
  }
</style>

<p>这是<span class="highlight">高亮</span>文本示例。</p>
</syntaxhighlight>

=== 响应式文本 ===
使用相对单位实现响应式文本：

<syntaxhighlight lang="html">
<style>
  .responsive-text {
    font-size: calc(16px + 0.5vw);
    line-height: 1.6;
  }
</style>

<p class="responsive-text">这段文本会根据视口大小自动调整。</p>
</syntaxhighlight>

=== 文本阴影与特效 ===
<syntaxhighlight lang="html">
<h1 style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">带阴影的标题</h1>

<p style="background: linear-gradient(to right, red, blue);
           -webkit-background-clip: text;
           color: transparent;">
  渐变颜色文本
</p>
</syntaxhighlight>

== 实际应用案例 ==

=== 新闻文章排版 ===
<syntaxhighlight lang="html">
<article>
  <h1>重大科学发现</h1>
  <p class="byline">作者：<em>张博士</em> | 发布于：<time>2023-05-15</time></p>
  
  <p><strong>摘要：</strong>研究团队今天宣布了一项突破性发现...</p>
  
  <blockquote>
    "这一发现将彻底改变我们对宇宙的理解，"首席研究员表示。
  </blockquote>
  
  <p>详细内容：<mark>实验数据显示</mark>，新的粒子具有<sup>前所未有</sup>的特性...</p>
  
  <div class="footnotes">
    <p><small>注：本文基于《自然》期刊发表的研究论文</small></p>
  </div>
</article>
</syntaxhighlight>

=== 产品价格展示 ===
<syntaxhighlight lang="html">
<div class="pricing">
  <h2>套餐选择</h2>
  <ul>
    <li>基础版：<del>$99</del> <ins>$79</ins>/月</li>
    <li>专业版：<span class="highlight">$149</span>/月</li>
    <li>企业版：<strong>$299</strong>/月</li>
  </ul>
  <p><small>*价格不含税</small></p>
</div>
</syntaxhighlight>

== 最佳实践 ==

* 优先使用语义化标签（如<code><nowiki><strong></nowiki></code>而非<code><nowiki><b></nowiki></code>）
* 避免过度使用内联样式，推荐使用CSS类
* 确保文本在不同设备上可读（适当的大小和对比度）
* 对于复杂样式，考虑使用CSS而非HTML标签
* 保持一致性，建立统一的文本样式规范

== 文本样式层次结构 ==

<mermaid>
graph TD
  A[HTML文本样式] --> B[物理样式]
  A --> C[语义样式]
  A --> D[CSS样式]
  B --> E[加粗/斜体等]
  C --> F[强调/重要性]
  D --> G[颜色/大小/间距]
</mermaid>

== 数学公式示例 ==

HTML中可以使用<code><nowiki><sub></nowiki></code>和<code><nowiki><sup></nowiki></code>表示简单公式：

二次方程公式：<math>ax^2 + bx + c = 0</math>

解为：<math>x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}</math>

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML文本元素]]