第二章 HTML、CSS、JavaScript、DOM和JSON
一、HTML
1.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<!-- get方式提交的数据都在地址栏里 -->
<!-- <form method="get"> -->
<!-- post提交安全不显示数据 -->
<form method="post">
<table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
<th colspan="2">注册表单</th>
<tr>
<td>用户名:</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repwd"/></td>
</tr>
<tr>
<td>昵称:</td>
<td><input type="text" name="nick"/></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<!-- 不配name属性,性别是多选!! sex属性的值按照1 2 提交-->
<!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on -->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="2"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<!-- name必须配,多选 ,提交的值就是1 2 3 -->
<input type="checkbox" name="like" value="1"/>篮球
<input type="checkbox" name="like" value="2"/>足球
<input type="checkbox" name="like" value="3"/>排球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city"> <!-- 实现多选,按name提交数据 1 2-->
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" name="path"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
</td>
</tr>
</table>
</form>
</body>
</html>
2.小票
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>永和大王账单</title>
</head>
<body>
<div>顾客联</div>
<div>请您留意取餐账单号</div>
<div>自取顾客联</div>
<div>永和大王(北三环西路店)</div>
<div>010-62112313</div>
<div>--结账单--</div>
<div>账单号:P000009</div>
<div>账单类型:食堂</div>
<div>人数:1</div>
<div>收银员:张静</div>
<div>开单时间:2018-04-17 07:24:11</div>
<div>结账时间:2018-04-17 07:24:22</div>
<hr style="border : 1px dashed ;" />
<div>
<table>
<tr>
<td width="40">数量</td>
<td width="130">品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>油条豆浆套餐</td>
<td>7.00</td>
</tr>
<tr>
<td> </td>
<td>1 X --非矾油条</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>1 X --现磨豆浆(热/甜)</td>
<td> </td>
</tr>
</table>
</div>
<hr style="border : 1px dashed ;" />
<div>
<table>
<tr>
<td width="140">支付宝花呗一元早餐</td>
<td width="30">1</td>
<td width="30" align="right">-3.00</td>
</tr>
<tr>
<td>合计</td>
<td> </td>
<td width="30" align="right">4.00</td>
</tr>
<tr>
<td>支付宝</td>
<td> </td>
<td width="30" align="right">1.00</td>
</tr>
<tr>
<td>支付宝补贴</td>
<td> </td>
<td width="30" align="right">3.00</td>
</tr>
</table>
</div>
<hr style="border : 1px dashed ;" />
<div>打印时间:2018-04-17 07:24:23</div>
<hr style="border : 1px dashed ;" />
<div>根据相关税法规定,电子发票的开票日期同网上申请电子发票的日期,如您需要当日的电子发票请务必在消费当日通过扫描下方二维码,根据指引步骤开具您的增值税电子普通发票。此二维码30天有效,扫描时请保持小票平整。</div>
<div><img src=""></div>
<div>官网:www.yonghe.com.cn</div>
<div>加盟热线:86-21-60769397 或 86-21-60799002</div>
<br/>
</body>
</html>
3.注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<style>
tr{
display:block;
margin-bottom:10px;
}
button{
background-color: #4B95FF;
}
button:hover{
background-color: #2A75FE;
cursor: pointer;
}
input{
padding-left: 8px;
color: #999999;
border-radius: 5px;
border:1px solid #999999;
outline-color: #4B95FF;
outline-offset: 0;
height: 40px;
}
td{
text-align:right;
}
</style>
<body style="background-color: #F6F5FA">
<div align="center" style="color: #999999" >
<div style="margin-top: 80px;background-color: white;width: 500px;border-radius: 10px">
<div style="padding-top: 50px">
<table width="">
<tr>
<td colspan="2">
<input type="text" name="phone" value="手机号" style="width: 400px">
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="password" value="密码" style="width: 400px">
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="confirm" value="确认密码" style="width: 400px">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="verify" value="验证码" style="width: 100px">
</td>
<td>
<img src="1.png">
<button style="border: 1px solid #999999;background-color: white">看不清?换一张</button>
</td>
</tr>
<tr>
<td>
<input type="text" name="code" value="动态码" style="width: 220px">
</td>
<td style="width: 175px">
<button type="button" style="width: 120px;height: 45px; color: white; border-radius: 5px;border: 0">获取动态码</button>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" style="width: 411px;height: 45px; color: white; border-radius: 5px;border: 0">注册</button>
</td>
<td></td>
</tr>
<tr>
<td style="font-size: 12px;line-height: 46px" >
<input type="checkbox" style="float: left; cursor: pointer">
我已阅读并同意<a href="" style="text-decoration: none ;color:red">《用户注册协议》</a>
</td>
<td style="font-size: 12px;line-height: 45px;width: 208px">
已有账号?<a href="" style="color: #4B95FF;text-decoration: none"><i>立即登录</i></a>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
4.音视频播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频视频播放</title>
</head>
<body>
<audio controls="controls">
<source src="op.mp3">
</audio>
<video controls="controls" loop="loop" style="height: 600px">
<source src="op.mp4">
</video>
</body>
</html>
二、CSS
京淘电商注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<style>
input[type="text"]{
padding-left: 8px;
color: #999999;
border-radius: 5px;
border:1px solid #999999;
outline-color: #999999;
outline-offset: 0;
height: 40px;
width: 350px;
margin-top: 5px;
margin-bottom: 5px;
}
button{
width: 200px;
height: 40px;
background-color: #E64346;
color: white;
font-size: 20px;
text-align: center;
border: 0;
border-radius: 5px;
margin-top: 10px;
margin-bottom: 20px;
}
button:hover{
background-color: #F45344;
}
.notice{
color: #999999;
font-size: 12px;
}
#agreement{
text-decoration: none;
}
#agreement:link{
color: #999999;
}
#agreement:visited{
color: #999999;
}
#agreement:hover{
color: #F45344;
}
input[type="checkbox"]:hover{
cursor: pointer;
}
</style>
<body style="background-color: #F6F5FA">
<div align="center">
<div align="center" style="margin-top: 80px;background-color: white;width: 450px;border-radius: 10px">
<form method="post">
<table>
<tr>
<td style="text-align: center"><h1>用户注册</h1></td>
</tr>
<tr>
<td align="center">
<input type="text" placeholder="用户名" name="username">
</td>
</tr>
<tr>
<td class="notice">支持中文、字母、数字、”-“、”_“的组合,4-20个字符</td>
</tr>
<tr>
<td align="center">
<input type="text" placeholder="设置密码" name="password">
</td>
</tr>
<tr>
<td class="notice">建议使用数字、字母和符号两种以上的组合,6-20个字符</td>
</tr>
<tr>
<td align="center">
<input type="text" placeholder="确认密码" name="refirmpwd">
</td>
</tr>
<tr>
<td class="notice">两次密码请保持一致</td>
</tr>
<tr>
<td align="center"><input type="text" placeholder="验证邮箱" name="email"></td>
</tr>
<tr>
<td style="text-align: center;font-size: 14px" class="notice">
<div style="margin-bottom: 10px;margin-top: 10px">
<input type="checkbox" name="agreement">
<span>我已阅读并同意</span>
<a id="agreement" href="">《京淘用户注册协议》</a>
</div>
</td>
</tr>
<tr>
<td align="center">
<button>立即注册</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
三、JavaScript、DOM和JSON
JavaScript、DOM 和 JSON 都没什么好讲的,看 W3school 即可