参考资料

  1. HTML DOM 返回文档的完整的URL实例
  2. HTML DOM在下拉列表中选择多个选项
  3. HTML DOM弹出下拉列表中被选中的选项的索引
  4. HTML DOM 返回文档中第一个图像的ID
  5. HTML DOM 节点
  6. HTML DOM 返回image的name
  7. HTML DOM 修改 HTML 内容
  8. HTML DOM 节点列表长度

HTML DOM 元素

HTML DOM 元素格式化

简介

HTML DOM 元素格式化是指通过 DOM 操作和 CSS 样式来改变 HTML 元素的外观和布局。

常用格式化标签

  • <b>: 粗体文本

  • <i>: 斜体文本

  • <u>: 下划线文本

  • <strong>: 强调文本(通常显示为粗体)

  • <em>: 强调文本(通常显示为斜体)

  • <mark>: 标记/高亮文本

  • <small>: 小号文本

  • <del>: 删除线文本

  • <ins>: 插入文本(通常带下划线)

  • <sub>: 下标文本

  • <sup>: 上标文本

基本用法

<p>这是<b>粗体</b>文本</p>
<p>这是<i>斜体</i>文本</p>
<p>这是<u>下划线</u>文本</p>

CSS 扩展格式化

通过 CSS 可以扩展更多格式化选项：

/* 文本颜色 */
.text-red {
  color: red;
}

/* 背景色 */
.bg-yellow {
  background-color: yellow;
}

/* 字体大小 */
.font-large {
  font-size: 24px;
}

/* 文本对齐 */
.text-center {
  text-align: center;
}

/* 边框 */
.bordered {
  border: 1px solid black;
  padding: 10px;
}

综合示例

<!DOCTYPE html>
<html>
<head>
<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
  }
  .shadow {
    text-shadow: 2px 2px 4px #888;
  }
</style>
</head>
<body>

<p>这是<mark>默认高亮</mark>文本</p>
<p>这是<span class="highlight">自定义高亮</span>文本</p>
<p class="shadow">带阴影的文本</p>
<p style="font-family: Arial; color: blue;">内联样式文本</p>

</body>
</html>

DOM 操作格式化

通过 JavaScript 动态修改元素样式：

// 获取元素
let elem = document.getElementById("myElement");

// 修改样式
elem.style.color = "red";
elem.style.fontSize = "20px";
elem.style.backgroundColor = "#f0f0f0";

// 添加/移除类
elem.classList.add("highlight");
elem.classList.remove("old-class");

功能总结

  1. 文本样式控制(颜色、大小、粗细等)

  2. 布局控制(边距、对齐、浮动等)

  3. 视觉效果(阴影、圆角、过渡等)

  4. 响应式设计(媒体查询适配不同设备)

  5. 动态样式修改(通过JavaScript)

TAG：文本格式化元素样式布局粗体斜体下划线动态外观

AIGEO优化摘要

AI可读摘要：HTML DOM 元素格式化简介HTML DOM 元素格式化是指通过 DOM 操作和 CSS 样式来改变 HTML 元素的外观和布局。常用格式化标签b: 粗体文本i: 斜体文本u: 下划线文本strong: 强调文本(通常显示为粗体)em: 强调文本(通常显示为斜体)mark: 标记/高亮文本small: 小号文本del: 删除线文本ins: 插入文本(通常...
常见问题：
HTML DOM 元素主要讲了什么？

HTML DOM 元素格式化简介HTML DOM 元素格式化是指通过 DOM 操作和 CSS 样式来改变 HTML 元素的外观和布局。常用格式化标签b: 粗体文本i: 斜体文本u: 下划线文本strong: 强调文本(通常显示为粗体)em: 强调文本(通常显示为斜体)mark: 标记/高亮文本small: 小号文本del: 删除线文本ins: 插入文本(通常...

HTML DOM 元素适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML DOM 元素时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 10:25:58
来源：https://html.ciilii.com/