【前端】基础 - HTML基础标签和样式设置

🔍 一、文字样式与 <font> 标签（已过时，仅作兼容）

使用内容：

html

深色版本

<font face="黑体" size="-1" color="#000fff">-1字</font>

涉及知识点：

属性	含义
face	设置字体（如“黑体”、“宋体”）
size	设置字体大小（范围：-7 ~ +7，默认为3）
color	设置字体颜色（支持十六进制、英文名或RGB）

⚠️ 注意：<font> 标签在 HTML5 中已被弃用，推荐使用 CSS 来控制字体样式。

---

📏 二、文本对齐与水平线 <hr> 标签

使用内容：

html

深色版本

<hr size="3" width="60%" color="#330099" align="center">

涉及知识点：

属性	含义
size	水平线高度（单位像素）
width	宽度（可以是百分比或像素）
color	颜色设置
align	对齐方式（left / center / right）

---

💬 三、强调与语义标签 <strong> 和 <em>

使用内容：

html

深色版本

<strong>宽度为600px、大小为5、绿色、右对齐</strong>
<em>大小为3、宽度为60%、居中</em>

涉及知识点：

标签	含义	默认样式
<strong>	强调重要内容	加粗（bold）
<em>	表示语气上的强调	斜体（italic）

✅ 这两个标签具有语义价值，有助于屏幕阅读器理解内容重要性。

---

🔤 四、注音标记 <ruby> 和 <rt>（适用于中文拼音标注）

使用内容：

html

深色版本

<ruby>智<rp>(</rp><rt>zhì</rt><rp>)</rp>
</ruby>

涉及知识点：

标签	含义
<ruby>	注音容器标签
<rt>	注音内容（拼音）
<rp>	可选标签，用于包裹括号，在不支持 ruby 的浏览器中显示

---

🧾 五、段落缩进与引用标签 <blockquote>

使用内容：

html

深色版本

<blockquote>这行文字行首缩进5个字符位置</blockquote>

涉及知识点：

标签	含义	特点
<blockquote>	块级引用标签	自动缩进，适合引用大段内容
<q>	行内引用标签	适合引用短句，自动加引号

---

📄 六、标题标签 <h4>、<h5> 等

使用内容：

html

深色版本

<h4>换行与水平分割线的应用</h4>
<h5>注释ruby标记-标注读音</h5>

涉及知识点：

• HTML 提供了从 <h1> 到 <h6> 的标题标签，表示不同层级的标题。
• <h1> 最大，<h6> 最小。
• 用于构建文档结构，也有利于 SEO 和可访问性。

---

📝 七、HTML 注释

使用内容：

html

深色版本

<!-- blockquote一般里面放引用的内容 -->

涉及知识点：

• 使用 <!-- 注释内容 --> 添加注释。
• 不会在浏览器中显示，但有助于代码维护和说明。

---

✅ 总结：该代码涵盖的主要知识点如下

类别	内容
字体样式设置	<font> 标签（face, size, color）
文本布局	对齐（align）、水平线（<hr>）
语义化强调	<strong>（强调重点）、<em>（语气强调）
中文注音	<ruby> + <rt> 实现汉字拼音标注
引用内容	<blockquote>（块级引用）、<q>（行内引用）
标题结构	<h4>、<h5> 等标题标签
代码注释	<!-- 注释内容 -->
已过时标签提醒	<font> 已被 CSS 替代，应使用现代样式控制方式

---

📌 推荐改进建议（使用现代 HTML + CSS）

html

深色版本

<style>.text-style {font-family: 黑体;color: #000fff;}.p-indent {text-indent: 2em; /* 缩进两个字符 */}
</style><!-- 示例：使用CSS替代font -->
<p class="text-style">使用CSS定义样式的文字</p><!-- 示例：使用CSS控制水平线 -->
<hr style="width:60%; height:3px; background:#330099; margin:auto;"><!-- 示例：注音 -->
<ruby>智<rt>zhì</rt>
</ruby>