zoukankan      html  css  js  c++  java
  • HTML5新标签含义,用法及其与HTML4的区别

    1.<article>:

    定义独立的内容,如论坛帖子,博客条目,用户评论等内容。

    HTML5:<article></article>
    HTML4:<div></div>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    2.<aside>:

    定义两栏或多栏的侧边栏内容,如联系我们,客服,网站公告,广告等内容。

    HTML5:<aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside>
    HTML4:<div>Aside 的内容是独立的内容,但应与文档内容相关。</div>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    3.<audio>:

    定义音频内容,如音乐或其他音频流。

    HTML5:

    <audio src=”audio.wav”>

    您的浏览器不支持 audio 标签。(注:可以在开始标签和结束标签之间加上此文本内容,这样若浏览器不支持此元素,就可以显示出这个信息。)

    </audio>

    HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    4.<canvas>:

    定义图形,如图表或其他图像。(canvas只是图形容器,我们必须使用脚本(JavaScript)来绘制图形

    HTML5:

    <canvas id=”myCanvas”></canvas>

    <script type=”text/javascript”>

    var canvas=document.getElementById(‘myCanvas’);

    var ctx=canvas.getContext(‘2d’);

    ctx.fillStyle=’#FFFF00′;

    ctx.fillRect(0,0,20,30);

    </script>

    HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    5.<datalist>:

    定义选项列表,需要与input元素配合使用,通过input元素的list属性来绑定,用来定义input的可选值。(datalist及其选项不会被显示出来,他仅仅是合法的输入列表)

    HTML5:

    <input id=”fruits” list=”fruits” />

    <datalist id=”fruits”>

    <option value=”Apple”>

    <option value=”Banana”>

    </datalist>
    HTML4: see combobox.

    6.<details>:

    用于描述文档或文档某个局部细节。

    HTML5:

    <details>

    <summary>Some title.</summary>

    <p>Some details about the title.</p>

    </details>
    HTML4: <dl style="display:hidden"></dl>

    浏览器支持:

    Chorme,Safari。

    7.<embed>:

    定义外部的可交互的内容或插件。

    HTML5:

    <embed src=”someone.swf” />

    HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>

    8.<figure>:

    定义一组媒体内容(图像,图表,照片,代码等)以及他们的标题。(如果被删除,则不应对文档留产生影响

    HTML5:

    <figure>

    <p>The title of the image.</p>

    <img src=”someimage.jpg” width=”100″ height=”50″ />

    </figure>

    HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    9.<footer>:

    定义一个页面或一个区域的脚本。可包含文档的作者姓名,创作日期或者联系信息。

    HTML5: <footer></footer>
    HTML4: <div></div>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    10.<header>:

    定义一个页面或一个区域的头部。

    HTML5: <header></header>
    HTML4: <div></div>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    11.<hgroup>:

    定义文档中一个区块的相关信息,使用<hgroup>标签对网页或区段(section)的标题进行组合。

    HTML5:

    <hgroup>

    <h1>Welcome my world!</h1>

    <h2>This is a title.</h2>

    </hgroup>
    HTML4: <div></div>

    12.<keygen>:

    定义一个表单内生成的键值。规定用于表单的密钥对生成器字段,当提交表单时,私钥存储在本地,公钥发送到服务器。

    HTML5:

    <form action=”demo_keygen.asp” method=”get”>

    Username: <input type=”text” name=”usr_name” />

    Encryption: <keygen name=”security” />

    <input type=”submit” />

    </form>
    HTML4: none

    浏览器支持:

    Firefox,Chorme,Safari,Opera。

    13.<mark>:

    定义有标记的文本,突出您要显示的文本。

    HTML5:

    <p>I like <mark>apple</mark> most.</p>

    HTML4: <span></span>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    14.<meter>:

    定义度量衡。仅用于已知最大和最小值的度量。(必须定义度量的范围,既可以在元素的文本中,也可以在min/max属性中定义

    HTML5:

    <meter min=”0″ max=”10″>2</meter>

    <meter>2 out of 5</meter>

    <meter>10%</meter>

    HTML4: none

    浏览器支持:

    Firefox,Chorme,Safari,Opera。

    15.<nav>:

    定义导航链接。(如果文档中有“前后”按钮,应把他放到<nav>元素中

    HTML5:

    <nav>

    <a href=”index.asp”>Home</a>

    <a href=”Previous.asp”>Previous</a>

    <a href=”Next.asp”>Next</a>

    </nav>

    HTML4:<ul></ul>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    16.<output>:

    定义不同类型的输出,比如脚本的输出。

    HTML5: <output></output>
    HTML4: <span></span>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    17.<progress>:

    定义任务(如下载)的过程,可以用来显示JavaScript中耗费时间的函数的进度。

    HTML5:

    <progress>

    <span id=”progress”>15</span>%

    </progress>
    HTML4: none

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    18.<section>:

    定义文档中的节(section、区段)。比如章节,页眉,页脚或文档中的其他部分。

    HTML5: <section></section>
    HTML4: <div></div>

    19.<source>:

    为媒介元素(比如<vodeo>和<audio>)定义媒介资源。

    HTML5: <source>
    HTML4: <param>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    20.<time>:

    定义一个日期/时间,该元素能够以机器可读的方式对日期或时间进行编码,例如,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

    HTML5:

    <p>大家都是早上 <time>9:00</time> 上班。</p>

    <p><time datetime=”2012-01-01″>元旦</time>晚会。</p>

    HTML4: <span></span>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

    21.<video>:

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

    HTML5:

    <video src=”movie.ogg” controls=”controls”>

    您的浏览器不支持 video 标签。(注:可以在开始标签和结束标签之间加上此文本内容,这样若浏览器不支持此元素,就可以显示出这个信息。

    </video>

    HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

    浏览器支持:

    IE9+,Firefox,Chorme,Safari,Opera。

  • 相关阅读:
    小程序,计算一个字符串中每个字符出现的次数
    打印好看的整齐的清单
    输入符号,宽,高,打印此符号组成的矩形
    输入名字显示其生日,没有则让输入生日,做记录
    51ll网产品信息保存为txt文件
    .py文件 改成默认用idle打开
    协程原理代码演示
    python: ImportError: cannot import name 'Style' from 'openpyxl.styles' 解决方法
    python编程快速上手第7章习题20
    HDU 1010 Tempter of the Bone
  • 原文地址:https://www.cnblogs.com/lykblog/p/4639546.html
Copyright © 2011-2022 走看看