2017年5月12號課堂筆記
阿新 • • 發佈：2017-05-14
自動 16進制 表單標簽 for music flow http mp3 播放音樂
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、練習老師這節課講的內容，敲一遍代碼
十四、老師辛苦了！
十五、今天是母親節，在此祝天下的母親們節日快樂！身體健康！萬事如意！
2017年5月12號課堂筆記