HTML基础知识入门
好的，我们开始吧，打开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基础知识入门的更多相关文章
- Linux基础知识入门
[Linux基础]Linux基础知识入门及常见命令. 前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...
- Hibernate入门1. Hibernate基础知识入门
Hibernate入门1. Hibernate基础知识入门 20131127 前言: 之前学习过Spring框架的知识,但是不要以为自己就可以说掌握了Spring框架了.这样一个庞大的Spring架构 ...
- Oracle 基础知识入门
前记: 近来项目用到Oracle数据库,大学学了点,后面基本忘记得差不多了,虽然基本语法跟sql 差不多,但是oracle知识是非常多的. 这里简单说点基础知识,希望后面补上更多的关于ORacle知识 ...
- SpringMVC（一） 基础知识+入门案例
SpringMVC基础知识 1.什么是Springmvc 2.springmvc 框架的原理(必须掌握) 前端控制器.处理器映射器.处理器适配器.视图解析器 3.SpringMVC 入门程序 目的:对 ...
- java学习基础知识入门
基础入门知识(一) 一.java技术的分类 java按照技术标准和应用场景的不同分为三类,分别是JAVASE.JAVAEE.JAVAME JAVASE : 平台标准版,用于开发部署桌面,服务器以及嵌入 ...
- DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- 1 python大数据挖掘系列之基础知识入门
preface Python在大数据行业非常火爆近两年,as a pythonic,所以也得涉足下大数据分析,下面就聊聊它们. Python数据分析与挖掘技术概述 所谓数据分析,即对已知的数据进行分析 ...
- AngularJS实用基础知识---入门必备
前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. ...
- k8s官网 基础知识入门教程
官网链接为 https://kubernetes.io/docs/tutorials/kubernetes-basics/ 基础操作环境为minikube 常见基础命令 查看基础的一些信息 # 查看版 ...
随机推荐
- ECMAScript6-let和const命令
▓▓▓▓▓▓ 大致介绍 ES6是下一代的JavaScript语言的标准,目标是让JavaScript可以用来编写大型的复杂程序,成为企业级开发语言,要查看浏览器对ES6的支持程度可以用阮一峰大佬写的工 ...
- JDBC连接数据库实现删除功能
这次同样运用之前写过的部分代码进行改变,实现一个删除功能,这个功能很好添加,表单中只要form一个参数到DeleteServlet中,所以重点的代码还是在DeleteServlet中实现业务逻辑. 我 ...
- 通过哨兵机制实现Redis主从配置以及java调用
Redis版本:3.0.7 操作环境:Linux 一.redis 主从配置的作用是什么 redis主从配置,配置master 只能为写,slave只能为读,在客户端对poolconnect请求时候,, ...
- 在 WPF 中使用 Path 路径
在 WPF 中总会修改 Button 的 Style,比如一个自定义的 Close 按钮.刚入门的可能会用一张 PNG 格式的图片来做这个按钮的 Icon,但这个是不优雅的.而且你要改的时候还得去操作 ...
- iOS 中的单例设计模式
单例设计模式:在它的核心结构中只包含一个被称为单例类的特殊类.例如文件管理中的NSUserDefault,应用程序中的UIApplication,整个应用程序就这一个单例类,负责应用程序的一些操作,单 ...
- 添加网站QQ客服链接
http://wpa.qq.com/msgrd?v=3&uin=3475432549&site=qq&menu=yes 将其中的uin值改为客服QQ即可
- 老李谈HTTP1.1的长连接
老李谈HTTP1.1的长连接 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...
- poptest分享计划以及提供的服务
poptest分享计划以及提供的服务 POPTEST致力于测试开发工程师的培养,能让学员经过系统培训后从事自动化测试工作,包括功能自动化.性能自动化.接口自动化以及移动端系统的自动化测试等,由于移动端 ...
- 04 Feasibility of Learning
机器学习是设计算法A,在假设集合H里,根据给定数据集D,选出与实际模式f最为相近的假设g(g可能与f相同,也可能不同). 那什么情况下学习是可行的?即保证g和f是相似的. 1.数据集内的表现g约等于f ...
- HNOI2017前被虐记及感悟
本文所记录的时间以HNOI2017第一天考试时间为DAY1,前一天为DAY0,以此类推. 本文记载了博主从HNOI2017开始前一周进行全真模拟考试的被虐过程和结果.文章内可能包含博主的不良情绪,如果 ...