10个你需要立即知道的html5新特性_简述一下你所知道的html5新特性-CSDN博客

本文链接：https://blog.csdn.net/sunxing007/article/details/6623841

本文总结了HTML5中的10个关键特性及应用示例，包括DOCTYPE的简化、正则表达式用于表单验证、元素内容可编辑、email输入框、占位符、本地存储、语义化头部和底部、required和autofocus属性，以及音频/视频标签的使用。

摘要由CSDN通过智能技术生成

原文在这里，http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/我从中抽出10个认为有说头的陈述给大家。不算翻译，不算原创，就算读书笔记吧。

1 新的DOCTYPE
不再需要：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

取而代之的是：

<!DOCTYPE html>

别看这一点改动，想想整个互联网，该节省了不少带宽. 环保啊。

2 正则表达式

你是否曾经也像这样写过表单验证代码？现在html5就支持。

<form action="" method="post">
	<label for="username">Create a Username: </label>
   	<input type="text"
	   name="username"
	   id="username"
	   placeholder="4 <> 10"
	   pattern="[A-Za-z]{4,10}"
	   autofocus
	   required>
	<button type="submit">Go </button>
</form>

当我点Go的时候，Chrome会提示输入错误信息.

但是ie9似乎不感冒。

3 元素内容可编辑

<!DOCTYPE html>  
 <html lang="en">  
<head>  
    <meta charset="utf-8">  
    <title>untitled</title>  
</head>  
<body>  
    <h2> To-Do List </h2>  
     <ul contenteditable="true">  
        <li> Break mechanical cab driver. </li>  
        <li> Drive to abandoned factory  
        <li> Watch video of self </li>  
     </ul>  
</body>  
</html>

4 email 类型的输入框

   <!DOCTYPE html>  
      
    <html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <title>untitled</title>  
    </head>  
    <body>  
        <form action="" method="get">  
            <label for="email">Email:</label>  
            <input id="email" name="email" type="email" />  
      
            <button type="submit"> Submit Form </button>  
        </form>  
    </body>  
    </html>

如果您输入的不是email, 则submit的时候会提示错误。
5 输入框占位符

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

则该输入框初始化的时候会显示一个默认值doug@givethesepeopleair.com, 当onfocus的时候会消失. 节省了js。

6 本地存储
功能上类似cookie, 但是容量大了很多. 浏览器支持的情况也还乐观. 不过下面的代码在用ie8/ie9/ff3.5+测试的时候需要把它上传到server上方可成功（同时别忘了jquery）, 这个应该是基于安全上的考虑.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

</style>
<script src="jquery-1.6.1.js"></script>

</head>
<body>

 <ul id="edit" contenteditable="true">
   <li>试着编辑以下这里吧.</li>
 </ul>

</body>
<script>
  $(document).ready(function(){
   $('#edit').blur(function(){
    localStorage.setItem('todoData', this.innerHTML); 
   });
   if(localStorage.getItem('todoData')){
    $('#edit').html(localStorage.getItem('todoData'));
   }
  });

</script>
</html>

浏览器支持情况：

7 语义化的header, footer, section

HTML4的时候，我们通常会用这样的代码体现页面的模块化：

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div>

HTML5 提供了语义化的标签，还是拿上面的例子来完善一下。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
    section{
  border: solid red 1px;
  border-radius: 6px;
 }
</style>
<script src="jquery-1.6.2.min.js"></script>

</head>
<body>
 <header>
 <h1>This is the header</h1>
 </header>
 <section>
  <ul id="edit" contenteditable="true">
   <li>First line.</li>
   <li>Second line.</li>
   <li>Third line.</li>
  </ul>
 </section>
 <footer>
 <span>This is the footer. ©sunxing007 2011</span>
 </footer>
</body>
<script>
  $(document).ready(function(){
   $('#edit').blur(function(){
    localStorage.setItem('todoData', this.innerHTML); 
   });
   if(localStorage.getItem('todoData')){
    $('#edit').html(localStorage.getItem('todoData'));
   }
  });
</script>
</html>

但是，Ie8还不能识别header, section, footer等，但是这个问题可以通过下面的js代码轻松的fix掉。

document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu");

有了这段代码，ie8可以识别他们，但是他们被默认为inline元素，所以还需要一句css：

header, footer, article, section, nav, menu, hgroup {  
   display: block;  
}

8 required属性

它的意思不用多说。

<form method="post" action="">
	<label for="someInput"> Your Name: </label>
	<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
	<button type="submit">Go</button>
</form>

9 autofocus属性

以前需要用js来实现：element.focus(); 现在只需要给一个autofocus属性即可：

<form method="post" action="">
	<label for="someInput"> Your Name: </label>
	<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required autofocus>
	<button type="submit">Go</button>
</form>

10 Audio/Video标签

以前需要借助第三方插件如wmp，flash来播放音频视频，现在html5提供了audio/video标签：

<audio autoplay="autoplay" controls="controls">
	<source src="burning.mp3" />
</audio>

Chrome下截图：

Ie9下截图：

试图对他们应用一些样式，比如width, border, border-radius, display: none都是可以的，但是控件的样子在不同浏览器中差别太大。不过，audio/video提供了丰富的属性和控制接口，这为我们打造自己的播放器提供了足够的要素。相关资料可参考http://www.w3.org/TR/2008/WD-html5-20080610/video.html#audio，也可以自行baidu “html5 audio 属性方法事件”。

关于视频video的播放，我测试了如下的两个网上的视频, mp4可以在ie9下播放， ogg可以在ff下播放， chrome都可以播放。

<video controls="controls" preload>
	<source src="http://www.w3school.com.cn/i/movie.ogg" />
	<p> Your browser is old. <a href="http://www.w3school.com.cn/i/movie.ogg">Download this video instead.</a> </p>
</video>
<br /><br />
<video src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls="controls" />