初学者必知的HTML 5入门级技巧

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

1. 新的Doctype声明

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

nbsp; “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HTML 5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

HTML 5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML 5 Doctype，事实上，IE是只要doctype符合这种格式，都会进入标准模式。

立即学习“前端免费学习笔记（深入）”；

2.

看看下面一段简单的代码：

遗憾的是，这里的h6标签和img标签好像没有什么关系，语义不够明确。HTML 5意识到了这一点，于是就采用了

标签。当

结合

 

3. 重新定义

不久前，我使用了标签来创建与logo相关的副标题。但是在HTML 5中重新定义了标签，使之更能表现语义化，在的字号都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

4. 去掉了Javascript和CSS标签的type属性

通常你会在和加上type属性：

在HTML 5中，不再需要type属性了，因为这显得有点多余，去掉之后可以让代码更为简洁。

5. 是否使用双引号

这有点让人纠结，HTML 5并不是XTHML，你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号，因为这让代码看起来会更标准。不过，这可以根据你的个人喜好来确定是到底要不要双引号。

start the reactor.

 6. 使网页内容可以编辑

7. 电子邮件输入框

HMTL 5中新增了一个输入框的电子邮件属性，可以检测输入的内容是否符合电子邮件的书写格式，功能越来越强大了吧，在HTML 5之前只能依靠JavaScript来检测。虽然内置的表单验证功能很快就会成为现实，但这个属性很多浏览器都还不支持，只会当作普通的文本输入框来处理。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

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

登录后复制

<div id=header>
     ...  
</div> 
<div id=footer> 
     ...  
</div>
通常我们都会给header和footer定义一个div，然后再添加一个id，但是在HTML5中可以直接使用
和>footer>标签，所以可以将上面的代码改写成：

登录后复制

<header>
    ...  
</header>
<footer> 
    ...  
</footer>
要注意不要将这两个标签和网站的头部和页脚混淆起来，它们只是代表它们的容器。

登录后复制

header, footer, article, section, nav, menu, hgroup {  
   display: block;  
} 

登录后复制

document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu"); 

登录后复制

<script mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"&&/script>

登录后复制