【PHP微職位】第3天學習筆記
阿新 • • 發佈:2018-09-05
spa 電子郵件 tex dex 表單 需要 郵件 keyword acc
學習課程:《Html5第一季》6~11節
學習時間:2018-09-04
**表格元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<!-- 基本表格 -->
<table border="1">
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br>
<!-- 橫向和縱向單元格 -->
<table border="1" style="width: 300px">
<tr>
<th rowspan="4">基本情況</th>
<th>姓名</th>
<th>性別</th>
<th>婚否</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">統計:合計2人</td>
</tr>
</table>
<br>
<!-- thead tbody和tfoot -->
<table border="1" style="width: 300px">
<caption>這是一個表格</caption> <!-- 添加標題 -->
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>婚否</th>
</tr>
</thead>
<tbody>
<tr style="background: red">
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">統計:合計2人</td>
</tr>
</tfoot>
</table>
<br>
<!-- 設置列顏色方法案例1 -->
<table border="1" style="width: 300PX">
<colgroup style="background: red" span="2"></colgroup>
<tr>
<th>姓名</th>
<th>性別</th>
<th>婚否</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br>
<!-- 設置列顏色方法案例2 -->
<table border="1" style="width: 300PX">
<colgroup style="background: white" span="1"></colgroup>
<colgroup style="background: red" span="1"></colgroup>
<tr>
<th>姓名</th>
<th>性別</th>
<th>婚否</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br>
<!-- 設置列顏色方法案例3 -->
<table border="1" style="width: 300PX">
<colgroup>
<col>
<col style="background: red">
</colgroup>
<tr>
<th>姓名</th>
<th>性別</th>
<th>婚否</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
</body>
</html>
**文檔元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>文檔元素</title>
</head>
<body>
<!-- 頁面標頭部分,屬於區塊,下面內容會換行 -->
<header>
<hgroup>
<h1>這是一個h1大標題</h1>
<h4>這是一個h4副標題</h4>
</hgroup>
<nav>這裏是一個導航</nav>
這裏存放頁面標頭部分:LOGO 標題 導航
</header>
<section>
這裏是文檔主題部分
</section>
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>
<aside>...</aside>
<footer>
這裏存放的頁面的尾部:版權聲明 友情鏈接
<h4>這是一個尾部h4副標題</h4>
<address>這是聯系方式</address>
</footer>
</body>
</html>
**嵌入元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>嵌入元素</title>
</head>
<body>
<!-- <a href="index.html">
<img ismap src="1.jpg" alt="風景圖" width="200" height="200">
</a> -->
<!-- 創建分區響應,熱點區域 -->
<!-- <a href="index.html">
<img src="1.jpg" alt="風景圖" width="200" height="200" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="10,24,95,97" href="http://www.baidu.com" target="_blank" alt="百度">
<area shape="circle" coords="145,64,42" href="http://www.so.com" target="_blank" alt="SOSO">
<area shape="poly" coords="18,123" href="#">
<area shape="poly" coords="50,114,50,163" href="#">
<area shape="poly" coords="17,117,16,173,169,177,167,131,167,121" href="http://www.sougou.com" target="_blank" alt="搜狗">
</map>
</a> -->
<!-- <img src="11.jpg">
<img src="11.jpg" alt="風景圖"> -->
<!-- 一個區域引入固定區域 -->
<!-- <a href="http://www.baidu.com" target="in">百度</a>丨<a href="http://www.soso.com" target="in">好搜</a>
<br>
<iframe src="http://www.soso.com" width="800" height="400" name="in"></iframe> -->
<!-- 插入flash文件 -->
<!-- <embed src="flash.swf" type="application/x-shockwave-flash" width="400" height="200">
</embed> -->
<!-- 進度條 -->
<progress value="30" max="100"></progress>
<meter value="66" min="10" max="100" low="30" high="80" optimum="66"></meter>
</body>
</html>
**音頻和視頻**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>音頻和視頻</title>
</head>
<body>
<!-- webm mpeg-4 ogg -->
<!-- <video src="1.mp4" width="600" height="200" controls="" autoplay="" loop="" muted=""></video> -->
<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg"></video> -->
<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload=""></video> -->
<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload="metadata"></video> -->
<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload="autoplay"></video> -->
<!-- <video width="600" height="200" controls="">
<source src="1.mp4" type="">
<source src="1.webm" type="">
<source src="1.ogg" type="">
<object>實現Flash插件的播放,如果屏蔽IE9以下則不需要</object>
</video> -->
<!--
<audio src="1.mp3"></audio> -->
<audio controls="">
<source src="1.mp3" type="">
<source src="1.m4a" type="">
<source src="1.wav" type="">
</audio>
</body>
</html>
**表格元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表單元素[上]</title>
</head>
<body>
<form id="register" method="get" name="reg" action="http://www.baidu.com" target="_blank" autocomplete="on">
<!-- 用戶名: <input type="" name="user" autofocus disabled=""> -->
<fieldset>
<legend>註冊分組</legend>
<label for="user">
用戶名:
</label>
<input id="user" name="user" autocomplete="off" value="請輸入賬號"><br>
<!-- <button>提交</button> -->
<label>
電子郵件: <input type="" name="bbs" form="register">
</label>
</fieldset>
</form>
<button type="submit" form="register">提交</button>
<button type="reset" form="register">重置</button>
<button type="button" form="register">其他</button>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表單元素[中]</title>
</head>
<body>
<form action="http://www.so.com">
<!-- <input type="text" name="user" maxlength="5" size="30" value="11111" disabled> -->
<!-- <input type="text" list="abc" required=""> -->
<!-- <input type="password" name="" placeholder="請輸入密碼"> -->
<!-- <input type="search" name=""> -->
<!-- <input type="number" name="" min="10" max="100" step="5"> -->
<!-- <input type="date" name="">
<input type="month" name="">
<input type="time" name="">
<input type="week" name="">
<input type="datetime" name="">
<input type="datetime-local" name=""> -->
<!-- <input type="color" name="color"> -->
<!-- 音樂 <input type="checkbox" name="music" value="1">
音樂 <input type="checkbox" name="sport" value="2"> -->
<!-- <input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2" checked>女 -->
<!-- <input type="submit" name="">提交
<input type="reset" name="">重置
<input type="button" name="">一般按鈕 -->
<!-- <input type="image" src="1.jpg"> -->
<!-- <input type="email" name="">
<input type="tel" name="">
<input type="url" name=""> -->
<!-- <input type="hidden" name="id" value="1"> -->
<input type="file" name="" accept="image/gif">
<button>提交</button>
</form>
<datalist id="abc">
<option value="1">蘋果</option>
<option value="2">橘子</option>
<option value="3" label="香蕉">
<option value="菠蘿">
</datalist>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="utf-8">
<title> 表單元素[下]</title>
</head>
<body>
<form action="http://www.baidu.com" oninput="res.value = num1.valueAsNumber*num2.valueAsNumber" novalidate="">
<!-- <select name="fruit" size="10" multiple="">
<optgroup label="水果">
<option value="1">蘋果</option>
<option value="2" selected="">橘子</option>
<option value="3">香蕉</option>
</optgroup>
<optgroup label="粗糧">
<option value="4">小米</option>
<option value="5">大米</option>
<option value="6">玉米</option>
</optgroup>
</select> -->
<!-- <textarea name="content" rows="10" cols="10" wrap="">請留下您的建議!</textarea> -->
<!-- <input type="number" id="num1">X<input type="number" id="num2">=
<output for="num1 num2" name="res"></output> -->
<!-- <input type="text" required="">
<input type="number" min="10" max="100"> -->
<input type="text" placeholder="請輸入區號+座機" pattern="^[\d]{2,4}\-[\d]{6,8}$" name="" required="">
<button>提交</button>
</form>
</body>
</html>
**全局屬性和其他**
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<!-- <meta charset="utf-8"> -->
<meta name="autor" content="bbs">
<meta name="description" content="這是一個描述">
<meta name="keywords" content="php;開發">
<meta http-equiv="content-type" content="text/html charset=utf-8">
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<title>全局屬性和其他</title>
<style type="text/css">
#abc{
color: red
}
.abc{
color: blue
}
</style>
</head>
<body>
<div>1</div>
<div>
我?????你
?
這是一段中文
<!-- <p id="abc">這是id</p>
-->
<!-- <p class="abc">1</p>
<p class="abc">2</p>
<p class="abc">3</p> -->
<!-- <input type="text" name="" accesskey="L"> -->
<p contenteditable="">我可以修改嗎</p>
<P dir="rtl" hidden>文字方向</P>
<p lang="en" title="這是一個html5教程" style="color: red">Html5</p>
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1"> <!-- -1不會被選中 -->
</body>
</html>
【PHP微職位】第3天學習筆記