首页 > 代码库 > 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号课堂笔记