HTML總結：
一：結構：
宣告版本：<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" lang="zh-CN" content="愛奇藝，視訊網站,電影">
<meta name="description" lang="zh-CN" content="視訊，電影">
<title></title>
</head>
<body>
<body>
</html>
二：注意：
1：如何處理亂碼問題
在程式碼中用 <meta charset="">設定編碼
同時，選中檔案，右鍵，選擇properties選項，設定編碼一致。
2：程式碼註釋快捷鍵：ctrl+/
3：html註釋：<!---->
4：行內元素/內聯元素：<b>,<a>,<br>,<input>,<img>,<input>,
塊級元素：<hn>,<form>,<ol>,<ul>,<li>,<dl>,<div>,<p>,<table>,<tr>,<td>
塊級元素(block)特性：
總是獨佔一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裡面文字或圖片的大小;
塊級元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
內聯元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
在標準文件流裡面，塊級元素具有以下特點：
①總是在新行上開始，佔據一整行；
②高度，行高以及外邊距和內邊距都可控制；
③寬頻始終是與瀏覽器寬度一樣，與內容無關；
④它可以容納內聯元素和其他塊元素。
行內元素的特點：
①和其他元素都在一行上；
②高，行高及外邊距和內邊距部分可改變；
③寬度只與內容有關；
④行內元素只能容納文字或者其他行內元素。
不可以設定寬高，其寬度隨著內容增加，高度隨字型大小而改變，內聯元素可以設定外邊界，但是外邊界不對上下起作用，只能對左右起作用，也可以設定內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用
三：標籤：
1：文字處理
（1）標題
<h1>到<h6>
（2）段落
<p>
align：文字對齊方式
（3）列表(可以巢狀)
有序列表：
<ol type="a" start="n">
<li>xxx<li>
<li>xxx<li>
</ol>
type="a"： 以a,b,c...為順序排序
start="n": 從n開始排序
無序列表：
<ul type="square">
<li>xxx<li>
<li>xxx<li>
</ul>
type="square": 實心圓/空心圓
（4）分割槽
<div style="border:1px solid red"> //邊框線粗細為1畫素，顏色為紅色
</div>
（5）修飾行內的文字
<span style="color:red">
</span>
（6）文字加粗
<b>或者<strong>
（7）文字傾斜
<i>或者<em>
（8）新增下劃線、刪除線，上標，下標
<u>、<del>，<sub>,<sup>
（9）換行
<br>
（10）一個空格 、小於號< 大於號> 、大於號、版權號©
 、、
