<head><title>Draw Education Category Bootstrap Responsive Website Template | About Us</title><!-- Meta tag Keywords --><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8" /><meta name="keywords" content="Draw Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" /><script>addEventListener("load", function () {setTimeout(hideURLbar, 0);}, false);function hideURLbar() {window.scrollTo(0, 1);}</script><!-- //Meta tag Keywords --><!-- Custom-Files --><link rel="stylesheet" href="css/bootstrap.css"><!-- Bootstrap-Core-CSS --><link rel="stylesheet" href="css/style.css" type="text/css" media="all" /><!-- Style-CSS --><link href="css/font-awesome.min.css" rel="stylesheet"><!-- Font-Awesome-Icons-CSS --><!-- //Custom-Files --><!-- Web-Fonts --><link href="https://fonts.googleapis.com/css?family=Sarabun:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i"rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i" rel="stylesheet"><!-- //Web-Fonts -->
</head>以上便是完整代码，接下来，我会逐句精读这篇HTML代码的<head>部分
1、<title>Draw Education Category Bootstrap Responsive Website Template | About Us</title>
这是一个页面的标题部分，那么什么是标题，我给大家放一张图片
2、<meta name="viewport" content="width=device-width, initial-scale=1">
首先，<meta>标签是卸载html文件的<head>标签下的，它的内容不会在页面上显示，不过会被浏览器的渲染器识别并执行，这段代码viewport就是一个视图接口，即网站展现在用户面前的样子,width=device-width,就是网页的宽度随着设备的宽度改变而改变，initial-scale=1,是为了优化网页的视觉效果，确保网页在加载的过程中，不会被缩放。
3、<meta charset="UTF-8" />这段代码很明显，就是定义编码格式，html代码用UTF-8的形式呈现在网页上
4、<meta name="keywords" content="Draw Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
这段代码用作推广，当用户开始搜索的时候，浏览器该如何选择相关性高的网站推给用户呢，其实我觉得浏览器的管理工作人员每当一个网站建立时，应该审核一下网站的keywords的内容是否符合。
5、
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
这里利用<script>标签，在html文件里执行了javascript代码，代码作用，就是在网站加载好后，把网页向上拉动1个像素，最开始这么做，是为了隐藏网页网址，以前写网页会把网址写到网站最上角，现在这段代码也没用了
6、<link rel="stylesheet" href="css/bootstrap.css">
<!-- Bootstrap-Core-CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!-- Style-CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<link>：为了定义文档与外部资源的关系，主要还是用于链接样式表，上面这段就是链接本地的.css文件
<link href="https://fonts.googleapis.com/css?family=Sarabun:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i" rel="stylesheet">
而这段代码就是链接别人发布在网站上的.css文件。
