web准備介紹：
- w3c：萬維網聯盟組織，用來制定web標准的機構（組織）
- web標准：制作網頁遵循的規范
- web准備規范的分類：結構標准、表現標准、行為標准。
- 結構：html。表示：css。行為：Javascript。
web准備總結：
- 結構標准：相當於人的身體。html就是用來制作網頁的。
- 表現標准： 相當於人的衣服。css就是對網頁進行美化的。
- 行為標准： 相當於人的動作。JS就是讓網頁動起來，具有生命力的
- 什么是HTML
- HTML基本語法
- 常用標簽及屬性
- 鏈接
- 文本標記
- 表格
- 列表
- 表單
- 結構標記
什么是HTML
Hyper Text Markup Language，超級文本標記語言 - 普通文本a:無特殊意義,超級文本<a>:超鏈接 - 超文本：文本具備特殊的功能 - 標記：超文本的組成形式<a> - 語言：擁有自己的語法結構 用該語言編寫的文件，以.html 或 .htm為后綴,用來設計網頁 由瀏覽器解釋運行，可以嵌入腳本語言編寫的程序片段，如JS。
HTML基礎語法
1- 標記語法
標記以封閉類型划分： （1）封閉類型標記.也稱雙標記，必須成對出現 <標記>內容</標記> （2）非封閉類型的標記,也叫做空標記/單標記 <標記> 或 <標記/> 例如： <a href=“www.baidu.com” id=“baidu-link”>標簽內容</a> 其中：a為標簽名，也叫元素； href，id為屬性； 雙引號中的值為屬性值
1-1 元素
指尖括號及尖括號間所包圍的內容部分 元素可以包含文本內容和其他元素，也可以是空的 a.包含文本內容：<p>這是一段文本</p> b.元素嵌套：形成更為復雜的語法 <div> <p></p> </div> 注意:（1）嵌套順序；（2）代碼縮進（保證代碼可讀性） c.空標記<b></b>
1-2 屬性和值
屬性是用來修飾元素的 <標記 屬性="值" 屬性="值"> ex:<p align="center" id="p1"></p> 【常用的標准屬性】 id： 定義元素在頁面中的唯一標識 title：鼠標移入到元素上時提示的文本 class：樣式相關，定義元素引用的類選擇器 style：樣式相關，定義元素的行內樣式
1-3 注釋
在源碼中編寫，但不會被瀏覽器所解釋的內容，成為注釋
可以將對代碼的解釋說明放在注釋中
語法：<!-- 注釋內容 -->
2- 文檔結構
（1）文檔類型聲明 指定HTML的版本和風格<!DOCTYPE html> （2）HTML頁面 表示HTML頁面的開始與結束 語法：<html></html> 位於<!doctype html>之下
2-1 HTML頁面
包含頁面頭部和頁面主體兩部分
頁面頭部：定義頁面全局信息
<head></head> 緊跟在html之后，是html中的首個子元素 頭部所包含的內容（子元素） （1）網頁標題：<title>標題內容</title> （2）定義網頁的編碼格式,關鍵字，描述 網頁的編碼格式：<meta charset="utf-8">(utf-8:支持中英文、標點、符號) 關鍵字：<meta name="keywords" content="關鍵字"> 描述：<meta name="description" content="描述內容"> （3）定義或引用javascript：<script></script> （4）<style></style>定義內部樣式 （5）<link>引入外部樣式
頁面主體：網頁顯示的主體內容
<body></body>
【屬性】
text：表示文本顏色
bgcolor：表示網頁的背景顏色
簡單完整寫法如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>頁面名稱</title>
<link rel=”stylesheet“ type="text/css" href="文件路徑"/>
<style>樣式</style>
<script>js腳本</script>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
常用標簽及屬性
1- 鏈接
又稱超鏈接，設置頁面中允許被點擊的內容。 【標簽】<a></a> 【屬性】 href：鏈接地址（要跳轉到的頁面的地址） target：目標，打開新網頁的形式 取值： _blank：在新標簽頁中打開 _self：在自身頁面中打開（默認值） title：鼠標放到鏈接上的提示
2- 文本標記
- 特殊字符
空格： <: < >: ≷ ©: © ￥: ¥
- 文本樣式
斜體：<i></i> 粗體：<b></b> 刪除線：<s></s> 下划線：<u></u> 上標：<sup></sup> 下標：<sub></sub>
- 標題元素
以標題的形式來顯示文本內容 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 【特點】 - 改變字號（一級最大，六級最小） - 加粗顯示 - 上下有垂直的空白距離 - 獨立成行
- 段落元素
【標簽】<p></p> 【特點】 - 默認文字大小 - 獨立成行 - 上下垂直空白
- 換行元素
【標簽】<br>
- 分隔線元素
【標簽】<hr>
【屬性】
size：尺寸，取值單位為 px（像素），可以省略
width：寬度，取值單位為px（像素）可以省略或百分比
color：顏色，取值自然顏色值
align：水平對齊方式，取值：left/center/right
- 分區元素
（1）塊分區元素：<div></div> 【特點】獨立成行 【作用】頁面布局 （2）行內分區元素：<span></span> 【特點】多個元素在一行內顯示 【作用】設置同一行文字內的不同格式
- 行內元素與塊級元素
（1）塊級元素（div 、p、h1~h6） 【特點】元素會獨占一行，即元素前后都會自動換行，主要用於網頁布局 （2）、行內元素（ span、i、b、s、u、sub、sup、img、a） 【特點】不會換行，多個元素會在一行內顯示
3- 圖像
- 路徑
URL：Uniform Resource Locator（統一資源定位器，俗稱：路徑） 作用：標識網絡任何資源的位置 （1）絕對路徑：從文件所在的最高級目錄下開始查找資源文件所經過的路徑 -包括網絡資源&本地資源（如：E:\mmper\練習\img\flower.jpg） （2）相對路徑：從當前文件位置處開始，查找資源文件所經過的路徑 - 同目錄，直接用， 直接通過資源文件名稱進行引用（a.jpg） - 子目錄，進入到子目錄中，然后再對資源文件進行引用（img/a.jpg） - 父目錄，返回到父級目錄再對資源文件進行引用（../a.jpg）
- 圖像
【標簽】<img> 【屬性】 src：圖片地址（絕對/相對） width：圖像寬度 height：圖像高度
4- 表格
由<table>元素定義。 【標簽】<table></table> 【屬性】 width ：設置表格的寬度 height：設置表格的高度 align：設置表格的對齊方式，取值: left/center/right border：設置表格邊框寬度 cellpadding：內邊距（單元格邊框與內容之間的距離） cellspacing：外邊距（單元格之間的距離） bgcolor：設置表格的背景顏色
- table中包含的子元素
<table></table>中包含的子元素： 【標簽】<tr></tr> （創建表行） 【屬性】 align：該行內容水平對齊方式，取值: left/center/right valign：該行內容的垂直對齊方式，取值: top/middle/bottom bgcolor：設置表格的背景顏色 【標簽】<td></td> （創建單元格） 【屬性】 align：內容水平對齊方式 valign：內容垂直對齊方式 width ：寬度 height ：高度 【標簽】<caption></caption> （表格標題） 【標簽】<th></th> （列標題） 行標題或列標題，字體有加粗的效果，放在tr中 【標簽】<thead></thead> （表頭） 【標簽】<tbody></tbody> 表主體） 【標簽】<tfoot></tfoot> （表尾）
- 一個完整的表格
<caption>標題文本</caption>
<table>
<thead>
<tr>
<td>姓名</td>
<td>性別</td>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>
- 兩行兩列的表格
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
- 表格的其他應用
（1）不規則表格 - 跨列：從指定單元格位置處，橫向向右合並幾個（包含自己）單元格 屬性：colspan=值（數字，合並單元格的個數）; - 跨行：從指定單元格位置處，縱向向下合並幾個（包含自己）單元格 屬性：rowspan=值（數字，合並單元格的個數）; （2）表格的嵌套 在單元格中去嵌套另一個表格，但嵌套的表格必須要放在td中
5- 列表
將一組具有相似特征或者具有先后順序的內容按照從上到下的順序排列在一起
- 有序列表
<ol>
<li></li>
</ol>
【屬性】
type:指定列表項標志的類型，默認為數字排列
取值：1（默認值）/a/A/i/I
start:定義起始值(數字)，默認從1開始
取值：數字，如：start:1; start:i;等
- 無序列表
<ul>
<li></li>
</ul>
【屬性】
type：指定無序列表的列表項標識
取值： disc,默認,實心圓/circle，空心圓/square，實心矩形none，不顯示標識
- 自定義列表
<dl>
<dt>列表中的標題內容</dt>
<dd>列表中的數據</dd>
</dl>
使用場合：圖文混排時使用
6- 表單
由<form>定義，將用戶輸入的數據提交給后台。 【常見屬性】 action：提交的服務器地址 method：表單數據提交的方式，取值： get：明文提交/post：隱式提交 name：定義表單名稱，JS用到的比較多 id： 獨一無二的標識 如：<form action="url" method="get/post"> </form>
<input>元素
【主要屬性】
type：根據不同的type屬性值可以創建各種類型的輸入字段
value：最終提交給服務器的值
name：控件的名稱，提供給服務器使用，沒有name，控件則無法提交
id：唯一標識，只能在當前頁面使用，服務器不能用
disabled：禁用，不能被提交
- 常用的表單控件：
（1）文本框：<input type="text"> （2）密碼框：<input type="password"> 【專有屬性】 maxlength：限制輸入的字符數，取值：數字 readonly：設置文本控件只讀 （3）單選按鈕：<input type="radio"> （4）復選框：<input type="checkbox"> 【專有屬性】 checked，設置默認被選中 （5）提交按鈕：<input type="submit"> （6）重置按鈕：<input type="reset"> （7）普通按鈕：<input type="button"> （8）圖片按鈕：<input type="image" src=""> （9）隱藏域：<input type="hidden"> （10）文件選擇框：<input type="file">
按鈕（提交按鈕）
<button>內容</button>
下拉選擇框select 和 option
<section name=""> <option value="" selected></option> </section>
7- 結構標記
HTML5所提供的結構標記，專門用於表示常見的網頁結構（即制作布局），提升布局代碼的語義性和可讀性
- 常見結構標記
<header></header>：定義文檔的頁眉即頁面頂部信息 <nav></nav>：定義頁面的導航鏈接部分 <section></section>：定義文檔中的節，文檔中主體內容 <article></article> ：定義獨立於文檔的其他部分內容(章、節等) <footer></footer>：定義某區域的腳注信息，頁面底部內容等 <aside></aside>：多用於側邊欄和相關引用信息等