Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 语义化结构元素种类和示例_9月28日作业02
Blogger Information
Blog 5
fans 2
comment 0
visits 3244
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
语义化结构元素种类和示例_9月28日作业02
边边
Original
657 people have browsed it

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

一、种类

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

二、示例

HTML文档
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="css/demo1.css" />
  7.     <title>结构化语义元素</title>
  8.   </head>
  9.   <body>
  10.     <!-- 页眉 -->
  11.     <header><h1>&lt;header&gt;</h1></header>
  12.     <div class="container">
  13.       <!-- 边栏 -->
  14.       <aside><h1>&lt;aside&gt;</h1></aside>
  15.       <!-- 主体区域 -->
  16.       <main>
  17.         <h1>&lt;main&gt;</h1>
  18.         <!-- 主体区域中的区块配件 -->
  19.         <div>
  20.           <section><h1>&lt;section&gt;</h1></section>
  21.           <section><h1>&lt;section&gt;</h1></section>
  22.         </div>
  23.       </main>
  24.     </div>
  25.     <!-- 页脚 -->
  26.     <footer><h1>&lt;footer&gt;</h1></footer>
  27.   </body>
  28. </html>

CSS样式表

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   grid-template-rows: 60px 1fr 60px;
  12.   gap: 5px;
  13. }
  15. header,
  16. footer {
  17.   height: 60px;
  18.   background-color: lightgreen;
  19.   text-align: center;
  20. }
  22. h1 {
  23.   font-size: 24px;
  24. }
  26. header h1 {
  27.   line-height: 60px;
  28. }
  30. footer h1 {
  31.   line-height: 60px;
  32. }
  34. .container {
  35.   display: grid;
  36.   grid-template-columns: 200px 1fr;
  37.   gap: 5px;
  38.   padding: 5px;
  39.   background-color: lightskyblue;
  40. }
  42. .container > aside {
  43.   background-color: lightcyan;
  44.   text-align: center;
  45.   /* line-height: 100; */
  46. }
  48. .container > main {
  49.   display: grid;
  50.   grid-template-rows: 1fr 100px;
  51.   gap: 5px;
  52.   background-color: pink;
  53.   text-align: center;
  54.   padding: 5px;
  55. }
  57. .container > main > div {
  58.   display: grid;
  59.   grid-template-columns: 1fr 1fr;
  60.   gap: 5px;
  61.   text-align: center;
  62. }
  63. .container main div section {
  64.   text-align: center;
  65.   background-color: red;
  66. }
  68. .container main div section h1 {
  69.   line-height: 100px;
  70. }

三、完成效果

上述代码完成效果如下

四、问题列表

  1. 问题：课件代码中main和div标签包含关系有错，已经改正。
  2. 问题：同样的h1标签，在不同的语义标签中大小不一致，通过CSS样式解决，原因待查
  3. 问题：grid-template-rows设置为固定值的行可以垂直居中，单位为自适应，如fr的不会设置为居中
  4. 问题：在父元素上设置垂直居中，子元素会继承，但是具体案例中，会不会出现问题，待学习
  5. 问题：font-size属性能不能自适应调整大小，待学习
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这些简单的属性, 不会浪费课堂时间, 要努力
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post