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

我们来一起看看新的HTML5有什么新的特性和使用技巧吧。如果你对HTML5还不是很了解，那么下面这些内容可以帮你快速进阶。 1、新的doctype还在用下面这个长的根本没法记住的doctype吗？ ?!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 如果是，那么赶紧使用新的吧。 ?!DOCTYPE html 事实上，HTML5根本不需要这个东西，这是用来给浏览器兼容用的，如果浏览器不认识一个doctype，那么他会使用标准模式来解析。所以，没什么好担心的，尽管用吧。 2、Figure元素看看下面的这个图片的说明部分吧：?img src=path/to/image alt=About image /pImage of Mars. /p 想把图片和相应的说明文字写在一起还真不是个容易的事情，在HTML5里面这就好办了： ?figure?img src=path/to/image alt=About image /?figcaption??pThis 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=enhead?meta charset=utf-8?titleuntitled/title/headbody?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=enhead?meta charset=utf-8?titleuntitled/title/headbody?form action= method=get??label for=emailEmail:/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、语义化的h