WWW是环球信息网的缩写，(亦作“Web”、“WWW”、“'W3'”，英文全称为“World Wide Web”)，中文名字为“万维网”，"环球网"等，常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让Web客户端(常用浏览器)访问浏览Web服务器上的页面。 是一个由许多互相链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”(URI)标识；这些资源通过超文本传输协议(Hypertext Transfer Protocol)传送给用户，而后者通过点击链接来获得资源。万维网联盟(英语：World Wide Web Consortium，简称W3C)，又称W3C理事会。1994年10月在麻省理工学院(MIT)计算机科学实验室成立。万维网联盟的创建者是万维网的发明者蒂姆·伯纳斯-李。万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是靠着互联网运行的一项服务。
-----------------------------------------------------------------------
在浏览器中输入一个地址时，比如www.sunhaojie.com，浏览器会呈现出一个界面，在打开的页面上右键->查看页面源代码，我们会看到被"<>"填满的文本文档，然后再次右键->另存为保存到本地，这是一个后缀为html的文本文档，当我们用文本编辑器(记事本,notepad,ultraedit)等打开时，是一个充满各种"<>"的文件，这个文档被称为html文档，服务器根据地址查找对应的文档并返回给浏览器做展示。Java目前的主流方向就是做服务器端的开发，为了更好的开发Java web开发应用，我们需要对Java web相关的知识进行介绍，本章介绍一下HTML。
HTML是标记语言，所有的元素会被标签"<>"包裹。国际惯例，写第一个程序，输出"Hello World"。eclipse不是一个专业的html开发工具，但是也能支持，为了方便，我们不引入新的开发工具，仍然使用eclipse开发html界面。创建一个web工程：New->Dynamic Web Project输入工程名learntestweb(也可以自己变更名称)，后面都Next就好了，注意在最后一个页面勾选"Generate web.xml deployment descriptor"。WebContent目录下New->Html File，输入文件名称helloworld.html，会生成一个HTML文件在其中title标签中修改为"这是第一个HTML文件"，body中添加"Hello World！"；然后选中文件右键：Open With->Web Browser，就会显示出来Hello World!了，当然也可以使用IE/Chrome等打开，在文件夹中找到对应文件，使用IE/Chrome打开就好了。代码如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>这是第一个HTML文件</title>
</head>
<body>
<!-- 这里是注释 -->
Hello World！
</body>
</html> “<!DOCTYPE html>”这句代码是为了声明一下文档的类型，存在多种定义方法，这里不一一列举了，因为不声明也可以正常使用。后面的代码就是Html文档的正式内容了，认真观察，我们会发现所有的字符都是在"<"和">"之间或者在一对"<></>"之间，这是标签语言的特点。另外所有的标签是成"<></>"对出现的，比如"<html></html>","<title></title>"等，当然也存在一种简单写法"<xxx />",这种写法是因为在"<>"和"</>"之间没有文字所以可以这样简写，比如"<meta charset="UTF-8" />"。在“<>”和“</>”之间称为内容或者文本，比如"<title>这是第一个HTML文件</title>"内容为"这是第一个HTML文件"，“<meta charset="UTF-8" />”中的charset称为属性。下面详细介绍一下上面代码出现的标签作用：
html:表示这是一个html文档，所有的内容应该在这个标签之内。
head:文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
title:定义文档的标题，它是 head 部分中唯一必需的元素。
meta :标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
body:定义文档的主体。包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
我们再演示一些简单的展示型标签，代码如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>普通展示标签</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<span>标签被用来组合文档中的行内元素。
不能换行</span>
<div>
是一个块级元素。这意味着它的内容自动地开始一个新行。
实际上，换行是 div固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。
可以换行。
</div>
<div>
这里可以嵌套标签
<span>嵌套span</span>换行br<br/>
<fontcolor="red"size="24">文字描述</font>
<labelstyle="color:green">label标签</label>
<i>斜体</i>
<b>加黑</b>
<ahref="http://www.sunhaojie.com">跳转到孙豪杰的博客</a><br/>
<ahref="http://www.sunhaojie.com"target="blank">新窗口跳转到孙豪杰的博客</a><br>
<imgalt="远程图片"src="http://haojieblog-wordpress.stor.sinaapp.com/uploads/2016/02/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1.jpg"/>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
</div>
</body>
</html> h1-h6:定义标题
span:用来组合文档中的行内元素。不会换行
div:是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。可以换行。div中可以包含大多数标签。
br:换行标签
font:规定文本字体、大小和颜色。
i:显示斜体文本效果。
b:规定粗体文本。
a:定义超链接，用于从一张页面链接到另一张页面。最重要的属性是 href 属性，它指示链接的目标。点击示例中的"跳转到孙豪杰的博客"当前窗口跳转到www.sunhaojie.com，点击示例中的"新窗口跳转到孙豪杰的博客"会在新窗口打开"www.sunhaojie.com"，这是“target="blank"”的作用。这个标签是很重要的标签。
img:图片标签，可以显示src属性表示链接的图片，alt属性值是在图片不展示时显示的文字。
ul:定义无序列表
ol:定义有序列表
li:定义列表项目
表格性的数据在页面上同样可以展示，比如，学生信息，如下图所示：
实现代码如下:
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>学生信息表</title>
</head>
<body>
<divalign="center">
<h2>学生信息表</h2>
<tableborder="1"width="50%">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>手机号</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>1999-01-28</td>
<td>13813813800</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>女</td>
<td>1999-02-28</td>
<td>13813813802</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>男</td>
<td>1999-03-28</td>
<td>13813813803</td>
</tr>
<tr>
<td>004</td>
<td>郑六</td>
<td>男</td>
<td>1999-04-28</td>
<td>13813813804</td>
</tr>
</table>
</div>
</body>
</html> div标签align属性值为 center，表示div中的内容居中对齐，很多标签都有align，值有三种left,center,right分别为居左，居中和居右对齐。
table:表示这是一个html表格
tr:表示表格中的一行
th:表头单元格，内部的文本通常会呈现为居中的粗体文本
td:普通单元格，内部的文本通常是左对齐的普通文本
表格中还有几个比较常用的知识：
列宽度：上面的代码列宽度是相同的，但是大部分字段需要的长度是不相同的，所以我们可以通过修改首行中各个单元格所占比例确定每列的宽度。
如下示例:
<tr>
<thwidth="10%">学号</th>
<thwidth="15%">姓名</th>
<thwidth="10%">性别</th>
<thwidth="20%">生日</th>
<thwidth="45%">手机号</th>
</tr> 在th或者td上添加属性width值为该列的宽度，可以通过百分比和实际值确定，一般采用百分比的设置方式。
合并单元格:行内多个单元格值相同，可以做合并展示，如下示例：
<tr>
<td>004</td>
<td>郑六</td>
<td>男</td>
<tdcolspan="2">13813813804</td>
</tr> 删除不需要的td，在需要合并的td上添加colspan值为删除td的个数。
前面介绍的都是展示性的标签，客户只能看不能做操作，纯展示的网站基本没有了，大部分的网站支持用户通过界面向服务器提交信息，常用的注册登陆，评论等等。HTML使用表单(form)支持客户提交，下面我们了解一下常用的表单元素，示例如下:
代码如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Form表单</title>
</head>
<body>
<divalign="center">
<h1>学生信息提交</h1>
<formaction="#"method="post">
<label>姓名:</label> <inputtype="text"name="name"/><br/>
<label>性别:</label><inputtype="radio"name="sex"value="male"/> 男 <inputtype="radio"name="sex"value="female"/> 女 <br/>
<label>出生日期:</label>
<selectname="year">
<optionselected="selected">----年----</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
</select>
<selectname="month">
<optionselected="selected">----月----</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<selectname="day">
<optionselected="selected">----日----</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<br/>
<label>兴趣爱好:</label>
<inputtype="checkbox"name="hobby"value="basketball"/>篮球
<inputtype="checkbox"name="hobby"value="football"/>足球
<inputtype="checkbox"name="hobby"value="swim"/>游泳
<br/>
<label>初始密码:</label><inputtype="password"name="password"/><br/>
<label>上传头像:</label><inputtype="file"name="img"/><br/>
<label>自我介绍:</label><textarearows="5"cols="20"name="info"></textarea><br/>
<inputtype="reset"value="重置"/> <inputtype="submit"value="提交"/> <inputtype="button"value="按钮"/>
</form>
</div>
</body>
</html> form标签用于为用户输入创建 HTML 表单。能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。用于向服务器传输数据。比较重要的两个属性action,method，其中action为必选，表示表单数据提交到该网址。method是提交的方法，可以为get和post方式，其中上传文件时必选为post方法。
label:input 元素定义标注,元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
input:用户信息输入。不同的type不同的展现形式，默认text为普通文本输入。value属性为文本的值。name属性为必选，提交到后台的内容为属性name的值和value值的键值对。比如"<input type="key" name="value"/>",form提交的数据中该input为key=value
type=text:普通文本
type=password:密码文本，字符内容不显示
type=radion:单选框，name属性相同的一组单选框只能有一个被选中。
type=file:文件上传输入框。
type=button:按钮
type=reset:清空表单中所有输入框的值
type=submit:提交表单
select:可创建单选或多选菜单。
option:定义列表中的可用选项。selected是否选中，值可以为"selected，默认不选中。
textarea:定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体(通常是 Courier)。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
上面的示例没有做对齐，即便是程序员出品也太丑了，所以我们可以用table一下对齐。示例如下:
示例代码如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Form表单</title>
</head>
<body>
<divalign="center">
<h1>学生信息提交</h1>
<formaction="#"method="post">
<tableborder="1">
<tr>
<tdalign="right"width="30%"><labelfor="nameTextId">姓名:</label></td>
<tdalign="left"><inputtype="text"name="name"id="nameTextId"/></td>
</tr>
<tr>
<tdalign="right"><label>性别:</label></td>
<tdalign="left"><inputtype="radio"name="sex"value="male"/> 男 <inputtype="radio"name="sex"value="female"/> 女 </td>
</tr>
<tr>
<tdalign="right"><label>出生日期:</label></td>
<tdalign="left">
<selectname="year">
<optionselected="selected">----年----</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
</select>
<selectname="month">
<optionselected="selected">----月----</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<selectname="day">
<optionselected="selected">----日----</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<tdalign="right"><label>兴趣爱好:</label></td>
<tdalign="left">
<inputtype="checkbox"name="hobby"value="basketball"/>篮球
<inputtype="checkbox"name="hobby"value="football"/>足球
<inputtype="checkbox"name="hobby"value="swim"/>游泳
</td>
</tr>
<tr>
<tdalign="right"><label>初始密码:</label></td>
<tdalign="left"><inputtype="password"name="password"/></td>
</tr>
<tr>
<tdalign="right"><label>上传头像:</label></td>
<tdalign="left"><inputtype="file"name="img"/></td>
</tr>
<tr>
<tdalign="right"><label>自我介绍:</label></td>
<tdalign="left"><textarearows="5"cols="20"name="info"></textarea></td>
</tr>
<tr>
<tdalign="center"colspan="2">
<inputtype="reset"value="重置"/> <inputtype="submit"value="提交"/> <inputtype="button"value="按钮"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html> 是不是好了一些，但是还是一个测试界面，距离让真正的用户还需要很多改善。网页界面一般会有网页设计师开发，程序员在开发好的静态界面上做动态扩展，所以也需要学习html语言，会一些简单的开发和修改。另外很多小公司没有专业的网页设计师，程序员会在一些基础上(就是扒别人做好的网页)做开发和变更，因此作为一个Java工程师有必要学习一下HTML基础开发。