参考资料

  1. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
  2. HTML DOM 根节点
  3. HTML DOM 返回一个表单target属性的值
  4. HTML DOM 给image加上border
  5. HTML DOM 返回页面上所有相对URL的基URL 实例
  6. HTML DOM 改变一个包含在iframe中的文档的背景颜色
  7. HTML DOM为表格创建一个标题
  8. HTML DOM 修改 HTML 内容

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：文本格式化元素样式布局粗体斜体下划线动态外观