开发人员必知的28个HTML5新特性及技巧

tsailer

浏览: 53072 次
性别:
来自: 深圳

最近访客更多访客>>

io_yichen

lake_guo

小小妖

悲伤向右

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5 浏览器 IE 正则表达式 CSS

我们来一起看看新的HTML5有什么新的特性和使用技巧吧。如果你对HTML5还不是很了解，那么下面这些内容可以帮你快速进阶。

1、新的doctype
还在用下面这个长的根本没法记住的doctype吗？

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

如果是，那么赶紧使用新的吧。

<!DOCTYPE html>

事实上，HTML5根本不需要这个东西，这是用来给浏览器兼容用的，如果浏览器不认识一个doctype，那么他会使用标准模式来解析。所以，没什么好担心的，尽管用吧。

2、Figure元素
看看下面的这个图片的说明部分吧：
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

想把图片和相应的说明文字写在一起还真不是个容易的事情，在HTML5里面这就好办了：

<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>

3、重定义了<small>
以前我还用这个标签来显示Logo下面的小字，这是个不错的表示标签，但是现在，这就是不推荐的做法了。这个标签被重定义了，用来表示用于打印的小字体了。

4、script和 link标签都不再有type属性了

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

以前的这种写法都不是必须的了，可以省去type属性。

5、要不要引号都无所谓了

<p class=myClass id=someId> Start the reactor.

HTML5不是XHTML，没有那么严格的要求，加不加引号看你自己了。

6、让你的内容成为可编辑的
新的浏览器的contenteditable属性非常不错，可以让你的元素成为可编辑的，这些可以用在一些 todo list之类的应用上，然后调用本地存储。使用这个属性的元素和他的子元素都会获得这个特性。

<!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>

7、Email输入框
我们可以给表单的输入框赋予email属性，这样浏览器就能以email的合法格式来检测输入框的内容了。我们现在还不能100%的依附这个，因为一些旧的浏览器不支持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>

8、输入框的默认提示文字
以前，我们要给输入框写上提示文字，就得用js来控制，而HTML5现在支持这个特性了，只要这样写就可以了：

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

当然，现在还不是所有的浏览器都支持这个属性，比如Firefox和Opera就不行，但是这也不影响什么。

9、本地存储
使用本地存储，我们就可以让浏览器记住我们的输入，就算是刷新或者关掉浏览器再打开也无妨。

当然，并不是所有浏览器都支持这个特性，支持的有IE8,Safari,Firefox3.5+，对于那些老版的浏览器，应该使用window.localStorage检验一下是否支持。

10、语义化的header和footer
以前我们这样写：

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

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

使用了HTML5之后，就可以这样写了：

<header>
...
</header>

<footer>
...
</footer>

11、更多HTML5的表单特性
12、IE与HTML5
不幸的是，IE需要一些额外的配置来支持HTML5的元素。
在IE 中，所有的元素都有一个默认的display:inline;
为了正确渲染HTML5中的块级元素，我们需要这样写：

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

但是IE会忽略这些样式，因为他根本就不知道header是什么，还好，还有解决办法：

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

很奇怪，这些代码在IE中就能起作用。

13、hgroup
想象这样的场景，在我博客的头部，我需要一个大标题，然后紧接着一个副标题，在HTML4中我虽然可以使用H1，H2来分表表示，但是还是不够语义化，HTML5中可以这样：

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

14、required属性
Form添加了required属性，用来标记那些必填项。有两种写法。

<input type="text" name="someInput" required>

或者

<input type="text" name="someInput" required="required">

15、autofocus属性
如果我们需要输入框被选中，那么我们可以使用autofocus属性：

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

16、支持音频
HTML5中我们不再需要而外的插件来播放音频了。 HTML5现在支持了audio标签，我们也不必在乎那些插件了。不过现在只有少部分的浏览器支持这个特性，还是需要做一些向下兼容的处理的：

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>

Mozilla和Webkit还是有些合不来的，所以需要至少写两种格式的，safari的话他先读取到了ogg格式，那么他就会使用ogg格式，IE现在支持wav格式的。

17、支持视频
与对音频的支持类似，HTML5也支持视频：

<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

1 我们并不强迫写type属性，浏览器会自己解析。
2 不是所有浏览器都能支持HTML5视频，所以还需要一个下载链接或者Flash视频。
3 controls和preload属性我们后面介绍

