HTML基础知识入门

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换成这个地址，路由映射地址改成我们的项目名称：

<Context docBase="E:\Java培训\software\eclipse-mars\workspace\Base\WebContent" 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元素，然后对它里面的东西，根据某种规则做一些渲染。

可以看到，我们这样写有一个警告：

1488439190215084539.png

它说Invalid text string,无效的文本字符。原因是，在html元素中，是不允许直接放字符串的。那么，我现在在html元素中，挂载一个body元素：

1488439284168039156.png

刚才的警告信息就没有了，这是什么原因呢？它起码说明，这样的结构就符合了一个html文件的规范。所以，我们以后都不应该直接在html元素中写字符串。现在，我给html元素绑定一个lang属性。

<html lang="en">

这又是什么意思呢？其实，它的意思是，我设置该HTML文件的语言为英文，那么浏览器在读到这个配置信息的时候，就会知道，哦，这是一个英文网页。如果是谷歌浏览器，可能还会自动提示你，要不要对该页面进行翻译？有的同学可能会好奇了，那为什么我写中文也可以显示呢？其实这个没有必然关系的，难道英文网页就不能显示中文吗，只要你的文件编码支持中文，比如GBK，UTF-8，那么，浏览器就能成功地把中文显示出来。那么，我可不可以设置这个网页为中文网页呢？当然也可以，只需要把en改成"zh-CN",像这样：

<html lang="zh-CN">

这就表明，这个网页的语言采用简体中文，在国内使用的。嗯，接下来我们加快点速度：

<html lang="zh-CN">
<head>
<title>My Test Page</title>
<meta charset="UTF-8">
</head>
<body>
  Hello!
  这是我的第一个HTML文件！
</body>
</html>

的意思是，设置网页的标题为My Test Page

的意思是，设置网页的编码为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文件：

<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

其他元素同理。

posted @ 2017-11-21 15:53  勿忘__初心  阅读(267)  评论(0)  编辑  收藏  举报