[HTML5]-2-HTML基本框架

引言

这篇文件主要介绍HTML5基本框架的写法，不同于HTML4，HTML5的基本框架多出了几个有"语义"的标签，让页面代码看上去更加易于阅读，意义更加明显。

文章目录

0×1.HTML5基本框架

拿本站的部分HTML5源码来举例，基本框架包含以下内容：

					<!--HTML5头部标识-->
					<!DOCTYPE html>

					<!--包含在这种结构中的，全部是注释信息，会被浏览器解释器全部忽略-->
					<!--Copyright©QingSword.COM︻☼1010D>-->

					<!--html文本开始的地方，lang是语言标识属性，"zh-cn"说明这是一个中文文档-->
					<html lang="zh-cn">

					<!--文档头部，可包含此文档显示在浏览器上的标题信息，文档编码信息，描述信息以及给搜索引擎看的关键字信息，还可以包含外部引用以及js代码-->
					<head>

						<!--文档编码使用"utf-8"-->
						<meta charset="UTF-8">

						<!--移动端屏幕固定尺寸，这是一条响应式布局语句，会在后面的文章中介绍，现在只需要知道，使用这条语句包含在头部后，用手机打开这个页面，将不能调整页面大小（比如有些页面可以双击或使用屏幕手势来放大局部）-->
						<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

						<!--文档的描述信息-->
						<meta name="description" content="描述信息">

						<!--文档的关键字信息，关键字方便搜索引擎收录并排序，识别出这个文档包含了哪些关键内容-->
						<meta name="keywords" content="关键字列表用逗号分隔">

						<!--当我们打开一个页面的时候，显示在浏览器标签以及最上方状态栏的那一行文字，就是title中的内容-->
						<title>[HTML5]-2-HTML基本框架| QingSword.COM </title>

						<!--设置浏览器标签前面的小图标，href属性中包含了这个小图标相对此文档的路径，大家有没有发现打开本页的时候，在浏览器标签前面那个小太阳图标？就是通过下面这条语句设置的-->
						<link rel="shortcut icon" type="image/x-icon" href="../logo/favicon.ico">


						<!--除此之外，还能包含js和css的引用内容-->
						<link type="text/css" rel="stylesheet" href="../shCore.css"/>
						<script type="text/javascript" src=""></script>
					</head>

					<!--HTML主体部分，从这一部分开始，就是我们在浏览器页面中所能见到的部分了-->
					<body>
						<!--主体部分头部标签-->
						<header>
							<nav>
							<!--导航标签，大家看到本页中，固定在顶部的那个导航条，就是这一部分的内容-->
							</nav>
						</header>
						
						<aside>
							<!--侧边栏标签，大家看到本站首页右侧的那些内容，都属于这一部分-->
						</aside>
						<section>
							<!--内容区，包含了页面的主要内容-->
						</section>
						<footer>
							<!--包含页脚信息，本页底部的那些内容都是包含在这个标签中的-->
						</footer>
					</body>

除了在head标签中的内容外，body标签中的内容并不是固定的，这就意味着上面body中的所有标签都可以使用几个div标签来代替，这也是HTML5之前的那些版本的做法，而HTML5在这基础上做了部分优化，让文档的基本结构看上去更加有"语义"。

下面是一个完整HTML5框架的全部内容：

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="utf-8">
						<title>页面标题</title>
						<!-- 可包含js等内容 -->
					</head>
					<body>
						<header> <!-- 网站的头部html5独有标签，比起div有更加明显的语义 -->
							<hgroup> <!-- 组合标签，将某些需要组合的放在一组，便于css控制 -->
								<h1>网站标题</h1>
								<h4>小标题</h4>
							</hgroup>
							<nav>网站导航</nav>
						</header>
						<section> <!-- 包含页面主体部分 -->
							<p>页面内容</p>
						</section>
						<article> <!-- 自包含一个完整的文档，比如本站首页每一篇文章的标题摘要就是使用的这个分组 -->
							<header>文章标题</header>
							<section>文章摘要</section>
							<footer>文章信息摘要</footer>
						</article>
						<aside>侧边栏，也可以放在尾部</aside>
						<footer> <!-- 网站底部标签，html5新标签 -->
							<h4>网站尾部</h4>
							<address>联系方式</address>
						</footer>
					</body> 	
					</html>

上面这段代码在浏览器中的显示是下面这样的，可能有些朋友会觉得和想象中差太远，这是因为没有使用css控制的原因；

HTML5-base-1

在加入css控制后，上面这段代码可以形成下面这种布局，css会在后面的文章中详细介绍：

HTML5-base-2

0×2.HTML5新特性演示

现在我们自己来新建一个文本，在里面输入下面的内容，并且保存为".html"后缀，尝试着用浏览器打开它：

					<!DOCTYPE html>
					<!--大家可以尝试着删除html标签中lang="zh-cn"这一部分内容，页面不会发生任何变化，由此可知lang只是起到标识作用-->
					<html lang="zh-cn">
					<head>
						<!--但如果我们尝试将下面这一句页面编码删除，保存后刷新页面，就会发现中文全部变成了乱码-->
						<meta charset="UTF-8">

						<title>浏览器标签中显示的内容</title>
					</head>
					<body>
						<!--ruby标签是HTML5定义的新标签，能够让其中的rt标签中的内容，移动到其前面的字符上面，就像汉语中的拼音注释一样，style中的内容属于css的部分，在以后的文章中会详解，现在只需要知道，这一部分会将字体大小设置成50像素，并且字体颜色设置成绿色即可-->
						<ruby style="font-size:50px; color:green;">
							晴<rt>Qing</rt>刃<rt>Sword</rt>
						</ruby>
					</body>
					</html>

上面的代码最终显示如下：

晴Qing刃Sword