8.1 article 元素
这节主要讲解新增主题元素。
article 元素
article 元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章，一篇帖子、一段用户评论或独立的插件，或其他任何独立的内容。
article 元素是可以嵌套使用的。
article 元素可以用来表示插件。
我们通过实例来看一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>article 元素</title>
</head>
<body>
<article>
<header>
<h1>牛客网</h1>
<p>Hello, 欢迎来到牛客网</p>
</header>
<p>Hello</p>
<footer>
<p>这是底部</p>
</footer>
</article>
</body>
</html>这样的 article 元素就创建好了，他是一个独立的内容，刚才我们说到 article 元素是可以嵌套使用的，内层的内容原则上需要与外层的相关联。比如一篇博客文章中针对该博客的评论就可以使用嵌套 article 元素的方式，毕竟它们有个所属关系，下面我们使用一下嵌套：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>article 元素</title>
</head>
<body>
<article>
<header>
<h1>牛客网</h1>
<p>Hello, 欢迎来到牛客网</p>
</header>
<article>
<header>
作者
</header>
<p>评论</p>
<footer>
time
</footer>
</article>
<footer>
<p>这是底部</p>
</footer>
</article>
</body>
</html>这样我们就实现了一个嵌套的功能。它们之间是有所属关系的，这样可以更好的语义化，更好的去阅读源码，用它代替 div 可以实现更好的语义化，但是容内容呈现的角度来说它是没有区别的。
刚才我们说过 article 元素可以用来表示插件，使插件看起来好像内嵌的页面一样。我们来操作一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>article 元素</title>
</head>
<body>
<article>
<header>
<h1>牛客网</h1>
<p>Hello, 欢迎来到牛客网</p>
</header>
<article>
<header>
作者
</header>
<p>评论</p>
<footer>
time
</footer>
</article>
<footer>
<p>这是底部</p>
</footer>
</article>
<article>
<h1>这是一个内嵌标签</h1>
<object>
<embed src="#" width="600" height="400"><embed>
</object>
</article>
</body>
</html>整体效果：
一个内嵌页面就产生了，并且可以滑动。关于 article 就介绍到这里。
查看28道真题和解析
投递拼多多集团-PDD等公司10个岗位