Case 1：打开web世界的大门——了解html和浏览器
简介
浏览器是你接触web世界最为重要的窗口，这节课将使你明白你通过浏览器所看到的华丽的网页，究竟是如何被渲染出来的。
目标
- 了解HTML是什么，以及其基本结构
- 掌握一些常用的HTML标签
- 了解CSS，以及一些基本的布局
- 学习使用浏览器的调试工具
任务
- 尝试使用HTML编写一个简单的页面
预期用时
- 1 - 2 天
HTML
HTML（HyperTextMarkupLanguage）-- 超文本标记语言，是一种用于构建网页的世界通用的标准标记语言，它并不是一门编程语言，你可以理解为，这是一种特殊格式的文本文件（就像word文件一样），使用浏览器打开它，就能看到网页了（我们也称html为“网页源码”）。
版本问题
HTML从指定至今已经拥有多个版本，目前最为流行和通用的版本为HTML5，接下来的教程全部基于这个版本。
0.实践：动手创建属于你的第一个网页
请跟随下面的步骤创建一个最为简单的页面，注意理解页面渲染的概念，以及html的结构化
新建一个文本文档（demo.txt），然后使用一个文本编辑器打开它（如果你没有合适的文本编辑器，就使用记事本吧）
-
将下面的内容复制粘贴到新建的文本文档中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的网页</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html> 按下
CTRL + S快捷键保存内容（请在脑海中自动生成时刻保存的概念）修改这个文本文档的后缀为html（demo.html），如果你不知道怎么修改文件的后缀，请点击我百度
在
demo.html文件上右键，选择打开方式为任意一个浏览器，然后观察
如果一切顺利你将会在浏览器中看到以下画面：
没错，刚才你所写下的html代码，被浏览器渲染（转换）成为了可视化的网页。
1.基?。毫私釮TML的结构
基本骨架
在上面的代码中，可以看到最终实际被渲染成网页内容的部分只有“我的第一个标题”和“我的第一个段落”两句话，剩下的部分都是html代码的结构化标记，如果你仔细观察，你可以发现html是一个层层包裹的结构，最外面的很大一部分是html的基本骨架，也就是下面这部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页</title>
</head>
<body>
....
</body>
</html>
基本上所有的html都拥有同样的结构，我们一般要做的事情只是在中间省略号的部分书写自己想要的代码，顺带一题，<title></title>两个标记中间所包含的文字，最终将被渲染成浏览器选项卡上的文字（称之为网页标题）。
你不用急于理解上面这个骨架的内容，先把它们复制在你的剪贴板上，然后随时准备复制它。
标签和元素
你一定注意到了html中处处可见的尖括号<>，这被称为标签，绝大多数的标签都是成对出现的：分为起始标签和结束标签，夹在两个标签中的内容被称为元素。
举一个最简单的实例
<p>这是一个段落</p>
上面的内容声明了一个段落（p标签）元素，内容是“这是一个段落”。
接下来你将会意识到，编写一个网页基本上就是通过不断的增加各种标签，给页面添加各种元素的过程。
2.入门：了解并使用标签
四个基本实例
下面的教程将会带你了解4个最为基础的html元素：
- 标题
- 段落
- 链接
- 图片
你可以尝试在刚才创建的html文件中应用它们，或者在下面的网页中使用“尝试一下”来查看效果
（因为html原生不支持回车换行，所以br标签还是很常用的）
属性
每个标签都可以拥有属性，属性是一些用于更好的描述元素的附加信息。下面用一个易于理解的形容来描述属性和标签以及元素的关系:
请看我臆造的这段“html”代码：
<苹果 颜色 = "红色" 口感 = "还不错">A</苹果>
它的语义是：A是一个红色的，口感还不错的苹果
标签描述了A是个苹果，属性描述了A是个什么样的苹果
点击下面的链接来深入学习a标签和img标签，并尝试使用它们的属性：
(!)实践任务
编写一个a标签，跳转到http://cn.bing.com/，并且设置为点击后在新窗口打开 （href + target 属性）
编写一个img标签，src设置为http://of1deuret.bkt.clouddn.com/17-6-18/75443832.jpg,(你也可以引入本地的图片，这可能需要你了解一下相对路径和绝对路径)，尝试调整width和height属性来修改它的显示效果。
3.进阶：区块和?？榛?/h3>
div标签
接下来我们来认识html中最最最常用的一个标签：<div>
被包裹在<div></div>中间的内容被称为一个区块，区块和区块之间互相独立，一个区块内的所有其他元素可以拥有相同的样式和某些属性。区块也可以进行嵌套。
因为拥有独立性和继承性，因此我们可以利用div对网页进行模块化，?？榛且桓鲋匾谋喑趟枷耄谡饫?，你可以想像一个网页是由许许多多的小矩形(div)拼凑在一起成为一个整体的，我们先写好一个个小矩形，最终再把他们合理的布局在一起，这样就形成了一个结构清晰样式美观的网页了。
看看下面这个网页，我用红框标记出了里面主要的div元素，试着体会一下模块化的思想
布局*
通过现在已经把网页分层了若干个矩形，这些矩形需要合理的排列才能变得美观，因此需要进行布局，
布局是一道比较复杂和繁琐的工序，牵扯到了一些更为深入的知识，也需要一些CSS的相关知识。
查看下面的链接了解布局（请无视使用表格的布局方式）：
对布局有兴趣的同学可以自行搜索和了解下面的相关话题：
- 盒子模型
- 绝对定位和相对定位
布局在传统的web页面开发中是一项比较繁琐的工作，不过现在已经涌现出一大批优秀的解决方案（比如响应式布局，栅格系统，弹性布局），这些话题将会在进阶篇的前端路径部分进行讨论，因此你现在可以不必过分追究布局问题。
4.继续学习
上面的内容为你揭示了html的基本结构和元素，如果你想要更多的了解html的相关知识，下面为你提供一些可以进阶学习的网站和教程
本套课程的后续部分不会对html相关知识有太多的要求，当前阶段你只需要明白html的基本结构，知道网页是用html写的，并且能尝试自己写一些简单的页面元素就OK了。
浏览器
简介
浏览器是啥我觉得不必过多赘述了，毕竟大家天天都在用嘛。不过在你了解了html之后应该对浏览器有一些新的认知，至少应该明白页面其实是由html源码加工渲染而来的，在这个阶段，你可以把浏览器简单的理解成为一个html的渲染器。
调试工具
浏览器的调试工具对于开发者来说实在是不可多得的利器，我个人十分推荐chrome浏览器的开发调试工具（火狐也还凑合），下面的教学将会基于chrome浏览器进行。
打开
在页面空白处点击右键选择“检查”或者按下F12快键键（OSX下不可用）就可以进入调试工具界面了，如下图所示：
查看元素（源码）
在页面元素的显示部分可以快速查看整个网页的源码，并且选中某一部分的源代码后还会在左侧的视图中加亮显示，看到有趣的网站不妨就利用这个查看一下源代码，说不定还能拷贝其中的一部分元素为己所用（扒源码）
审查元素
点击审查元素按钮后再将鼠标移动到页面上，将会动态高亮显示页面上的元素，并在页面元素栏中显示它的源码（有点不好描述，自己使用一下应该会比较好理解），大概是下面这样的
这个功能在调试页面时相当有用！
其他
调试工具拥有许多更加有用和高级的功能，我们将会在以后的课程中陆续讲述
小结
第一小节的内容到此就告一段落了，也许你还不是太理解网页究竟如何运作，也许你觉得这一堆铺面而来的新知识有些突兀，不必担心，尝试慢慢地理解和接受吧。
你可以访问之前给出的进阶学习教程链接去进一步了解html的相关知识。
当然不要忘记进行一定量的实践，始终记得：实践是编程的基础。
任务与实践
综合利用之前讲到的所有标签写一个简单的页面
