HTML 区块元素

参考资料

1. HTML 表格高度和宽度
2. HTML 图像
3. CSS 实现购物按钮
4. HTML 框架
5. HTML 超链接
6. HTML 表格的嵌套
7. Html转PHP代码有哪些
8. HTML 删除字符效果和插入字符效果

HTML 区块元素

1. 基本概念

• 区块元素占据其父元素的整个宽度

• 默认情况下前后带有换行符

• 通常用于构建网页的主要结构

2. 主要区块元素标签

• <div>: 通用容器

• <p>: 段落

• <h1>-<h6>: 标题

• <ul>, <ol>, <li>: 列表

• <table>: 表格

• <form>: 表单

• <header>: 页眉

• <footer>: 页脚

• <section>: 文档区域

• <article>: 独立内容

• <nav>: 导航链接

• <aside>: 侧边栏

3. 常见用法

• 页面布局

• 内容分组

• 创建结构化文档

4. 实例代码

<div class="container">
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
      </ul>
    </nav>
  </header>
  <section>
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>
  </section>
</div>

5. CSS扩展功能

• 布局控制: display, position, float

• 盒模型: width, height, padding, margin, border

• 背景: background-color, background-image

• 排版: text-align, line-height

• 视觉效果: box-shadow, border-radius

• Flexbox布局: display: flex

• Grid布局: display: grid

6. 典型CSS应用示例

.container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 3fr;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
}

nav ul {
  display: flex;
  gap: 15px;
}

article {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
}