参考资料

1. HTML 表格
2. HTML 用于著作标题的
3. HTML id 属性在 JavaScript 中的使用
4. Excel转HTML表格有哪些
5. HTML 折行
6. HTML id 属性详解
7. 如何检测开发者工具是否被禁用？
8. Html网页 Web 安全色

HTML 中最常用的

容器元素

有HTML 网页<div> 元素详解

基本介绍

<div> 是 HTML 中最常用的容器元素，用于将文档分割为独立的区块，本身不表示任何特定内容，主要用于 CSS 样式化和 JavaScript 操作的分组。

标签语法

<div>内容</div>

主要功能

• 文档结构分组

• CSS 样式应用容器

• JavaScript 操作的目标元素

• 页面布局的基础单元

常用属性

• id - 唯一标识符

• class - 样式类名

• style - 内联样式

• title - 提示文本

基本用法示例

<div id="header">
  <h1>网站标题</h1>
</div>

<div class="content">
  <p>这里是主要内容区域</p>
</div>

<div style="background-color: #f0f0f0; padding: 20px;">
  带样式的 div 区块
</div>

CSS 扩展

<div> 常与以下 CSS 属性配合使用：

布局相关

div {
  display: block; /* 默认值，可改为 flex, grid, inline-block 等 */
  position: static; /* 可改为 relative, absolute, fixed, sticky */
  float: left | right | none;
  clear: both | left | right;
}

盒模型

div {
  width: 100%;
  height: 200px;
  margin: 10px;
  padding: 15px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 或 content-box */
}

背景与装饰

div {
  background-color: #ffffff;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  border-radius: 5px;
}

现代布局示例

<div class="flex-container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.item {
  flex: 1;
  padding: 20px;
  background: #eee;
}
</style>