笔记-JavaWeb学习之旅6
表格标签：
table：定义表格
width ：宽度
border：边框
cellpadding：定义内容和单元格的距离了
cellspacing：定义单元格之间的距离
bgcolor：背景色
tr：定义行 --- 有属性可以定义背景色，对齐方式等
td：定义单元格 -----colspan: 合并列 rowspan：合并行
th：定义表头单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--borer边框-->
<!--width 表格宽度-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#006400">
<thead> <!--表示表格头部分，不会在页面中有任何的样式-->
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody><!--表示表格的身体部分-->
<tr bgcolor="#b22222">
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2</td>
<td>杨过</td>
<td>50</td>
</tr>
</tfoot>
</table>
</body>
</html>
旅游网案列练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网</title>
</head>
<body>
<table width="100%" align="center">
<!--第一行-->
<tr>
<td>
<img src="tupian/image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!--第二行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="tupian/image/logo.jpg" alt="">
</td>
<td>
<img src="tupian/image/search.png" alt="">
</td>
<td>
<img src="tupian/image/hot_tel.jpg" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!--第三行-->
<tr>
<td>
<table width="100%" align="center" bgcolor="#ffd700">
<tr align="center" height="45">
<td>
<a href="https://www.cnblogs.com/train99999/">首页</a>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
报团定制
</td>
<td>
全球自由行
</td>
<td>
收藏排行榜
</td>
</tr>
</table>
</td>
</tr>
<!--第四行-->
<tr>
<td>
<img src="tupian/image/banner_3.jpg" alt="">
</td>
</tr>
<!--第五行-->
<tr>
<td>
<img src="tupian/image/icon_5.jpg" alt="">
精选
<hr color="#ffd700">
</td>
</tr>
<!--第六行-->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="tupian/image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="tupian/image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="tupian/image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="tupian/image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第七行-->
<tr>
<td>
<img src="tupian/image/icon_6.jpg" alt="">
国内游
<hr color="#ffd700">
</td>
</tr>
<!--第八行-->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="tupian/image/guonei_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="tupian/image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第九行-->
<tr>
<td>
<img src="tupian/image/icon_7.jpg" alt="">
境外游
<hr color="#ffd700">
</td>
</tr>
<!--第十行-->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="tupian/image/jiangwai_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="tupian/image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="tupian/image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第十一行-->
<tr>
<td>
<img src="tupian/image/footer_service.png" width="100%">
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffd700">
<font color="gray" size="2">
嘻嘻嘻嘻嘻有限公司
版权所有Copyright 2006-2019©,All Right Reserverd 苏ICP备16007882
</font>
</td>
</tr>
</table>
</body>
</html>
HTML标签：表单标签
表单：用于采集用户输入的数据，用于和服务器进行交互
from :用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
from标签有两个属性：
action--指定提交数据的URL,
method：指定提交的方式，提交方式有七种，有两种比较常用，一个是get，一个是post，
get：请求参数会在地址栏中显示，请求参数大小有限制，不安全
post：请求参数不会在地址栏中显示，请求参数大小无限制，安全
表单中的数据要想被提交，必须指定name属性
表单项标签:
input:可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框，type属性的默认值
password：密码输入框，指定该属性时会隐藏输入的文本
radio:单选框，要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样，一般会个每一个单选框提供value属性，指定其被选中后提交的值，checked属性，可以指定默认值
checkbox：复选框，一般会给每一个单选框提供value属性，指定被选中后提交的值，checked属性，可以指定默认值
file:文件复选框
hidden：隐藏域
按钮：submit(提交按钮，可以提交表单)，button(普通按钮)，image(图片提交按钮)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签</title>
</head>
<body>
<form>
用户名:<input type="text" name="username" placeholder="请输入用户名"><br>
密码:<input type="password" name="password"><br>
性别:<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female">女<br>
爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java"> Java
<input type="checkbox" name="hobby" value="game"> 游戏
<br>
图片:<input type="file" name="file"><br>
生日:<input type="datetime-local" name="birthday"><br>
邮箱:<input type="email" name="email"><br>
<input type="submit" value="登录"> </form>
</body>
</html>
注册案例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="username" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="username" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="username" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="username" id="tel"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女</td>
</tr>
<tr>
<td><lable for="date">出生年月</lable></td>
<td><input type="date" name="date" id="date"></td>
</tr>
<tr>
<td><lable for="checkcode">验证码</lable></td>
<td><input type="text" name="date" id="checkcode">
<img src="verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
2.select：下拉列表
子元素：option，指定列表项
3.textarea：文本域
cols：指定列数，每一行有多少个字符
rows：默认多少行
CSS:Cascading Style Sheets 层叠样式表
CSS的使用：css与html结合方式
1.内联样式：在标签内使用style属性指定css代码
2.内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码
3.外部样式：定义css资源文件，在head标签内，定义link标签，引入外部的资源文件
CSS语法：
选择器{
属性1：属性值2；
属性2：属性值2；
....
}
选择器：挑选具有相似特征的元素
选择器：
分类：
1.基础选择器
- id选择器：选择具体的id属性值的元素，
- 元素选择器：选择具有相同标签名称的元素
- 类选择器：选择具有相同的class属性值的选择器
2.扩展选择器
选择所有元素：*{}
并集选择器：选择器1，选择器2{}
子选择器：筛选选择器1元素下的选择器2元素 ----》选择器1 选择器2{}
父选择器：筛选选择器2的的父元素选择器1----》选择器1>选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素----》属性名称[属性名="属性值"]
伪类选择器：选择一些元素具有的状态----》元素：状态{}
状态：link:初始化状态 visited:被访问过的状态 active：正在访问的状态 hover；鼠标悬浮的状态
属性：
- 字体，文本：font-size；字体大小，color-文本颜色 text-align：对齐方式 line-height：行高
- 背景：background
- 边框：border
- 尺寸：width：宽度，height：高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color:green;
font-size:30px;
text-align:center;
line-height: 100px;
border: 1px solid pink;
}
div{
border: 1px solid;
height: 200px;
width: 200px;
background: url("img/1_Adam_4k.jpg" );
}
</style>
</head>
<body>
<P>云想衣裳花想容</P>
<div></div>
</body>
</html>
盒子模型
margin:外边距 padding：内边距
float：浮动（left，right）
CSS注册案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding: 0px;
box-sizing:border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE ;
/*让div背景白色*/
/*让div水平居中*/
background: white;
margin: auto;
margin-top: 15px;
}
.rg_left{
float:left;
margin:15px;
}
.rg_center{
border:1px solid red;
float: left;
width:450px;
}
.rg_right{
float: right;
}
.p_reg{
color:#FFD026;
font-size:20px;
}
.p_ur{
color:#A6A6A6;
font-size:20px;
}
.td_left{
width:100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#email,#tel,#name,#birthday,#checkcode{
width:251px;
height:32px;
border:1px solid #A6A6A6;
border-radius:5px;
padding-left:10px
}
#btn_sub{
width:150px;
height:40px;
background: #FFD026;
border:1px solid;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p class="p_reg">新用户注册</p>
<p class="p_ur">USER REGISTER</p>
</div>
<div class="rg_center">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</div>
<div class="rg_right">
<P >已有账号?<a href="#">立即登录</a></P>
</div>
</div>
</body>
</html>
笔记-JavaWeb学习之旅6的更多相关文章
- 笔记-JavaWeb学习之旅5
CP30的演示 package cn.itcast.datasourcejdbc; import com.mchange.v2.c3p0.ComboPooledDataSource; import j ...
- 笔记-JavaWeb学习之旅7
JavaScript基础 概念:一门客户端脚本语言,运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎,是一个脚本语言,不需要编译,直接就可以被浏览器解析执行. JavaScript ...
- 笔记-JavaWeb学习之旅19
Redis:redis是一款高性能的NOSQL系列的非关系型数据库 NOSQL: Not Only SQL ,意即"不仅仅是SQL",是一项全新的数据库理念,泛指非关系型数据库 r ...
- 笔记-JavaWeb学习之旅18
AJAX:ASynchronous JavaScript And XML 异步的JavaScript 和XML 异步和同步:客户端和服务器端相互通信的基础上 同步:客户端操作后必须等待服务器端的响应, ...
- 笔记-JavaWeb学习之旅17
1.过滤选择器 首元素选择器:first 获得选择的元素中的第一个元素 尾元素选择器:last获得选择元素中的最后一个元素 非元素选择器:not(selector) 不包括指定内容的元素 偶数选择器: ...
- 笔记-JavaWeb学习之旅16
增强对象的功能 动态代理:在内存中形成代理类 实现步骤: 代理对象和真实对象实现相同的接口 代理对象 = Proxy.newProxyInstance(); 使用代理对象调用真实对象的方法 增强方法 ...
- 笔记-JavaWeb学习之旅15
Filter:过滤器 概念:当访问服务器的资源是,过滤器可以将请求拦截下来,完成一些特殊的功能 快速入门: 步骤: 定义一个类,实现接口Filter 复写方法 配置拦截路径 package com.d ...
- 笔记-JavaWeb学习之旅14
JSTL:JavaServer Pages Tag Library JSP标准标签库 if标签 <%@ page import="java.util.ArrayList" % ...
- 笔记-JavaWeb学习之旅10
Servlet server applet运行在服务器端的小程序,servlet就是一个接口,定义了Java类被浏览器访问到的规则(Java类重写这个接口,就可以被浏览器(tomcat)识别) Ser ...
- 笔记-JavaWeb学习之旅13
验证码案列 昨天晚上出现的500错误原因在于验证码没有获取到,获取验证码是应该获取的是共享域中的验证码,而我把获取值得键给写成了jsp中的键,而不是内存生成图片中,然后把图片上传到共享域中的键.这两个 ...
随机推荐
- opencv中的子库
1 FLANN 近似最近邻库,NN就是nearest neighbor的缩写. 2 IlmImf Ilm是Industrial light & magic公司的缩写. Imf是image fo ...
- Timing breakdown phases explained
https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explana ...
- A桶中有多少水？
如果你能算出桶中有多少水,我便许你下山去玩.有一天,老和尚让小和尚将A桶的水挑到B桶去,可是小和尚却想下山玩,不愿意挑水,老和尚便说:”如果你能够根据我的提示算出A桶中有多少升水,我便许你下山去玩.” ...
- FireMonkey 结构性初略分析
Delphi 下的FireMonkey,很好地实现了 DirectUI与跨平台.学习了解他,对DirectUI编程及项目的跨平台实现有一定帮助.虽然作为开发者个体,并不需要了解太多这些东西,只要求拿来 ...
- java中如何创建带路径的文件
请教各位大侠了,java中如何创建带路径的文件,说明下 这个路径不存在 ------回答--------- ------其他回答(2分)--------- Java code File f = new ...
- android——array中设置选项
Android中,R.array是提取XML资源文件中String数组的方法.具体定义和提取的方法如下: 1)在R.array中定义字符数组 <?xml version="1.0&qu ...
- underscore.js中模板函数应用
一.使用技术要点 (1)使用zepto.js的ajax请求; (2)使用underscore.js的_.template设定模板,模板一般以<script type="text/tem ...
- Codeforces Round #105 (Div. 2) E. Porcelain —— DP（背包问题）
题目链接:http://codeforces.com/problemset/problem/148/E E. Porcelain time limit per test 1 second memory ...
- Redis雪崩效应以及解决方案
缓存雪崩产生的原因 缓存雪崩通俗简单的理解就是:由于原有缓存失效(或者数据未加载到缓存中),新缓存未到期间(缓存正常从Redis中获取,如下图)所有原本应该访问缓存的请求都去查询数据库了,而对数据库C ...
- python cassandra 创建space table并写入和查询数据
from cassandra.cluster import Cluster cluster = Cluster(["10.178.209.161"]) session = clus ...