🔍 一、文字样式与 <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>