网络编程
位置:首页>> 网络编程>> 网页设计>> 22个HTML5的初级技巧

22个HTML5的初级技巧

作者:雨夜带刀 来源:雨夜带刀's Blog 发布时间:2010-12-17 12:39:00 

标签:html5,技巧,web

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

1. 新的Doctype声明

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

<!DOCTYPE html>

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

2. <figure>标签

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

<img alt="About image" src="path/to/image">
<h6>image of Mars.</h6>

遗憾的是,这里的h6标签和img标签好像没有什么关系,语义不够明确。HTML5意识到了这一点,于是就采用了<figure>标签。当<figure>结合<figcaption>标签的使用,可以让h6标签和img标签组合起来,代码就更具语义化了。

<figure>
<img alt="about image" src="path/to/image">
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>

 

3. 重新定义<small>

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

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

通常你会在<link>和<script>加上type属性:

<link rel="stylesheet" type=text/css href="path/to/stylesheet.css">
 <script type="text/javascript" src="path/to/script.js"></script>

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

<link href="path/to/stylesheet.css">
 <script src="path/to/script.js"></script>

0
投稿

猜你喜欢

  • 有多少次你在考虑怎样设置数据库时感到为难?其实,如果你在Linux上使用MySQL,就不会有这种情况了。在Linux上使用Webmin图形界
  • 其实在很久很久之前就发现search类型的input,该属性值是WebKit私有,不过一直没去查相关的属性,介于XXX原因,我找出其属性,回
  • Oracle 数据库启动Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为: conn
  • 死锁是指在某组资源中,两个或两个以上的线程在执行过程中,在争夺某一资源时而造成互相等待的现象,若无外力的作用下,它们都将无法推进下去,死时就
  • 导言(Introduction)这个提案描述了如何在jQuery的核心库中增加模板支持。更为特别是,这个提案描述了一个新的jQuery方法-
  • 富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 H
  •     网页过渡是指当浏览者进入或离开网页时,页面呈现的不同的刷新效果,比如卷动、百叶窗等。这样你的网页看起来
  • 代码如下:<% class MyClass Dim var '公共变量必须使
  • DW2004的中文乱码情况你遇到过么?乱码一般是怎么出现的呢?也许很多时候用其他软件(比如Editplus)写程序的时候,忘了meta标签里
  • 又从 James Padolsey 这里得到个好的点子。在实际写脚本过程中可能有段 Javascript 和 HTML 非常相关(比如实例化
  • 我们知道,全局临时表的生命周期一直持续到创建会话(不是创建级别)才终止。有时候,你可能想创建一个不属于任何会话的全局临时表。而无论你进行什么
  • 将数据库中的信息存储至XML文件中:save.asp<!-- #include file="adovbs
  • 由于一些读者对于960 Grid System CSS Framework的原理和使用方法比较感兴趣,暴风彬彬今天将和大家一同分享这篇关于9
  • default-character-set=gbk #或gb2312,big5,utf8 然后重新启动mysql 运行->servic
  • SQL Server 2005的新功能为动态管理对象,它们是在指定时间返回某个数据库实例的特殊状态信息的数据库视图或函数。这些对象允许数据库
  • CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css ha
  • 方法一、尽量使用复杂的SQL来代替简单的一堆 SQL.同样的事务,一个复杂的SQL完成的效率高于一堆简单SQL完成的效率。有多个查询时,要善
  • MySQL的命令行提示符及其表达的意思mysql> 准备好接受新命令。     &n
  • 总的来说视觉设计是一个很大的范畴,囊括了我们身边很多产品的再创作设计,比如工业产品设计,广告设计,新媒体设计,服饰设计,还有我们这里要讨论的
  • 写程序的人在编写由asp页面生成静态页面html的时候,如果同时生成大量页面,一定遇到过浏览器下方的进度条上显示着3%,6%,10%等缓慢增
手机版 网络编程 asp之家 www.aspxhome.com