经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
HTML5常用的语义化标签
来源:cnblogs  作者:kyomini  时间:2019/9/27 9:48:45  对本文有异议

快速查询

  1. article | aside | nav | section | header | footer

架构预览

nav 定义导航链接的部分

在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等

  1. <nav>
  2. <ul>
  3. <li><a href=”#”>Home</a></li>
  4. <li><a href=”#”>CSS</a></li>
  5. <li><a href=”#”>Html5</a></li>
  6. </ul>
  7. </nav>

article 定义文章  

装载显示一个独立的文章内容,论坛帖子、新闻、博客文章、用户评论等,artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。

  1. <article>
  2. <h1>标题</h1>
  3. <p> 内容</p>
  4. <article>用户评论</article>
  5. <article>回复评论</article>
    </article>

section 定义文档中的节

 章节、页眉、页脚或文档中的其他部分,

  1. <section>
  2. <h1>标题1</h1>
  3. <p>内容1</p>
  4. </section>
  5. <section>
  6. <h1>标题2</h1>
  7. <p>内容2</p>
  8. </section>

aside 定义文章的侧栏

广告,成组的内容,友情链接,侧边栏等

  1. <aside>
  2. <h1> 侧栏标题1</h1>
  3. <p>这是侧栏内容1</p>
  4. </aside>
  5. <aside>
  6. <h1> 侧栏标题2</h1>
  7. <p>这是侧栏内容3</p>
  8. </aside>

header 定义文档的页眉

通常是一些引导和导航信息

  1. <header>
  2. <p>logo</p>
  3. <nav>
  4. <ul>
  5. <li>Home</li>
  6. <li>Html5</li>
  7. </ul>
  8. </nav>
  9. </header>

footer 定义文档或节的页脚

在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息

  1. <footer>
  2. <p>© 2019 All Rights Reserved. </p>
  3. </footer>

 

 

参考文献

1 html5 | http://caibaojian.com/html5
2 w3school | https://www.w3school.com.cn/
3 MDN | https://developer.mozilla.org/zh-CN/docs/Web/HTML/

 

原文链接:http://www.cnblogs.com/kyomini/p/11588781.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号