好的，我们开始吧，打开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. MyBatis快速入门（1）：搭建环境和单表映射

    一.MyBatis简介    一说起对象关系映射框架,大家第一时间想到的肯定是Hibernate.Hibernate作为一个著名的框架,功能十分强大.我们只需要配置好实体类和数据表之间的关系,Hibe ...

  2. Appium 解决锁屏截屏问题（java篇）

    今天有个小伙伴问我,怎么把锁屏进行解锁操作?   A.思路在初始化driver后,加入等待判断是否有锁屏(元素)(记得要加入等待) B.如果有就进行解锁,就一般的输入数字密码然后进行解锁(当然了你要知 ...

  3. oracle查询锁表解锁语句

    --oracle查询锁表解锁语句--首先要用dba权限的用户登录,建议用system,然后直接看sql吧 --1. 如下语句 查询锁定的表: SELECT l.session_id sid, s.se ...

  4. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  5. 老李推荐： 第3章2节《MonkeyRunner源码剖析》脚本编写示例: MonkeyDevice API使用示例 4

    第七步:保存新增加日记 代码3-2-7 增加日记-保存日记 #Step7: Save the note by touch on the "save" menu entry by c ...

  6. 4.Maven仓库

    1. 何为Maven仓库 Maven仓库就是统一存放所有依赖的地方,其他所有项目都可以在仓库里通过坐标找到所需要的依赖. 2. 仓库的布局 任何一个构件都有其唯一的坐标,根据这个坐标可以定义其在仓库中 ...

  7. 4.熟悉Java基本类库系列——Java 正则表达式类库

    正则表达式语法结构图: Java正则表达式类库结构图: Java典型例子 1.String类 matches()方法 判断字符串是否符合特定正则表达式 @Test public void testRe ...

  8. (iOS)关于UITableView设置contentsize（原创）

    由于UITableView是继承自UIScrollView的,所以他是可以设置contentsize的. 但是,我在试验的过程中,初始化UITableView实例后,直接设置它的contentsize ...

  9. 简单分析下用yii2的yii\helpers\Html类和yii.js实现的post请求

    yii2提供了很多帮助类,比如Html.Url.Json等,可以很方便的实现一些功能,下面简单说下这个Html.用yii2写view时时经常会用到它,今天在改写一个页面时又用到了它.它比较好用的地方就 ...

  10. 跟着刚哥梳理java知识点——基本数据类型（三）

    1.8种基本数据类型 1)4种整数类型(byte.short.int.long) [知识点] 类型 存储空间 数值范围 byte 1字节=8位 -128-127 short 2字节 -2的15次方-2 ...