HTML5结构

最新推荐文章于 2024-08-11 09:28:46 发布

WongKyunban

最新推荐文章于 2024-08-11 09:28:46 发布

阅读量1.8k

点赞数

分类专栏： H5 文章标签： HTML5结构

本文链接：https://blog.csdn.net/weixin_40763897/article/details/89349973

版权

H5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>

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>

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>

4.定义内容块:section

用于对页面上的内容进行分区。一个section元素通常由内容及其标题组成。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div，而非section元素。div元素关注结构的独立性，而section元素关注内容的独立性。section元素包含的内容可以单独存储到数据库中，或输出到word文档中。
不要将section元素当作设置样式的页面容器，应该使用div元素实现。
如果article、aside、nav元素更符合条件，就不要使用section元素。
不要为没有标题的内容区域使用section元素。

示例参考前面。

article、section元素可以用来划分区域，但是不能够使用它们来取代div布局网页。