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 鼠标点击中的样式