HTML5的结构学习(1) --- 新增的主体结构元素

 

1.article 元素

解释:代表文档、页面和应用程序中独立的、完整的、可以被独自引用的内容。

主要用途:博客中的文章、评论,贴吧中的帖子,或者独立的插件等。

article中可以包含多种元素例如:

<article>
    <header>日记随笔</header>
    <p>发表日期:
        <time pubdate="pubdate">2014/09/18</time>
    </p>
    <p>今天早上下雨,天气很冷需要加衣服</p>
    <footer>我的博客</footer>
</article>

同时article中也可以嵌入article:

<html>
 <head></head>
 <body>
  <article>
   <h1>日志列表</h1>
   <section>
    <article>
     <header>
      日记随笔
     </header>
     <p>发表日期: <time pubdate="pubdate">2014/09/18</time> </p>
     <p>今天早上下雨,天气很冷需要加衣服...</p>
    </article>
    <article>
     <header>
      日记随笔
     </header>
     <p>发表日期: <time pubdate="pubdate">2014/09/18</time> </p>
     <p>今天早上下雨,天气很冷需要加衣服...</p>
    </article>
   </section>
  </article>
 </body>
</html>

2.section元素

解释:用于网站或者应用程序中的内容进行分块。一个section元素通常由标题和内容组成。

用途:划分不同内容区块。

section就是用于内容的分段,例如:

<article>
    <h1>NBA 球队</h1>
    <p>NBA用东西区共有30支球队组成</p>
    <section>
         <h2>金州勇士队</h2>
         <p>金州勇士队位于美国奥克兰。。。。。。</p>
    </section>
     <section>
         <h2>洛杉矶湖人队</h2>
         <p>洛杉矶湖人队位于美国娱乐中心洛杉矶。。。。。。</p>
    </section>
</article>

NBA球队介绍首先是一段独立的内容,因而使用article元素,而每支球队的介绍是彼此并列需要使用分段,所以使用section分隔。

其实这里的article 和section就算互换使用也未尝不可(article可以看做一种特殊的section),主要是看这段元素在你当前的网页中强调的是什么,强调独立性使用article,强调分段使用section。

可以访问https://gsnedders.html5.org/outliner/检查你代码结构中没有section 标题的部分,不要为没有标题的内容区块使用section标签

注意:section并非一个普通的容器元素,当一个容器元素需要直接被定义样式或者脚本定义行为时,推荐使用的是div。

3.nav元素

解释:页面导航的链接组

用途:页面导航

nav元素就是用于包裹页面导航元素,例如:

<nav>
   <ul>
       <li>主页</li>
       <li>我的博客</li>
       <li>论坛</li>
       .....
   </ul>
</nav>

注意:不要使用menu元素代替nav

4.aside元素

解释:用来表示当前页面和文章的附属信息部分

用途:用于与当前页面相关的引用、边侧栏、广告和导航条。

aside主要有两种用法:

1.被包含在article中作为主要内容的分属信息部分,其中内容可以是与当前文章相关的参考资料、名词解释。

例如:

  <header>
    <h1>HTML5新元素</h1>
  </header>
  <article>
    <h1>aside标签的使用</h1>
    <p>aside标签同article一样都是HTML5中新加入的元素,但是一般用于与主体内容相关元素。如名词解释、引用等等。。。。。。。</p>
    <aside>
        <h1>名词解释</h1>
        <dl>
            <dt>article</dt>
            <dd>HTML5新元素,用于表示独立元素</dd>
        </dl>
    </aside>
  </article>

2.在article元素之外使用,作为页面或者站点全局的附属信息部分使用。例如友情连接、广告和其他文章列表。

  <aside>
    <h1>本周热门文章</h1>
    <ul>
        <li>
            <span>0</span><a href="....">iPhone6 回事目前技术上最先进的手机吗?</a>
        </li>
        <li>
            <span>1</span><a href="....">Git工作流指南:集中式工作流</a>
        </li>
        <li>
            <span>2</span><a href="....">图解KMP算法(Javascript实现)</a>
        </li>
        ...
    </ul>
  </aside>
时间: 2024-11-10 19:34:46

HTML5的结构学习(1) --- 新增的主体结构元素的相关文章

HTML5的结构学习(2) --- 新增的非主体结构元素

除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一内容区块的标题部分.如标题名称.logo图片等. <header><h1>大标题</h1></header> <article> <header><h1>文章内容标题</h1></header> <

HTML5的结构学习(3) --- 综合运用

前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素. 1.大纲 HMTL5元素的关键就是将显示内容和便签类型紧密相关,提高了代码的语义化和可读性. 我们这里的大纲就是指整个网站内容的大体排版.具体可以分为显示排版和隐式排版两种. 1)排版内容区块 是指明确使用section等元素创建文档结构,并且每个section都有自己的标题(h1~h6,hgroup) 2)隐式排版内容区块 是指不明确使用section等元素,而是直接在每个标题下创建

HTML5 表单及其他新增和改良元素(上)

1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea> 2. 表单内元素的formaction属性 在H

HTML5图形绘制学习(1)-- Canvas 元素简介

Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制,而是要利用javascript在其中进行进行操作. 这里做个简单的canvas实例: 1.在页面中添加canvas元素 首先在页面中添加canvas元素,需要给定其高度.宽度和唯一标识id<!doctype html> <html lang="en"> <he

HTML5学习笔记一:新增主体结构元素

Dreamweaver快捷键: 属性面板:Ctrl+F3 新建文档:Ctrl+N 选择用网页查看:F12 新增的主体结构元素: section元素(例子如下): <!DOCTYPE HTML> <html> <body> <section> <h2>section元素使用方法</h2> <p> section元素用于对网站或应用程序中页面上的内容进行分块.</p> </section> </b

HTML5 新增结构元素分为主体结构元素和非主体结构元素

做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介绍下 html5 新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的 seo,但其实当页面禁用样式后,它们的展现跟 div 是没撒差别,有同学可能会说,既然一样,又不影响页面的最终展现,不管是 article 还是 section 能用就好了.如果考虑实际项目的

HTML5新增的非主体结构元素

-------------------siwuxie095 HTML5 新增的非主体结构元素 1.header 元素 header 元素是一种具有引导和导航作用的结构元素,通常 用来放置整个页面 或 页面内的一个内容区块的标题,但是 也可以包含其它内容,如:数据表格.搜索表单.或相关的 logo 图片 2.footer 元素 footer 元素可以作为其上层父级内容区块 或 是一个根区块 的脚注 footer 元素通常包括其相关区块的脚注信息,如:作者.相 关阅读链接.版权信息等 3.hgrou

HTML5 新增的的非主体结构元素

HTML5 新增的的非主体结构元素包括header元素.footer元素.address元素.hgroup元素. header元素:header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,如:数据表格.搜索表单.或者相关的logo.它可以出现多次. <!DOCTYPE html> <html> <head lang="en"> <title>header元素</t

HTML5学习之一:HTML5的结构

article元素 -------------------------------------------------------- 文档.页面.应用程序或站点中的字包含成分所构成的一个页面的一部分,并且这部分专用于独立地分类或复用:一个article元素通常有他自己的标题(可以放在header中),有时还有自己的脚注. eg: 1 <article> 2 <header> 3 <h2>黑颜简介</h2> 4 <p>黑颜:言情小说家</p&