首页 > 代码库 > 2017年5月12号课堂笔记
2017年5月12号课堂笔记
2017年5月12号 星期五 空气质量：轻度污染（昨天的北风转今天的南风）
内容：html表格的基本使用，表格跨行跨列，高级表格，播放音乐，播放视频，网页布局，iframe内联框架；
文本框，密码框，单选按钮，复选框，下拉框
备注：周日晚想起来补上的周五课堂笔记（一带一路今天开会天气好晴朗）
一、html表格的基本使用
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格的基本使用</title>
</head>
<body>
<!--
border:边框的像素
cellpadding:内容与单元格的距离
cellspacing:单元格之间的距离
bgcolor:背景颜色
#ffc0cb:16进制的颜色码
width:表格在浏览器中所占的宽度
align:设置单元格内容对齐方式
01.center 01.left 03.right
-->
<table border="1" cellpadding="5" cellspacing="5" bgcolor="#3cb371" width="1000">
<tr align="center">
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</table>
</body>
</html>
二、表格跨行跨列
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格跨行跨列</title>
</head>
<body>
<h2><strong>流量调查表</strong></h2>
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td><strong>总页面流量</strong></td>
<td><strong>共计来访</strong></td>
<td><strong>会员</strong></td>
<td><strong>游客</strong></td>
</tr>
<tr>
<td>9756488</td>
<td>97656</td>
<td>753807</td>
<td>43364677</td>
</tr>
<tr>
<td>46776686</td>
<td>85544</td>
<td>69357</td>
<td>568787</td>
</tr>
<tr>
<td>7538087</td>
<td>546774</td>
<td>476897</td>
<td>334545</td>
</tr>
<tr>
<td>平均每人浏览</td>
<!--colspan所跨的列数-->
<td colspan="3">1.58</td>
</tr>
<tr>
<!--rowspan所跨行数-->
<td rowspan="4">华北</td>
<td colspan="3">北京</td>
</tr>
<tr>
<td colspan="3">天津</td>
</tr>
<tr>
<td colspan="3">河北</td>
</tr>
<tr>
<td colspan="3">山西</td>
</tr>
</table>
</body>
</html>
三、高级表格
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>高级表格</title>
</head>
<body>
<!--待修改-->
<table border="1" width="70%" cellpadding="3" cellspacing="3">
<caption>年终数据报表</caption>
<thead bgcolor="yellow">
<th>月份</th>
<th>收入</th>
</thead>
<tbody bgcolor="SkyBlue">
<tr>
<td>1月份</td>
<td>1w</td>
</tr>
<tr>
<td>2月份</td>
<td>2w</td>
</tr>
<tr>
<td>3月份</td>
<td>3w</td>
</tr>
<tr>
<td>4月份</td>
<td>4w</td>
</tr>
<tr>
<td>5月份</td>
<td>5w</td>
</tr>
</tbody>
<tfoot bgcolor="pink">
<tr>
<td>总收入</td>
<td>15w</td>
</tr>
<tr>
<td>平均月收入</td>
<td>3w</td>
</tr>
</tfoot>
</table>
</body>
</html>
四、播放音乐
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>播放音乐</title>
</head>
<body>
<!-- audio 音频标签
controls:是否显示组件
autoplay：自动播放
-->
<audio src="http://www.mamicode.com/music/张国荣-我.mp3" controls autoplay>
</audio>
</body>
</html>
五、播放视频
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>播放视频</title>
</head>
<body>
<!-- video 播放视频-->
<video src="http://www.mamicode.com/film/狂怒.DVDscr英语中字.mp4" controls autoplay></video>
</body>
</html>
六、网页布局
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网页布局</title>
<!--css代码：马上学！-->
<style type="text/css">
header{
height:50px;
border:2px solid indianred;
}
section{
height:700px;
border:2px solid cornflowerblue;
}
footer{
height:80px;
border:2px solid yellow;
}
</style>
</head>
<body>
<header>
<h2>网页的头部</h2>
</header>
<section>
<h2>网页的主体部分</h2>
</section>
<footer>
<h2>网页的底部</h2>
</footer>
</body>
</html>
七、iframe内联框架
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<a href="http://www.qq.com" target="mainIframe">qq首页</a>
<a href="http://www.taobao.com" target="mainIframe">淘宝</a>
<a href="http://www.dongqiudi.com/" target="mainIframe">懂球帝</a>
<!--
name:内联框架的名称
src:需要嵌套的页面地址
frameborder:是否显示边框 0 不显示 1 默认显示
scrolling:是否显示下拉框 auto:默认 yes 显示 no 不显示
srcdoc：可以把html内容编译 srcdoc="<h1>哈哈</h1>"
-->
<iframe name="mainIframe" src="http://www.baidu.com" frameborder="1" scrolling="auto" />
</body>
</html>
八、文本框
1） 模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本框</title>
</head>
<body>
<!--
表单的作用：
01.获取用户的输入
02.与服务器产生交互
表单标签： form
表单域： 文本框，密码框，单选按钮，复选按钮，下拉列表。。。。。。
表单按钮：
01.普通按钮
02.提交按钮
03.重置按钮
action:把用户的输入 提交的服务器的地址
login.html:我们模拟服务器的地址
#；代表本页面
method:我们提交的方式 以什么样的方式与服务器产生交互
01.get
不安全，会把用户的输入显示在url上
02.post
相对安全，会隐藏用户的输入
input type="text":文本框 默认type="text"
name:是标记！ 服务器就是通过name的属性值来获取 文本框的value属性值
用户输入的值，就是value属性值
-->
<form action="02login.html" method="post">
用户名：<input type="text" name="userName" placeholder="请输入用户名">
<input type="submit" value="http://www.mamicode.com/登录">
</form>
</body>
</html>
2）登录成功界面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>登录成功页面</title>
</head>
<body>
<h1>恭喜登录成功</h1>
</body>
</html>
九、密码框
模仿老师代码：
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>密码框</title>
</head>
<body>
<!--type="password" 密码框-->
<form action="02Login.html" method="post">
用户名：<input type="text" name="userName" placeholder="请输入用户姓名"><br/>
密码：<input type="password" name="password" placeholder="请输入密码"><br/>
<input type="submit" value="http://www.mamicode.com/登录">
</form>
</body>
</html>
十、单选按钮
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>单选按钮</title>
</head>
<body>
<form action="02Login.html" method="post">
用户名：<input type="text" name="userName" placeholder="请输入用户姓名"><br/>
密码：<input type="password" name="password" placeholder="请输入密码"><br/>
<!-- type="radio" 单选按钮 必须有name属性 且属性值必须相同
默认被选中 checked
-->
性别：<input type="radio" name="sex" value="http://www.mamicode.com/男">男
<input type="radio" name="sex" value="http://www.mamicode.com/女" checked>女<br/>
<input type="submit" value="http://www.mamicode.com/登录">
</form>
</body>
</html>
十一、复选框
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<form action="02login.html" method="post">
用户名：<input type="text" name="userName" placeholder="请输入用户名"><br/>
密码：<input type="password" name="password" placeholder="请输入密码"><br/>
性别：<input type="radio" name="sex" value="http://www.mamicode.com/男" >男
<input type="radio" name="sex" value="http://www.mamicode.com/女" checked>女 <br/>
<!-- type="checkbox" 复选框
默认被选中 checked -->
爱好：<input type="checkbox" name="love" value="http://www.mamicode.com/足球" checked>足球<br/>
<input type="checkbox" name="love" value="http://www.mamicode.com/写代码">写代码<br/>
<input type="checkbox" name="love" value="http://www.mamicode.com/看电影">看电影<br/>
<input type="checkbox" name="love" value="http://www.mamicode.com/阅读">阅读<br/>
<input type="submit" value="http://www.mamicode.com/登录">
</form>
</body>
</html>
十二、下拉框
模仿老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>下拉框</title>
</head>
<body>
<form action="02login.html" method="post">
用户名：<input type="text" name="userName" placeholder="请输入用户名"><br/>
密码：<input type="password" name="password" placeholder="请输入密码"><br/>
性别：<input type="radio" name="sex" value="http://www.mamicode.com/男" >男
<input type="radio" name="sex" value="http://www.mamicode.com/女" checked>女 <br/>
爱好：<input type="checkbox" name="love" value="http://www.mamicode.com/敲代码">敲代码
<input type="checkbox" name="love" value="http://www.mamicode.com/足球" checked>足球
<input type="checkbox" name="love" value="http://www.mamicode.com/看电影">看电影
<input type="checkbox" name="love" value="http://www.mamicode.com/阅读">阅读<br/>
<!--
下拉框、列表框 select
option:列表中的每一项
默认被选中：selected
size:下拉列表的高度
-->
月份：<select name="month" size="2">
<option value="http://www.mamicode.com/January">1月份</option>
<option value="http://www.mamicode.com/February">2月份</option>
<option value="http://www.mamicode.com/March">3月份</option>
<option value="http://www.mamicode.com/April">4月份</option>
<option value="http://www.mamicode.com/May" selected>5月份</option>
</select><br/>
<input type="submit" value="http://www.mamicode.com/登录">
</form>
</body>
</html>
十三、作业
1、Mindmanager总结
2、多看视频
3、练习老师这节课讲的内容，敲一遍代码
十四、老师辛苦了！
十五、今天是母亲节，在此祝天下的母亲们节日快乐！身体健康！万事如意！
2017年5月12号课堂笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。