必须知道的学习html5的技巧

1.新的文档类型(Doctype)

<!DOCTYPE html>,只要简单的15个字符就可以了,再也不用像以前那样写一长串文档类型的代码了。

 

2.重新定义<small>

<small>元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注(如,网站底部的版权声明)。

 

3.不再需要脚本,链接类型,即去掉了type属性

<link rel="stylesheet" href="path/to/stylesheet.css" />    

<script src="path/to/script.js"></script> 

 

4.使用还是不使用引号

HTML5与XHTML不同,如果你不喜欢的话你不必用引号将属性包裹起来。不过,要是你觉得用引号会让你觉得更加舒服的话,当然也不会有任何问题。

 

5.使你的内容可编辑

HTML5其中一个非常强大的功能就是“contenteditable”,顾名思义它将允许用户编辑元素(包括他的子元素)内包含的任何文本内容。它的用途非常广,如,简单的任务清单或是基于wiki的站点也非常实用,此外,它还有一个优势就是利用了本地的存储。

<ul contenteditable="true"></ul>,则ul列表中的所有项都是可编辑的。

 

6.form表单的验证功能

虽然说内置的表单验证很快就会到来,但是我们也不能完全依靠这个。而且chrome浏览器对form验证的支持也不是很好。尽管他们有技术实现,但还是不提供支持,从这个层面上也给出了暗示,不要太依赖内置的表单验证。

 

7.占位符

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />,虽然样式没有js特效实现的好看,但是未来的发展一定能弥补这点点小缺陷。

 

8.本地存储

多亏了HTML5的 local storage ,我们可以让高级浏览器“记住”我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持,但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。

 

9.IE和HTML5

IE不知道header, footer, article, section, nav, menu, hgroup......这些元素究竟是什么,因而会无视这些格式,还需要用到下面的代码来解决这个问题:

document.createElement("article");

document.createElement("footer");

document.createElement("header");

document.createElement("hgroup");

document.createElement("nav");

document.createElement("menu");

不过,这些事情可以用一个简单的js引入就可以解决,http://html5shiv.googlecode.com/svn/trunk/html5.js,把这个js放在head中,

<!--[if IE]>

<script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->  

这样就可以只让IE识别,发送请求了。

 

10.必要(required)属性

<input type="text" name="someInput" required="required">,如果输入框是空的,表单提交将无法提交,突出显示文本框,前提是,浏览器支持的话。

 

11.自动对焦(Autofocus)属性

<input type="text" name="someInput"  autofocus="autofocus">,如果某个输入应该被”选择“或被聚焦,我们现在可以使用HTML的自动对焦autofocus属性。

 

12.视频,音频

现在各浏览器对其支持并不是很好或统一,期待其发展

 

13.何时使用<div>

是否还需要使用<div>标签呢?当然需要。例如,如果你想在一个元素里将一段代码包裹住,特别是为了内容的定位,<div> 将会是非常理想的选择。不过,如果不是上述情况而是要包裹博客文章、或者页脚的链接列表,建议你分别使用 <article>和<nav>元素。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值