Blogger Information
Blog 2
fans 0
comment 0
visits 1040
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html语义化结构元素和markdowm常用写法
程坤
Original
435 people have browsed it

html语义化结构元素

页面中常用标签

序号 标签名 描述
1 <h1>至<h6> 常用作页面里面的标题,h1字体最大,h6字体最小
2 <header></header> 一般放在页面中的最顶部,里面一般是页面的logo、顶部导航
3 <footer></footer> 一般放在页面的最底部,里面会放网站的联系方式,备案信息等
4 <nav></nav> 通常用作页面内的导航,比如左侧导航栏
5 <main></main> 页面主要内容标签,页面的主要内容就放在此标签里,一个页面一般就一个此标签
6 <article></article> 通常用作文章内容,可以把文章、新闻的内容放在此标签
7 <aside></aside> 页面中的边栏,放在主要内容旁边,里面主要放一些列表,广告,导航
8 <section></section> 内容中的区块元素,一般放在主要内容中
9 <div></div> 我感觉是最常用的块级标签,没有什么语义,自定义用途

示例

  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. <title>html语义化结构元素</title>
  7. </head>
  8. <body>
  9. <header>我是header</header>
  10. <div class="wrap">
  11. <nav>
  12. <ul>
  13. <li><a href="">我是左侧导航</a></li>
  14. <li><a href="">我是左侧导航</a></li>
  15. <li><a href="">我是左侧导航</a></li>
  16. <li><a href="">我是左侧导航</a></li>
  17. <li><a href="">我是左侧导航</a></li>
  18. </ul>
  19. </nav>
  20. <main>
  21. <h1>我是主要内容</h1>
  22. <article>
  23. 我是一篇文章
  24. </article>
  25. </main>
  26. <aside>
  27. 我是右边栏
  28. </aside>
  29. </div>
  30. <footer>我是底部</footer>
  31. </body>
  32. </html>

markdown 的其它用法

一起看下面的内容

链接用法

我是一个链接

无序列表

  • 无序v1
    • 无序vv1
    • 无序vv2
  • 无序v2

图片

我是图片

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