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打开就好了。代码如下:

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>这是第一个HTML文件</title>
</head>
<body>
<!– 这里是注释 –>
Hello World!
</body>
</html>
[/code]

“<!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:定义文档的主体。包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

我们再演示一些简单的展示型标签,代码如下:

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="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/>
<font color="red" size="24">文字描述</font>
<label style="color:green">label标签</label>
<i>斜体</i>
<b>加黑</b>
<a href="http://www.sunhaojie.com">跳转到孙豪杰的博客</a><br/>
<a href="http://www.sunhaojie.com" target="blank">新窗口跳转到孙豪杰的博客</a><br>

<img alt="远程图片" src="http://www.sunhaojie.com/wp-content/uploads/2016/02/html.jpg" />
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
</div>
</body>
</html>
[/code]

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:定义列表项目

表格性的数据在页面上同样可以展示,比如,学生信息,如下图所示:

学生信息table

实现代码如下:

[code lang=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生信息表</title>
</head>
<body>
<div align="center">
<h2>学生信息表</h2>
<table border="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>
[/code]

div标签align属性值为 center,表示div中的内容居中对齐,很多标签都有align,值有三种left,center,right分别为居左,居中和居右对齐。
table:表示这是一个html表格
tr:表示表格中的一行
th:表头单元格,内部的文本通常会呈现为居中的粗体文本
td:普通单元格,内部的文本通常是左对齐的普通文本
表格中还有几个比较常用的知识:
列宽度:上面的代码列宽度是相同的,但是大部分字段需要的长度是不相同的,所以我们可以通过修改首行中各个单元格所占比例确定每列的宽度。
如下示例:

[code lang=”html”]
<tr>
<th width="10%">学号</th>
<th width="15%">姓名</th>
<th width="10%">性别</th>
<th width="20%">生日</th>
<th width="45%">手机号</th>
</tr>
[/code]

在th或者td上添加属性width值为该列的宽度,可以通过百分比和实际值确定,一般采用百分比的设置方式。
合并单元格:行内多个单元格值相同,可以做合并展示,如下示例:

[code lang=”html”]
<tr>
<td>004</td>
<td>郑六</td>
<td>男</td>
<td colspan="2">13813813804</td>
</tr>
[/code]

删除不需要的td,在需要合并的td上添加colspan值为删除td的个数。

前面介绍的都是展示性的标签,客户只能看不能做操作,纯展示的网站基本没有了,大部分的网站支持用户通过界面向服务器提交信息,常用的注册登陆,评论等等。HTML使用表单(form)支持客户提交,下面我们了解一下常用的表单元素,示例如下:

学生信息form1

代码如下:

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form表单</title>
</head>
<body>
<div align="center">
<h1>学生信息提交</h1>
<form action="#" method="post">
<label>姓名:</label> <input type="text" name="name"/><br />
<label>性别:</label><input type="radio" name="sex" value="male" /> 男 <input type="radio" name="sex" value="female" /> 女 <br />
<label>出生日期:</label>
<select name="year">
<option selected="selected">—-年—-</option>
<option >1990</option>
<option >1991</option>
<option >1992</option>
<option >1993</option>
<option >1994</option>
</select>
<select name="month">
<option selected="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>
<select name="day">
<option selected="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>
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="swim" />游泳
<br />
<label>初始密码:</label><input type="password" name="password"/><br />
<label>上传头像:</label><input type="file" name="img" /><br />
<label>自我介绍:</label><textarea rows="5" cols="20" name="info"></textarea><br />
<input type="reset" value="重置"/> <input type="submit" value="提交" /> <input type="button" value="按钮" />
</form>
</div>
</body>
</html>
[/code]

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一下对齐。示例如下:

学生信息form2

示例代码如下:

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form表单</title>
</head>
<body>
<div align="center">
<h1>学生信息提交</h1>
<form action="#" method="post">
<table border="1">
<tr>
<td align="right" width="30%"><label for="nameTextId">姓名:</label></td>
<td align="left"><input type="text" name="name" id="nameTextId"/></td>
</tr>
<tr>
<td align="right"><label>性别:</label></td>
<td align="left"><input type="radio" name="sex" value="male" /> 男 <input type="radio" name="sex" value="female" /> 女 </td>
</tr>
<tr>
<td align="right"><label>出生日期:</label></td>
<td align="left">
<select name="year">
<option selected="selected">—-年—-</option>
<option >1990</option>
<option >1991</option>
<option >1992</option>
<option >1993</option>
<option >1994</option>
</select>
<select name="month">
<option selected="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>
<select name="day">
<option selected="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>
<td align="right"><label>兴趣爱好:</label></td>
<td align="left">
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="swim" />游泳
</td>
</tr>
<tr>
<td align="right"><label>初始密码:</label></td>
<td align="left"><input type="password" name="password"/></td>
</tr>
<tr>
<td align="right"><label>上传头像:</label></td>
<td align="left"><input type="file" name="img" /></td>
</tr>
<tr>
<td align="right"><label>自我介绍:</label></td>
<td align="left"><textarea rows="5" cols="20" name="info"></textarea></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="reset" value="重置"/> <input type="submit" value="提交" /> <input type="button" value="按钮" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
[/code]

是不是好了一些,但是还是一个测试界面,距离让真正的用户还需要很多改善。网页界面一般会有网页设计师开发,程序员在开发好的静态界面上做动态扩展,所以也需要学习html语言,会一些简单的开发和修改。另外很多小公司没有专业的网页设计师,程序员会在一些基础上(就是扒别人做好的网页)做开发和变更,因此作为一个Java工程师有必要学习一下HTML基础开发。

小练习:
做一个你心目中比较好的注册登录界面。