你的位置:首页 > 软件开发 > 网页设计 > 22个HTML5的初级技巧 Web技术

22个HTML5的初级技巧 Web技术

发布时间:2016-07-07 10:00:11
Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype ...

22个HTML5的初级技巧 Web技术

Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

1. 新的Doctype声明

XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

这是HTML5新增的一个功能,在标签中加上一个contenteditable属性,并且设置值为true,就可以直接在页面上编辑这个标签的内容,包括这个标签的子级标签的内容。有了这个属性,你可以利用这个属性完成很多事,比如在网页中编辑一个待办事项的清单。

1<h6 contenteditable="true">Break mechanical cab <span>driver</span></h6>

到目前为止,包括现代浏览器在内都不支持该属性,所以这个属性暂时还是靠不住的。

8. 占位符

文本框中的占位符(看看本博的搜索框效果)有利于提升用户体验,之前,我们只能依靠JS来实现占位符的效果,在HTML5中新增了占位符属性placeholder。

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

9. 本地存储

HTML5的本地存储功能,可以让现代浏览器“记住”我们输入的,就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持,但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的,你可以测试下。

22个HTML5的初级技巧 Web技术

如果输入框为空,表单将无法提交成功。

14. 自动获取焦点

同样的,HTML5也不再需要Javascript来解决输入框的自动获取焦点,如果某个输入框应当被选择或是获取到输入焦点,HTML5新增了自动获取焦点属性autofocus:

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

原标题:22个HTML5的初级技巧 Web技术

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。