18、预加载视频
preload属性正如你所想。但是，你的相好是不是要先加载视频，如果你的页面主要就是为了显示这个视频，那么绝对要先加载，增强用户体验。他的用法也很简单，你前面也看到了。

19、显示控制条
如果不加controls属性，那么这个视频就只是画面部分，没有控制条，加上之后就会出现。

20、正则表达式
你有没有计算过你多久就要针对一个input写一些特别的验证，使用新的正则属性，我们就可以很方便的添加正则验证。

<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>

如果你熟悉正则表达式，那么应该很容易就可以看到上面的正则是为了校验4-10个大写或小写字母。

21、支持属性的能力检测
如果我们不知道浏览器是不是支持这些特性，那这些特性有什么好处呢？这个问题问得好，有很多种办法，我们这里讨论两种。第一，我们可以使用优秀的Modernizr库。或者，我们可以创建一些元素然后来检测，比如：

alert( 'pattern' in document.createElement('input') ) // boolean;

jQuery也使用了类似的方法：

<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>

22、Mark元素
可以将他想象为一个高亮器，与用户的行为相关。例如，我搜索了open your mind，然后我就可以用js将包含这个字符串的元素用mark包起来。

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23、什么时候使用<div>
我们现在有了footer,header,section，那么什么时候使用div呢，应该在没有更好的元素可以用的情况下使用。
比如，你发现你需要将一段代码放在一起，然后固定在页面的某个位置，那么这个时候div就很管用。如果你打算将你的新博文包起来或者给footer加一些链接，那么这个时候<article>和<nav>更加语义化一些。

24、现在有什么马上能用的么
说起HTML5这些特性，有些人可能觉得这得2022年才能普及吧，那现在搞有啥意义呢？其实这是不对的，有些东西我们现在就能用，保持代码的赶紧整洁，还是很必要的。

25、什么不是HTML5
理解倒是什么是HTML5对于开发人员还是比较重要的，要么很多时候会尴尬的。
1 SVG：不是HTML5，它至少5岁了。
2 CSS3：它不是HTML5，它是css。
3 地理位置(Geolocation)：不是HTML5.
4 本地存储：不是HTML5，曾经是一个特性，但是被移除了。
5 Sockets：不是HTML5，有它自己的规范。
虽然这些也都是很新鲜的技术，但是他们真的不是HTML5。事实上，这些规范也是相同的一些人在制定。

26、其他属性
现在我们也有了可以定制私有属性的规范了：
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

获取属性值：

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Val

在css中也可以使用：

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

h1 { position: relative; }
h1:hover { color: transparent; }

h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;

}
</style>
</head>
<body>

<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1>

</body>
</html>

这里可以查看示例。

27、output元素
正如你所想的，output元素就是用来展示一些计算值的。比如你计算当前鼠标的位置，或者一些数字的和，下面我们就来看看计算两个数字和的例子：

<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="submit"> Calculate </button>
</form>

<script>
(function() {
var f = document.forms[0];

if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
   f['sum'].value = 15;
   e.preventDefault();
}, false);
}
else { alert('Your browser is not ready yet.'); }
})();
</script>

对这个元素的支持还是有点挫的，上面这段代码下，如果浏览器不支持output属性，那么就会弹出一个对话框告知计算结果。

28、使用Range input创建一个幻灯片
现在只有Opera完全支持range input的max，min，step和value属性，为了快速说明，我们来看一个例子。

HTML部分：

<form method="post">
<h1> Total Recall Awesomness Gauge </h1>
<input type="range" name="range" min="0" max="10" step="1" value="">
<output name="result"> </output>
</form>

CSS部分：

body {
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
text-align: center;
}
input { font-size: 14px; font-weight: bold; }

input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}

output {
display: block;
font-size: 5.5em;
font-weight: bold;
}JS部分：

(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;

// Determine if browser is one of the cool kids that
// recognizes the range input.
var o = document.createElement('input');
o.type = 'range';
if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');

// Set initial values of the input and ouput elements to
// either what's stored locally, or the number 5.
range.value = cachedRangeValue;
result.value = cachedRangeValue;

// When the user makes a selection, update local storage.
range.addEventListener("mouseup", function() {
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
}, false);

// Display chosen value when sliding.
range.addEventListener("change", function() {
result.value = range.value;
}, false);

})();

转自
http://www.jzxue.com/wangyesheji/html/201104/15-7119.html

分享到：

css3 new speciality wait for updating | the difference between display visibilit ...

2011-06-10 09:40
浏览 961
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论