一个典型的HTML5页面

kevin-ying · 发表于 2015-10-5 03:12:29

为了让读者更好地对HTML5的网页有一个简单的理解与认识，也为了让读者能够顺利读懂HTML5网页代码的准确意思，我们在代码清单1-1的页面结构代码的每行代码结束后都加了注释。（如果在阅读过程中有不解的地方，也不要紧，这只是让读者对HTML5的页面结构有一个基本的了解。）

代码清单1-1

[HTML] 纯文本查看 复制代码

<!DOCTYPE html> 
<!-- 声明文档结构类型 --> 
<html lang=zh-cn> 
<!-- 声明文档文字区域--> 
<head> 
<!-- 文档的头部区域 --> 
<meta charset=utf-8> 
<!-- 文档的头部区域中元数据区的字符集定义，这里是utf-8，表示国际通用的字符集编码格式 --> 
<!--[if IE]><![endif]--> 
<!-- 文档的头部区域的兼容性写法 --> 
<title>一个不带CSS样式的HTML5布局</title> 
<!-- 文档的头部区域的标题。这里要注意，这个title的内容对于SEO来说极其重要--> 
<!--[if IE 9]><meta name=ie content=9><![endif]--> 
<!-- 文档的头部区域的兼容性写法 --> 
<!--[if IE 8]><meta name=ie content=8 ><![endif]--> 
<!-- 文档的头部区域的兼容性写法 --> 
<meta name=description content=一个不带CSS样式的HTML5布局> 
<!-- 文档的头部区域元数据区关于文档描述的定义 --> 
<meta name=author content=秀野堂主> 
<!-- 文档的头部区域元数据区关于开发人员姓名的定义 --> 
<meta name=copyright content=HTML5研究小组> 
<!-- 文档的头部区域元数据区关于版权的定义 --> 
<link rel=shortcut icon href=favicon.ico> 
<!-- 文档的头部区域的兼容性写法 --> 
<link rel=apple-touch-icon href=custom_icon.png> 
<!-- 文档的头部区域的apple设备的图标的引用 --> 
<meta name=viewport content=width=device-width, user-scalable=no > 
<!-- 文档的头部区域对于不同接口设备的特殊声明。宽=设备宽，用户不能自行缩放 --> 
<link rel=stylesheet href=main.css> 
<!-- 文档的头部区域的样式文件引用 --> 
<!--[if IE]><link rel=stylesheet href=win-ie-all.css><![endif]--> 
<!-- 文档的头部区域的兼容性样式文件引用写法 --> 
<!--[if IE 7]><link rel=stylesheet type=text/css href=win-ie7.css><![endif]--> 
<!-- 文档的头部区域的IE7浏览器的兼容性写法 --> 
<!--[if lt IE 8]><script src=http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.   js></script><![endif]--> 
<!-- 文档的头部区域的关于让IE8也兼容HTML5的JavaScript脚本（本书作者希望读者可以少考虑兼容性，  
     多做技术研究） --> 
<script src=script.js></script> 
<!-- 文档的头部区域的JavaScript脚本文件调用 --> 
</head> 
<body> 
    <header>HTML5文档的头部区域</header> 
    <nav>HTML5文档的导航区域</nav> 
    <section>HTML5文档的主要内容区域  
        <aside> 
            HTML5文档的主要内容区域的侧边导航或菜单区  
        </aside> 
        <article> 
            HTML5文档的主要内容区域的内容区  
            <section>以下是一个section和article的嵌套，循环表现章节与内容之间的父子关系，包                 含关系。  
                <aside> 
                </aside> 
                <article> 
                    <header>HTML5文档的嵌套区域，可以对某个article区域进行头部和脚部的定义。                      这样做，可以有非常清晰和严谨的文档目录结构关系。  
                    <footer> 
                </article> 
            </section> 
        </article> 
    </section> 
    <footer>HTML5文档的脚部区域</footer> 
</body> 
</HTML>

在浏览器中执行上述代码后，效果如图1-1所示。

[url=http://images.51cto.com/files/uploadimg/20120424/132715132.jpg][/url]

（点击查看大图）图　1-1

注意由于是HTML5代码，请注意使用支持HTML5的浏览器，本例使用Chrome浏览器调试。关于HTML5开发环境和调试环境的具体内容，可参见1.6节。

		自动登录	找回密码
密码			免费注册

[Html5] 一个典型的HTML5页面

本帖子中包含更多资源

相关帖子