Blogger Information
Blog 11
fans 0
comment 0
visits 10897
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20200928作业-语义结构化元素种类和用途以及实例
山下之石
Original
572 people have browsed it

语义结构化元素种类和用途

1 常用标签

序号 标签 名称 用途
1 <h1>-<h6> 标题 通常用来划分或标注内容中的文本段落
2 <header> 页眉 一般由导航,logo 等元素组成
3 <footer> 页脚 一般由友情链接,联系方式,备案信息和版权说明等信息构成
4 <nav> 导航 导航通常是由一个或多个链接标签<a>标签组成
5 <main> 主体 展示页面主体内容,建议一个页面只出现一次
6 <article> 文档 本意是文档,实际上可充当其他内容
7 <aside> 边栏 与主体信息无关的信息(广告位,推荐阅读等)
8 <section> 区块 文档和主体中的通用小组件
9 <div> 容器 本身无任何语义,通过它的属性来描述用途

2 实例代码:

  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" type="text/css" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <header>我是页眉</header>
  11. <div class="container">
  12. <aside>我是侧边栏</aside>
  13. <main>
  14. <h1>我是主体</h1>
  15. <div>
  16. <section>
  17. <h1>我是内容1</h1>
  18. </section>
  19. <section><h1>我是内容2</h1></section>
  20. </div>
  21. </main>
  22. </div>
  23. <footer>我是页脚</footer>
  24. </body>
  25. </html>

3 效果显示

html结构化元素布局实例

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