1.網頁的基本結構
<!-- 聲明網頁的版本 -->
<!doctype html>
<!-- 唯一的根元素 -->
<html>
<!-- 對網頁的基本配置 -->
<head>
<!-- 聲明網頁的編碼 -->
<meta charset="utf-8">
<!-- 聲明網頁的標題 -->
<title>第一個網頁</title>
</head>
<!-- 寫網頁的具體內容 -->
<body>
HTML不錯。
</body>
</html>
效果圖：
2.網頁中的基本語法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.標題 -->
<h1><a href="#曾">曾老師</a></h1>
<h2>範傳奇</h2>
<h3>王克晶</h3>
<!-- 2.段落 -->
<p>牀前明月光</p>
<p>疑似地上霜</p>
<p>舉頭望明月</p>
<p>低頭思故鄉</p>
<!-- 3.列表 -->
<!-- 3.1有序 -->
<ol>
<li>湖南省</li>
<li>湖北省</li>
<li>河南省</li>
</ol>
<!-- 3.2無序 -->
<ul>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
<!-- 3.3嵌套列表 -->
<ol>
<li>
河北省
<ul>
<li>石家莊</li>
<li>唐山</li>
</ul>
</li>
<li>
山東省
<ul>
<li>濟南</li>
<li>青島</li>
</ul>
</li>
</ol>
<!-- 4.行內元素 -->
<p>
北京市<i>海濱區</i>北<b>三環</b>西路甲<u>18</u>號<span style="color:red;">中鼎大廈</span>B座7層
</p>
<!-- 5.空格摺疊-->
<p>
那是個 秋天！<br>
看着你 奔跑！<br>
不小心 跌倒！<br>
</p>
<!-- 6.圖片（行內，左右排列） -->
<!-- 1)絕對路經
從盤符開始寫出圖片的完整的路徑
如D:/images/1.jpg
如/home/soft01/images/1.jpg
這樣寫有明顯的缺點：
a.路徑寫得很長，麻煩
b.若項目上顯示，用戶要求將網頁和圖片
存到別的盤符下，那麼所有路徑都錯了 -->
<!-- 2)相對路經
只要寫出圖片和網頁的相對位置；
優點：
a.簡單
b.上線時無論將項目存到哪個盤符下，
網頁和圖片的相對位置都沒有發生變化-->
<p>
<!-- 圖片和網頁平級 -->
<img alt="" src="01.jpg"/>
<!-- 圖片在網頁下級 -->
<img alt="" src="i/02.jpg"/>
<!-- 圖片在網頁上級 -->
<img alt="" src="../03.jpg"/>
<!-- 一般的情況 -->
<img alt="" src="../images/04.jpg"/>
</p>
<!-- 7.超鏈接（行內） -->
<!-- 7.1超鏈接的一般用法 -->
<p>
<a href="http://www.baidu.com" >百度</a>
<a href="http://hao.360.com" target="_blank">360</a>
</p>
<!-- 7.1超鏈接的特殊用法
將超鏈接鏈接到本網頁的某個位置
1）這個位置叫做錨點
2）必須提前聲明錨點-->
<p>
<a name="曾">曾老師</a>是個好人！！
</p>
<!-- 頂部默認就是錨點，沒有名字 -->
<p><a href="#">回到頂部</a></p>
<!-- 8.表格 （塊）-->
<!-- 8.1表格的基本結構 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td>蒼老師</td>
<td>反傳奇</td>
</tr>
<tr>
<td>王克晶</td>
<td>承租紅</td>
</tr>
</table>
<!-- 8.2跨行 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td rowspan="2">蒼老師</td>
<td>反傳奇</td>
</tr>
<tr>
<!-- <td>王克晶</td>-->
<td>承租紅</td>
</tr>
</table>
<!-- 8.3跨列 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td colspan="2">蒼老師</td>
<!-- <td>反傳奇</td> -->
</tr>
<tr>
<td>王克晶</td>
<td>承租紅</td>
</tr>
</table>
<!-- 8.4行分組 -->
<table border="1" cellspacing="0" width="40%">
<thead>
<tr>
<td>編號</td>
<td>名稱</td>
<td>金額</td>
</tr>
</thead>
<tbody style="color:blue;">
<tr>
<td>001</td>
<td>鼠標</td>
<td>50</td>
</tr>
<tr>
<td>002</td>
<td>鍵盤</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">統計</td>
<td>150</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果圖：
3.分區
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- logo區 -->
<div>
<p>此處應該擺放一張圖片</p>
</div>
<!-- 內容區 -->
<div style = "color:red;">
<h1>宮保雞丁的做法步驟</h1>
<p>放油</p>
<p>放雞丁</p>
<p>放花生</p>
<p>出鍋</p>
</div>
<!-- 版權區 -->
<div>
<p>版權所有，違者必究</p>
</div>
</body>
</html>
效果圖：
4.表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表單元素：
用來聲明數據提交的範圍，只有在此元素內的數據可以提交給服務器
action:聲明數據提交的目標
method/enctype：將來再講-->
<form action="http://www.tmooc.cn">
<!-- 2.表單控件：
用來讓用戶輸入數據。 -->
<!-- 1)input元素(9個),
他們之間用type屬性區分。 -->
<!-- 文本框 -->
<p>
帳號:<input type="text"/>
</p>
<!-- 密碼框 -->
<p>
密碼:<input type="password"/>
</p>
<!-- 單選框
name:組名，同一組radio互斥。
checked:設置默認選中。
value:將來再講。-->
<p>
性別：
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
</p>
<!-- 多選框
checked:設置默認選中。
name/value:將來再講。 -->
<p>
興趣：
<input type="checkbox" checked/>音樂
<input type="checkbox"/>看書
<input type="checkbox"/>打球
</p>
<!-- 文件框 -->
<p>
頭像:<input type="file"/>
</p>
<!-- 隱藏框 -->
<p>
<input type="hidden" value="abc"/>
</p>
<!-- 按鈕
submit：提交表單中的數據
reset：將表單中的數據重置爲初始值
button：沒有任何功能，需通過js定義功能-->
<p>
<input type="submit" value="註冊"/>
<input type="reset" value="重置"/>
<input type="button" value="試試"/>
</p>
<!-- 2)其他元素(3個)，
-->
<!-- label:用來管理表單中的文本
可以將文本與控件綁定在一起，從而增加控件的受力面積
id:元素的唯一標識，相當於元素的身份證號。
任何元素都可以有id，程序員有義務保障元素的id不重複 -->
<p>
<input type="checkbox" id="c1"/>
<label for="c1">我已閱讀並自願遵守此協議！</label>
</p>
<!-- select：下拉選擇
selected：設置默認選擇
value:將來在講-->
<p>
城市:
<select>
<option>請選擇</option>
<option>北京</option>
<option selected>上海</option>
<option>廣州</option>
<option>深圳</option>
<option>杭州</option>
</select>
</p>
<!-- textarea：文本域-->
<p>
簡介：
<textarea rows="5" cols="30">這是文本域的默認值</textarea>
</p>
</form>
</body>
</html>
效果圖：
