语义化结构元素种类和示例
一、种类
| 序号 | 标签 | 名称 | 描述 |
|---|---|---|---|
| 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><header></h1></header><div class="container"><!-- 边栏 --><aside><h1><aside></h1></aside><!-- 主体区域 --><main><h1><main></h1><!-- 主体区域中的区块配件 --><div><section><h1><section></h1></section><section><h1><section></h1></section></div></main></div><!-- 页脚 --><footer><h1><footer></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;}
三、完成效果
上述代码完成效果如下
四、问题列表
- 问题：课件代码中
main和div标签包含关系有错，已经改正。 - 问题：同样的
h1标签，在不同的语义标签中大小不一致，通过CSS样式解决，原因待查 - 问题：
grid-template-rows设置为固定值的行可以垂直居中，单位为自适应，如fr的不会设置为居中 - 问题：在父元素上设置垂直居中，子元素会继承，但是具体案例中，会不会出现问题，待学习
- 问题：
font-size属性能不能自适应调整大小，待学习