<!DOCTYPE>標(biāo)簽（了解）
聲名文檔類型html，告知瀏覽器以html的規(guī)范解析當(dāng)前文檔
1.含義
文檔聲名璧帝，用來聲明文檔遵循的規(guī)范，告知瀏覽器通過此規(guī)范來解析此頁面中的代碼
腳下留心：
<!DOCTYPE>必須放在頁面最頂部
<!DOCTYPE>不是標(biāo)簽琉朽，只是用來聲明文檔類型域帐，并告知瀏覽器通過此規(guī)范來解析本頁面中的代碼
2.html5的doctype聲明
<!DOCTYPE html>
3.XHTML 1.0 的嚴格型doctype聲明：Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）悴侵。不允許框架集（Framesets）瞧剖。
4.XHTML 1.0 的過渡型doctype聲明：Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
注意：使用最多的是html5的聲名和過渡型的聲名
5.XHTML 和 HTML的區(qū)別
XHTML是滿足W3C的HTML
XHTML = 規(guī)范 + HTML
了解：W3C----萬維網(wǎng)聯(lián)盟（World Wide Web Consortium），我們網(wǎng)頁的規(guī)范就是這個機構(gòu)制定的
實體
導(dǎo)入：有一個需求，要做一個html的教材抓于，例：p標(biāo)簽的語法是<p></p>做粤，這樣在頁面中是看不到的，瀏覽器把這個標(biāo)簽解析了捉撮，現(xiàn)在是不需要的怕品，需要將尖括號替換成瀏覽器不能解析的字符，且在瀏覽器中需要看到尖括號的形式巾遭，這個特殊字符就是實體
實體：替換特殊字符的代碼堵泽，比如說<
空格：
<：<
>：>
多學(xué)一招：在DW里面按&符號會有提示很多實體
1.相關(guān)標(biāo)簽
畫圖說明，table是一個表格的模塊恢总，里面有行迎罗，光有行不行，里面要有列片仿，在html中不叫列纹安，叫單元格，再有很多行砂豌，就組成了表格-------》table標(biāo)簽包含行tr---》再包含單元格td
表格：<table></table>
行：<tr></tr>
單元格：<td></td>
每列的標(biāo)題：<th></th>
表格標(biāo)題：<caption></caption>
2.對齊方式
a) 水平對齊
語法：align="center/left/right"
b) 垂直對齊
語法：valign="top/middle/bottom"
3.單元格間距和填充
單元格間距（cellspacing）：單元格和單元格距離厢岂，默認是2像素
單元格填充（cellpadding）：單元格和內(nèi)容的距離，默認是1像素
4.合并單元格
導(dǎo)入：最后兩行的最后兩個單元格為照片阳距，需要合并起來塔粒，這種合并是上下合并，所以合并的是行筐摘。如果是左右合并卒茬，那就是合并的列
合并行(rowspan)：把不同的行合并起來，寫在上面的單元格上面
合并列(colspan)：把不同列合并起來咖熟，寫在左邊的單元格上面
取值是數(shù)值圃酵，需要合并幾個單元格就寫數(shù)字幾就行，一旦合并了單元格馍管，就需要將多余的單元格刪掉
兩個排版標(biāo)簽
這兩個標(biāo)簽沒有語義
div標(biāo)簽：一般用于存放圖片郭赐、文字、視屏等網(wǎng)頁內(nèi)容----存放一切內(nèi)容------用作盒子
span標(biāo)簽：一般只用于存放文字--------存放文字
他們的顯示方式不同
<div>離離原上草确沸，</div>
<div>一歲一枯榮捌锭。</div>
<span>野火燒不盡，</span>
<span>春風(fēng)吹又生罗捎。</span>
課程表
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<!-- cellspacing 單元格之間的間距观谦，默認2，設(shè)置為0兩條線合并
cellpadding 單元格的填充（文字的上下左右都有了填充的距離）
table標(biāo)簽的align屬性是表格整體的對齊方式宛逗，值有l(wèi)eft/right/center（居中）
每個td都已加align對齊方式的屬性坎匿，td單元格中的文字會居左(left)/居右(right)/居中(center)
tr也可以加align屬性盾剩，代表行中的每一個單元格中的文字的對齊方式
tr和td都可以加valign的屬性雷激，代表垂直的對齊方式
table不能加valign屬性
-->
<table border=1 cellspacing=0 width="800" height="500" align="center">
<caption>
<h2>課程表</h2>
</caption>
<tr>
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第一節(jié)</td>
<td align="center">html</td>
<td>css</td>
<td>php</td>
<td>javascript</td>
<td>mysql</td>
</tr>
<tr align="center">
<td>第二節(jié)</td>
<td>css</td>
<td>php</td>
<td>js</td>
<td>自習(xí)</td>
<td>css</td>
</tr>
<tr>
<td>第三節(jié)</td>
<td rowspan="2">php</td>
<td>js</td>
<td valign="top">體育課</td>
<td valign="bottom">mysql</td><!-- bottom下面 -->
<td>js</td>
</tr>
<tr valign="top">
<td>第四節(jié)</td>
<td>mysql</td>
<td>音樂課</td>
<td colspan="2">php</td><!-- column 柱子替蔬，圓柱體 -->
</tr>
</table>
</body>
</html>
表單
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<!-- 表單域 form雙標(biāo)簽 -->
<form>
<!-- 表單元素 -->
<!-- 文本框 -->
<input type="text" name="kahao" value="請輸入你的銀行卡號">
<!-- 口令框（密碼框） -->
<input type="password" name="password" value="請輸入你的密碼">
<!-- 單選框:type屬性的值為radio，同一組單選框都需要加name屬性屎暇，且同一組內(nèi)的name屬性的值必須保持一致
默認選中的屬性是checked值也是checked
-->
<input type="radio" name="sex" checked="checked" value="1">男
<input type="radio" name="sex" value="2">女
<!-- 文件上傳 -->
<input type="file" name="img">
<!-- 復(fù)選框（多選框）
默認選中屬性為checked值也是checked
-->
<input type="checkbox" name="hobby" value="1">吃
<input type="checkbox" name="hobby" value="2">喝
<input type="checkbox" name="hobby" value="3" checked="checked">玩
<input type="checkbox" name="hobby" value="4">樂
<!-- 下拉框
默認選中使用的是selected屬性值是selected
這個屬性是加在option標(biāo)簽上的
-->
<select name="province">
<option>河南省</option>
<option>河北省</option>
<option>湖南省</option>
<option selected="selected">湖北省</option>
</select>
<br>
<!-- 文本域 -->
<textarea rows="5" name="message" cols="50">你好承桥，世界</textarea>
<!-- 按鈕 -->
<!-- 提交按鈕 -->
<input type="submit" value="登錄">
<!-- 普通按鈕 -->
<input type="button" value="盡情點擊">
<!-- 重置按鈕 -->
<input type="reset">
<!-- 雙標(biāo)簽按鈕 -->
<button>提交按鈕2</button>
</form>
</body>
</html>
分組的下拉菜單
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<!--
分組的下拉框
在option標(biāo)簽的外面套了一層optgroup標(biāo)簽，有一個屬性是label根悼，分組的名稱（要顯示在頁面上的）
-->
<form>
<select name="aaa">
<optgroup label="省份">
<option>山東省</option>
<option>廣東省</option>
<option>山西省</option>
</optgroup>
<optgroup label="行業(yè)">
<option>IT互聯(lián)網(wǎng)</option>
<option>制造業(yè)</option>
<option>零售業(yè)</option>
</optgroup>
</select>
<input type="submit">
</form>
</body>
</html>
實體標(biāo)簽
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
段落 標(biāo)簽是<p></p>
♥
</body>
</html>
表格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<table border=1>
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
<tr>
<td>令狐沖</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>任我行</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td>50</td>
</tr>
</table>
</body>
</html>
div標(biāo)簽
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
123123123123<div>阿斯頓發(fā)撒旦規(guī)范</div>asdfasdfasdfasdf
<hr>
123123123123<span>阿斯頓發(fā)撒旦規(guī)范</span>asdfasdfasdfasdf
</body>
</html>
標(biāo)簽的通用屬性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
.box {
color: red;
}
</style>
</head>
<body>
<!--<div id="box"></div>
<div id="box1"></div>-->
<div name="hezi" class="box">盒子1</div>
<p class="box" name="part" style="color:green;">段落</p>
<div class="box1" style="color:green;">我也是盒子</div>
</body>
</html>
表格小例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<!--<h1>游戲添加</h1>
<form>
游戲名稱：<input type="text"><br>
開發(fā)公司：<input type="radio">盛大<input type="radio">騰訊<input type="radio">網(wǎng)易<input type="radio">暴雪<br>
適用人群：<input type="checkbox">小學(xué)生<input type="checkbox">大學(xué)生<input type="checkbox">白領(lǐng)<input type="checkbox">中老年<br>
游戲類別：<select><option>競技類</option><option>動作類</option></select><br>
游戲描述：<textarea></textarea><br>
<input type="submit"><input type="reset">
</form>-->
<form>
<table align="center">
<caption>
<h1>游戲添加</h1>
</caption>
<tr>
<td>游戲名稱：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>開發(fā)公司：</td>
<td>
<input type="radio" name="company">盛大
<input type="radio" name="company">騰訊
<input type="radio" name="company">網(wǎng)易
<input type="radio" name="company">暴雪
</td>
</tr>
<tr>
<td>適用人群：</td>
<td>
<input type="checkbox" name="people">小學(xué)生
<input type="checkbox" name="people">大學(xué)生
<input type="checkbox" name="people">白領(lǐng)
<input type="checkbox" name="people">中老年
</td>
</tr>
<tr>
<td>游戲類別：</td>
<td>
<select>
<option>競技類</option>
<option>動作類</option>
<option>射擊類</option>
<option>益智類</option>
<option>冒險類</option>
</select>
</td>
</tr>
<tr>
<td>游戲描述：</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
小例子1——個人簡歷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>個人簡歷</title>
</head>
<body>
<table width="600" border=1 cellspacing=0 align="center">
<caption>
<h2>個人簡歷</h2>
</caption>
<tr align="center">
<td rowspan="5">
個<br />人<br />資<br />料
</td>
<td>姓名</td>
<td> </td>
<td>性別</td>
<td> </td>
<td>出生年月</td>
<td> </td>
<td rowspan="4">相片</td>
</tr>
<tr align="center">
<td>民族</td>
<td> </td>
<td>政治面貌</td>
<td> </td>
<td>婚姻狀況</td>
<td> </td>
</tr>
<tr align="center">
<td>身高</td>
<td> </td>
<td>健康狀況</td>
<td> </td>
<td>籍貫</td>
<td> </td>
</tr>
<tr align="center">
<td>聯(lián)系電話</td>
<td> </td>
<td>電子郵箱</td>
<td> </td>
<td>現(xiàn)所在地</td>
<td> </td>
</tr>
<tr align="center">
<td>應(yīng)聘職位</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td>技能</td>
<td>外語水平</td>
<td colspan="2"></td>
<td>電腦水平</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td rowspan="4">
教<br>育<br>背<br>景
</td>
<td colspan="2">起止日期</td>
<td colspan="2">畢業(yè)院校</td>
<td colspan="2">專業(yè)</td>
<td>詳細情況</td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td rowspan="4">
工<br>作<br>經(jīng)<br>歷
</td>
<td colspan="2">起止日期</td>
<td colspan="2">公司名稱</td>
<td colspan="3">主要職位及職責(zé)</td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td rowspan="3">
能<br>力<br>情<br>況
</td>
<td colspan="2">個人榮譽</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td colspan="2">興趣特長</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td colspan="2">個人期望</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td rowspan="4">
自<br>我<br>評<br>價
</td>
<td colspan="7" rowspan="4"></td>
</tr>
</table>
</body>
</html>
小例子2——登錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border=1 cellspacing=0 bgcolor="pink" width="500" valign="middle">
<tr height="70">
<th colspan=2>京東會員</th>
</tr>
<tr height="70">
<td>用戶名：</td>
<td>
<input type="text" value="請輸入用戶名" maxlength=6 />
<font color="red" size="1">最多輸入6個字符</font>
</td>
</tr>
<tr height="70">
<td>密碼：</td>
<td>
<input type="text" maxlength=6 />
<font color="red" size="1">最多輸入6個字符</font>
</td>
</tr>
<tr height="170">
<td>驗證碼：</td>
<td>
<input type="text" /><br /><br />
<img src="yzm.jpg" />
</td>
</tr>
<tr height="70">
<td colspan=2 align="center">
<a href="#">登錄</a>|<a href="#">注冊用戶</a>
</td>
</tr>
</table>
</body>
</html>
小例子3——多媒體練習(xí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多媒體練習(xí)</title>
</head>
<body background="cun.jpg">
<embed src="1.mp3" hidden="true" autostart="true" loop="true">
<marquee behavior="alternate" direction="left" loop="-1" scrolldelay="100">
背景音樂不錯
</marquee>
<marquee behavior="alternate" direction="left">
<img src="1.png">
</marquee>
<marquee behavior="scroll" direction="right">
<img src="2.png">
</marquee>
</body>
</html>
小例子4——小說排行榜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小說排行榜</title>
</head>
<body>
<table width="800" border=1>
<caption>
<h2>今日小說排行榜</h2>
</caption>
<tr height=40>
<th>排行</th>
<th>關(guān)鍵詞</th>
<th>趨勢</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相關(guān)鏈接</th>
</tr>
<tr height=40>
<td>1</td>
<td>鬼吹燈</td>
<td>
<img src="up.jpg" />
</td>
<td>65589</td>
<td>45</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>2</td>
<td>盜墓筆記</td>
<td>
<img src="down.jpg" />
</td>
<td>1</td>
<td>456</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>3</td>
<td>西游記</td>
<td>
<img src="up.jpg" />
</td>
<td>2</td>
<td>456</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>4</td>
<td>東游記</td>
<td>
<img src="up.jpg" />
</td>
<td>4567</td>
<td>456</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>5</td>
<td>甄嬛傳</td>
<td>
<img src="down.jpg" />
</td>
<td>7895</td>
<td>456</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>6</td>
<td>水滸傳</td>
<td>
<img src="up.jpg" />
</td>
<td>4254</td>
<td>456</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>7</td>
<td>三國演義</td>
<td>
<img src="up.jpg" />
</td>
<td>456</td>
<td>456</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
</html>
小例子5——注冊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注冊</title>
</head>
<body>
<form action="">
<table width="550" align="center">
<caption>
<h4>請?zhí)顚懹蛎畔ⅲㄕ埬鷦?wù)必填寫真實凶异，有效和完整的域名注冊信息。）</h4>
</caption>
<tr>
<td align="right">登錄賬號： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">密碼： </td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">性別： </td>
<td>
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td align="right">注冊網(wǎng)址： </td>
<td><input type="text" value="www." /></td>
</tr>
<tr>
<td align="right">注冊網(wǎng)址后綴： </td>
<td>
<input type="checkbox" name="suffix" checked="checked" />.com
<input type="checkbox" name="suffix" checked="checked" />.cn
<input type="checkbox" name="suffix" checked="checked" />.net
<input type="checkbox" name="suffix" checked="checked" />.org
</td>
</tr>
<tr>
<td align="right">域名持有者（中文）： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">域名持有者（拼音文）： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">所屬區(qū)域： </td>
<td>
<select>
<option value="">中國</option>
<option value="">美國</option>
<option value="">英國</option>
<option value="">法國</option>
</select>
<select>
<option value="">-省份-</option>
<option value="">河南省</option>
<option value="">湖南省</option>
<option value="">新疆維吾爾自治區(qū)</option>
</select>
</td>
</tr>
<tr>
<td align="right">單位所在地： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">單位負責(zé)人： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">通信地址： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">聯(lián)系電話： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" />
<input type="reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
