首页 > 代码库 > HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素

HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素

新增的结构元素

        在 HTML5 中,新增了以下与结构相关的元素:

      section元素

        section 元素表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。
        它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用,标识文档结构。

        HTML5 中代码示例:
        <section>....</section>

        HTML4 中代码示例:
        <div>...</div>

      article元素

        article 元素表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文章或报纸中的一篇文章。

        HTML5 中代码示例:
        <article>...</article>

        HTML4 中代码示例:
        <div>...</div>

      aside元素

        aside 元素表示 article 元素的内容之外、并与 article 元素的内容相关的辅助信息。

        HTML5 中代码示例:
        <aside>...</aside>

        HTML4 中代码示例:
        <div>...</div>

      header元素

        header 元素表示页面中的一个内容区块或整个页面的标题。

        HTML5 中代码示例:
        <header>...</header>

        HTML4 中代码示例:
        <div>...</div>

      hgroup元素

        hgroup 元素用于对整个页面或页面中一个内容区块的标题进行组合。

        HTML5 中代码示例:
        <hgroup>...</hgroup>

        HTML4 中代码示例:
        <div>...</div>

      footer元素

        footer 元素表示整个页面或页面中一个内容区块的脚注。
        一般来说,它会包含创作者的姓名、创作日期以及创作者的版权或联系信息。

        HTML5 中代码示例:
        <footer>...</footer>

        HTML4 中代码示例:
        <div>...</div>

      nav元素

        nav 元素表示页面中导航链接的部分。

        HTML5 中代码示例:
        <nav>...</nav>

        HTML4 中代码示例:
        <ul>...</ul>

      figure元素

        figure 元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。
        使用 figcaption 元素为 figure 元素组添加标题。

        HTML5 中代码示例:
        <figure>
            <figcaption>新增的结构元素</figcaption>
            <p>在 HTML5 中,新增了以下与结构相关的元素:</p>
        </figure>

        HTML4 中代码示例:
        <dl>
            <h1>新增的结构元素</h1>
            <p>在 HTML5 中,新增了以下与结构相关的元素:</p>
        </dl>

新增的其他元素

        除了结构元素外,在 HTML5 中,还新增了以下元素:

      video元素

        video 元素定义视频,比如电影片段或其他视频流。

        HTML5 中代码示例:
        <video src="http://www.mamicode.com/movie.ogg" controls="controls">video元素</video>

        HTML4 中代码示例:
        <object type="video/ogg" data="http://www.mamicode.com/movie.ogv">
            <param name="src" value="http://www.mamicode.com/movie.ogv">
        </object>

      audio元素

        audio 元素定义音频,比如音乐或其他音频流。

        HTML5 中代码示例:
        <audio src="http://www.mamicode.com/someaudio.wav">audio元素</audio>

        HTML4 中代码示例:
        <object type="application/ogg" data="http://www.mamicode.com/someaudio.wav">
            <param name="src" value="http://www.mamicode.com/someaudio.wav">
        </object>

      embed元素

        embed 元素用来插入各种多媒体,格式可以是 midi、wav、aiff、au、mp3等。

        HTML5 中代码示例:
        <embed src="http://www.mamicode.com/horse.wav" />

        HTML4 中代码示例:
        <object data="http://www.mamicode.com/flash.swf" type="application/x-shockwave-flash"></object>

      mark元素

        mark 元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。
        mark 元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

        HTML5 中代码示例:
        <mark>...</mark>

        HTML4 中代码示例:
        <span>...</span>

 

HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素