之前写的东西都是关于 Java 的，最主要都是一些 Java 的核心语法或知识点，但是做 Java Web 开发的话，因为是要做出一个网站，所以那就必须要有展示信息的页面，那应该用什么展示呢?那就是超文本标记语言 HTML 了。
1.HTML介绍
HTML 是超文本标记语言，简单点说就是它其中的每个元素都代表着某些特殊含义，比如标签a，就代表一个超链接，当我们点击这个超链接的时候，页面就会跳转到指定的页面上， HTML 语言就是由一个一个这样的标签组成的。
2.常见标签
下面对于一些常见的标签进行简单地说明一下吧
2.1 字体标签
<font 属性名="属性值">内容</font>
font 标签就是用来设置关于字体的一些属性的，通过属性名和属性值这样类似于键值对的形式来进行设置，关于字体的属性，那当然就是字体颜色、字体大小和字体类型了，其实一般写网页的时候都是在集成开发工具中开发，因此就像我们在 Eclipse 中写 Java 程序一样，都会有很完善的提示，因此不必去死记哪个标签有哪些属性以及属性值，只要在不清楚的时候及时使用提示工具就好了。
2.2 格式化标签
换行：<br/>
段落：<p></p>
标题：<h1></h1>
空格：
注释：<!—注释内容-->
其实标签的话重点还是在于要多使用，用的多了也就熟悉了。
2.3 图片标签
<img src="" />
这个标签便是在引用图片时使用，src指向的是图片的路径，可以是绝对路径，也可以是相对路径，个人感觉使用相对路径好一点，因为如果将项目上传到服务器的话，使用绝对路径中的盘符在服务器中肯定是找不到的，到时候就还是需要修改，这样还不如直接最开始就使用相对路径。图片标签中还有比如 alt 这样的属性，是用来设置当页面中的图片没有加载出来的时候，在图片的位置显示的文本。
2.4 列表标签
列表分为有序列表和无序列表，有序列表的话它其中的每一个列表项可以带有1、2、3这样的序号，而无序列表是没有这样的有序序号的。
有序列表：
<ol>
<li>家用电器</li>
<li>医疗保健</li>
</ol>
无序列表：
<ul>
<li>家用电器</li>
<li>医疗保健</li>
</ul>
2.5 超链接标签
<a href=”http://www.baidu.com”>百度一下</a>
超链接标签中用 href 来指定该链接应该跳转的路径，其实这个属性值也可以是一个图片的路径，这样点击这个链接就会跳转到图片，其实实际生活中就可以看到这种应用，比如点击小图看大图，当然a标签之中的文本也可以使用一个图片标签，这样就是在点击图片的时候跳转到指定链接，实际生活中的一些按钮就是的，其实是一张很像按钮的图片。
2.6 表格标签
<table border="1" width="50%" align=”center”>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>Tom</td>
<td>18</td>
<td>male</td>
</tr>
</table>
其中 table 就是表示这是一个表格，tr就是表示一行，td就是表示一个单元格，其实表格中还有一个元素，那就是 th,它表示的意思也是一个单元格，不过是放在表头那一行的，其实它的作用就是比一般的单元格的字显示加粗并且字体变大，所以一般会将它用在表格的第一行里面。
表格的使用中还有比较重要的一点就是合并单元格：
合并列单元格：colspan
合并行单元格：rowspan
合并单元格的过程，就使用合并列单元格来说明吧，比如我要合并两列，其实就是让第一个单元格占据两个单元格的位置，因为每个单元格都有一个 colspan 属性，所以就在第一个单元格中将这个属性设置为 2，然后将这个单元格后面的单元格删除掉就好了，因为有一个单元格要占据两个位置嘛，如果不删除那就会和前一行和后一行不对齐了。整个过程就是这样了；那如果要合并的两个单元格是在两行，也就是说我们要的效果就是一个单元格跨两行，那和上面的逻辑一样，因为每个单元格元素也都有一个 rowspan 属性，因此就应该将第一个单元格的该属性设置为 2，而将第二个单元格删除就好了。
2.7 块标签
<span></span>
<div></div>
这个就主要是 span 和 div 这两个标签元素了， span 标签是在一行中定义一块，其中有多少内容，就会占据多大空间，而且此标签是不会自动换行的，而 div 标签则是定义一块，而且默认占满一行，同时也会自动换行。其实这两个元素的这些特点是可以进行转化的，就是每个元素都会有一个 display 属性，可以设置这个属性来设置某个标签是行级元素还是块级元素，属性值为 inline 那就是行级元素了，而属性值为 block 那就是块级元素了。
3.表单
其实我觉得对于 Java程序员来说，与 HTML 相关的重点那就是表单了，因为在进行 Java Web 开发的时候， Java 代码负责后台逻辑，而前台就是用于与用户进行交互了，其中最基本的功能增加和修改也就需要借助于表单了，录入信息的时候是提交表单中的数据进行保存，修改的时候是先将数据在表单中展示出来，然后在表单中修改数据再进行一次保存，因此表单以及表单中的元素还是需要掌握的。
3.1 输入项标签
用户名输入框、密码输入框、单选框和多选框等都是输入框，输入框的标签样式是 <input />,而要表示这么多种类型的输入框就是由输入框其中的一个属性决定的，那就是 type 属性，它的取值就是设置该标签的种类，列在下面：
text:文本框。 默认
password:密码框。 内容为非明文
radio:单选框。 在同一组内有单选效果
checkbox:复选框。 在同一组内有复选效果
submit:提交按钮。用于控制表单提交数据
reset:重置按钮。 用于将表单输入项恢复到默认状态
file:附件框。用于文件上传。
hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。
button:普通按钮。需要和JS事件一起用
还想说一下单选框和复选框，单选框应该是互斥的，所以应该将每个选项都包含在一个组中，怎么做呢？那就是使用 name 属性了，然后将每一个 name 属性的属性值都取一样的，就说明这些选项是在同一个组里面了。
<input type="radio" name="sex" value="boy" />男
<input type="radio" name="sex" value="girl" />女
复选框的选项不用说明它们是互斥的，但在提交的时候也要说明它们是在同一个组里面，那做法就和上面的一样了。
<input type="checkbox" name="like" value="code" />编程
<input type="checkbox" name="like" value="swim" />游泳
<input type="checkbox" name="like" value="read" />阅读
3.2 下拉选择框标签
<select name="city">
<option value="1">北京</option>
<option value="2">深圳</option>
<option value="3">武汉</option>
</select>
这个主要就是记住格式了，里面的每一个选项都是一个 option 标签，因为下拉选择框一般都是选择一个的，如果有需求要选择多个的话那就需要在 select 标签中加一个 multiple 属性了，multiple="multiple" 就可以达到效果了。
3.3 文本域标签
当我们需要输入的文字较多的时候，input 输入框那就不够用了，因为需要输入的文字有可能是一大段文字，那么在这种时候就需要使用文本域标签 <textarea></textarea> 了。
<textarea name="description" rows="10" cols="60">我想描述一下我自己</textarea>
3.4 表单标签
上面介绍的都是可以放在表单标签中的元素标签，那表单标签又是什么呢？就是 <form></form> ,这里需要说明一下的就是它的两个属性 action 和 method, action 属性中的属性值就是我们这个表单应该要提交到哪里的路径， method 属性的属性值就是我们提交这个表单采用的方式，这个属性的取值只有两个：get 和 post， get 方式提交的特点是会将提交的数据都连接到 url 上，并且提交的数据也是有限制的，由于提交的时候全部的数据都直接连接在 url 之中，因此相对来说是不那么安全的，而 post 方式的提交则是将要提交的数据放在请求的数据体中，因此提交的数据大小是没有限制的，并且因为提交的数据没有直接连接到 url 中，因此相对来说是安全的。
<form action="提交的路径" method="提交的方式">
</form>
还需要注意的一点就是当我们点击提交的时候，如果采用的是 get 方式进行提交，那么提交的数据会像 ?password=123&username=zhangsan 这样连接到 url 之中，即使是使用的 post 方式进行提交，在提交的数据体之中，数据也会像这样连接，只是我们在 url 中看不到罢了，那这里的 password 和 username 是从哪里来的呢？放心吧，浏览器是不会看到你的 input 中的 type 属性是 password 就在上传数据的时候知道该属性应该是 password 的，现在的技术还没有那么智能，那这里的这些相当于键值对的键和值是从哪里来的呢？答案就是每一个输入框都有一个 name 属性，那键值对的键就是这 name 属性的属性值，而用户在该输入框输入的数据就是这键值对里面的值了，因此提交的数据就是这么来的了，其实像下拉选择框和文本域也都是这样的，那要是忘记写 name 属性了呢？那在提交的时候就会忽略这个输入框了，因为浏览器也确实不知道它的存在啊。需要牢记的是标签中的 name 属性是与后台服务器交互的，而标签中的 id 属性则是与前台的 JavaScript 代码进行交互的。
4.URL编码
不知道大家想过一个问题没有，那就是提交的数据是以键值对的形式提交的，而键值对之间是以 & 分割的，那如果我在表单获取数据的输入框中也输入了 & 呢？那不就是会出错了啊，但是我们在实际的生活中，为了QQ的密码更安全，有时候说不定也会使用 & 这样的字符啊，但还是没出错啊，那这是为什么呢？
原因就是在提交的过程中浏览器会对特殊的字符进行编码，这就是 URL 编码了,它是怎么做的呢？比如说 & 这个字符，因为我的页面编码是 utf-8,因此它就会将 & 字符转换为 %26 这样的字符了，当然也就避免了我们上面的那个问题了，其实这个说的特殊字符也会包括中文，那中文是如何编码的呢？
比如说中文中的 你好 这两个字，它的编码过程是怎样的呢？首先我们页面已经设定为 utf-8 编码了，因此它会先解析为字节数组 [-28, -67, -96, -27, -91, -67],这数组中的每一个数字都是十进制的，然后就还需要将它们依次转换为16进制的，也就是 [E4,BD,A0,E5,A5,BD],得到这个数组之后再使用 % 将数组中的每一个数连起来，就是 %E4%BD%A0%E5%A5%BD,这也就是我们最后的编码所得了。
5。总结
其实关于 HTML 中最重要的内容，感觉还是表单，其实上面很多东西都是围绕表单来写的，因此掌握表单才是关键，其它的内容可以再去了解和需要使用的时候再去查询。这是第一篇关于 Java Web 的文章，其实写的真的蛮认真的，就像这样一直努力下去吧，只有不断地努力学习，才会有积累的过程，积累的越来越多，开发起来也就会越来越简单，学起新东西来也会更快。
