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


我们来一起看看新的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);
 
})();



相关阅读:
PHP 程序员应该使用的10个组件
身份验证方面的函数
JavaScript类和继承 this属性使用说明
JavaScript arguments 多参传值函数
重定向实现代码
兼容firefox的给每一个onClick再附加一个事件
Atlas学习手记(19):客户端简单控件介绍
PHP Header用于页面跳转要注意的几个问题总结
linux at命令和batch从输入或指定文件读取命令
1.PHP简介
ecshop 后台登陆自动退出的一种可能情况(目录大小写问题)
freebsd6.2 nginx+php+mysql+zend系统优化防止ddos攻击
VBS通过WMI获取CPU使用率的代码
JavaScript Event事件学习第一章 Event介绍
快速导航

Copyright © 2016 phpStudy |