一、HTML基本概念
HTML：Hyper Text Markup Language 超文本標記語言
Html文件是以.html或者.htm結尾的文件
二、HTML文檔結構
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> new document </title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script type="text/javascript" src="JS/login.js"></script>
</head>
<body>
</body>
</html>
就以上面這個結構作爲示範，來講解
1、文檔類型聲明
<!DOCTYPE html>用來說明你用的XHTML或者HTML是什麼版本，出現在整個 html最頂層
2、html頁面
位置：<!DOCTYPE html>之下
數量：有且只有一個
標籤：<html></html>
備註：html所有內容都必須在這個標籤之內
html頁面包含兩大部分：
（1）、網頁頭部
負責定義網頁的全局信息
標籤：<head></head>
網頁頭部允許包含以下內容：
1、<title> </title> : 網頁標題，title就是說這個網頁是幹什麼的，以方便用戶能快速準確得瞭解到這個網頁要介紹的內容。
例如：瀏覽器中收藏夾內書籤的名稱是title的內容；
2、<meta/>定義頁面元數據（編碼）
<meta charset="utf-8">
網上搜索了<meta>標籤的作用有很多，目前我認爲常用的就作用就是定義編碼格式
UTF-8 編碼是一種被廣泛應用的編碼，這種編碼致力於把全球的語言納入一個統一的編碼
3、<link/> 引入外部css文件
<link rel="stylesheet" type="text/css" href="css/layout.css" />
4、<script></script> 可以定義JavaScript也可以引入JavaScript文件
如果是定義的話，直接在 <script>標籤中寫定義文件即可，引入外部js文件格式如下所示：
<script type="text/javascript" src="JS/login.js"></script>
（2）、網頁主體
標籤：<body></body>
作用：定義網頁的主體，所有的顯示內容都要放在body中
三、HTML常用標籤
塊屬性標籤（塊元素）
<div></div>可以把文檔分割爲獨立的、不同的部分
<h1></h1>…<h6></h6>可定義標題。<h1>定義最大的標題，<h6>定義最小的標題
<ol></ol>定義有序列表，必須嵌套<li>
<ul></ul>定義無序列表，必須嵌套<li>
<li></li>定義列表項目，是有序列表和無序列表的子標籤
<dl></dl>定義自定義列表
<dt></dt>一般用於定義列表標題
<dd></dd>定義自定義列表內容
<p></p>定義段落
<br/>換行符
<from></from>用於爲用戶輸入創建HTML表單
表格：
<table></table>定義表格
<caption></caption>表格標題
出現的位置在表格之上，水平居中
注意兩點：
1、caption的位置位於所有tr之上，緊跟着table之下
2、一個table只能有一個caption
<tr></tr>定義表格行
<th></th>定義表頭
<td></td>定義表格單元
table屬性
width：寬度
height：高度
align：表格在其容器內的水平對齊方式，默認爲：left，可選值還有center、right
border：邊框，邊框寬度，以px爲單位的數值
bgcolor：表格的背景顏色
cellspacing=”像素值”
外邊距（單元格之間距離，單元格和外邊框的距離）
Cellpadding=”像素值”
單元格中內容和單元格邊框的距離
tr屬性：
align：當前行數據的水平對齊方式
valign：當前行數據的垂直對齊方式(top middle bottom)
td屬性：
widht
height
align
valign
bgcolor
在創建不規則的表格時，需要設置td的跨行和跨列屬性
跨行：rowspan=”n”表示該單元格垮了n行
跨列：colspan=”n”表示該單元格垮了n列
注意：被合併掉的單元格，一定要從代碼中刪除。
行分組：
可以將tr劃分爲3大部分：表頭、表主體、表尾
<thead></thead>表頭
<tbody></tbody>表主體
<tfoot></tfoot>表尾
表格嵌套：
在單元格中放置另一個表格
在<td>中再包含一個<table> 切記在<tr>中不行
列表：
(1)有序列表 <ol></ol>
屬性：type
列表項前面的標識類型是什麼
取值：
1：數字（默認就爲數字）
a：小寫字母
A：大寫字母
i：小寫羅馬數字
l：大寫羅馬數字（是i的大寫，不是L的小寫哦）
Start：規定在type值中的第幾個位置處開始
示例如下：
執行結果：
(2)無序列表 <ul></ul>
屬性：type
列表項標識類型：
取值：
clisc: 實心圓（默認值）
circle: 空心圓
square: 實心矩形
none: 無點
(3).定義 自定義列表
<dl></dl>定義自定義列表
<dt></dt>一般用於定義列表標題
<dd></dd>定義自定義列表內容
格式
<dl>
<dt>描述的術語或者名詞</dt>
（一個dt後面可以跟多個dd標籤）
<dd>對上述名詞或術語的解釋</dd>
</dl>
使用場合：圖文混排
示例：
執行結果：
行內屬性標籤（內聯元素）
<span></span>被用來組合文檔中的行內元素
<var></var>定義變量，在瀏覽器中一般會斜體顯示
<em></em>把文本定義爲強調內容，瀏覽器一般以斜體顯示
<a></a>錨文本，最重要的屬性是href，指定連接的目標
<img/>是單標籤，鏈接圖片，有src和alt屬性
<textarea></textarea>定義多行文本輸入控件，可通過cols和rows屬性來規定textarea的尺寸,y也可以用css的
width和height屬性來控制。
<select></select>可創建單選或多選菜單 ，子標籤是select
<option></option>定義下拉列表中的一個選項，位於select元素內部
<input>用於蒐集用戶信息。根據不同的tpye屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段text，複選框 checkbox，掩碼後的文本控件，單選按鈕radio，按鈕button，submit提交，重置reset，空白hidden等等
<strong></strong>把文本定義爲更強的強調的內容
塊屬性標籤特點：
標籤默認撐滿整行，總是在新的一行開始；
高度、行高以及頂底邊距都可控制；
未設定寬度時，寬度爲容器的100%；
行內屬性標籤特點
行內屬性標籤可在一行顯示；
寬高即頂底邊距不可控制；
內容撐開寬高；
結構標記：
作用：爲了提升標記的語義性
<1>.<header></header>
作用：用於定義文檔的頁眉，就是html文檔最上面的內容
等同於：<div id=”header”></div>
<2>.<nav></nav>
作用：用來定義頁面的導航鏈接部分
等同於：<div id=”nav”></div>
<3>.<section></sction>
作用：表示整個頁面中的主題內容
等同於：<div id=”main”></div>
<4>.<article></article>
作用：用於描述文本性較強、或藝術氣息較強的
一般情況下，論壇中的帖子信息，報紙中的文章信息，博客或微博中的條目信息，用戶回覆信息，優先考慮放在<article>標籤中
<5>.<footer></footer>
作用：定義頁面中位置靠下的信息
<6>.<aside></aside>
作用：多數情況下用於定義頁面中的側欄信息
表單：
表單的作用：用於顯示並將信息提交給服務器
表單中主要包含兩組內容：
(1).表單元素
(2).標點控件
表單元素<form>
注意：使用表單元素提交數據時，表單不能省略。
屬性：
(1).action：跟後臺處理程序的地址（）—服務器端工程師提供，默認提交給本頁