（11）文字居中
<align="left/center/right">
（12）水平線
<hr>
2：圖片和超連結
（1）圖片
<img alt="載入失敗..." title=" " src="../images/1.jpg"> // ../表示向上跳一級
alt: 圖片顯示失敗時顯示的內容
title：圖片的標題
（2）超連結
<a>百度</a>
屬性：target="_selt/_blank/_new/_parent" 預設是_self
//連結到外網,在新視窗中開啟
<a href="http://wwww.baidu.com" target="_blank">百度連結</a>
//連結到內網，在當前頁面開啟
<a href="demo1.html" target="_self">demo1</a>
//定義錨點，並連結到底端 （注意：name中命名最好用英文，且連結的href裡格式是#+命名）
底端寫：<a name="low">底端</a>
頂端寫：<a href="#low">回到底端</a>
//定義錨點連線到頂端
底端寫：<a href="#">top</a>
（3）圖片作為超連結
<a href="http://www.baidu.com"><br><img src="../images/x.jpg"></a>
3：製作表格
（1）建立表格（2行2列）
<table border="1px" width="30px">
<tr>
<td>a<td>
<td>b<td>
</tr>
<tr>
<td>c<td>
<td>d<td>
</tr>
</table>
（2）跨行 （跨多少行rowspan等於幾)
<table border="1px" width="30px">
//第一行
<tr>
<td rowspan="2">a</td>
<td>b</td>
</tr>
//第二行
<tr>
//由於a要跨行，佔據c的位置，所以要先將c刪除
<!--td>c</td> -->
<td>d</td>
</tr>
</table>
（3）跨列
<table border="1px" width="30px">
//第一行
<tr>
<td colspan="2">a</td>
//由於a要跨行，佔據b的位置，所以要先將b刪除
<!==<td>b</td>-->
</tr>
//第二行
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
4：表單
（1）定義表單：
<form></form>
主要屬性：
- action：表單提交的URL
- method：指出表單提交的方式
-enctype：表單資料進行編碼的方式
（2）表單控制元件
表單包含很多不同型別的控制元件，是一種HTML元素，是資訊的輸入項
表單控制元件包括：
-input元素（具有不同的外觀）
文字框、密碼框
單選框、複選框
按鈕
隱藏域、檔案選擇框
-其他元素
標籤、文字域、下拉選
<form action="#">
<!--input: 文字框 -->
<p>
<!-- lable:<lable for="控制元件ID">文字</label>
是表單中的文字，通過for屬性就可以繫結到input元素上，是點選此label時，
就相當於點選了對應的input。id是元素的身份證號，用來引用該元素 -->
//文字框
<label for="username">賬號：</label>
<input type="text" id="username"/>
//密碼框
<input type="password"/>
//主要屬性
- value：由訪問者自由輸入任何文字
- maxlength: 限制輸入的字元數
- readonly: 設定文字控制元件只讀
//單選框
<input type="radio"/>
checked="checked" 設定預設選中
//多選框
<input type="checkbox"/>
<select multiple=“true“></select>
//主要屬性
-value：文字，當提交form時，如果選中此項，則value被髮送到伺服器
-name: 用於實現分組，一組單選框或複選框名稱必須相同
-checked="checked" 設定預設選中
//按鈕
//提交按鈕 （傳送表單資料給伺服器）
<input type="submit"/>
//重置按鈕 （清空表單內容並把所有設定迴歸預設值）
<input type="reset"/>
//普通按鈕 （用於執行客戶端指令碼）
<input type="button"/>
//主要屬性
-value ：按鈕的名字
//隱藏框
<input type="hidden"/>：元素不可見
//檔案選擇框
<input type="file"/>
//文字域
<textarea></textarea>
//屬性：
cols:指定文字域的列數
rows:指定文字域的行數
readonly:只讀
//下拉選：
語法：
<select>
<option value="1">上路</option>
<option value="2">上路</option>
<option value="3">上路</option>
</select>
selected="selected" 設定預設選中
</p>
</form>
（3）表單高階用法
隱藏域：<input type="hidden" name="hid"><br>
只讀：<textarea rows="4" cols="40" readonly="readonly">商品價格等為只讀資訊</textarea>
內容無法修改
禁用：<input type="submit" value="註冊" disabled="disabled"/>
無法點選觸發效果
（4） 表單的基本元素 <input> <select> <option> <textarea> 輔助元素 <label> <filedset> <legend>
按鈕button不屬於表單元素
5.iframe的應用
（1）iframe袁術會建立包含另外一個文件的內聯框架
（2）frame與iframe佈局區別
frame必須巢狀frameset使用，並且不能再body分割槽使用
iframe可以獨立使用，必須在body分割槽使用
frame的高度只能通過frameSet控制；iframe可以自己控制，不能通過frameSet控制，
Frame一般用來設定頁面佈局,將整個頁面分成規則的幾塊,每一塊裡面包含一個新頁面.
iframe用來在頁面的任何地方插入一個新的頁面.
iframe則更靈活,不要求將整個頁面劃分,你可以在頁面任何地方用iframe嵌入新的頁面.
<frame>用於全頁面
<iframe>只用於區域性
（3）iframe是行內框架、可以改變寬高
（4）iframe通過iframe中巢狀的頁面，在該頁面原始碼中通過<center></center>可以實現頁面居中
<pre></pre>標籤
<a name="bottom">底端</a>
//Attribute (name) is obsolete. Its use is discouraged in HTML5 documents.
//html5中,建議使用css來控制頁面的顯示.不建議直接在html檔案中新增屬性.