参考资料

  1. 动态加载+Token验证+频率限制
  2. HTML 数学符号
  3. HTML 书签属性格式化
  4. HTML 块引用格式化
  5. HTML 中最常用的
  6. html文本标签详细说明以及案例
  7. HTML 多媒体
  8. html表格标签详细说明以及案例

HTML 布局

HTML 布局

基本介绍

HTML 布局是指使用 HTML 元素和 CSS 样式来组织和排列网页内容的结构方式。合理的布局能提升用户体验和页面可读性。

常用布局标签

1. <div>

  • 用途：块级容器，用于分组内容

  • 特点：默认占满整行

  • 示例：

<div id="header">这是头部</div>

2. <span>

  • 用途：内联容器，用于小范围文本分组

  • 特点：不换行

  • 示例：

<p>这是<span class="highlight">重点</span>内容</p>

3. <header>

  • 用途：定义文档或节的页眉

  • 示例：

<header>
  <h1>网站标题</h1>
</header>

4. <nav>

  • 用途：定义导航链接

  • 示例：

<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
</nav>

5. <section>

  • 用途：定义文档中的节

  • 示例：

<section>
  <h2>章节标题</h2>
  <p>章节内容...</p>
</section>

6. <article>

  • 用途：定义独立的自包含内容

  • 示例：

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>

7. <aside>

  • 用途：定义侧边栏内容

  • 示例：

<aside>
  <h3>相关链接</h3>
  <ul>...</ul>
</aside>

8. <footer>

  • 用途：定义文档或节的页脚

  • 示例：

<footer>
  <p>版权信息 © 2023</p>
</footer>

CSS 布局扩展

1. Flexbox 布局

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2. Grid 布局

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

3. 浮动布局

.float-left {
  float: left;
  width: 30%;
}

4. 定位布局

.absolute {
  position: absolute;
  top: 10px;
  left: 10px;
}

完整布局示例

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: grid;
      grid-template-areas:
        "header header"
        "nav main"
        "footer footer";
      grid-template-columns: 200px 1fr;
    }
    header { grid-area: header; }
    nav { grid-area: nav; }
    main { grid-area: main; }
    footer { grid-area: footer; }
  </style>
</head>
<body>
  <header>网站标题</header>
  <nav>导航菜单</nav>
  <main>主要内容</main>
  <footer>页脚信息</footer>
</body>
</html>
TAG：布局示例用途定义文档容器特点基本元素样式