background image

HTML5 网页制作的实例解析

互联网科技发展的速度真可谓惊人的快,一个稍不留神,你就可能无法跟上它的步伐 。

HTML5 的变化和更新也压倒不少人,这篇文章将向大家介绍一些最基本也非常必要的
HTML 技巧。

1. 新的文档类型(Doctype

1

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

2

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

你还在使用上面这个既麻烦又难记的

XHTML 文档类型吗? 如果还是这样的话,现在该切

换到新的

HTML5 文档类型了。

3

<!DOCTYPE html>

只要这么简单的

15 个字符就可以了。(注意:你的 doctype 的申明需要出现在你 html 文件

的第一行。)
2. 图形(Figure)元素
考虑用下面的代码来标记图片?

4

<mg src=”path/to/image” alt=”About image” />

5

<p>Image of Mars. </p>

很不幸,它不能用简单、富有语义关联的方式与图形的标题关联,因为它仅仅是用段落标记
以 及 图 片 元 素 包 裹 着 , 而

  HTML5 通 过 引 进 <figure> 元 素 , 改 进 了 这 一 点 。 当 结 合

 

<figcaption> 元素使用时,我们就可以将图形标题与图形配对起来。代码如下:

6

<figure>

7

<img src=”path/to/image” alt=”About image” />

8

<figcaption>

9

<p>This is an image of something interesting. </p>

10

</figcaption>

11

</figure>

3. 重新定义<small>
原来你可以利用

<small>元素来创建与 logo 密切相关的副标题。不过,现在 HTML5 修改了

这个用法,

<small>元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注

(如,网站底部的版权声明)。
4. 不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。

12

<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />

13

<script type=”text/javascript” src=”path/to/script.js”></script>

HTML5 中,这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此,我

们可以将它们的类型属性都删除掉。代码如下:

14

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

15

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

5. 使用还是不使用引号

找互联网资料,就到一览互联网文库

http://wk.yl1001.com/hlw/