本文介绍了HTML的基础概念及其作用，并通过实例展示了如何使用HTML标签构建一个简单的图书商城网站页面，包括头部、菜单、搜索框、内容区及底部等部分。
暑假待在学校，开始学Java Web,一点一滴记录成长……
Java Web 简单地说就是网站开发
Java Web的学习内容可以用一张图来表示
Java Web之Html
1.什么是html?
1、Html是用来描述网页的一种语言。
2、HTML 指的是超文本标记语言 (Hyper Text Markup Language)
3、HTML 不是一种编程语言，而是一种标记语言 (markup language)
4、标记语言是一套标记标签 (markup tag)
5、HTML 使用标记标签来描述网页
2.Html的作用？
Web浏览器的作用是读取html文档，并以网页的形式显示它们。浏览器不会显示html标签，而是使用标签来解释页面上的内容.
简单说，html就是用于展示信息的。
就像画一幅水彩画，我们要先用彩色笔把简笔画涂上颜色，标签就是颜料，我们看到的就是一幅五颜六色的图画。
HTML的标签可用一幅图来表示
案例分析
基本标签
相关代码
<!DOCTYPE html>
<html>
<head>
<title>图书商城 </title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!-- 整个页面 -->
<div id="page">
<!--top -->
<div id="top">
<table>
<tr>
<td width="75%">
<img alt="logo" src="images/logo.png">
</td>
<td>
<img alt="cart" src="images/cart.gif">
<a href="#">购物车</a>|
<a href="#">帮助中心</a>|
<a href="#">我的账户</a>|
<a href="#">新用户注册</a>|
</td>
</tr>
</table>
</div>
<!-- menu -->
<div id="menu">
<table width="100%" bgcolor="#1C3F09">
<tr >
<td align="center">
<a href="#"><font color="ffffff">文学</font></a>
<a href="#"><font color="ffffff">生活</font></a>
<a href="#"><font color="ffffff">计算机</font></a>
<a href="#"><font color="ffffff">外语</font></a>
<a href="#"><font color="ffffff">生活</font></a>
<a href="#"><font color="ffffff">经管</font></a>
<a href="#"><font color="ffffff">社科</font></a>
<a href="#"><font color="ffffff">学术</font></a>
<a href="#"><font color="ffffff">少儿</font></a>
<a href="#"><font color="ffffff">艺术</font></a>
<a href="#"><font color="ffffff">原版</font></a>
<a href="#"><font color="ffffff">科技</font></a>
<a href="#"><font color="ffffff">考试</font></a>
<a href="#"><font color="ffffff">生活百科</font></a>
<a href="#"><font color="yellow">全部商品目录</font></a>
</td>
</tr>
</table>
</div>
<!-- search -->
<div id="search">
<table width="100%" bgcolor="#B6B684">
<tr>
<td align="right">
search
<input type="text">
<input type="button" value="搜索">
</td>
</tr>
</table>
</div>
<!-- content -->
<div id="content">
<div align="right">
首页 > 旅游 > 图书列表
</div>
<h1>商品目录</h1>
<hr/>
<h1>计算机类</h1>
<span>共xxx种商品</span>
<hr/>
<div>
<img alt="productlist" src="images/productlist.gif" width="100%">
</div>
<table width="100%" >
<tr>
<td>
<div>
<img alt="book" src="bookcover/101.jpg">
</div>
<div>
<span>书名:xxx</span><br/>
<span>售价:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/102.jpg">
</div>
<div>
<span>书名:xxx</span><br/>
<span>售价:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/103.jpg">
</div>
<div>
<span>书名:xxx</span><br/>
<span>售价:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/104.jpg">
</div>
<div>
<span>书名:xxx</span><br/>
<span>售价:xxx</span>
</div>
</td>
</tr>
<tr>
<td>
<div>
<img alt="book" src="bookcover/105.jpg">
</div>
<div>
<span>书名:xxx</span><br/>
<span>售价:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/106.jpg">
</div>
<div>
<span>书名:xxx</span><br/>
<span>售价:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/107.jpg">
</div>
<div>
<span>书名:xxx</span><br/>
<span>售价:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/108.jpg"width="130" height="197">
</div>
<div>
<span>书名:xxx</span><br/>
<span>售价:xxx</span>
</div>
</td>
</tr>
</table>
</div>
<!-- bottom -->
<div id="bottom">
<table width="100%" bgcolor="#EFEEDC">
<tr>
<td rowspan="2">
<img alt="logo" src="images/logo.png">
</td>
<td >
CONTACT US
</td>
</tr>
<tr>
<td >
copyright 2008 © BookStore All Rights RESERVED
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
表单标签
<!DOCTYPE html>
<html>
<head>
<title>图书商城注册 </title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!-- 整个页面 -->
<div id="page">
<!--top -->
<div id="top">
<table>
<tr>
<td width="75%">
<img alt="logo" src="images/logo.png">
</td>
<td>
<img alt="cart" src="images/cart.gif">
<a href="#">购物车</a>|
<a href="#">帮助中心</a>|
<a href="#">我的账户</a>|
<a href="#">新用户注册</a>|
</td>
</tr>
</table>
</div>
<!-- menu -->
<div id="menu">
<table width="100%" bgcolor="#1C3F09">
<tr >
<td align="center">
<a href="#"><font color="ffffff">文学</font></a>
<a href="#"><font color="ffffff">生活</font></a>
<a href="#"><font color="ffffff">计算机</font></a>
<a href="#"><font color="ffffff">外语</font></a>
<a href="#"><font color="ffffff">生活</font></a>
<a href="#"><font color="ffffff">经管</font></a>
<a href="#"><font color="ffffff">社科</font></a>
<a href="#"><font color="ffffff">学术</font></a>
<a href="#"><font color="ffffff">少儿</font></a>
<a href="#"><font color="ffffff">艺术</font></a>
<a href="#"><font color="ffffff">原版</font></a>
<a href="#"><font color="ffffff">科技</font></a>
<a href="#"><font color="ffffff">考试</font></a>
<a href="#"><font color="ffffff">生活百科</font></a>
<a href="#"><font color="yellow">全部商品目录</font></a>
</td>
</tr>
</table>
</div>
<!-- search -->
<div id="search">
<table width="100%" bgcolor="#B6B684">
<tr>
<td align="right">
search
<input type="text">
<input type="button" value="搜索">
</td>
</tr>
</table>
</div>
<!-- content -->
<div id="content">
<form action="#" method="post">
<table width="850px" bgcolor="#fcfdef" align="center">
<tr>
<td>
<h1>新会员注册</h1>
<table width="70%" align="center">
<tr>
<td >会员邮箱:</td>
<td ><input type="text" name="email" ></td>
<td ><font color="#999999">请输入有效的邮箱地址</font></td>
</tr>
<tr>
<td>会员名</td>
<td><input type="text" name="username" ></td> <td><font color="#999999">用户名至少六位</font></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
<td><font color="#999999">密码至少六位</font></td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="password" name="repassword"></td>
<td> </td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女</td>
<td> </td>
</tr>
<tr>
<td>联系电话</td>
<td><input type="text" name="telephone"></td>
<td> </td>
</tr>
<tr>
<td>个人介绍</td>
<td><textarea name="introduce"></textarea></td>
<td> </td>
</tr>
</table>
<h1>注册校验</h1>
<table width="70%" align="center">
<tr>
<td width="98">输入校验码</td>
<td><input type="text" name="checkcode"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<img src="" width="155" height="30">
<a href="#">看不清换一张</a>
</td>
</tr>
</table>
<table width=70% >
<tr>
<td align="center">
<input type="image" src="images/signup.gif">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<!-- bottom -->
<div id="bottom">
<table width="100%" bgcolor="#EFEEDC">
<tr>
<td rowspan="2">
<img alt="logo" src="images/logo.png">
</td>
<td >
CONTACT US
</td>
</tr>
<tr>
<td >
copyright 2008 © BookStore All Rights RESERVED
</td>
</tr>
</table>
</div>
</div>
</body>
</html>框架标签
frame.html
<!DOCTYPE html>
<html>
<head>
<title>学生信息管理系统</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<frameset rows="80,*">
<frame src="head.html"name="head">
<frameset cols="10%,*">
<frame src="left.html"name="left">
<frame src="right.html"name="right">
</frameset>
</frameset>
<noframes>
<body>
此网页使用了框架，但您的浏览器不支持框架
</body>
</noframes>
</html>
head.html
<!DOCTYPE html>
<html>
<head>
<title>head.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body bgcolor="#e3e3e3">
<center><h1>学生信息管理系统</h1></center>
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<title>left.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body bgcolor="#e3e3e3">
<a href="table.html" target="right">学生成绩查询</a><br>
<a href="form_ table.html" target="right">学生信息显示</a><br>
<a href="right.html" target="right">返回开始页面</a><br>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<title>right.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body bgcolor="#e3e3e3">
<h2 align="center">这里是是首页</h2>
</body>
</html>
table.html
<!DOCTYPE html>
<html>
<head>
<title>学生成绩显示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body bgcolor="#e3e3e3">
<center>
<table border="1" width="500" bgcolor="ffffff">
<caption>学生成绩表</caption>
<tr bgcolor="">
<th>专业</th>
<th>学号</th>
<th>姓名</th>
<th>计算机导论</th>
<th>数据结构</th>
</tr>
<tr >
<th align="center" rowspan="3">计算机</th>
<th align="center">1</th>
<th align="center">小美</th>
<th align="center">88</th>
<th align="center">99</th>
</tr>
<tr >
<th align="center">2</th>
<th align="center">糖糖</th>
<th align="center">85</th>
<th align="center">90</th>
</tr>
<tr >
<th align="center">3</th>
<th align="center">小硕</th>
<th align="center">98</th>
<th align="center">99</th>
</tr>
<tr >
<th align="center" >电子工程</th>
<th align="center">4</th>
<th align="center">小蓝</th>
<th align="center">78</th>
<th align="center">99</th>
</tr>
</table>
</center>
</body>
</html>
form_table.html
<!DOCTYPE html>
<html>
<head>
<title>学生信息展示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body bgcolor="#e3e3e3">
<form action="#" method="post">
<table align="center" border="1">
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" >
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" >
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked="cheched">女
</td>
</tr>
<tr>
<td>
爱好
</td>
<td>
<input type="checkbox" name="hobby" value="football" checked="cheched">足球
<input type="checkbox" name="hobby" value="basketball" >篮球
<input type="checkbox" name="hobby" value="volleyball" >排球
</td>
</tr>
<!-- 下拉列表 -->
<tr>
<td>
专业
</td>
<td>
<select name="zy"size="1">
<option value="计算机">计算机</option>
<option value="英语">英语</option>
<option value="数学" selected="selected">数学</option>
</select>
</td>
</tr>
<tr>
<td>
课程
</td>
<td>
<select name="kc" size="3">
<option value="计算机导论">计算机导论机</option>
<option value="数据结构">数据结构</option>
<option value="高等数学">高等数学</option>
<option value="离散数学">离散数学</option>
<option value="软件工程" selected="selected">软件工程</option>
</select>
</td>
</tr>
<!-- 邮箱 -->
<tr>
<td>
邮箱
</td>
<td>
<input type="text" name="email" value="">
</td>
</tr>
<!-- 上传头像 -->
<tr>
<td>
上传头像
</td>
<td>
<input type="file" name="file" >
</td>
</tr>
<!-- 文本域 -->
<tr>
<td>
个性签名
</td>
<td>
<textarea name ="ta" rows="10" cols="30">好好学习天天向上</textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="提交">
<input type="button" value="返回">
<input type="reset" value="取消">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="image" src="images/btn.gif" alt="提交" >
<input type="hidden" name="hide" value="xxx" >
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
