| web基础 | |
|---|---|
| 课程内容 | 时间安排 |
| 前端部分 | 7day |
| html | 1day |
| css | 1day |
| javaScript1 | 1day |
| javaScript2 | 1day |
| jquery1 | 1day |
| jquery2 | 1day |
| bootstrap 相关工具 echarts | 1day |
| java部分 | 9day |
| servlet1 | 1day |
| servlet2 | 1day |
| jsp1 el表达式 jstl标签 | 1day |
| cookie webstorage | 1day |
| ajax | 1day |
| 数据分页 | 1day |
| 文件上传 | 1day |
| 过滤器 监听器 | 1day |
| 数据库连接池 | 1day |
| 流行技术 | 2day |
| vue elementUI | 1day |
| vue脚手架 | 1day |
1. WEB技术构成
由三部分构成：
HTML ：超文本标记语言 (Hyper Text Markup Language)，用于描述网页中存在哪些网页素。
（元素：页面里写一行字，还是放一行图片，还是放一个输入框...，这些由html决定。html是特别简单的语言，有特定的标签，把特定的标签写上去，浏览器就能显示出来。）
css ：层叠样式表(Cascading Style Sheets)是一种用来表现HTML元素显示方式的语言，包含元素的美观修饰、位置定位等。
（用来修饰html，和html加起来用来修饰页面出现的东西，并让他更好看。）
javascript：通俗的叫法是js，浏览器可以解析并执行的语言，可以控制网页上元素，从而形成各种动态效果。
(用来编写页面里和用户交互的小效果。用js语法来控制html和css。是程序员学习的重点。)
1.1. 认识HTML
超文本标记语言，有两种特性：
*超文本---指页面内可以包含图片、链接，甚至音乐、程序等非文字元素**
（文本---写的字就是文本 超文本---可展示出比文本更丰富的内容）
*标记语言---描述html的语法格式，采用标签的方式描述网页内的元素**
（标签也叫标记，将特定的标签写上去，页面里就能展示出特定的内容）
综上：html语言就是用标签写的，能够在网页展示多种内容的语言。
1.1 Html基本结构
<html>
<head> //写一些描述信息
</head>
<body> //浏览器里的主题部分
hello html！
</body>
</html> //表示html文档
一个基本的html，必须有三个基本的标签。<html>，<head>， <body>。
<html> 开头 ，</html>结尾，表示html文档。
中间部分，前面空两格。
eg：1.新建文本文档。 mypage.txt
2.写标签 （尖括号套字母）
<html> <head> </head> <body> hello word!!! </body> </html>
3.将扩展名改成html，默认用浏览器打开 （不会改变内部结构，在windos里默认改变打开的程序）
4.双击该文件，浏览器中可看到 hello word!!! （其它的标签被浏览器读走，解析成特定的格式。按F12可在开发者工具的element看到源代码）
补充：使用浏览器时，经常会用到浏览器的开发者工具。（右键，点检查/查看元素，不同电脑点的不同。或者F12）
下载安装开发者工具------HBuilder
新建普通项目，选择基本html项目。默认帮我们建好css，img，js三个目录，并建好index.html，特制用的页面。只需在index.html写主体部分，然后运行即可。
<!DOCTYPE html> <!--不是必需的,告诉浏览器，用哪个版本解析html代码,这里告知以html5版本解析，html5是最新版本。可向下兼容 -->
<html>
<head>
<meta charset="utf-8" /> <!-- 设置字符编码。该标签没有结束标志，其它标签有开始有结束，中间放内容。-->
<!--
html标签编写方式
双标签：有开始<xxx>，有结束</xxx>,中间包裹其它内容或标签
单标签(自结束标签)：<xxx /> 单标签一般都有特殊功能 meta元。该标签叫元标签。主要功能做页面的基本设置，除了可设置字符编码，还可设置作者，编写时间，搜索的关键字等。 charset="utf-8"，设置字符编码。叫单标签的属性和属性值，单标签一般都设置属性和属性值，形式：属性="属性值"。属性和属性值不是单标签独有的，一些双标签也有。
-->
<title>mypage</title> <!--title标题标签，打开网页，左上角的部分就是标题，不设置标题就默认访问的地址,这里设置标题为mypage -->
</head>
<body>
你好！！！！ <br />
<b>林富豪 </b> a<b c>d
</body>
</html>
<!--
注：1.html中格式需要标签体现： <br />用于换行 <b> </b> 加粗
2.html语法不严格，比如加粗，不加</b>也行 。并且写错了也不报错，尽量展示出来。
3.想展示 a<b c>d，要用到转义符，绕开html解析规则。 基本语法：&xxx; <小于 >大于
无论打多少空格，只会解析成一个。 展示多个空格：1. 可加多个 2.&ensp；比 空格数多一点 3. 空格更多一点 准备这么多空格是为了对应不同字母的宽度
-->
常用转义字符：
1.2HTML常用标签 a标签路径
1.页面结构排布常用的标签：（也都是些块标签）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我的标题</h1> <!--标题标签，比普通文本字更大，默认占满一行（块状效果） -->
<h2>我的标题</h2> <!--和Typora一样，标题级别。都是四个效果：改变字号，加粗，占满一行，加了上下间距 -->
<h3>我的标题</h3>
<h4>我的标题</h4>
<h5>我的标题</h5>
<h6>我的标题</h6>
<p>我的段落</p> <!--段落标签。效果：加了上下间距和占满一行 -->
<div>我的div<div> <!--块标签。效果：块状效果 -->
普通文本
</body>
</html>
2.行内结构排布常用的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
普通文本<span>新文本</span> <!--行内标签，从左到右排列，单纯的把文本包裹起来（行内/内联效果） 该标签加上div标签常配合css
或者js确定该文本位置。
-->
普通文本<b>新文本</b> <!--加粗标签 -->
普通文本<em>新文本</em> <!--斜体标签 -->
普通文本<u>新文本</u> <!--下划线标签 -->
普通文本<u><b>新文本</b></u> <!--可嵌套使用 -->
普通文本<strong>新文本 <!--加粗标签,是一个单标签 -->
</body>
</html>
3.与列表相关的标签
整齐排列时可用
3.1自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<hr /> <!--分割线 -->
<dl> <!--列表标签由三个标签组合起来使用，这三个标签都是块状标签 -->
<dt>列表标题</dt>
<dd>列表内容</dd> <!--该标签左边会有两个空格，即左间距 -->
</dl>
</body>
</html>
3.2有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol type="A"> <!--默认数字排序，可用type修改 A大写字母排，a小写字母排，I大写罗马数字排，i小写罗马数字排 -->
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ol>
</body>
</html>
3.3无序列表
无序指列表项每一行的标题都是相同的，就一个点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type="square"> <!--可设置属性，改变标题的类型，不改默认点。square方块 ddisc默认的点 circle圆圈 -->
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
</body>
</html>
4.A标签 img标签
4.1A标签 （又称超链接标签）
效果：点击之后，页面跳转。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我的文本<a href="html基本结构.html">我的超链接</a> <!--也是行内标签，想让其有跳转效果，用href。-->
我的文本<a href="./html基本结构.html">我的超链接</a> <!--相对路径，相对该软件存放文件的目录而言。
其上一级是.//，其中./可不写
若将html基本结构.html放到img文件，想访问html常用标签.html，就得往上走一层，才能看到想要的文件，路径应为：
../html常用标签.html
用相对路径时，不管当前文件还是要访问的文件，有一个位置发生改变，相对路径都要发生改变。因此，用相对路径比较麻烦，
要考虑我在哪，还要考虑要访问的文件在哪，相对路径就是我要怎么走。
-->
我的文本<a href="/day1_html/html基本结构.html">我的超链接</a> <!-- 相对根路径，我在哪没关系，只要要
访问的文件不动，路径就不动-->
我的文本<a href="https://www.baidu.com">我的超链接</a> <!--绝对路径，一般用于访问外部资源 -->
我的文本<a href="http://127.0.0.1:8848/day1_html/html基本结构.html">我的超链接</a>
<!--这是浏览器里的路径格式：http://127.0.0.1:8848/day1_html/html基本结构.html
叫http路径，本质上和文件路径一样。且在浏览器里也可访问本地路径。-->
我的文本<a href="file:///G:/my-two/code/day1_html/html基本结构.html">我的超链接</a>
<!-- 这是文件协议路径：G:/my-two/code/day1_html/html基本结构.html,在浏览器里也可访问本地文件。
使用这种方式时，浏览器走的方式不一样 -->
<!--不管文件路径还是http路径，对浏览器来说，都是查找文件。
本地文件路径协议，本机查找文件
协议部分：file:///
http协议，在网络环境中查找文件
协议部分：http:// 接下来IP地址（代表某台计算机）：127.0.0.1 端口号（计算机里特定的应用程序，通过应用
程序才能访问文件，且是该程序允许访问的文件。类似海关）：8848 资源地址
127.0.0.1代表本机，数据过路由，所以可测网络环境（localhost也代表本机，数据不过路由）
8848是代表的程序是HBudiler自带的一个小型服务器，允许访问的地址到G:\my-two\code，也就是保存该项目的目录，
故想访问html基本结构.html还要在后面加。
-->
<!--访问外部资源的http路径和访问内部资源的http路径不一样，
www.baidu.com是一个域名，其背后也是有地址的，只是为了好记这样写。用控制台输入ping www.baidu.com可查看地址
也没见到端口，这是因为有些端口不需要加，http协议默认80端口，https协议默认443端口（传输层加密的http协议，一般
有盈收的网站才会用，因为会收费）。
-->
我的文本<a href="https://www.baidu.com/s?wd=加强民航安全隐患排查&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">我的超链接</a>
<!--协议：https://
ip：www.baidu.com
端口：隐藏
资源地址：/s
参数：？后面的部分
之所以，百度时可将内容显示出来，对应 wd=加强民航安全隐患排查 这个参数
有些还会出现URL编码（对于一些特殊符号，浏览器会自动进行该编码）：%E9%A9%AC%E4%BF%9D%E5%9B%BD
这整个称为URL地址
-->
我的文本<a href="https://www.baidu.com/s?wd=马保国&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">我的超链接</a>
</body>
</html>
效果：点击之后，页内跳转。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--a标签也可做锚点，即当前页面跳转-->
我的文本<a href="https://www.baidu.com/s?wd=马保国&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">我的超链接</a>
<h1 id="myhl">我的标题</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#">回到顶部</a> <!--页内跳转,回到顶部-->
<a href="###">回到顶部</a> <!--有页内跳转的超链接，但点了没效果，就为了看看-->
<a href="#myhl">指定跳转</a> <!--页内跳转,指定位置跳转。格式：#元素id-->
</body>
</html>
A标签另一个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--a标签另一个属性，target,常用的属性值_blank和_self。默认_self表示当前页面（将当前页面换成要访问的页面），
_blank表示新标签页（重新开个新页面作为访问的页面），标签页也叫tab页
-->
我的文本<a target="_blank" href="https://www.baidu.com/s?wd=马保国&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">我的超链接</a>
</body>
</html>
4.2 img标签
专门用来展示图片，是一个单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--img也是个行内元素，引入图片的路径都可以有：相对，绝对，相对根路径 -->
<img src="汤姆克鲁斯.jpg" /> <!--相对路径，相对该项目而言-->
<img src="/day1_html/汤姆克鲁斯.jpg" /> <!--相对根路径，相对软件保存位置而言-->
<img src="" /> <!--绝对路径，也是访问外部资源图片，一旦外部图片地址改变
或者图片删掉，将无法访问-->
</body>
</html>
img标签常常与A标签的组合使用，把图片变成超链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--img其它不重要的属性 -->
<img alt="美女图片" width="100" height="100" /> <!--图片无法展示时，用文字说明一下。
以及设置宽高（有专门的UI设计师设计）-->
</body>
</html>
一些常用的网站：w3school w3cschool 这些网站里有一些完整的html标签。
5.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--制作一个两行三列的表格，默认左对齐-->
<table bgcolor="aqua" border="1"> <!--border属性，加一个边框--> <!--bgcolor属性，设置背景颜色-->
<caption>用户信息表</caption> <!--caption标签，加一个表名-->
<thead> <!--thead标签，用来划分区域，头部部分-->
<tr> <!--tr标签，行，这里一行里套了三列-->
<th>姓名</th> <!--th标签，列头，相比td标签，有加粗和居中的效果-->
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody> <!--tbody标签，用来划分区域，主体部分-->
<tr>
<td rowspan="2">小明</td> <!--td标签，单元格，以行为单位--> <!--rowspan跨列属性 -->
<td align="center">男</td> <!--td默认左对齐，align属性可设置为居中-->
<td>15</td>
</tr>
<tr>
<td colspan="2">小白</td> <!--colspan跨行属性 -->
<td>女</td>
<td>18</td>
</tr>
</tbody>
<!--tfoot 脚-->
</table>
</body>
</html>
6.表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表单标签form，属性action提交地址，路径也是相对，绝对，相对根三种，其中绝对一般不用，都是提交到自己服务器。一般使用相对根路径
属性method,数据提交的方式，有get和post两种。（对数据类型的限制：get只允许ASCII字符，post没有限制，也允许二进制数据。
传文件要用post。可见性方面：get在URL地址上，输入的参数人人可见，post数据不会显示在URL上，在请求数据中可见。安全性方面:
get安全性较差，处理速度快。post安全性稍好，处理速度较慢）
input 输入框
下面是收集用户信息，并把信息提交
-->
<form action="/myserve" method="get">
<input type="text" name="username" /> <!--表单元素标签-->
<input type="submit" /> <!--提交按钮-->
</form>
<!--A标签也可以让页面跳转，并传参数,默认使用get方式。在传输数据上，与表单标签没区别，都是发送请求到服务器。区别在于：
表单标签可让用户自己输入-->
<a href="/myserve?username=jack">测试标签</a>
<!--浏览器地址栏里敲地址也是请求方式，也是get方式-->
<!--发送请求方式：1.浏览器地址栏直接敲地址（get）2.使用A标签（get）3.使用表单提交（get/post）-->
</body>
</html>
常用的表单元素标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
input的属性及属性值 type="text"表示文本输入框 name="uname"表单提交数据时必须的属性
maxlength="5" 允许输入的最大长度 value="默认值"表示文本框内容的默认值 readonly="readonly"只读
disabled="disabled" 禁用效果 placeholder="请输入用户名"文本框内的提示信息
type="password"表示密码框，文本框的属性，在密码框也可以用。想传递数据，同样要加name属性
type="hidden"表示隐藏框，想往后台传一些数据，又不想用户看到。比较重要的属性就是name和value
type="radio"单选框,且对于name属性，多个框选用一个值（使用name属性进行分组）。
value="1"，传输数据时区分不同选项的值
checked="checked默认某个值被选中
label标签，提示信息标签，要加上for属性，和input标签的id属性配套使用。效果：点击标签时，可让指定元素获取焦点（有输入框或光标在闪）
type="checkbox"多选框，还是用name进行分组，多个选项用同一个name。同样配上value区分不同选项的值.默认选中也是checked
属性(单选里一组加一个，多选里一组加多个)
input的其它属性：type="color"颜色选择框 type="datetime-local"年月日时分选择框
type="file"文件选择框，配合文件上传 type="email"一个有邮箱格式的输入框
input的其它几种按钮：type="submit"提交当前表单按钮，通过value属性可以修改提交按钮的文本
type="reset"重置当前表单按钮，会将表单重置成最初加载时的样子 type="button"自定义按钮，常用属性：
disabled="disabled",禁用效果
几个不是input开头的表单元素：
<select>下拉列表select，配合option标签使用。name属性在select里.且一般传输是传码，不传文本，故在option
里加value属性。下拉列表框默认选中第一个值，即下面的北京，可用selected="selected"调整
multiple="multiple"可将单选变为多选
textarea标签，多行文本。在标签里写上内容就是默认值，如下为1233.rows="10" cols="50"设置可写的行数和列数
-->
<form action="/test" method="get">
<label for="mytext">用户名</label><input id="mytext" type="text" name="uname" maxlength="5" value="" placeholder="请输入用户名"/> <br />
<input type="password" name="password" /> <br /> <!--密码框-->
<input type="hidden" name="myval" value="abc" /> <br />
<hr /> <!--分割线-->
性别：<input id="gender1" name="gender" type="radio" value="1" /><label for="gender1">男</label>
<input name="gender" type="radio" value="2" checked="checked" />女
<input name="gender" type="radio" value="3" />女装大佬<br />
<hr />
兴趣：<input name="hobby" type="checkbox" value="1" checked="checked" />爬山
<input name="hobby" type="checkbox" value="2" />蹦极
<input name="hobby" type="checkbox" value="3" />游泳
<input name="hobby" type="checkbox" value="4" />喝水<br />
<hr />
<input type="color" />
<input type="datetime-local" />
<input type="file" />
<input type="email" /><br />
<hr />
<input type="submit" value="我的文本" />
<input type="reset" value="我的重置" />
<input type="button" value="自定义按钮" disabled="disabled" />
<hr />
<select name="myarea" multiple="multiple">
<option value="010">北京</option>
<option selected="selected" value="010">上海</option>
<option value="010">深圳</option>
</select>
<hr />
<textarea name="textarea" rows="10" cols="50">1233</textarea>
</form>
</body>
</html>
7.其它标签
页面嵌套：将多个页面组合成一个页面，Frameset和frame
Frameset标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="20%,*"> <!--将整个页面分成上下两部分，上面占20%-->
<frame src="top.html" />
<frameset cols="20%,*"> <!--将下面的部分再分成左右两部分，左面占20%-->
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
</html>
iframe标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
新页面<iframe src="mypage.html"></iframe> <!--可将其它页面引入-->
</body>
</html>
Html总结（思维导图）：
HTML练习-----注册页面
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mypage</title>
<style>
div{
border:1px solid black;
height:580px;
width:377px;
}
span{
color:red;
}
caption{
background-color:darkgrey;
}
</style>
</head>
<body>
<div>
<table>
<caption><h2><span>填写注册资料</span>(以下**为必填项)</h2></caption>
<form action="/myserve" method="get">
<tr>
<td align="right">姓名：</td>
<td>
<input type="text" name="username" maxlength="5" placeholder="请输入用户名"/>**
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="text" name="userpass" placeholder="请输入密码"/>**
</td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td>
<input type="text" name="userpass" placeholder="请重新输入密码"/>**
</td>
</tr>
<tr>
<td>密码提示问题：</td>
<td>
<select name="myquestion">
<option value="001" selected="selected" disabled="disabled">请选择一个问题</option>
<option value="002">你的小学班主任是谁？</option>
<option value="003">你的中学班主任是谁？</option>
<option value="004">你的大学班主任是谁？</option>
</select>**
</td>
</tr>
<tr>
<td>密码提示答案：</td>
<td>
<input type="text" name="myanswer" placeholder="请输入密码提示答案"/>**
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="gender" value="1"/>男
<input type="radio" name="gender" value="2"/>女**
</td>
</tr>
<tr>
<td align="right">生日：</td>
<td>
<select>
<option value="010" selected="selected">1980</option>年
</select>
<select>
<option value="020" selected="selected">1</option>月
</select>
<select>
<option value="030" selected="selected">1</option>日**
</select>
</td>
</tr>
<tr>
<td align="right">地区：</td>
<td>
<select>
<option value="100" selected="selected">河北</option>省/直辖市
</select>
<select>
<option value="200" selected="selected">承德</option>市**
</select>
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>
<input name="hobby" type="checkbox" value="0000" />上网
<input name="hobby" type="checkbox" value="0001" />体育
<input name="hobby" type="checkbox" value="0002" />学习**
</td>
</tr>
<tr>
<td align="right">个人简绍：</td>
<td>
<textarea name="textarea" rows="10" cols="20"></textarea>
</td>
</tr>
<tr>
<td align="right">图像域按钮：</td>
<td>
<input type="button" value="搜索" disabled="disabled"/>
</td>
</tr>
<tr>
<td align="right">上传文件：</td>
<td>
<input type="text"/>
<input type="button" value="浏览..." />**
</td>
</tr>
<tr>
<td></td>
<td>
 
