HTML超文本标记语言发展到今天已经进入 HTML5 蓬勃发展的新时代，这篇文章小白将带大家仔细过一遍 HTML5 设计网页的基本框架，先打好基础，再建高楼大厦哈~
图文 / 丁建雄
小白是单纯为兴趣而写作的独立创作人，如果您喜欢小白的文章，欢迎关注、交流、分享（引用请链接到本文）。
从HTML到HTML5的演变
很久远的故事就不聊太多了，我们现在能接触到的老版本的HTML标准，准确来讲应该叫HTML 4。而HTML5呢可以认为是革新版本的HTML 4，但是这个演变过程却是十分坎坷的。
HTML 4标准是由W3C（万维网联盟）建立的，他们热衷于从理论角度构建纯净的标准，却无视Web设计人员的需求，他们接下来的方向是建立纯粹的XHTML 2标准。来自 Opera、Apple 和 Mozilla 的代表对这种倾向非常反感，他们希望那些支持创建Web应用的特性能够得到更多的关注。
于是，心怀不满的反抗者建立了自己的组织：Web Hypertext Application Technology Working Group（Web超文本应用技术工作组），简称WHATWG。
在后来的发展中，正如大家现在看到的，HTML5已经强势替代老版本的HTML标准，成为新兴的网页开发标准。W3C也摒弃了XHTML 2标准，开始在WHATWG的基础上继续进行开发设计，两个组织再次联手。只不过有个小细节，W3C开发的是「 HTML 5 」（注意有个小空格）标准，而WHATWG开发的是「 HTML5 」（没有空格）标准。但是，笔者发现一个小细节，W3school 在HTML5教程中，题标采用的是「 HTML 5 」教程，内容却写的是「 HTML5 」教程。哈哈，看来专业技术学院也没有刻意区分这两个的区别，而是选择兼顾到两者。所以嘛，我们用户也不用刻意去区分，标准的东西，让他们组织自己去协商吧，我们用就行啦！
对了，顺便说一句，经历了这么多年的发展，其实HTML5的标准还没有完全建立起来（虽然有些大神的观点认为在2014年10月已经彻底完成，其实，由于后期还是有些浏览器兼容性问题，标准还在持续更新中），但是其强大的功能已经使得其成为科技界的新宠！
好啦，是不是已经迫不及待想要见见这个宠儿长什么样子呢？别急，喝口水，我们继续~
HTML5的主体结构
要想理清HTML5的主体结构，我们先从上篇文章结尾的那个「 Hello，world 」聊起。
下面是「 Hello，world 」的代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!--put your contents here-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这个是基于 bootstrap 开发的HTML5基本模版，下面笔者就跟大家来聊聊这一行一行的代码究竟是个啥意思？
首先是
<!DOCTYPE html>
这个就是HTML5标准声明，也就是说，加上这一行，浏览器就知道你遵循的标准是HTML5标准。
接着
<html lang="zh-cn">
</html>
这个整体代表的是HTML框架，第一个标签 <html> 是开始标签，第二个标签 </html> 代表的是结束标签，标签一般都是成对出现的。至于 lang="zh-cn" 是语言选择中国大陆中文的意思。
注意哦，这边笔者得告诉你一个小秘密， lang="zh-cn" 这行代码其实对于网页显示来讲并没有什么实际的意义，但是它可以告诉浏览器、搜索引擎、一些处理HTML的程序等，对页面语言内容来做一些对应的处理。比如翻译、语法检查、搜索引擎精确识别等工作。
head 标签
接下来的标签是
<head>
</head>
顾名思义，「 头部 」是存放头文件的地方，这个标签内存放的文件一般来讲都是一些标准说明、链接关系的文件，基本不对网页实际的内容造成影响，而会影响网页整体的格局和标准。
下面连续的三个相似的 <meta> 标签
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta> 标签一般位于文档头部，一般都是跟「 属性 」连用的。
<meta charset="utf-8"> 这条代码里面 charset 是「 属性 」，utf-8 是「 值 」，而值是需要用 "" 包起来的。这条语句的意思是定义整个页面字符编码格式采用 utf-8 标准。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 这条代码里面 http-equiv 是通用的「 属性名称 」，他的「 值 」是 X-UA-Compatible ，而 content 是通用的「 值名称 」，他的「 值 」是 IE=edge 。
是不是有点晕？别急，这条语句其实可以写成 X-UA-Compatible="IE=edge" 这样是不是理解清楚了？对比上面的那条 charset="utf-8" 。哈哈，简单吧！这条语句的意思是告诉「 IE 」浏览器以当前浏览器最高级标准模式渲染，简单的说，就是什么版本「 IE 」就用什么版本的标准模式渲染，这样可以避免版本升级造成的影响。
那要是没有安装「 IE 」咋办呢？最佳的兼容模式方案，其实可以考虑这么写 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 这样，当使用不同浏览器时浏览器会优先筛选出已经安装的渲染模式。当然啦，亲测下来，渲染模式什么的对网页效果影响不大，对于各大主流浏览器基本不会出现大的问题，但是在某些细节方面可能略有不同。
<meta name="viewport" content="width=device-width, initial-scale=1"> 这条语句的理解跟上面是类似的，这样改写你就明白了 viewport="width=device-width, initial-scale=1"，是不是一目了然啦！这条语句的意思是「显示窗口 」设定为「 设备宽度 」，显示图形与文字的「 初始比例 」是1。
好，接下来的标签是
<title>Hello, world</title>
这个东西有啥用呢？这个标签的作用是定义了网页的名称，你可以在网页最上面看到网页的名称。
再来看下一个新的标签
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
首先，`` 这是一个注释行，仅仅是为了人能看懂而写的解释说明，不对网页显示产生任何影响。
然后，第二行 <link> 标签定义文档与外部资源的关系，href="css/bootstrap.min.css" 这句话规定了外部资源所处的文档位置，rel="stylesheet" 这句话规定了外部资源与被链接文档的关系是「 样式表 」。简单地说，这个标签将外部样式表CCS文件链接到本HTML5文档里面来了。
好的，至此，head 标签结束了！
body 标签
下面一个与 head 标签同等级的是 body 标签
<body>
</body>
看名字应该很清楚了吧，这个是网页的主体，整个网页所显示的具体内容编辑都在这个里面完成。具体有哪些内容呢？这个就比较多啦，在后续的文章里我们再慢慢聊！
这里我们只留了「 你好，世界 」这一个内容
<h1>你好，世界！</h1>
<h1></h1> 代表的是标准的标题样式，也就是说，「 你好，世界 」这几个字的样式是由他的标签决定的。
接下来的注释部分我们就不聊了，大家有点英语基础的应该能看懂吧，直接进入标签
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script></script> 标签用于定义客户端脚本，比如「 JavaScript 」，script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
这里的用法就是指向了外部脚本文件，一个是互联网上的 jQuery 文件，一个是本地脚本文件。
大家有没有发现，这个 <script></script> 标签其实是个说明性质的文件嘛！是不是不应该在 body 里面，而应该放到 head 里面去呢？大家的思考是完全正确的！对于初期的网页设计者，我们的确是曾经把他放在 head 里面的。只不过，后来大家发现，对于大型的脚本文件，如果放在头部，加载起来会很费时，严重影响网页打开的速度和用户体验效果（你可以想象一下，刷了半天网页，进度条都快一半了，网页还是空白一片的尴尬）。
所以，解决的方法就是，将 <script></script> 标签全部放到网页的最后面加载。这样，即使网页没有完全加载完毕，也可以快速优先显示网页内容，而不会造成上面提到的那种尴尬局面。这是一个小技巧，却对用户体验而言是决定性的。
所以啊，细节决定成败，一个优秀的设计师跟一个普通的设计师的差别或许不在于他们的主体知识掌握的多少，而在于他们对自己作品的细致打磨程度，以及一点点看似微不足道的经验积累。久而久之，我们做出的产品便不再只是一般的产品，而会成为一种艺术品，一种我们会为之着迷上瘾的美。只是因为，我们投入了很多心血，并且是用自己的才华去设计，而不是单纯为了生存去强迫自己劳作。
好啦，至此，HTML5主体框架结构的讲解就完毕啦！基本上来讲，现在大部分的网页设计都是基于这个框架实现的，高效，实用。
在接下来的文章中，笔者会跟大家继续深入探讨HTML5中网页设计的一些基础的、有趣的、有些棘手的问题。我们一步一个脚印，先把基础打好，再去建造那些复杂的高级货哈！敬请期待~
好啦，写了一下午了，来碗麻辣烫压压惊！
嗯，麻辣烫味道不错~
参考文献
Bootstrap官方文档
网友评论