|
我们来一起看看新的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);
})();
(责任编辑：admin) |
