HTML5结构
【摘要】 1.定义文章块:article
article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。可以是一篇博客、文章、帖子、评论或独立的插件等。 一个article元素通常有它自己的标题，一般放在一个header元素里面，有时还有脚注，如文章的著作权，一般放在结尾处footer元素中。当article元素嵌套使用时，内部的article元素内容必须和外...
1.定义文章块:article
article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。可以是一篇博客、文章、帖子、评论或独立的插件等。
一个article元素通常有它自己的标题，一般放在一个header元素里面，有时还有脚注，如文章的著作权，一般放在结尾处footer元素中。当article元素嵌套使用时，内部的article元素内容必须和外部article元素内容相关。
<!DOCTYPE html>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><!--内容宽度自适应-->
<title>article</title>
<article> <header> <h1>人工智能击败围棋选手 百万美元挑战世界冠军</h1> <time pubdate="pubdate">2019-04-17 09:57:00</time> </header> <p>XXX04月17日消息（记者XXX）据ssss报道，今天3月份一场举世瞩目的对决交在xxx举行。这是xxx公司人工智能电脑与世界围棋冠军xxx的比赛。 <footer> <a href="#">http://news.wong.com</a> </footer>
<section> <h2>评论</h2> <article> <header> <h3>小王</h3> <p><time pubdate datetime="2019-04-17 19:00:00">人类要做好风险的预案</time> </header> <p>OK </article> <article> <header> <h3>小李</h3> <p><time pubdate datetime="2019-04-17 19:00:00">科技真了不起</time> </header> <p>哈哈哈 </article>
</section>
</article>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
2.定义导航栏：nav
可以用作页面导航的链接组。可以用于传统导航条、侧边导航栏、页内导航、翻页操作。
<!DOCTYPE html>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><!--内容宽度自适应-->
<title>article</title>
<nav draggable="true"> <a href="#">首页</a> <a href="#">图书</a> <a href="#">论坛</a>
</nav>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
3、定义侧边栏：aside
用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条以及其他类似的有别于主要内容的部分。
<!DOCTYPE html>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><!--内容宽度自适应-->
<title>Hello</title>
<article> <header> <h2>HTML5历史</h2> </header> <p>HTML5草案的前身名为Web Applictions 1.0，于2004年被WHATWG提，于2007年被W3C接纳，并成立了新的HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善>之中。然而，大部分丙浏览器已经具备了某些HTML5支持。 <aside> <h1>名词解释</h1> <dl> <dt>WHATWG <dd>Web Hypertext Application Technology Working Group,HTML工作开发组的简称，目前与W3C组织同时研发HTML5 。 <dt>W3C <dd>World Wide Web Consortium，万维网联盟，万维网联盟是国际著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出贡献>。 </aside> </article>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
4.定义内容块:section
用于对页面上的内容进行分区。一个section元素通常由内容及其标题组成。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div，而非section元素。div元素关注结构的独立性，而section元素关注内容的独立性。section元素包含的内容可以单独存储到数据库中，或输出到word文档中。
不要将section元素当作设置样式的页面容器，应该使用div元素实现。
如果article、aside、nav元素更符合条件，就不要使用section元素。
不要为没有标题的内容区域使用section元素。
示例参考前面。
article、section元素可以用来划分区域，但是不能够使用它们来取代div布局网页。
文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_40763897/article/details/89349973
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）