1.电子汇款单
<!DOCTYPE html>
<html>
<head>
<title>工商银行电子汇款单</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>工商银行电子汇款单</h1>
<table border="1" cellpadding="0" cellspacing="0" style="width: 1100px">
<tr>
<td colspan="2"><b>回单类型</b></td>
<td >网上转账汇款</td>
<td colspan="2"><b>指令序号</b></td>
<td >HQH0000000000000013878172</td>
</tr>
<tr>
<th rowspan="4" style="width: 20px">收款人</th>
<td style="width: 80px">户名</td>
<td>老牟</td>
<th rowspan="4" style="width: 20px">付款人</th>
<td style="width: 80px">户名</td>
<td>老刘</td>
</tr>
<tr>
<td><b>卡号</b></td>
<td>000000000001</td>
<td><b>卡号</b></td>
<td>000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td><b>网点</b></td>
<td>工商江苏南京业务处理中心</td>
<td><b>网点</b></td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td>人民币</td>
<td colspan="2"><b>钞汇标志</b></td>
<td><u>钞票</u></td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td>1.00元</td>
<td colspan="2"><b>手续费</b></td>
<td>0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td colspan="4">人民币（大写）壹元整</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td><i>2017年6月1日</i></td>
<td colspan="2"><b>时间戳</b></td>
<td><i>2017-06-01-13.00.0000000</i></td>
</tr>
</table>
<div>票据打印时间：2017-06-01 15:00:12</div>
<div><del>票据打印单位：江苏徐州业务中心</del> </div>
<div>操作员：大曾</div>
</body>
</html>
2.用户注册页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
<style>
table{
border: black 1px solid;
border-spacing: 0px;
border-collapse: collapse;
}
td{
border: black 1px solid;
}
tr{
border: black 1px solid;
}
label{
float: right;
}
</style>
</head>
<body>
<form action="get" method="post">
<table border="1" align="center" width="380">
<tr>
<td colspan="2" align="center">用户注册</td>
</tr>
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username" size="15" maxlength="20"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password" size="15" maxlength="20"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="hobby">爱好</label></td>
<td><input type="checkbox" name="hobby">写作
<input type="checkbox" name="hobby">听音乐
<input type="checkbox" name="hobby">体育
</td>
</tr>
<tr>
<td><label for="province">省份</label></td>
<td><select name="province">
<option value="shanxi" >陕西省</option>
<option value="sichuan">四川省</option>
<option value="chongqing">重庆省</option>
</select></td>
</tr>
<tr>
<td><label for="self-introduction">自我介绍</label></td>
<td><textarea name="intro" cols="25" rows="5" >这个家伙什么也没有留下</textarea></td>
</tr>
<tr style="color: black;">
<td colspan="2" align="center"><input type="submit" value="提交">
<input type="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
3.电影海报布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱影~影视</title>
<style>
#top{
width: 700px;
height: 50px;
}
#start{
width: 700px;
height: 50px;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
li{
display: inline-block;
}
ul{
padding: 0;
list-style-type: none;
text-align: left;
}
#container{
height: 450px;
width: 700px;
}
#container div{
padding-bottom: 30px;
width: 170px;
height: 200px;
padding-top: 10px;;
float: left;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div id="top"><h2>热门电影板块</h2></div>
<div id="start">
<ul>
<li><b>最近热门电影</b></li>
<li>热门</li>
<li>最新</li>
<li>豆瓣高分</li>
<li>冷门佳片</li>
<li>华语</li>
<li>欧美</li>
<li>韩国</li>
<li>日本</li>
<li>更多>></li>
</ul>
</div>
<div id="container">
<div><a href="https://v.qq.com/x/cover/0acsv42yu5qvrz2/n0021e9iekg.html"><img src=".\img\1.png">猜火车</a></div>
<div><a href="https://www.tvccc.org/play/149506_1_1.html"><img src=".\img\2.png">贝尔科实验</a></div>
<div><a href="http://dilidili.in/mov/17026/1.html"><img src=".\img\3.png">加州公路巡警</a></div>
<div><a href="https://www.tvccc.org/play/149547_1_1.html"><img src=".\img\4.png">歌声不绝</a></div>
<div><a href="https://www.hanjudvd.com/5602/#"><img src=".\img\5.png">明日的我与昨日的你约会</a></div>
<div><a href="http://dilidili.in/mov/15654/1.html"><img src=".\img\6.png">速度与激情8</a></div>
<div><a href="https://v.qq.com/x/cover/nev83hz5bdaldok/u0022qbkp8o.html"><img src=".\img\7.png">极限特工</a></div>
<div><a href="http://dilidili.in/mov/15765/1.html"><img src=".\img\8.png">金刚狼3：殊死一战</a></div>
</div>
</body>
</html>
最近笔记整理：
alt：当图片不能正常显示时，现实的文本内容
title：当鼠标悬停在图片上会弹出的文字提示，如果alt本身没有赋值的话，那么alt=title
-
音频标签和视频标签（audio，video）
语法结构
<audio src="资源路径" autoplay muted controls> <video src="资源路径" autoplay="autoplay" muted="muted" controls="muted"> autoplay 自动播放 muted静音 controls显示操作页面
audio和video在主流浏览器上不支持自动播放，video想要自动播放的话需要添加静音muted。
布尔型属性：只要你将属性写出来，MAME它就默认为true，并且无法修改，除非移除属性。
3.5表格标签
表格通过table标签创建。其中包含的子标签有thead tbody tfoot tr tb
-
thead tbody tfoot：这三个属性可以进行分批显示表格 不至于完全加载才能显示。
-
无论这三个标签的书写顺序如何，都会按照 头 躯干 尾 的顺序进行输出
table支持的属性有：
width/height：用于告知表格的宽高，可以具体像素输入，也能百分比输入
align：控制表格在页面中的位置，可以是center right left
-
表格的合并
rowspan：所填数字为要合并的单元格个数，并且是至上到下进行合并
colspan：所填数字为要合并的单元格个数，并且是至左到右进行合并
3.6超链接标签
超链接标签是h5的重要组成部分之一，它通过超链接实现跳转其他网页的目的，超链接标签是a。
-
文字超链接
语法结构
<a href="跳转的URL" target="跳转方式">显示的文字</a>
target：如果不写，默认为self，将会通过自身选项卡进行加载页面，target如果是_blank将是一个新选项卡进行加载。
-
锚链接
制作网页时，如果网页巨长，可在顶部位置创建一个a标签让他绑定底部标签的id（#id）
<a href="#foot">直达底部</a> <div align="center"> <a href="https://www.baidu.com" target="_blank">点击跳转</a> </div> <div style="height: 2000px;border: 1px solid red;" id="top"> </div> <div style="height: 2000px;border: 1px dotted blue;"> </div> <div style="height: 2000px;border: 1px solid green;" id="foot"> </div> <a href="#top">直达顶部</a> -
图片超链接
<a href="https:\\www.baidu.com\" target="_blank"> <img src="./img/李白.png" alt="李白"> </a> -
热区超链接
将一个图片分割为多个区域，这些区域可以使矩形，圆形，多边形等，通过点击不同位置进行跳转
<a href="#"> <img src="./img/李白.png" usemap="#map"> <map name="" id="map"> <area shape="rect" coords="0,0,100,100" href="https:\\www.baidu.com\" alt=""> <area shape="circle" coords="100,50,50" href="https:\\www.baidu.com\" alt=""> <area shape="poly" coords="200,100,300,0,400,100" href="https:\\www.baidu.com\" alt=""> </map> </a>
3.7表单标签
列表标签是用来进行数据提交的标签，是一种交互标签，这里我们学习三个表单标签
通过form标签可以创建一个表单，他有三个较重要的属性，
action它需要填入一个指向哪个服务器的URL，这个URL指向处理表单的接口函数
method：也就是http的请求方式，这里主要使用post与get。
input：最常用的输入标签，它有多种输入类型，详见代码
select：下拉框，multiple存在是，他是一个列表
textarea：
<form action="#" method="get" enctype="multipart/form-data">
用户注册<br/>
用户名称:<input type="text" name="username"><br />
用户密码:<input type="password" name="password" id="" value=""><br />
用户性别：<input type="radio" name="sex" id="" value="1">男
<input type="radio" name="sex" id="" value="2">女
<input type="radio" name="sex" id="" value="0">跨性别<br />
用户爱好：<input type="checkbox" name="fav" id="" value="">LOL
<input type="checkbox" name="fav" id="" value="">王者荣耀
<input type="checkbox" name="fav" id="" value="">PLMM/SQGG
<input type="checkbox" name="fav" id="" value="">唱跳rap<br />
用户邮箱：<input type="email"><br>
头像：<input type="file"><br>
<!-- <button>注册</button> -->
<input type="submit">
<br><hr>
<input type="date">
<input type="datetime-local"><br>
<input type="url"><br>
<input type="range" min="20" max="40" value="30"><br>
<input type="color">
<br><hr>
<select name="爱好" id="" multiple>
<option value="">LOL</option>
<option value="">唱</option>
<option value="">跳</option>
<option value="">RAP</option>
</select><br />
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
第四章 层叠样式表css
Cascading style sheet 层叠样式表
语法结构
element/class/id{
样式属性：值
}
4.1 CSS的几种写法
-
行内样式（标签样式）：写在标签内部
-
内嵌样式（页面样式）：他是写在style标签中的
-
外部链接样式：他是通过link标签将已经写好的css文档引入当前网页中
-
import式：他是通过css提供的import功能进行导入的
import和link的区别
1.归属性区别：import属于css提供的，link是html自带的标签
2.加载顺序的区别：link会在页面加载时同时进行加载，而import会在页面加载完毕后进行加载。
3.兼容性区别：link是html自带的，所以不存在兼容性问题，而import是css2.1版本才提供的，对应IE 5.0以上的浏览器才能使用
4.使用DOM控制的区别：如果使用的是import，js代码是没有办法获取到css的相关数据，而link不存在此问题。
4.2 css的选择器
-
基本选择器
-
标签选择器
标签 { css内容 } -
id选择器
#id{ 样式内容 } -
class选择器
.class{ 样式内容 } -
通配符选择器
-
-
包含选择器
-
子代选择器：他只修饰某标签的下一级标签
ol > li{样式内容} (标签/.类名/#id ...) > 标签 （当然，你也可以使用 标签/.类名/#id ... 但是没有必要） {样式内容} -
后代选择器：他修饰某标签的所有子标签
ol li {样式内容} (标签/.类名/#id ...) （空格） 标签 -
分组选择器：通过“，”可以同时创建多种选择器
标签,.类名,#id ... { 样式内容 }
-
-
属性选择器：属性选择可以根据元素的属性或者属性值来进行选取要修饰的元素
[属性=值] [属性*=值] [属性^=值] 如果 属性的值 是以“值”开头的，那么
-
伪类选择器
-
他可以修饰同一个标签不同那个状态的样式
：link 常规的链接样式 ：visited 点击过后的样式 ：hover 鼠标悬停的样式 ：active 鼠标点击中的样式
4144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
