免费教程
在网络上自学 成都Web前端 的同学,会看到一些常见的 HTML 元素,比如 p、h、div等,其实除此之外还看见过其他的 HTML 元素,比如 article 元素,在现在Web前端开发中,经常会用到这些元
Web前端教程
Web前端入门教程:article 元素的详解
来源:易牛云朗沃
  |  
发布时间:2021-08-24 14:19
  |  
关键词:Web前端开发
  |  
阅读量:
在网络上自学成都Web前端的同学,会看到一些常见的 HTML 元素,比如 p、h、div等,其实除此之外还看见过其他的 HTML 元素,比如 article 元素,在现在Web前端开发中,经常会用到这些元素,那这些元素到底是什么呢?
 
Web前端入门教程
 
易牛云朗沃的小编就来和大家说说吧。
 

article元素

 
article元素代表文档、页面、应用程序、或网站中一个独立的、完整的、可以独自被外部引用的内容,它可以是一篇论坛帖子、一篇文章、一篇新闻报道、一篇博客文章等任何独立的内容块,它通常有自己的标题、页脚等。
 
因此,article元素里面可包含独立的 header、footer 等结构化元素。
 
如:
<article>
  <header>
    <h1>The Very First Rule of Life</h1>
    <p><time datetime="2016-8-8">3 days ago</time></p>
 </header>
  <p>If there's a microphone anywhere ...</p>
  <p>...</p>
  <footer>
   <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
  </footer>
</article>
上述代码通过一个article元素,定义了一篇完整的文章,文章由三部分组成,分别是头部、正文和尾部。
 
头部和尾部则通过独立的 header、footer 结构化元素来定义,使文章的结构非常清晰。
 
一个页面可以有多个 article元素(也可以没有),如博客的主页通常包括多篇文章,每篇文章就可以是一个 article元素。
 
并且,可以将一个 article元素嵌套在另一个 article元素中,主要内层的 article元素与外层 article元素是部分与整体的关系。在 article元素元素中包含独立的 h1~h6 标题,也是很好的做法。
 
想了解更多关于成都Web前端的内容,或者想学习更多的内容,都可以进行课程的在线试听