`
lucifinilhades
  • 浏览: 87662 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML5 新增的主体结构元素

阅读更多

article 元素与 section 元素

<article>
    <header>
            <h1>主体结构元素</h1>
    </header>
    <section>
    <h2>article 元素</h2>
        <ul>
            <li>article 元素代表文档、页面或应用程序中的独立的、完整的、可以独自被外部引用的内容。</li>
            <li>article 元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。</li>
            <li>article 元素也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中一样。</li>
        </ul>
    </section>
    <section>
        <h2>section 元素</h2>
        <ul>
            <li>section 元素用于对网站或应用程序中页面上的内容进行分块。</li>
            <li>section 元素通常由内容及标题组成。</li>
            <li>article 元素可以看成是一种特殊的section 元素,它比section 元素更强调独立性,而section 元素强调分段或分块。</li>
        </ul>
        <article>
            <header>
                <h3>关于section 元素的使用禁忌总结:</h3>
            </header>
            <ol>
                <li>不要将section 元素用作设置样式的页面容器,这是div元素的工作。</li>
                <li>如果article 元素、aside 元素或nav 元素更符合使用条件,不要使用section 元素元素。</li>
                <li>不要为没有标题的内容区块使用section 元素。</li>
            </ol>
        </article>
    </section>
    <footer>
        <em>除了内容部份,一个article 元素通常有它自己的标题(一般放在 header 元素里面),有时还有自己的脚注。</em>
    </footer>
</article>

nav 元素

nav 元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。只需要将主要的、基本的链接组放进该元素即可。

nav 元素可以用应用的场合包括:传统导航、侧边栏导航、页内导航、翻页操作等。

注意: 在HTML5中不要使用 menu 元素代替 nav 元素。menu 元素是用在一系列发出命令的菜单上的,是一种交互性的元素。

aside 元素

aside 元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。

aside 元素的主要用法:

  • 被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文档有关的参考资料、名词解释等。
  • 在 article 元素之外使用,作为页面或站全局的附属信息部分。

time 元素

time 元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差,可以包括如下格式。

<time date="2010-11-13">2010年11月13日</time>
<time date="2010-11-13">11月13日</time>
<time date="2010-11-13">我的生日</time>
<time date="2010-11-13T20:00">我生日的晚上8点</time>
<time date="2010-11-13T20:00Z">我生日的晚上8点</time>
<time date="2010-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>

说明: 日期与时间之间要用“T”字符隔开;以“Z”结尾的格式表示使用UTC标准时间编码;最后一种格式为添加时差。

time 元素的“pubdate”是一个可选的 boolean 型属性,可以用在article 元素中的 time元素上,表示具体发布日期。

 

 

分享到:
评论

相关推荐

    细谈HTML 5新增的元素

    #### HTML5结构元素 ##### Section `&lt;section&gt;` 元素用于表示文档或应用程序中的一个独立部分,通常包含一组相关的子节。它可以代表一个章节、页眉、页脚或文档中的任何其他部分。例如,在博客文章中,每个文章...

    HTML5+CSS3 新增的非主体结构标签.docx

    以下是对这些新增非主体结构标签的详细解释: 1. **header** 标签: `&lt;header&gt;` 标签用于定义页面或某个内容区域的头部,通常包含站点的标题、logo、导航菜单等元素。它不仅可以用在整个页面的顶部,还可以用在...

    HTML5+CSS3 新增的非主体结构标签.pdf

    本篇文章主要关注HTML5中的非主体结构标签,这些标签主要用于组织和增强页面的辅助内容。 首先,`&lt;header&gt;`标签是页面顶部区域的容器,它用于包含网站的标志、导航菜单、搜索表单等关键信息。`&lt;header&gt;`标签不仅...

    从入门到精通HTML5——PDF——网盘链接

     13.2 新增的非主体结构元素 251  13.2.1 header元素 251  13.2.2 hgroup元素 252  13.2.3 footer元素 252  13.2.4 address元素 253  13.3 小结 253  13.4 习题 254  第14章 HTML 5中的表单 255  视频讲解...

    HTML5中新标签和常用标签详解

    今天先介绍下 html5 新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的 seo,但其实...HTML5 新增结构元素分为主体结构元素和非主体结构元素 1.主体结构元素包括 article、se

    HTML5精粹:利用HTML5开发令人惊奇的Web站点和革命性应用 pdf扫描版

    全书共16章:第1章介绍了HTML5文档的基本组成、全局结构、主体,以及新旧元素对比;第2章和第3章讲解了CSS的样式设置、框模型,以及CSS3的核心属性和新规则;第4章重点介绍了JavaScript的核心知识;第5章详细介绍了...

    使用HTML开发商业网站-HTML5及文档结构课件.pptx

    2. **合理性**:HTML5新增的标签,如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;article&gt;`等,是根据实际网页设计和开发的常见模式提出的。这些标签直接反映了网页内容的结构,使得文档结构更加清晰,便于理解和维护。 3. **易用性...

    HTML5题库(选择题)

    HTML5 中新增了许多新特性,例如 datetime、file、range、email 等 input 类型。 5. CSS 样式 在 CSS 中,文本修饰的取值 text-decoration:overline 表示上划线。CSS 样式可以用于设置网页的布局、颜色、字体等...

    HTML5的结构和语义(3):语义性的块级元素

    HTML5的结构和语义性块级元素是其对网页设计和开发的重要改进,旨在提高内容的可读性和机器可解析性。在这篇文章中,主要关注了三个新增的语义化块级元素:`aside`、`figure` 和 `dialog`。 首先,`aside` 元素用于...

    HTML5基础教程PDF版

    在课程中,你将了解到HTML5如何组织网页结构,包括头部(head)、主体(body)和元数据(metadata)的使用。 1.1 软件架构分类: 在了解HTML5之前,我们需要知道软件架构的两种主要类型:C/S架构(Client/Server)...

    HTML5中文参考手册

    - **版本**:仅在HTML5中新增。 ##### 10. `&lt;aside&gt;` - **功能**:定义页面内容之外的相关信息,如侧边栏。 - **版本**:仅在HTML5中新增。 ##### 11. `&lt;audio&gt;` - **功能**:定义声音内容,用于播放音频文件...

    FrontApplication:前端开发 极客学院 笔记

    2.HTML5 新增的主体结构元素 3.HTML5 新增的的非主体结构元素 4.HTML5 表单新增元素与属性 5.HTML5 表单新增元素与属性(续) 6.HTML5 改良的 input 元素的种类 7.HTML5 增强的页面元素 8.HTML5 编辑 API 之 Range ...

    图解HTML5网页代码结构之美

    HTML5新增了许多语义化更强的元素,使网页结构更加清晰明确。下面是一些常用的元素及其用途: - **`&lt;header&gt;`**:定义一个页面或者节(section)的头部。它可以包含导航链接、logo等信息。 - **`&lt;nav&gt;`**:用于...

    html5简明教程

    HTML5不仅保持了HTML4的核心功能,还新增了许多特性来支持多媒体、图形绘制、离线存储等功能,极大地提升了Web应用的表现力和可用性。 #### 二、HTML5的基本结构 HTML5文档的基本结构包含以下几个主要部分: 1. **...

    HTML5+CSS3网站设计基础教程_动手实践源代码.zip

    1. 学习如何编写HTML5文档结构,包括DOCTYPE声明、头部元信息、导航、主体内容和页脚。 2. 使用HTML5的新元素来组织内容,如创建文章、侧栏、导航菜单等。 3. 掌握CSS3的选择器,为不同类型的元素设置不同的样式。 4...

    HTML5基础知识, 核心技术与前沿案例

    此外,HTML5对表单控件进行了改进,新增了日期选择器、颜色选择器等,并支持输入验证,提高了用户体验。 二、HTML5核心技术 1. Canvas:HTML5的Canvas元素提供了一个在网页上绘制图形的API,通过JavaScript可以动态...

    html5开发文档

    1. **基础语法**:熟悉HTML5的基本语法结构,包括文档类型声明、头部信息、主体内容等。 2. **新标签和属性**:重点掌握HTML5中新引入的标签和属性,理解其用途和应用场景。 3. **实践项目**:通过实际动手制作...

    最好的HTML5编码教程和参考手册推荐.doc

    首先,HTML5引入了许多新的标签和元素,如、、、、等,这些结构性标签大大提高了代码的语义性,使得网页内容的组织更加清晰,对于搜索引擎优化(SEO)也十分有利。例如,在设计博客时,可以使用定义头部,用于导航,...

    HTML5基本标签整理与部分源码事例

    1. HTML5新增主体元素结构: - article元素:用于定义页面中独立的、自成一体的内容区域。article元素内的内容应该与页面其他内容相对独立。 - section元素:表示文档中的一个区域,用于将页面内容划分为不同的...

    Web前端基础:HTML5技术介绍.pptx

    HTML5新增的一些重要标签包括、、、、等,它们帮助定义网页的结构性元素。同时,HTML5强化了对音频和视频的支持,通过`&lt;audio&gt;`和`&lt;video&gt;`标签可以直接在网页中嵌入媒体内容,无需额外插件。 此外,HTML5还引入了...

Global site tag (gtag.js) - Google Analytics