本文详细介绍了Html的基础知识，包括Html的作用、遵循的规范和操作思想。深入探讨了各种标签，如字体、标题、排版、列表、图形、超链接、表格和表单等，提供了丰富的示例。此外，还讲解了Web相关概念，如cs和bs结构，Web服务器，特别是Tomcat的安装和目录结构。最后，概述了Http协议及其请求和响应的格式，帮助读者理解Web通信的基本原理。
转载请标明出处：
http://blog.youkuaiyun.com/gj782128729/article/details/52350060；
本文出自:【高境的博客】
1. Html简介
1.1. 什么是Html
Html指的是超文本标记语言(HyperText Markup Language),是用来描述网页的一种语言。
Html不是一种编程语言，而是一种标记语言(markup language)，标记语言是一套标记标签(markup tag)。
Html使用标记标签来描述网页。
1.2. Html的作用
Web浏览器的作用是读取html文档，并以网页的形式显示它们。浏览器不会显示html标签，而是使用标签来解释页面上的内容。简单说，html就是用于展示信息的。
1.3. Html程序遵循的规范
(1) html程序以<html>开始，同时</html>结束；
(2) html程序包含两部分内容：head和body；
<html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>(3) html的标签有开始标签，同时也要结束标签，标签通常是成对出现的，比如<b>和</b>；
(4) html的代码不区分大小写的；
(5) 有些标签没有结束标签，需要在标签内结束<br/>，实现换行的操作，使用标签实现的<br>，没有</br>；
(6) 绝大多数的标签都具有属性，建议属性值使用引号引起。例如:<body text=”red”>；
(7) 大多数标签是可以嵌套的。
1.4. Html的操作思想
在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。
2. Html标签
2.1. 字体标签
2.1.1. 文字标签
(1) font
<font>标签用于规定文字的字体，大小，颜色。
<font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>常用属性：
| 属性 | 作用 |
|---|---|
| face | 规定文本的字体 |
| size | 规定文本的大小，文字大小值范围：1-7，如果值超过了7，使用还是7的效果 |
| color | 规定文本的颜色 |
颜色由红色、绿色、蓝色混合而成，颜色有三种表示方式：
第一种：直接使用英文单词进行表示 red green yellow
第二种：使用十六进制数字进行表示 #ffffff
第三种：使用RGB颜色值配置 rgb(255,0,0)
2.1.2. 标题标签
<h1>-<h6>标签用于定义标题。<h1>最大标题，<h6>最小标题。
标题标签可以自动换行，从h1到h6字体的大小依次变小的。
<h1>这是标题h1</h1>
<h2>这是标题h2</h2>
<h3>这是标题h3</h3>
<h4>这是标题h4</h4>
<h5>这是标题h5</h5>
<h6>这是标题h6</h6>
2.2. 排版标签
2.2.1. 水平线标签
<hr/>标签会生成一条水平线。
常用属性：
| 属性 | 作用 |
|---|---|
| align | 设置水平线对齐方式 可选值 left right center |
| size | 设置水平线的粗细，范围1-7 |
| width | 设置水平线长度，可以是绝对值或相对值。默认为100% |
| color | 设置水平线颜色，默认为黑色 |
2.2.2. 注释标签
在Java里面有三类注释：单行注释，多行注释，文档注释。
在html中注释 <!-- 注释的内容 -->，使内容不在html页面中进行显示。
2.2.3. 段落标签
<p>标签是段落标签，可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。
<p>标签常用属性：
align：用于设定对齐方式，可选值 left right center，默认值是left。
2.2.4. 换行标签
<br/>标签是换行标签。
因为浏览器会自动忽略空白和换行，因此<br/>标签成为了我们最常用的标签之一。
2.2.5. 特殊字符标签
实现空格的操作
2.2.6. pre，s，u，b，i标签
| 标签 | 作用 |
|---|---|
| pre | 原样输出 |
| s | 删除线 |
| u | 下划线 |
| b | 加粗 |
| i | 斜体 |
2.2.7. div和span
<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行：
<span> 元素是内联元素，可用作文本的容器，元素在一行进行显示：
2.3. 列表标签
2.3.1. 自定义列表标签
实现效果：
首先需要使用 <dl></dl>: 定义列表的范围
之后在dl标签里面 <dt></dt>: 定义上层内容
在dl标签里面 <dd></dd>: 定义下层内容
<dl>
<dt>XX公司</dt>
<dd>人事部门</dd>
<dd>Android部门</dd>
<dd>iOS部门</dd>
</dl>
2.3.2. 有序列表标签
实现效果：
使用<ol></ol>: 定义有序列表的范围
ol标签上面有属性 type：排序的方式，type属性里面的值可以是1,a,i
之后在ol标签里面：<li></li>: 封装具体的内容。
<ol>
<li>人事部门</li>
<li>Android部门</li>
<li>iOS部门</li>
</ol>
<ol type=”a”>
<li>人事部门</li>
<li>Android部门</li>
<li>iOS部门</li>
</ol>
<ol type=”i”>
<li>人事部门</li>
<li>Android部门</li>
<li>iOS部门</li>
</ol>
2.3.3. 无序列表标签
实现效果：
首先使用标签 <ul></ul>: 定义无序列表的范围
ul标签上面有属性 type：设置特殊符号
type属性里面的值 disc circle square
之后在ul标签里面： <li></li>: 封装具体的内容
<ul>
<li>人事部门</li>
<li>Android部门</li>
<li>iOS部门</li>
</ul>
<ul type=”square”>
<li>人事部门</li>
<li>Android部门</li>
<li>iOS部门</li>
</ul>
<ul type=”circle”>
<li>人事部门</li>
<li>Android部门</li>
<li>iOS部门</li>
</ul>
2.4. 图形标签
<img>是一个图片标签，用于在页面上引入图片。
格式：<img src="图片的路径名称">
常用属性：
| 属性 | 作用 |
|---|---|
| src | 用于设定要引入的图片的url |
| alt | 用于设定图像的替代文字 (1)鼠标移动到图片上面，稍等片刻出现文字 (2)如果图片找不到，显示alt的内容 (3)这个属性在某些浏览器不能显示的 |
| width | 用于设定图片的宽度 |
| height | 用于设定图片的高度 |
| border | 图片边框厚度 |
| align | 用于设定图片的对齐方式 |
2.5. 超链接标签
<a>标签用于定义超连接，用于从一个页面链接到另一个页面。
格式：<a href="链接到的地址">显示在页面上的内容</a>
常用属性：
| 属性 | 作用 |
|---|---|
| href | 用于设定链接指向页面的url |
| name | 用于设定锚的名称 |
| target | 用于设定在何处打开链接页面。在默认的情况下，打开方式在当前的页面打开。 target里面的值： _self，当前页面打开； _blank，在新标签页打开。 |
想要一个超链接没有效果，在href属性值写成#
2.6. 表格标签
操作技巧：
首先数表格里面有多少行，数每行里面有多少个单元格。
首先定义表格的范围：<table></table>
<table>中的属性：
| 属性 | 作用 |
|---|---|
| border | 设置表格线 |
| bordercolor | 设置表格线的颜色 |
| cellspacing | 设置单元格之间的距离 |
| cellpadding | 设置文字和单元格之间的距离 |
| width | 设置表格的宽度 |
| height | 设置表格的高度 |
| align | 设置表格的对齐方式 |
| bgcolor | 设置表格的背景颜色 |
在table标签里面表示行： <tr></tr> 包含一个或多个th或td元素
属性：
| 属性 | 作用 |
|---|---|
| align | 设置对齐方式：left center right |
| bgcolor | 设置表格中行的背景颜色 |
在tr标签里面表示列：<td></td>定义表格单元
属性：
| 属性 | 作用 |
|---|---|
| align | 用于设定单元格内容的对齐方式 |
| bgcolor | 用于设定单元格背景颜色 |
| height | 用于设定单元格的高度 |
| width | 用于设定单元格的宽度 |
| colspan | 用于设定列合并 |
| rowspan | 用于设定行合并 |
在tr标签里面也可以表示单元格：<th></th>用于定义表格的表头，表头的文字默认都是居中和加粗的效果。
合并单元格
是在td标签上面进行的操作，使用两个属性。
rowspan：跨行
代码 ：
<th rowspan="4">人员信息3人</th>colspan：跨列
代码 ：
<td colspan="3">统计信息3人</td>表格的标题标签用于定义表格标题
格式： <caption>标题内容</caption>
<caption>标签必须紧随<table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。
2.7. 表单标签
<form>标签代表一个表单，表单用于向服务器传输数据。
<form>标签能够包含<input>，可以是文本字段，复选框，单选框或提交按钮等。还可以包含<textarea> <select>等。
<form>常用属性:
| 属性 | 作用 |
|---|---|
| name | 用于定义表单的名称 |
| action | 用于规定提交表单时向何处发送表单数据 |
| method | 用于规定提交的方式。一般取值 POST或GET，在默认情况下，提交方式是get提交。 |
get提交方式会在地址栏携带数据，安全性很差
post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面
2.7.1. 输入项<input>
可以输入内容或者选择内容的地方，输入项需要写到form标签里面。
要求1：输入项里面必须要有name属性
要求2：在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值。
(1) 第一个：普通输入项
<input type="text"/>(2) 第二个：密码输入项
<input type="password"/>(3) 第三个：单选输入项
<input type="radio"/>** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
** 设置默认选中，使用属性 checked=”checked”
(4) 第四个：复选输入项
<input type="checkbox"/>** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
** 设置默认选中，使用属性 checked=”checked”
(5) 第五个：文件输入项，上传文件的。
<input type="file"/>(6) 第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上
<input type="hidden"/>(7) 第七个：普通按钮
<input type="button"/>(8) 第八个：submit表单提交
<input type=”submit”>定义提交按钮。提交按钮会把表单数据发送到服务器。
常用属性：
| 属性 | 解释 |
|---|---|
| name | 定义标签名称 |
| value | 按钮显示名称 |
(9) 第九个：reset表单重置
<input type=”reset”>定义重置按钮。重置按钮会清除表单中的所有数据。
常用属性：
| 属性 | 解释 |
|---|---|
| name | 定义标签名称 |
| value | 按钮显示名称 |
(10) 第十个：image图片按钮
<input type=”image”> 定义图像形式的提交按钮。这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。
常用属性：
| 属性 | 解释 |
|---|---|
| name | 定义标签名称 |
| src | 定义作为提交按钮显示的图像的url |
| alt | 定义作用图像的替代文本 |
下面两个输入项不是用input标签进行封装的
(11) 第十一个：下拉选择输入项
<select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>使用属性 selected=”selected” 默认选中
(12) 第十二个：文本域
<textarea cols="10" rows="5"></textarea>2.7.2. 表单案例
代码如下：
<html>
<head>
<title>html示例</title>
</head>
<body>
<h3>免费开通账号</h3>
<form method="get">
<table border="0" cellpadding="10">
<tr>
<td>注册邮箱：</td>
<td><input type="text" name="email" />
</td>
</tr>
<tr>
<td> </td>
<td>使用手机号或者账号注册</td>
</tr>
<tr>
<td>创建密码：</td>
<td><input type="password" name="password" />
</td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input type="text" name="realname" />
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input type="radio" name="sex" value="nv" />女 <input
type="radio" name="sex" value="nan" />男</td>
</tr>
<tr>
<td align="right">生日：</td>
<td><select name="year">
<option value="1945">1945</option>
<option value="1937">1937</option>
</select>年 <select name="month">
<option value="8">8</option>
<option value="7">7</option>
</select>月 <select name="day">
<option value="15">15</option>
<option value="7">7</option>
</select>日</td>
</tr>
<tr>
<td align="right">我现在：</td>
<td><select name="now">
<option value="study">上学</option>
<option value="work">工作</option>
</select></td>
</tr>
<tr>
<td> </td>
<td><img src="verycode.gif" /> <a href="#">看不清换一张</a>
</td>
</tr>
<tr>
<td align="right">验证码：</td>
<td><input type="text" name="code" />
</td>
</tr>
<tr>
<td> </td>
<td><input type="image" src="btn_reg.gif" />
</td>
</tr>
</table>
</form>
</body>
</html>
3. Web相关概念介绍
3.1. 动态资源和静态资源
(1) 静态资源：html+css+js
(2) 动态资源：数据是变化的
(3) 动态资源的开发技术：
*sun公司：jsp，servlet
*php
*asp
3.2. cs和bs结构
(1) c s ：客户端 服务器
常见应用：QQ、迅雷…
优点：需要在本地电脑安装软件，减轻服务器的压力
缺点：服务器如果升级，客户端软件也需要升级
(2) b s ：浏览器 服务器
常见的应用：网银、支付宝、12306…
优点：服务器如果升级，不需要升级
缺点：不需要安装软件，造成服务器的压力比较大
3.3. Web间的通信
在浏览器的地址栏输入地址http://www.baidu.com
把输入的域名转换成ip地址，通过ip地址+端口号进行访问。默认端口80
4. Web服务器介绍
4.1. 什么是服务器
硬件：一台配置高的电脑
软件：在电脑上安装服务器软件
4.2. 常见的web服务器
| 服务器名称 | 服务器介绍 |
|---|---|
| tomcat服务器 | 是Apache组织，开源的免费的服务器 |
| weblogic服务器 | BEA公司，收费的软件 |
| websphere服务器 | IBM公司，收费的软件 |
5. tomcat服务器的安装和目录结构
5.1. tomcat的安装
(1) 安装tomcat服务器有两种方式：
第一种方式使用exe文件进行安装；
第二种方式使用压缩文件进行安装（推荐）
(2) 检验tomcat安装成功
启动tomcat服务器，如果正常启动，tomcat安装成功了。
找到tomcat的bin目录，找到文件startup.bat文件，点击这个文件，启动tomcat服务器，出现一个黑窗口，在黑窗口里面出现ms，同时没有异常信息，表示tomcat启动成功了。
关闭tomcat服务器：直接关闭黑窗口；找到tomcat里面bin目录，找到文件shutd.bat文件，点击这个文件关闭tomcat服务器。
(3) 访问tomcat
tomcat的默认端口是8080；
使用ip地址+tomcat的端口号进行访问；
因为使用的本机，ip地址可以写：127.0.0.1或者localhost，如：http://127.0.0.1:8080，http://localhost:8080
5.2. tomcat问题的解决
(1) 安装tomcat时候前提条件：必须安装jdk，同时配置环境变量JAVA_HOME
没有配置环境变量，启动tomcat服务器，一闪就消失了;
查看错误：打开cmd窗口，进入到启动tomcat文件所在的路径，执行文件，看到错误信息
(2) 端口冲突的问题
java.net.BindException: Address already in use: JVM_Bind :8080
修改tomcat的启动端口:
找到tomcat的conf目录，找到server.xml文件，进行端口的修改
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />修改了tomcat的端口，重新启动tomcat服务器。
修改tomcat的启动端口为 80，访问时候不需要输入端口号了，直接通过ip地址进行访问。
5.3. tomcat的目录结构
| 目录 | 作用 |
|---|---|
| bin | 放tomcat启动和关闭的文件 |
| conf | 放tomcat文件（server.xml web.xml） |
| lib | 放jar包 |
| logs | 放tomcat的日志文件 |
| temp | 放临时文件 |
| webapps | 一个项目想要在tomcat里面运行，这个项目放到webapps里 |
| work | jsp就是servlet，最终会被编译成servlet，jsp编译成servlet放到这个目录 |
6. 发布项目到tomcat
6.1. 开放式项目部署
(1) 在tomcat里面webapps目录，把项目直接复制到这个目录下面
(2) 静态网站
在tomcat的webapps目录下创建文件夹，比如aa，在aa里面创建html文件
在浏览器的地址栏就可以访问到这个文件：http://127.0.0.1:端口号/创建的文件夹的名称/文件的名称
(3) 动态网站
如果想要在tomcat里面运行动态网站，必须要遵循一定的目录结构
结构：
website
WEB-INF(必须)
-- web.xml(必须)
-- classes(可选)
-- lib(可选)6.2. 配置虚拟路径
(1) 第一种方式配置虚拟路径
找到tomcat的conf目录里面server.xml，进行虚拟路径的配置。
写在Host标签里面：
<Context docBase="部署的项目所在的路径" path="访问的路径"></Context>
<Context docBase="I:\gaogao" path="/demo"></Context>访问：http://127.0.0.1/demo/hello.html
(2) 第二种方式配置虚拟路径
找到tomcat的conf，下面继续找\Catalina\localhost文件夹，在这个文件夹里面创建一个xml格式的文件，xml文件名称就是将来访问的主机名，进行虚拟路径的配置。
在创建的文件里面进行配置（使用Context，不需要写path属性）
创建gaogao.xml文件：
<?xml version="1.0"?>
<Context docBase="I:\gaogao"></Context>访问：使用创建的xml文件的名称作为访问的路径
http://127.0.0.1/gaogao/it.html
6.3. MyEclipse整合tomcat
6.3.1. 在myeclipse中整合tomcat
打开菜单栏Window->Preference
MyEclipse->Servers
配置tomcat路径
显示tomcat服务器窗口
6.3.2. 启动和停止tomcat
6.3.3. 在myeclipse把项目发布到tomcat
创建Web项目，部署之后，把web项目里面webroot里面的内容都放到tomcat的webapps目录下面，webroot变成项目的名称。
6.3.4. 在myeclipse中移除tomcat中的项目
6.3.5. 创建项目两个名称区别
上面的名称是项目显示名称；
下面的名称是部署到tomcat的webapps里面的名称（通过浏览器访问的名称）。
7. Http协议
7.1. http协议的简介
超文本传输协议(HTTP，HyperText Transfer Protocol)是互联网上应用最广泛的一种网络协议。
请求：在浏览器的地址栏输入一个地址，点击回车，这个过程就是一次请求。
响应：服务器根据发送的请求，把数据返回显示到浏览器的页面上，这个过程称为响应。
7.1.1. 什么是http协议
请求和响应遵循的数据格式。
7.1.2. http协议的特点
第一个：基于请求和响应的操作（先有请求，再有响应）
第二个：基于tcp协议，80端口
7.2. 用抓包工具查看http协议
httpwatch软件，通过这个软件查看当前请求和响应的数据格式（只能用在IE浏览器里面）。
在IE、火狐、谷歌浏览器里面都有自带调试工具，点击键盘上面F12，会在页面下面出现调试的工具。
浏览器自带工具使用(F12)：
7.3. http的请求的格式
html中提交form表单时候，get和post产生的http请求格式不一样：
http请求的格式有三部分组成：
(1) 请求行
(2) 请求头（key-value结构，一个key可以有一个或多个value）
(3) 请求体（携带提交的数据）
7.4. http的响应的格式
http响应的格式有三部分组成：
(1) 响应行
常见的状态码：
| 状态码 | 作用 |
|---|---|
| 200 | 请求成功 |
| 302 | 请求重定向 |
| 304 | 请求成功,查找本地缓存 |
| 404 | 请求资源找不到 |
| 500 | 服务器内部错误 |
(2) 响应头
结构：key-value形式，一个key对应一个value，一个key对应多个value
重要头信息：
Location：重定向操作
Refresh：页面的定时跳转
Content-Disposition：文件下载(3) 响应体
在页面中显示的内容
扫一扫
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
