认识HTML5文档结构
在没有接触HTML5文档之前,相信很多人对XHETML文档结构比较熟悉,由于XHTML文档是HTML向XML规范过渡版本,其文档格式也基本按XML规范进行要求
1. 必须为文档定义命名空间,其值为http://www.w3.org/1999/xhtml
2. MIME type不能是text/html,而是text/xml、application/xml或者application/xml+html
3. 必须有根元素,根元素为<html>,即<html>的开始和结束标签不能省略
4. 所有元素只要有了开始标签,就不能有结束标签,或者自闭合
5. 所有元素都得严格遵守大小写,元素名称必须为小写
因此XHTML文档格式变得严格了许多,也因为XML,其可读性和规范性提高了不少。但最终,我们要在HTML的宽容性和xml的规范性之间找到最佳的平衡点,一味追求极端始终是一个错误
但是当问到一个HTML5文档必须有哪些内容时,恐怕很少有人能正确的做出回答,为了帮助读者更好地对HTML5页面有一个简单的理解和认识,也为了读者能够顺利读懂HTML5网页代码的准确意思,下面给出了一个详细的、符合标准的HTML5文档结构代码,并进行详细注释
<!--声明文档结构类型-->
<html lang=zh-cn>
<!--声明文档文字区域-->
<head>
<!--文档头部区域-->
<meta charset=utf-8>
<!-- 文档的头部区域中元数据区的字符集定义,utf-8表示国际通用的字符集编码格式-->
<!--[if IE]><![endif]-->
<!--文档的头部区域兼容性写法-->
<title>文档标题</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=文档描述信息>
<!--文档的头部区域元素据区关于文档描述的定义-->
<meta name=author content=文档作者>
<!--文档头部区域元素据区关于开发人员姓名的定义-->
<meta name=copyright content=版本信息>
<!--文档头部区域元素据区关于版权的定义-->
<link rel=shortcut icon herf=favicon.ico>
<!--文档头部区域的兼容性写法-->
<link rel=apple-touch-icon herf=custom_icon.png>
<!--文档头部区域app设备的图标的引用-->
<meta name=viewport content=width=device-width,user-scalable=no>
<!--文档的头部区域对于不同接口设备的特殊声明。宽=设备款,用户不能自行缩放-->
<link rel=stylesheet herf=main.css>
<!--文档头部区域样式文件的引用-->
<!--[if IE]><link rel=stylesheet herf=win-ie-all.css><![endif]-->
<!--文档头部区域的兼容性样式文件引用写法-->
<!--[if IE 7]><link rel=stylesheet type=text/css herf=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>
当然,并不是每个HTML5文档都需要上面部分,一个最简单的HTML5文档需要的内容如下
该句声明了文档类型,除了大小写可以任意变化外,其他内容都是不能变动的,那么究竟时怎样的规则,导致一个最简单的源码文件必须有doctype声明呢?根据标准,一个HTML文档由如下内容组成(严格按照顺序):
1. 一个BOM标记,且这个BOM标记必须为U+FEFF
2. n个空格或注释
3. DOCTYPE声明
4. n个空格或注释
5. 一个HTML元素
6. n个空格或注释
再回过来看一下文档组成,除了0-n个空格或注释这些没有多大意义的元素之外,组成的列表中还说明有一个HTML元素,但是最简单的源码却没有。这是因为在HTML的规范中,一直存在“隐式标签”这样的概念,关于隐式标签,大致可以这样解释:
一部分元素,当满足特定的前提条件时,其开始标签或结束标签可以在源码中省略,被省略的标签称为”隐式标签“