语义化结构元素种类和示例_9月28日作业02 - 前端

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 语义化结构元素种类和示例_9月28日作业02

博主信息

博文 5

粉丝 2

访问量 4464

专题推荐

更多>

语义化结构元素种类和示例

一、种类

序号	标签	名称	描述
1	header	页眉	一般包含导航，logo
2	aside	边栏	主体外的广告或分类
3	main	主体	主要内容，一个页面建议出现一次
4	section	区块	主体或文档中的配件
5	footer	页脚	一般包含版权备案号等信息
6	nav	导航	一般由列表中的多个`a`标签组成
7	article	文档	一般作为容器
8	h1-h6	标题	文档标题，用来划分段落和层级关系
9	div	容器	作为容器，通过属性明确用途和语义

二、示例

HTML文档

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/demo1.css" />
    <title>结构化语义元素</title>
  </head>
  <body>
    <!-- 页眉 -->
    <header><h1>&lt;header&gt;</h1></header>
    <div class="container">
      <!-- 边栏 -->
      <aside><h1>&lt;aside&gt;</h1></aside>
      <!-- 主体区域 -->
      <main>
        <h1>&lt;main&gt;</h1>
        <!-- 主体区域中的区块配件 -->
        <div>
          <section><h1>&lt;section&gt;</h1></section>
          <section><h1>&lt;section&gt;</h1></section>
        </div>
      </main>
    </div>
    <!-- 页脚 -->
    <footer><h1>&lt;footer&gt;</h1></footer>
  </body>
</html>

CSS样式表

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  gap: 5px;
}
header,
footer {
  height: 60px;
  background-color: lightgreen;
  text-align: center;
}
h1 {
  font-size: 24px;
}
header h1 {
  line-height: 60px;
}
footer h1 {
  line-height: 60px;
}
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 5px;
  padding: 5px;
  background-color: lightskyblue;
}
.container > aside {
  background-color: lightcyan;
  text-align: center;
  /* line-height: 100; */
}
.container > main {
  display: grid;
  grid-template-rows: 1fr 100px;
  gap: 5px;
  background-color: pink;
  text-align: center;
  padding: 5px;
}
.container > main > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  text-align: center;
}
.container main div section {
  text-align: center;
  background-color: red;
}
.container main div section h1 {
  line-height: 100px;
}