1、HTML
整個HTML标簽就是一個文檔樹；
HTML是一種超文本标記語言；是一種制作網際網路的頁面标準語言。
HTML的模型分析：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html> (1)、DOCTYPE的作用：标準相容模式的開啟，在所有浏覽器中顯示的頁面均相同。
<!DOCTYPE html>是推薦使用的一種。
(2)、對于空格隻是為了好識别，沒有嚴格規定必須這樣；
(3)、對于中間的單引号/雙引号，在html中一樣，無差別；
(4)、HTML的注釋形式：<!-- -->
2、HTML文檔分析
(1)、meta
負責頁面的編碼、重新整理、跳轉新的頁面、搜尋關鍵詞等....
i>頁面編碼(告訴浏覽器采用什麼編碼)
<meta http-equiv="content-type" content="text/html;charset=utf-8"> ii>重新整理和跳轉
<meta http-equiv='Refresh' Content='30'> 含義：30秒鐘重新整理一次；
iii>關鍵詞
<meta name='keywords' Content='西安市'> 3、<head>中的書寫
i>、<title>........</title>: 中間寫網頁名字，
ii>、<link ....... />: 寫外部檔案的連接配接位置，
例：css
<link rel="stylesheet" type="text/css" href="css/common.css"> iii>、<style>.........<style>: 中間寫各種樣式，
iv>、<script src = '路徑'></script>: 調用外面的js檔案，
<script type = 'text/javascript'>..........</script>: 中間寫js代碼，
4、常用标簽
一般寫在：<body>.....</body>；
标簽一般分為2組：塊級标簽(div、h1、p......)和行内标簽(a、span、select.....)；
div和span
<div>123</div> #顯示完換下一行
<span>123</span> #顯示完不換行
<div><div> </div> #顯示标簽<div>和一個空格( ) p和br
<p></p> #上下之間間隔一行
<br/> #換行 a
<a href = '網址'></a> #調轉網址
<a href = 'http://11596096.blog.51cto.com' target = '_blank'></a> #target表示在新的頁面打開 H
H1 H2 H3 H4 H5 H6：字型大小，從大---->小
select
(1)、不劃分組的：
<select multiple = ‘multiple’ size = ‘1’>
<option>上海</option>
<option>北京</option>
<option>廣州</option>
</select> (2)、劃分組的：
<select>
<optgroup label = '河北省'>
<option>石家莊</option>
<option>邯鄲</option>
</optgroup>
<optgroup label = '陝西省'>
<option>西安市</option>
<option>鹹陽市</option>
</optgroup>
</select> 運作結果：
input下面：
(1)、checkbox
<input type = 'checkbox'/>
<input type = 'checkbox'/>
<input type = 'checkbox'/>
<input type = 'checkbox'/> (2)、redio
男：<input type = 'radio' name = 'gen'/>
女：<input type = 'radio' name = 'gen'/>
保密：<input type = 'radio' name = 'gen'/> (3)、password
<input type = 'text' maxlength = '2' /> #後面的參數表示最多輸入2個字母
<input type = 'password'/> (4)、button和submit
<input type = 'button' value = '送出'/> #就是一個單純的送出按鈕
<input type = 'submit' value = '送出'/> #與背景互動的送出 運作結果：
(5)、file
<input type = 'file' /> textarea
<textarea>ddddddddddddddddddd</textarea> label
主要作用：更加友好(點選姓名，自動在框框中出現光标)；
<label for = 'name2'> #點選姓名,光标出現在第二個框中;
姓名：<input id = 'name1' type = 'text' />
<br/>
姓名：<input id = 'name2' type = 'text' />
</label> ul ol dl
<ul>
<li>西安</li>
<li>北京</li>
<li>上海</li>
</ul>
<ol>
<li>湖南</li>
<li>四川</li>
<li>廣州</li>
</ol>
<dl>
<dt>河北省</dt> #以dt中間的内容為表頭
<dd>邯鄲</dd>
<dd>石家莊</dd>
<dt>陝西省</dt>
<dd>西安</dd>
<dd>渭南</dd>
</dl> table
(1)、都寫在一起
<table border= ‘1’> #預設表格形式列印
<tr> #<tr>是行的意思
<th>IP</th> #<th>是表頭的意思,預設居中，黑體列印(列)；
<th>IDC</th>
<th>Status</th>
</tr>
<tr>
<td>IP</td> #<td> #列的形式列印;
<td>IDC</td>
<td>Status</td>
</tr>
<tr>
<td>192.168.3.32</td>
<td>北京</td>
<td>online</td>
</tr>
</table> (2)、table的頭和身體分開(并且合并了行、列)
<table border = '1'>
<thead>
<tr>
<th>IP</th>
<th>IDC</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan = '2'>IP</td> #2列合一列
<td>Status</td>
</tr>
<tr>
<td rowspan = '2'>192.168.3.32</td> #2行合一行
<td>北京</td>
<td>online</td>
</tr>
<tr>
<td>北京</td>
<td>online</td>
</tr>
</tbody>
</table> fieldset
<fieldset>
<legend>登入</legend>
<p>喜歡：</p>
<p>愛好:</p>
<p>城市:</p>
</fieldset> form
<form action = '/' method = 'POST'>
Name:<input type = 'text'/>
<br/>
pwd:<input type = 'password'>
<br/>
<input type = 'button' onclick = 'alert(123)' value = '送出'/> #onclick是一個事件,在js中再說。
<input type = 'submit' value = '送出'/>
</form> <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
</head>
<!--
<body>
<div>alex1</div>
<div>alex2</div>
<div>alex3</div>
<span>zhangsan</span>
<span>zhangsan</span>
<div><div> </div>
</body>
-->
<!--
<body>
<p>ddddddddddddd</p>
<p>ddddddddddddd</p>
<div>ddddddd<br/>ddddddddddddd</div>
</body>
-->
<body>
<!--
<a href = 'http://11596096.blog.51cto.com' target = '_blank'
dashen = 'alex'>老男孩</a>
目錄：
<div>
<a href = '#id1'>第一章</a>
<a href = '#id2'>第二章</a>
<a href = '#id3'>第三章</a>
</div>
内容：
<div id = 'id1'>
<p>第一章内容</p>
</div>
<div id = 'id2' style = 'height:1000px; background-color:red;'>第二章内容</div>
<div id = 'id3' style = 'height:1000px;'>第三章内容</div>
<h1>ddddddd</h1>
<h6>ddddddddddddd<h6>
<select multiple = ‘multiple’ size = ‘1’>
<option>上海</option>
<option>北京</option>
<option>廣州</option>
</select>
<select>
<optgroup label = '河北省'>
<option>石家莊</option>
<option>邯鄲</option>
</optgroup>
<optgroup label = '陝西省'>
<option>西安市</option>
<option>鹹陽市</option>
</optgroup>
</select>
-->
<!--
<input type = 'text' maxlength = '2' />
<input type = 'password'/>
-->
<!--
<input type = 'checkbox'/>
<input type = 'checkbox'/>
<input type = 'checkbox'/>
<input type = 'checkbox'/>
-->
<!--
男：<input type = 'radio' name = 'gen'/>
女：<input type = 'radio' name = 'gen'/>
保密：<input type = 'radio' name = 'gen'/>
<br/><br/>
-->
<!--
<input type = 'button' value = '送出'/>
<input type = 'submit' value = '送出'/>
<br/><br/>
-->
<!--
<input type = 'file' />
<textarea>ddddddddddddddddddd</textarea>
-->
<form action = '/' method = 'POST'>
Name:<input type = 'text'/>
<br/>
pwd:<input type = 'password'>
<br/>
<input type = 'button' onclick = 'alert(123)' value = '送出'/>
<input type = 'submit' value = '送出'/>
</form>
<!--
<label for = 'name2'>
姓名：<input id = 'name1' type = 'text' />
<br/>
姓名：<input id = 'name2' type = 'text' />
</label>
<ul>
<li>西安</li>
<li>北京</li>
<li>上海</li>
</ul>
<ol>
<li>湖南</li>
<li>四川</li>
<li>廣州</li>
</ol>
<dl>
<dt>河北省</dt>
<dd>邯鄲</dd>
<dd>石家莊</dd>
<dt>陝西省</dt>
<dd>西安</dd>
<dd>渭南</dd>
</dl>
-->
<!--
<table border= ‘1’>
<tr>
<th>IP</th>
<th>IDC</th>
<th>Status</th>
</tr>
<tr>
<td>IP</td>
<td>IDC</td>
<td>Status</td>
</tr>
<tr>
<td>192.168.3.32</td>
<td>北京</td>
<td>online</td>
</tr>
</table>
<table border = '1'>
<thead>
<tr>
<th>IP</th>
<th>IDC</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan = '2'>IP</td>
<td>Status</td>
</tr>
<tr>
<td rowspan = '2'>192.168.3.32</td>
<td>北京</td>
<td>online</td>
</tr>
<tr>
<td>北京</td>
<td>online</td>
</tr>
</tbody>
</table>
<fieldset>
<legend>登入</legend>
<p>喜歡：</p>
<p>愛好:</p>
<p>城市:</p>
</fieldset>
-->
</body>
</html>