黑马程序员技术交流社区

标题: 新出来的HTML5有哪些新特性呢？对浏览器有哪些要求呢？ [打印本页]
作者: 黄坚声    时间: 2012-5-11 16:49
标题: 新出来的HTML5有哪些新特性呢？对浏览器有哪些要求呢？
新出来的HTML5有哪些新特性呢？对浏览器有哪些要求呢？
作者: 贠(yun)靖    时间: 2012-5-11 17:04
额  这问题直接百度 绝对比这问好 亲~~~
作者: 荣天    时间: 2012-5-11 17:07
Html5中的一些新特性：
.用于绘画的canvas元素。
.用于媒介回放的video和audio元素。
.对本地离线存储的更好的支持。
.新的特殊内容元素,比如article，footer，header，nav，section。
.新的表单控件，比如calender，date，time，email，url，search。



<details> 标签用于描述文档或文档某个部分的细节。
提示：与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
例子：
<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

</body>
</html>


fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
例子：
<html>

<body>

<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>



<figure> 标签用于对元素进行组合。
<figcaption> 标签定义 figure 元素的标题。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
例子：

<!DOCTYPE HTML>
<html>
<body>

<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

</body>
</html>


<footer> 标签定义 section 或 document 的页脚。
在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
例子：<footer>This document was written in 2010</footer>
<header> 标签定义文档的页眉（介绍信息）。
例子：<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

<p>The rest of my home page...</p>
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，私钥存储在本地，公钥发送到服务器。
例子：<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>


<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，私钥存储在本地，公钥发送到服务器。
例子：
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
用户名：<input type="text" name="usr_name" />
加密：<keygen name="security" />
<input type="submit" />
</form>

</body>
</html>

<label> 标签为 input 元素定义标签（label）。
label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。
<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。
例子：<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
<nav> 标签定义导航链接的部分。
例子：<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
noscript 元素用来定义在脚本未被执行时的替代内容（文本）。
此标签用于可识别 <script> 标签但无法支持其中脚本的浏览器。
提示和注释
注释：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。
注释：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！

<output> 标签定义不同类型的输出，比如脚本的输出。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function write_sum()
{
x=5
y=3
document.forms["sumform"]["sum"].value=x+y
}
</script>
</head>

<body onload="write_sum()">

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

</body>
</html>
<progress> 标签定义运行中的进度（进程）。
可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。
例子：
标记“下载进度”：
<!DOCTYPE HTML>
<html>
<body>

The object's downloading progress:
<progress>
<span id="objprogress">76</span>%
</progress>

</body>
</html>

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>
<video> 标签定义视频，比如电影片段或其他视频流。
<!DOCTYPE HTML>
<html>
<body>

<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>

</body>
</html>

<time> 标签定义日期或时间，或者两者。

<!DOCTYPE HTML>
<html>
<body>

<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>

<p>
我在 <time datetime="2010-02-14">情人节</time> 有个约会。
</p>

</body>
</html>
作者: 荣天    时间: 2012-5-11 17:08
我是从文库帮你搜的   希望对你有帮助{:soso_e100:}
作者: 小小企鹅    时间: 2012-5-11 17:20
HTML5是关于图像，位置，存储，速度的优化和改进



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2