欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5 新增的主体结构元素

程序员文章站 2022-05-11 10:54:25
...

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元素上,表示具体发布日期。

 

 

相关标签: HTML5