1、html的簡介
1.1 什么是html？
HTML:HyperText Markup Language：超文本標記語言或超文本鏈接標識語言，目前網絡上使用最為廣泛的語言，是構成網頁文檔的主要語言。可以包含文字、圖形、動畫、聲音、表格、鏈接等。
html結構包括頭部（head）、主體（body），其中頭部描述瀏覽器所需信息，而主體包含頁面顯示內容。。
超文本：超出文本的范疇，使用html可以輕松實現這樣操作。
標記：html所有的操作都是通過標記實現的，標記就是標簽，<標簽名稱>。
1.2 html的規范（遵循）
html結構包括頭部（head）、主體（body），其中頭部描述瀏覽器所需信息，而主體包含頁面顯示內容。
HTML文檔由4個主要標記組成，這4個標記主要有<html>、<head>、<title>、<body>。他們構成了HTML頁面最基本的元素。
<html>標記是HTML文件的開頭。所有HTML文件都是以<html>標記開頭，以</html>標記結束。
<head>標記是HTML文件的頭標記，作用是放置HTML文件的信息。
<title>標記為標題標記。可將網頁的標題定義在<title>與</title>標記之中。
<body>是HTML頁面的主體標記。頁面中的所有內容都定義在<body>標記中。<body>標記也是成對使用的。
html的代碼不區分大小寫的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>標題</title>
</head>
<body>
<h1>hello word!</h1>
</body>
</html>
1.3 W3C介紹
W3C是英文world wide web consortium的縮寫。中文意思是W3C理事會或者萬維網聯盟。
W3C於1994年在麻省理工學院計算機科學實驗室成立。非盈利組織。像html、xhtml、css、xml的標准都由W3C來制定。
1.4 常用瀏覽器
1.4.1 IE瀏覽器
window自帶瀏覽器
瀏覽網頁效率偏低，尤其是早期的IE6，IE7，IE8后逐步改善。但由於他的普及率較高，所以雖然有谷歌瀏覽器、火狐等高效率的瀏覽器，但是我們還是需要兼容IE.
IE瀏覽器只建議瀏覽效果，不提倡用IE來進行調試html源碼。
1.4.2 谷歌瀏覽器 Google Chrome
該瀏覽器執行效率高，平常我們瀏覽頁面時都采用此瀏覽器。網頁開發過程中也使用該瀏覽器調試頁面源碼。
使用Chrome調試頁面源碼：
使用瀏覽器打開網頁，按“F12”打開調試窗口，可以使用鼠標在對應元素位置點擊右鍵，然后點擊查看元素
1.4.3 火狐瀏覽器
開源的瀏覽器。
火狐瀏覽器瀏覽效率高、安全性高、拓展性好。該瀏覽器和谷歌瀏覽器一樣適用於源代碼調試。調試方式也像類同。
2、HTML常用標記
HTML中提供了很多標記，可以用來設計頁面中的文字、圖片，定義超鏈接等。這些標記的使用可以使頁面更加的生動。
2.1 注釋
<!-- 注釋 --> ：注釋的內容將不會顯示到瀏覽器頁面中。
2.2 文本標簽
2.2.1 基本結構樣式：
<標記 屬性=”屬性值”>內容</標記>
<標記 屬性=”屬性值”></標記> 等價於 <標簽 屬性=”屬性值”/>
標記也稱為元素。
html中的標記是不區分大小寫的。
2.2.2 文字標簽
<font></font>：文字標簽，修改文字的樣式
屬性：
- size: 文字的大小 取值范圍 1-7,超出了7，默認還是7
- color：文字顏色
- face：字體
顏色兩種表示方式
- 英文單詞：red green blue black white yellow gray......
- 使用十六進制數表示 #ffffff : RGB
<font color="red">紅色</font>
<font color="#EEEEEE">dffd</font>
2.3 標題標簽、水平線標簽和特殊字符
* 標題標簽：
<h1></h1> <h2></h2> <h3></h3> .......<h6></h6> ：從h1到h6，大小是依次變小，同時會自動換行
* 水平線標簽 <hr/>
屬性：
- size: 水平線的粗細 取值范圍 1-7
- color: 顏色
<hr size="5" color="blue"/>
* 特殊字符
想要在頁面上顯示這樣的內容 <html>:是網頁的開始！需要對特殊字符進行轉義
版權號（©） ： ©
< ：< > ：> 空格 ： & ：&
2.4 換行標記
<br/> ：換行標簽
2.5 段落標簽
<p align=””>內容</p> : 段落標簽。在段前和段后各添加一個空行。
align的值為left、center、right
與<br/>區別：
- <br/>只是換行操作
- 段落與其他內容間還增加了空行
- 段落內容可以進行對齊排版。
2.6 居中標簽
HTML默認布局是從左到右依次排序。
<center></center> :居中標簽，使頁面中的內容在頁面的居中位置顯示。
2.7 列表標簽
在每個列表項的前面添加一個空格。
- <dl> </dl>: 表示列表的范圍
- 在dl里面 <dt></dt>: 上層內容
- 在dl里面 <dd></dd>：下層內容\
<dl>
<dt>部門</dt>
<dd>計划部</dd>
<dd>工程部</dd>
<dd>生產部</dd>
</dl>
2.7.1 無序列表
無序列表是在每個列表項的前面添加一個圓點符號。
通過符號<ul>創建一組無序列表，其中每個列表項用<li>表示。
屬性： type: 空心圓circle 、實心圓disc 、實心方塊square ，默認disc
<ul>
<li>計划部</li>
<li>工程部</li>
<li>生產部</li>
</ul>
2.7.2 有序列表
有序列表是在每個列表項的前面添加排序。
通過符號<ol>創建一組無序列表，其中每個列表項用<li>表示。
| 屬性 | 值 | 描述 |
| reversed | reversed | 規定列表順序為降序。(9,8,7...) |
| start | number | 規定有序列表的起始值。 |
| type |
|
規定在列表中使用的標記類型。 |
<ol>
<li>計划部</li>
<li>工程部</li>
<li>生產部</li>
</ol>
2.7.3 字體顯示補充
<b></b> 字體加粗
<i></i> 斜體
<u></u> 下划線
<sup></sup> 上標
<sub></sub> 下標
<del></del> 刪除線
2.8 表格標簽
表格包含標題、表頭、行和單元格。在HTML語言中，表格標記使用符號<table>表示。定義表格光使用<table>是不夠的，還需要定義表格中的行、列、標題等內容。
表格標記<table>、標題標記<caption>、表格行標記<tr>、單元格標記<td>
基本語法：
<table></table> 表格標簽，也是表格的最大標簽，表格中所有內容都要放在此標簽中。
<tr></tr> 表示表格中的一行，嵌套在<table>標簽中。
<th></th> 表頭單元格標簽。表示表格的表頭中的一個單元格。
<td></td> 單元格標簽。表示表格中的一個單元格，是表格中的最小單位，嵌套在<tr>標簽中。
可以對數據進行格式化，使數據顯示更加清晰
- <table></table>: 表示表格的范圍
- border：表格線
- bordercolor：表格線的顏色
- cellspacing：單元格直接的距離
- width：表格的寬度
- height：表格的高度
在table里面 <tr></tr>
- 設置對齊方式 align： left center right
在tr里面 <td></td>
- 設置顯示方式 align： left center right
使用th也可以表示單元格
- 表示可以實現居中和加粗
表格的標題
<caption></caption>
* 合並單元格
- rowspan：跨行
** <td rowspan="3">人員信息</td>
- colspan：跨列
** <td colspan="3">人員信息</td>
2.9 HTML表單標簽
表單的作用：主要用於讓用戶輸入數據，並提交到服務器。
<form>標簽中通常會有很多子元素，用來定義各種交互控件（文本字段、復選框、單選框、提交按鈕等等），比如< input>、< button>、< select>、< textarea>等標簽。
<form>標簽語法格式：<form action="提交地址" method="提交方式">表單內容</form>
說明：表單內容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等標簽。
<form>標簽屬性：
- accept：服務器接收到的文件的類型（html5版本也不支持）；
- accept-charset：服務器可處理的表單數據字符集；
- action：當提交表單時向何處發送表單數據；
- autocomplete：是否啟用表單的自動完成功能，值可以是：on、off，html5新增；
- enctype：在向服務器發送表單數據之前如何對其進行編碼，method="post"時可以使用，值可以是：multipart/form-data、text/plain等；
- method：用於發送表單數據的HTTP方法，值可以是：get、post；
- name：規定表單的名稱，在xhtml中也廢棄，使用id來代替；
- novalidate：提交表單時不進行驗證，值為：novalidate，html5新增；
- arget：在何處打開action屬性中的地址，值可以是：_blank、_self、_parent、_top；
get和post區別？
1）get請求地址欄會攜帶提交的數據，post不會攜帶（數據在請求體里面）
2）get請求安全級別較低，post較高
3）get請求數據大小的限制，post沒有限制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中form表單標簽的詳細介紹</title>
</head>
<body bgcolor="bisque">
<form action="/1.php" method="get"> 用戶名：<br>
<input type="text" name="userName">
<br>密碼：<br>
<input type="text" name="password"><br><br>
<input type="submit" value="登陸">
</form>
</body>
</html>
表單元素標記
①.單行文本
<input name=”文本框名稱” type=”text” value=”初始值” size=“顯示字符數” maxlength=“最多容納字符數”readonly=”readonly”(設置為只讀) disable=”disable”(設置為不可操作) ></input>
②.密碼框
<input name=”文本框名稱” type=”password” value=”初始值” size=“顯示字符數”></input>
③.單選框
<input name=”文本框名” type=”radio” value=” 提交值” checked=”checked”(是否被選中) ></input>,
④.復選框
<input name=”文本框名” type=”checkbox” value=”提交值” checked=“checked”></input>
⑤.下拉框
單選下拉框：
<select name=”下拉框名”>
<option selected=”selected” (那個是初始選擇就添加) value=”提交值”>列表1</option>
<option>列表2</option>
</select>
（<optgrounp label=”分組名稱”><option></option></optgrounp>用來做有子項的下拉框）
多選下拉框：
<select name="下拉框名字" size="顯示的行數" multiple="multiple"> //multiple:表示允許多選
<option value="提交值">顯示值</option>
。。。。
</select>
表單元素標簽分類
1.<label >標注內容</label>標簽：為input元素定義標注(標記)，<label>標簽的for屬性應當與相關元素id相同
如：<input type=”redio” name=”sex” id=”man”><label for=”man”>男</label>就把input標簽和label標簽關聯在一起。
2.按鈕
語法：<input type="按鈕類型：reset[重置表單]、submit[提交表單]、button[普通按鈕]、" name="按鈕名稱" value="按鈕顯示文本">
3.圖片按鈕
語法：<input type="image" name="按鈕名稱" src="圖片路徑" />
4.隱藏域：
語法：<input type="hidden" value="隱藏域的值" />
5.多行文本
語法：<textarea name="多行文本框名稱" cols="每行中的字符數" rows="顯示的行數"></textarea>
6.文件框
語法：<input type="file" name="文件框名稱" size="顯示長度"/>
7.表單外框
語法：<fieldset></fieldset>定義圍繞表單中元素的邊框
<legend></legend>為fieldset元素定義標題
8.動畫插入
語法：<embed src="動畫地址" width="寬度" height="高度" wmode="transparent:使flash背景部分透明"></embed>
9.滾動字幕
語法：<marqueen
direction="滾動方向：left[左]、right[右]、up[上]、down[下]"
behavior="滾動方式：scroll[一圈一圈繞着走]、slide[只走一次]、alternate[來回]"
loop="滾動的循環次數，若未指定則循環不止（loop="infinite"）"
bgcolor="背景顏色"
onMouseOver="this.stop(),鼠標進入暫停"
onMouseOut="this.start(),鼠標離開繼續"
scorllamount="滾動速度，值越大，速度越快"
scrolldelay="延時，走一走，停一停"
></marqueen>
10.內嵌框架元素
語法：<frameset rows="行高及行數" cols="列數及列寬" framespacing="框架間距"
frameborder="框架邊框設置：yes/no,1/0" border="邊框寬度" bordercolor="邊框顏色">
<frame src="被包含的文件路徑及名稱" name="框架名稱" noresize="是否允許改變框架大小，true/false" scroll="滾動條顯示控制，yes/no/auto">
</frameset>
2.10 圖像標簽（*******）
<img src="圖片的路徑"/>
- src: 圖片的路徑
- width：圖片的寬度
- height：圖片的高度
- alt: 圖片上顯示的文字，把鼠標移動到圖片上，停留片刻顯示內容,有些瀏覽器下不顯示（沒有效果）
常用圖片格式
| 圖片類型 | 優點 | 缺點 | 適用場合 | 制作工具 |
| *.jpg | 體積小，比較清晰 | 有損壓縮、畫面失真 | 網頁圖片 | Photoshop |
| *.gif | 支持Internet標准，支持無損耗壓縮和透明度，很流行 | 支持有限的透明度，效果不如別的圖像 | 網頁圖片 | Photoshop |
| *.swf | 體積小，便於網絡傳輸 | 制作麻煩 | 網頁動畫 | Flash |
| *.bmp | 支持24位顏色深度，兼容性好 | 不支持壓縮，容量比較大 | 桌面牆紙 | Photoshop |
2.11 預格式化標簽
語法：<pre>內容</pre>
作用：按html標簽內的內容格式輸出到瀏覽器頁面，在pre元素中的文本會保留空格和換行符。文本顯現為等寬字體。
我們經常會在要保持文本格式的時候使用pre標簽，比如當我們要展示源代碼的時候，只要放一個pre標簽，然后把源代碼直接復制，粘貼，然后在頁面上就可以保持好格式。不會像放在其它標簽里那樣，把換行和空格都自動折疊了。
2.12 超鏈接標簽
語法：<a href=”鏈接到資源的路徑” targer=”” >內容</a>
- href：超鏈接跳轉的URL
- target：設置打開的方式 ，默認是在當前頁打開。
_self 在當前窗口中跳轉，瀏覽器默認設定方式；
_blank 跳轉到新的窗體中。
- 當超鏈接不需要到任何的地址 在href里面加#
定位資源
定義一個位置<a name="top">頂部</a>
回到這個位置<a href="#top">回到頂部</a>