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="../music/张国荣-我.mp3" controls autoplay> </audio></body></html>
五、播放视频
模仿老师代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>播放视频</title></head><body><!-- video 播放视频--><video src="../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="登录"> </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="登录"></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="男">男 <input type="radio" name="sex" value="女" checked>女<br/> <input type="submit" value="登录"> </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="男" >男 <input type="radio" name="sex" value="女" checked>女 <br/> <!-- type="checkbox" 复选框 默认被选中 checked --> 爱好：<input type="checkbox" name="love" value="足球" checked>足球<br/> <input type="checkbox" name="love" value="写代码">写代码<br/> <input type="checkbox" name="love" value="看电影">看电影<br/> <input type="checkbox" name="love" value="阅读">阅读<br/> <input type="submit" value="登录"></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="男" >男 <input type="radio" name="sex" value="女" checked>女 <br/> 爱好：<input type="checkbox" name="love" value="敲代码">敲代码 <input type="checkbox" name="love" value="足球" checked>足球 <input type="checkbox" name="love" value="看电影">看电影 <input type="checkbox" name="love" value="阅读">阅读<br/> <!-- 下拉框、列表框 select option:列表中的每一项 默认被选中：selected size:下拉列表的高度 --> 月份：<select name="month" size="2"> <option value="January">1月份</option> <option value="February">2月份</option> <option value="March">3月份</option> <option value="April">4月份</option> <option value="May" selected>5月份</option> </select><br/> <input type="submit" value="登录"></form> </body></html>
十三、作业
1、Mindmanager总结
2、多看视频
3、练习老师这节课讲的内容，敲一遍代码
十四、老师辛苦了！
十五、今天是母亲节，在此祝天下的母亲们节日快乐！身体健康！万事如意！
时间： 2024-10-10 16:11:52