<input type="submit" value="注册" onclick="login()"/>
<input type="submit" value="登录" onclick="register()"/>
</td>
</tr>
</form>
</table>
</div>
</body>
<script>
function login(){
location.href = "https://www.baidu.com";
}
function register(){
location.href = "./img/汤姆克鲁斯.jpg";
}
</script>
</html>
最终效果如下：
进一步优化：
密码处：
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="userpass" placeholder="请输入密码"/>**
</td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td>
<input type="password" name="userpass" placeholder="请重新输入密码"/>**
</td>
</tr>生日处：
<tr>
<td align="right">生日：</td>
<td>
<input type="date" name="birthday"/>
</td>
</tr>学完css之后可以进一步修饰，效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mypage</title>
<style>
span{
color:red;
}
div{
background-color:lightgray;
height:30px;
padding: 5px;
font-size:20px;
font-weight:bolder;
}
form{
background-color:#F8F8FF;
border: #357FC4 solid 1px;
color:#575454;
width:400px;
margin:20px auto;
font-size:15px;
border-radius:8px;
}
table{
margin:10px auto;
}
input[type="button"]{
background:#228B22;
color:white;
font-size:10px;
font-weight:bold;
width:55px;
height:22px;
}
.myfile{
width:140px;
}
</style>
</head>
<body>
<form action="#" method="get">
<div><span>填写注册资料</span>(以下**为必填项)</div>
<table>
<tr><td align="right">姓名：</td><td><input type="text" name="username" maxlength="5" placeholder="请输入用户名"/>**</td></tr>
<tr><td align="right">密码：</td><td><input type="password" name="userpass" placeholder="请输入密码"/>**</td></tr>
<tr><td align="right">确认密码：</td><td><input type="password" name="userpass" placeholder="请重新输入密码"/>**</td></tr>
<tr><td>密码提示问题：</td><td><select name="myquestion">
<option value="001" selected="selected" disabled="disabled">请选择一个问题</option>
<option value="002">你的小学班主任是谁？</option>
<option value="003">你的中学班主任是谁？</option>
<option value="004">你的大学班主任是谁？</option>
</select>**</td></tr>
<tr><td>密码提示答案：</td><td><input type="text" name="myanswer" placeholder="请输入密码提示答案"/>**</td></tr>
<tr><td align="right">性别：</td><td><input type="radio" name="gender" value="1"/>男<input type="radio" name="gender" value="2"/>女**</td></tr>
<tr><td align="right">生日：</td><td><input type="date" name="birthday"/></td></tr>
<tr><td align="right">地区：</td><td><select><option value="100" selected="selected">河北</option>省/直辖市</select>
<select><option value="200" selected="selected">承德</option>市**</select></td></tr>
<tr><td align="right">爱好：</td><td>
<input name="hobby" type="checkbox" value="0000" />上网
<input name="hobby" type="checkbox" value="0001" />体育
<input name="hobby" type="checkbox" value="0002" />学习**</td></tr>
<tr><td align="right">个人简绍：</td><td><textarea name="textarea" rows="10" cols="20"></textarea></td></tr>
<tr><td align="right">图像域按钮：</td><td><input type="button" value="搜索" disabled="disabled"/></td></tr>
<tr><td align="right">上传文件：</td><td><input class="myfile" type="text"/> <input type="button" value="浏览..." />**</td></tr>
<tr><td></td><td>   <input type="submit" value="注册" onclick="login()"/> <input type="submit" value="登录" onclick="register()"/></td></tr>
</table>
</form>
</body>
<script>
function login(){
location.href = "https://www.baidu.com";
}
function register(){
location.href = "./img/汤姆克鲁斯.jpg";
}
</script>
</html>
扫一扫
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
