2017年5月12号课堂笔记

时间：2017-05-14 22:20:11 阅读：308 评论：0 收藏：0 [点我收藏+]

标签：技术 manager oba images 使用 apr html表格淘宝开会

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>