1488435011699017726.jpg
好的，我们开始吧，打开Eclipse，新建一个项目，就叫做Base吧，基础班的意思。注意哦，要建一个JavaWeb项目。右键，new，Dynamic Web Project，如果出来的菜单项没有，就点最下面的others，找到Dynamic Web Project。
（注：你不需要跟着我一步一步搭项目，到时候直接通过SVN把项目Import到本地，需要做什么作业的话，我会在最后给出。你们直接导入项目，看我的源码就OK了。）
1488436409621032403.png
点Next。
1488436570824017435.png
点Next。
1488436598996011246.png
点击Finish，项目新建成功！
目录结构如下：
1488436631012011303.png
接下来，我们再来建一个文件夹。
1488436716996097175.png
那么，今天我们的讲课资料，都会放在这个文件夹里面。右键点中ch01，new一个file，取名为index.html。
1488437055340079211.png
1488437070199042104.png
现在他还只是一个空白文件，啥也没有哦。现在，我要把这个项目跑起来，如何做呢，很简单，根据以前的知识点，我是不是只要去修改Tomcat的配置文件就好了呀，如果还有不会的，去看之前的教程，我不会再重复了。现在，我打开这个：
1488437304684044543.png
1488437354496034031.png
注意哦，看我怎么操作的，我现在把鼠标的光标放在这一行上：
1488437385980035448.png
随便放在这一行的哪个位置，能看到光标在闪啊闪的就行了，现在就是见证奇迹的时刻！
我按住键盘上的Ctrl键和Alt键，然后按一下键盘上的向下箭头，这一行就被神奇的复制到下一行了，有图有真相：
1488437511152069734.png
听好，这个快捷键在实际开发中会经常被使用的，使用频率非常非常高，一定要把这个快捷键记住。然后把doBase修改一下，改成我们Base项目的WebContent目录地址，这个就是Web项目的发布目录。我就再讲一遍吧，看好了，如何迅速地找到文件目录：
1488437836512050927.gif
就是这样做的，OK，我们把doBase换成这个地址，路由映射地址改成我们的项目名称：
代码语言：javascript复制<Context docBase="E:Java培训softwareeclipse-marsworkspaceBaseWebContent" path="/Base" debug="0" reloadable="false" />然后，启动Tomcat：
1488438078277045711.png
打开浏览器，输入 http://localhost/Base/ch01/index.html。
http://localhost/Base的意思就是我们项目的根路径，你可以理解为就是WebContent文件夹：
1488438228777019467.png
然后，我们访问这个文件：ch01/index.html
不就是访问我们ch01文件夹下面的index.html吗？这就是Web项目，其实就是访问一些东西而已。当然，我们现在还没有涉及Java代码，所以，编译路径暂时还不需要改。现在，我们在index.html里面写上一句话：
1488438360230013475.png
哈哈，这不就是和普通的文本文件txt一样的吗？虽然它的名字叫做index.html，可实际上，他的内容和txt文件没有什么不同，你说对不对？刷新浏览器，可以看到：
1488438435980017681.png
OK，是不是有了，现在，我们写中文试试：
1488438503762025912.png
刷新页面：
1488438557480012101.png
也可以，因为我们文件的编码是UTF-8的，所以这里写中文也没有太大的问题。可以说，这是一个伪HTML文件，我们要让它变成真的HTML文件，就必须满足HTML文件的一些规范。我现在把这些文字放在一个html元素中。像这样：
1488438813824029374.png
其实严格来说呢，HTML是一种结构性语言，他和传统的编程语言，比如Java，JavaScript，C，C 等不同，它没有语法，只有结构。它会通过结构，来描述一些东西，仅此而已。
我喜欢把<html></html>这样的东西称呼为元素，有的书上称呼这个为标签，其实我觉得这样反而不好理解了，不就是元素嘛？在以上那个例子中，我创建了一个html元素，诶，这样一来，浏览器就知道了，他知道有一个html元素，然后对它里面的东西，根据某种规则做一些渲染。
可以看到，我们这样写有一个警告：
1488439190215084539.png
它说Invalid text string,无效的文本字符。原因是，在html元素中，是不允许直接放字符串的。那么，我现在在html元素中，挂载一个body元素：
1488439284168039156.png
刚才的警告信息就没有了，这是什么原因呢？它起码说明，这样的结构就符合了一个html文件的规范。所以，我们以后都不应该直接在html元素中写字符串。现在，我给html元素绑定一个lang属性。
代码语言：javascript复制<html lang="en">这又是什么意思呢？其实，它的意思是，我设置该HTML文件的语言为英文，那么浏览器在读到这个配置信息的时候，就会知道，哦，这是一个英文网页。如果是谷歌浏览器，可能还会自动提示你，要不要对该页面进行翻译？有的同学可能会好奇了，那为什么我写中文也可以显示呢？其实这个没有必然关系的，难道英文网页就不能显示中文吗，只要你的文件编码支持中文，比如GBK，UTF-8，那么，浏览器就能成功地把中文显示出来。那么，我可不可以设置这个网页为中文网页呢？当然也可以，只需要把en改成"zh-CN",像这样：
代码语言：javascript复制<html lang="zh-CN">这就表明，这个网页的语言采用简体中文，在国内使用的。嗯，接下来我们加快点速度：
代码语言：javascript复制<html lang="zh-CN">
<head>
<title>My Test Page</title>
<meta charset="UTF-8">
</head>
<body>
Hello!
这是我的第一个HTML文件！
</body>
</html><title>My Test Page</title>的意思是，设置网页的标题为My Test Page
<meta charset="UTF-8">的意思是，设置网页的编码为UTF-8
在实际开发当中呢，这个大概就是一个完整的网页结构了，我们所有的内容，都需要写在body元素中，以元素挂载的方式一个个添加进去，然后每个元素又可以挂载其他元素。比如，我在head元素上面，又挂载了title元素，对不对？看到这里，有的同学可能又要问了，为什么一定是这么写啊，这些元素是在哪里定义的啊，元素名称非得和他一模一样吗？我能不能写一个自定义的元素呢？
首先，回答你第一个问题，其实，这些元素，比如html，body，它就是叫这个名字的，在很早很早以前，浏览器还没有普及的时候，就已经有了这么一套规范。随着科技的进步，又出来一个组织，专门来设置这些规范。然后浏览器厂商遵循这些规范，开发出自己的浏览器产品。
第二个问题，自定义属性，这个也是可以的，但是，你这样做的话，浏览器不会主动识别这些元素，就连这些元素到底是行级元素还是块级元素都不知道。在浏览器中，很多元素都是预设好的，比如P元素，P元素里面的内容，都会被浏览器认为是一个段落。比如，现在我们的网页上，虽然有换行：
1488442003996088211.png
可是，页面上却没有换行的效果：
1488442066480031789.png
那么如何换行呢，一种方法是用br元素，加载 Hello! 的后面，或者把两句话分别用p元素包起来，比如这样：
1488442197184029019.png
页面：
1488442217137052845.png
1488435011699017726.jpg
说了这么多，让我们回到本节最开始的那张图，其实我主要就是想让你明白一件事，关于HTML，你只需要记住两个要点即可：
1、一个网页由元素组成，根元素是一个叫做html的元素，而且，一个元素上面还可以挂载其他元素。
2、每个元素都可以绑定自己的属性，属性必然包括属性键和属性值（如图所示），这很像一个简单的分子结构。我们可以说，一个元素由多个属性分子组成，每个属性分子就是由属性键和属性值组成的单一结构。
以上是我自己的总结，所以，你不会在其他任何书上看到这样的描述。让我们回到html文件：
代码语言：javascript复制<html lang="zh-CN">
<head>
<title>My Test Page</title>
<meta charset="UTF-8">
</head>
<body>
Hello!
这是我的第一个HTML文件！
</body>
</html>现在我来描述一下这个文件：
1、根元素是html元素，在它上面一共挂载了两个元素，分别是head元素和body元素。
2、html元素绑定了一个属性分子，用于说明该网页所用的语言是怎样的，该属性分子的结构如下：
1488443371184053913.png
其他元素同理。
您的支持是我写作的最大动力：
