Java Web之Html
来源：互联网 发布：参加淘宝邀请的活动 编辑：程序博客网 时间：2024/06/05 19:56
暑假待在学校，开始学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> 0 1
- Java Web之Html
- 第一课：Java web之HTML
- 小白学Java Web 1 Web前端之HTML标签
- Web 之 HTML
- Web基础之HTML
- Web之HTML
- Web学习之HTML
- web之HTML详解
- WEB基础之：HTML
- Web学习之HTML
- Web基础之HTML
- Web开发之HTML
- Web前端之HTML
- Java Web学习笔记之4.HTML标记语言
- Java-Web开发基础之html语法基础
- Web基础之HTML + CSS
- Web开发教程之HTML
- WEB程序设计之HTML(一)
- 树莓派小白教程（二）
- Loadrunner并发用户与集合点讨论（转）
- 36. Valid Sudoku | LeetCode
- squid简介
- 概率主题模型与LDA模型公式推导（1）
- Java Web之Html
- node.js
- 顺序表应用3：元素位置互换之移位算法
- 对于RSA算法的一些理解
- HDU 4810 Wall Painting（异或数学）
- 常用的linux命令-wget
- 数据结构实验之串一：KMP简单应用
- 跟我一起写Makefile（7）--- 环境变量MAKEFILES+make的工作方式
- javascript-js 的prototype原型理解讲解
