7.4 如何书写HTML5

HTML5是能够兼容以前常用的div等早期版本的标签的，所以HTML5的书写没有特别的不同，相对而言还简化了不少东西，只是它支持以前版本没有的标签。

7.4.1 HTML5和XHTML的对比

1．文档声明简化

XHTML中这样写：

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

HTML5中这样写：

        <! DOCTYPE html>
2．html标签上不需要声明命名空间

XHTML中这样写：

        <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

HTML5中这样写：

        <html   lang="zh-CN">
3．字符集编码声明简化

XHTML中这样写：

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTML5中这样写：

        <meta charset="UTF-8" />
4．style和script标签type属性简化

XHTML中这样写：

        <script type="text/javascript"></script>
        <style type="text/css"></style>

HTML5中这样写：

        <script></script>
        <style></style>
5．link标签连接ICON图片时可指定尺寸

XHTML中这样写：

        <link rel="shortcut icon" href="http://z3f.me/favicon.ico" type="image/
        x-icon" />

HTML5中这样写：

        <link rel="icon" href="http://z3f.me/favicon.gif" type="image/gif"
        sizes="16x16" />

除此之外，HTML5没有像XHTML那样严格要求标签闭合问题。对XHTML不建议使用的b和i等标签进行重定义，使其拥有语义特征。


● b元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的主要性的一段文本。

● i元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本。

● u元素现在描述为在普通文章中仅从文体上突出有语法问题或是中文专用名称的一段文本。

7.4.2 HTML5书写的误区

不要使用<section>作为<div>的替代。简单来说，<section>是内容容器，<div>是样式容器。需要布局或提供内容额外样式的话，还是要用<div>。

<header>滥用时，一个网页中可出现多个<header>标签。语义类标签都是内容容器，而非样式容器。很多网页把<header>拿来做布局使用，虽然语法可以接受，但是和设计初衷不符。

不是所有页面上的链接都需要放在<nav>标签中，这个标签本意是用作主要的导航区块。一个网页会有很多链接，不是都需要放在<nav>标签里。

<figure>标签不仅用于图片的图解、说明、补充，也用于其他具有文档类型的文件。

由于HTML5标准非常庞大，这里只是简单地抛砖引玉，需要读者根据实际项目需求去抉择。

上一章目录下一章