技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> Java --> [JavaWeb教程]第一章-HTML简明开发教程

[JavaWeb教程]第一章-HTML简明开发教程

浏览:1133次  出处信息

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

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

学生信息table

实现代码如下:

<!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)支持客户提交，下面我们了解一下常用的表单元素，示例如下:

学生信息form1

代码如下:

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

学生信息form2

示例代码如下:

<!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基础开发。

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

建议继续学习：

  1. Ruby 解析 HTML (Nokogiri)    (阅读：3862)
  2. HTML5是什么东东 我们为什么要关注    (阅读：3803)
  3. HTML页面布局基础    (阅读：3575)
  4. 剖析Network、Internet与Web的中文释义    (阅读：3409)
  5. 为什么不压缩 HTML    (阅读：3361)
  6. HTML优化    (阅读：3008)
  7. Ajax和WEB服务数据格式：XML SOAP HTML    (阅读：2908)
  8. 在HTML中获取正确的URL属性值    (阅读：2876)
  9. 自己实现的简单的html元素选择器，类似jquery选择器，比jquery选择器还要快！    (阅读：2786)
  10. 从HTML 2.0到HTML5    (阅读：2777)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：JAVA虚拟机简介
后一篇：[JavaWeb教程]第二章-jQuery简明开发教程 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1