好的，我们开始吧，打开Eclipse，新建一个项目，就叫做Base吧，基础班的意思。注意哦，要建一个JavaWeb项目。右键，new，Dynamic Web Project，如果出来的菜单项没有，就点最下面的others，找到Dynamic Web Project。

（注：你不需要跟着我一步一步搭项目，到时候直接通过SVN把项目Import到本地，需要做什么作业的话，我会在最后给出。你们直接导入项目，看我的源码就OK了。）

点Next。

点Next。

点击Finish，项目新建成功！

目录结构如下：

接下来，我们再来建一个文件夹。

那么，今天我们的讲课资料，都会放在这个文件夹里面。右键点中ch01，new一个file，取名为index.html。

现在他还只是一个空白文件，啥也没有哦。现在，我要把这个项目跑起来，如何做呢，很简单，根据以前的知识点，我是不是只要去修改Tomcat的配置文件就好了呀，如果还有不会的，去看之前的教程，我不会再重复了。现在，我打开这个：

注意哦，看我怎么操作的，我现在把鼠标的光标放在这一行上：

随便放在这一行的哪个位置，能看到光标在闪啊闪的就行了，现在就是见证奇迹的时刻！

我按住键盘上的Ctrl键和Alt键，然后按一下键盘上的向下箭头，这一行就被神奇的复制到下一行了，有图有真相：

听好，这个快捷键在实际开发中会经常被使用的，使用频率非常非常高，一定要把这个快捷键记住。然后把doBase修改一下，改成我们Base项目的WebContent目录地址，这个就是Web项目的发布目录。我就再讲一遍吧，看好了，如何迅速地找到文件目录：

就是这样做的，OK，我们把doBase换成这个地址，路由映射地址改成我们的项目名称：

<Context docBase="E:\Java培训\software\eclipse-mars\workspace\Base\WebContent" path="/Base" debug="0" reloadable="false" />

然后，启动Tomcat：

打开浏览器，输入 http://localhost/Base/ch01/index.html。

http://localhost/Base的意思就是我们项目的根路径，你可以理解为就是WebContent文件夹：

然后，我们访问这个文件：ch01/index.html

不就是访问我们ch01文件夹下面的index.html吗？这就是Web项目，其实就是访问一些东西而已。当然，我们现在还没有涉及Java代码，所以，编译路径暂时还不需要改。现在，我们在index.html里面写上一句话：

哈哈，这不就是和普通的文本文件txt一样的吗？虽然它的名字叫做index.html，可实际上，他的内容和txt文件没有什么不同，你说对不对？刷新浏览器，可以看到：

OK，是不是有了，现在，我们写中文试试：

刷新页面：

也可以，因为我们文件的编码是UTF-8的，所以这里写中文也没有太大的问题。可以说，这是一个伪HTML文件，我们要让它变成真的HTML文件，就必须满足HTML文件的一些规范。我现在把这些文字放在一个html元素中。像这样：

其实严格来说呢，HTML是一种结构性语言，他和传统的编程语言，比如Java，JavaScript，C，C++等不同，它没有语法，只有结构。它会通过结构，来描述一些东西，仅此而已。

我喜欢把这样的东西称呼为元素，有的书上称呼这个为标签，其实我觉得这样反而不好理解了，不就是元素嘛？在以上那个例子中，我创建了一个html元素，诶，这样一来，浏览器就知道了，他知道有一个html元素，然后对它里面的东西，根据某种规则做一些渲染。

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

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

刚才的警告信息就没有了，这是什么原因呢？它起码说明，这样的结构就符合了一个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的意思是，设置网页的标题为My Test Page
的意思是，设置网页的编码为UTF-8

在实际开发当中呢，这个大概就是一个完整的网页结构了，我们所有的内容，都需要写在body元素中，以元素挂载的方式一个个添加进去，然后每个元素又可以挂载其他元素。比如，我在head元素上面，又挂载了title元素，对不对？看到这里，有的同学可能又要问了，为什么一定是这么写啊，这些元素是在哪里定义的啊，元素名称非得和他一模一样吗？我能不能写一个自定义的元素呢？

首先，回答你第一个问题，其实，这些元素，比如html，body，它就是叫这个名字的，在很早很早以前，浏览器还没有普及的时候，就已经有了这么一套规范。随着科技的进步，又出来一个组织，专门来设置这些规范。然后浏览器厂商遵循这些规范，开发出自己的浏览器产品。

