参考资料

  1. Html表格生成器有哪些
  2. Excel转HTML表格有哪些
  3. html结构标签详细说明以及案例
  4. HTML 列表
  5. HTML "计算机输出"标记
  6. HTML 图像
  7. HTML 用于联系信息的
  8. 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：布局示例用途定义文档容器特点基本元素样式

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。