参考资料

  1. HTML 链接语法
  2. HTML 自定义列表
  3. html链接标签详细说明以及案例
  4. HTML 外部样式
  5. Html/JS互转有哪些
  6. Html转C#/JSP有哪些
  7. HTML高度与宽度设置 Iframe
  8. HTML 布局

HTML 布局 - 有用的提示

详细介绍

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

常用布局标签

  1. <div> - 通用块级容器

  2. <header> - 页眉区域

  3. <nav> - 导航栏

  4. <main> - 主要内容区域

  5. <section> - 文档中的节

  6. <article> - 独立内容块

  7. <aside> - 侧边栏内容

  8. <footer> - 页脚区域

用法

  1. 语义化布局：使用语义化标签增强可读性和SEO

  2. 盒子模型：理解 margin, border, padding, content

  3. 定位方式：static, relative, absolute, fixed, sticky

  4. 浮动布局：float 属性

  5. 弹性盒子：display: flex

  6. 网格布局：display: grid

实例

<!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>

CSS 扩展功能

  1. Flexbox 布局：

    • display: flex

    • flex-direction, justify-content, align-items

    • flex-grow, flex-shrink, flex-basis

  2. Grid 布局：

    • display: grid

    • grid-template-columns, grid-template-rows

    • grid-gap, grid-area

  3. 响应式设计：

    • @media 查询

    • 视口单位 (vw, vh)

    • 相对单位 (rem, em)

  4. 现代布局技术：

    • CSS 多列布局

    • CSS Shapes

    • CSS 子网格 (subgrid)

TAG：布局区域方式标签语义盒子详细元素样式网页内容