第二个问题，自定义属性，这个也是可以的，但是，你这样做的话，浏览器不会主动识别这些元素，就连这些元素到底是行级元素还是块级元素都不知道。在浏览器中，很多元素都是预设好的，比如P元素，P元素里面的内容，都会被浏览器认为是一个段落。比如，现在我们的网页上，虽然有换行：

可是，页面上却没有换行的效果：

那么如何换行呢，一种方法是用br元素，加载 Hello! 的后面，或者把两句话分别用p元素包起来，比如这样：

页面：

说了这么多，让我们回到本节最开始的那张图，其实我主要就是想让你明白一件事，关于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元素绑定了一个属性分子，用于说明该网页所用的语言是怎样的，该属性分子的结构如下：

其他元素同理。

HTML基础知识入门的更多相关文章

  1. Linux基础知识入门

    [Linux基础]Linux基础知识入门及常见命令.   前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...

  2. Hibernate入门1. Hibernate基础知识入门

    Hibernate入门1. Hibernate基础知识入门 20131127 前言: 之前学习过Spring框架的知识,但是不要以为自己就可以说掌握了Spring框架了.这样一个庞大的Spring架构 ...

  3. Oracle 基础知识入门

    前记: 近来项目用到Oracle数据库,大学学了点,后面基本忘记得差不多了,虽然基本语法跟sql 差不多,但是oracle知识是非常多的. 这里简单说点基础知识,希望后面补上更多的关于ORacle知识 ...

  4. SpringMVC（一） 基础知识+入门案例

    SpringMVC基础知识 1.什么是Springmvc 2.springmvc 框架的原理(必须掌握) 前端控制器.处理器映射器.处理器适配器.视图解析器 3.SpringMVC 入门程序 目的:对 ...

  5. java学习基础知识入门

    基础入门知识(一) 一.java技术的分类 java按照技术标准和应用场景的不同分为三类,分别是JAVASE.JAVAEE.JAVAME JAVASE : 平台标准版,用于开发部署桌面,服务器以及嵌入 ...

  6. DOM0,DOM2,DOM3事件,事件基础知识入门

    事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...

  7. 1 python大数据挖掘系列之基础知识入门

    preface Python在大数据行业非常火爆近两年,as a pythonic,所以也得涉足下大数据分析,下面就聊聊它们. Python数据分析与挖掘技术概述 所谓数据分析,即对已知的数据进行分析 ...

  8. AngularJS实用基础知识---入门必备

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. ...

  9. k8s官网 基础知识入门教程

    官网链接为 https://kubernetes.io/docs/tutorials/kubernetes-basics/ 基础操作环境为minikube 常见基础命令 查看基础的一些信息 # 查看版 ...

随机推荐

  1. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

  2. 用excel.php类库导出excel文件

    excel.php是个小型的php类库,可以满足基本的从数据库中取出数据然后导出xls格式的excel文件,代码如下: 1 class Excel { 2 public $filename = 'ex ...

  3. java学习笔记 --- 多态

    一.多态 (1)定义:同一个对象在不同时刻体现出来的不同状态.父类的引用或者接口的引用指向了自己的子类对象.   Dog d = new Dog();//Dog对象的类型是Dog类型.  Animal ...

  4. 组件Prop验证

    <div id="example"> <kkk></kkk> </div> <script src="https:/ ...

  5. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  6. Linux ubuntu 安装gcc、g++、 pcre、zlib、ssl、nginx和该内存不能为written解决方法

    1.楼主也是第一次接触Linux  如果有错误的地方还请各位朋友指出.... 2.gcc.g++依赖库:sudo apt-get install build-essential,sudoapt-get ...

  7. 编写你的第一个程序（HelloWorld）

    1)安装. 2)打开我们的编译工具Xcode,会出现一些选项,我们只需要选中第2项(因为版本不同可能有些不同)“Create a new Xcode project ”如下图(其他的选项目前我们还没有 ...

  8. python非转基因HTTP请求库--Requests: 让 HTTP 服务人类

    快速上手 迫不及待了吗?本页内容为如何入门 Requests 提供了很好的指引.其假设你已经安装了 Requests.如果还没有,去安装一节看看吧. 首先,确认一下: Requests 已安装 Req ...

  9. 【原创】Octovis在Ubuntu16.04下运行出现core dump的解决方案

    本人SLAM研究新手,使用系统为Ubuntu16.04.本文原址:http://www.cnblogs.com/hitlrk/p/6667253.html 在学习SLAM的过程中,使用Octomap进 ...

  10. Java类修饰符