HTML
1、html簡介
* HyperText Markup Language：超文本標記語言，同時網頁語言。
- 超文本：超出文本的範疇
- 標記：標籤，html裏面所有的操作都是通過標籤來實現的
- 網頁語言：
* 第一個html程序。
** 以html或者htm爲後綴
* html的規範
1、html以<html>開始，同時以</html>結束
2、html有兩部分組成：<head>設置一些相關信息</head>和<body>顯示在頁面上的內容</body>
3、html是非嚴謹性語言，遵循規範
4、html標籤有開始標籤，也要有結束標籤 <title>這是一個標題</title>
5、html標籤不區分大小寫
6、要對數據進行操作，首先使用標籤封裝起來，通過設置屬性和屬性值來實現樣式的變化
* <FONT color="red" size="5">html程序</FONT>
* 格式：<標籤 屬性="屬性值"></標籤>，屬性="屬性值"（可以使用單引號）
* 但是有些標籤沒有結束標籤 ,比如換行 <br/>在標籤內結束
**** html操作思想（理解）
網頁中有很多數據，不同的數據可能需要不同的顯示效果，這個時間需要使用標籤把數據包起來，
通過修改標籤的屬性值，來實現標籤內數據樣式的變化。而標籤相當於一個容器，通過修改容器的屬性值
來實現容器內數據樣式的變化。
2、html常用的標籤
** 字體標籤
- <font color="" size=""></font>
- color: 字體顏色
* 使用英文單詞：red、yellow blue green gray .....
* 使用十六進制數表示 #ffffff 顏色由RGB #99ccff
- size：字體大小
* 範圍 1-7 ，如果值超過7 ，還是按照7操作
** 註釋標籤
*** java裏面註釋 單行註釋 // 多行註釋/* 文檔註釋 /**
*** <!-- -->
** 標題標籤
<h1></h1> <h2></h2> .......<h6></h6>：從h1到h6標題依次變小
** 水平線標籤
<hr color="" size=""/>:
- color:水平線顏色
- size：水平線的粗細
** 特殊字符
- 在頁面上顯示 <html>是網頁的開始
* < <
* > >
* 空格
* & : &
** 列表標籤
- 想要在頁面中顯示這樣的效果
以諾學堂
人事部
學工部
財務部
* 使用標籤
<dl></dl>：表示定義一個列表的範圍
<dt></dt>：上層內容
<dd></dd>：下層內容
- 想要顯示效果(有序)
1.人事部
2.學工部
3.財務部
a.人事部
b.學工部
c.財務部
i.人事部
ii.學工部
iii.財務部
* 使用標籤
<ol></ol>：標籤範圍 屬性 type 值 1（默認） a i
<li></li>：封裝具體的內容
- 顯示的效果（無序）
特殊符號（方塊）人事部
特殊符號（方塊）學工部
特殊符號（方塊）財務部
* 使用標籤
<ul></ul>: 標籤範圍 屬性 type 值 空心圓circle 、實心圓disc 、實心方塊square ，默認disc
<li></li>：封裝的具體內容
** 圖像標籤
- <img src="圖片路徑地址" width="" height=""/>
* src: 圖片地址
* width：圖片寬度
* height：圖片高度
* alt: 圖片上顯示的內容（鼠標放到圖片上，等片刻出現文字，某些版本瀏覽器不支持）
* 安裝ie9 火狐 谷歌
** 路徑介紹（特別重要）
* 完全路徑
C:\Users\asus\Desktop\0302\day01\code\img\b.jpg
* 相對路徑
一個文件相對於另一個文件的位置
1、 兩個文件在一個目錄下
** 直接寫圖片名稱
2、圖片在html的下級目錄 (在html所在目錄的下級目錄)
C:\Users\asus\Desktop\0302\day01\code\ 03.html
* 03.html在code目錄下
C:\Users\asus\Desktop\0302\day01\code\ img\a.jpg
* a.jpg在img目錄下
* img目錄在code目錄下
* 在03.html中使用圖片a.jpg
（1）找到html文件所在的目錄 code
（2）找html文件和圖片路徑相同的部分
C:\Users\asus\Desktop\0302\day01\code\
（3）img/a.jpg
3、圖片在html的上級目錄 (在html所在目錄的上級目錄)
* 在C:\Users\asus\Desktop\0302\day01\ code\03.html
* C:\Users\asus\Desktop\0302\day01\ w01.png
（1）找到html文件所在的目錄 code
（2）找html文件和圖片路徑相同的部分
C:\Users\asus\Desktop\0302\day01\
（3）w01.png在03.html所在目錄code 的上層目錄 day01
* 表示上層目錄 ../
* ../w01.png
* 多級上層 ../../
* http://www.baidu.com/img/1.jpg
* /day10/img/1.jpg
** 案例一：使用列表標籤實現商品列表
* 作業：完成列表標籤實現商品列表的剩餘部分
** 超鏈接標籤
* 鏈接資源
<a href="要鏈接到的地址">顯示在頁面上的內容</a>
* 設置打開方式： target 值 _self:在當前頁面打開（默認） _blank：在新窗口打開
* 定位資源（瞭解）
* 定義位置： <a name="定義一個位置 top"></a>
* 到這個位置： <a href="#top"></a>
* 引入一個標籤 <pre></pre>: 原樣輸出
** 表格標籤(*********)
* 對數據進行格式化，使數據顯示更加整潔
** 技巧：首先數表格裏面有多少行，然後數每行裏面有多少個單元格
* <table></table>: 表示表格範圍
- 屬性
** border：表格線
** bordercolor: 表格線顏色
** width:設置表格寬
** height:設置表格的高
** cellspacing：設置單元格之間的距離
* <tr></tr>：表示行
** 設置對齊方式：align 值 left center right
* <td></td>：表示單元格
** 設置對齊方式： align 值 left center right
** 表示單元格 <th></th>: 居中和加粗
* 引入一個標籤 <b></b> <center></center>
* <caption></caption>:設置表格的標題
* 合併單元格
rowspan:跨行
* <td rowspan="3">年齡</td>
clospan:跨列
* <td colspan="3">嶽不羣</td>
** 表單標籤(最重要的標籤**************)
* 什麼是表單？
** 輸入一些信息或者選擇一些信息，把這些信息提交到服務器，由服務器保存
** 輸入項：可以輸入數據或者選擇數據地方
* 表單
<form></form>: 表示表單的範圍
** 設置要提交的服務器（地方），不設置默認提交到當前頁面
* 使用屬性 aciton：設置提交到的服務器
* 設置提交方式 常用 get post
** 默認情況下 get請求
** 使用method="post"
** 屬性 enctype屬性 ，一般情況下不需要設置，但是文件上傳時候設置這個屬性（講到文件上傳下載時候詳細講）
** 面試題目 get和post區別
1、get請求地址欄會攜帶提交的數據，post不會攜帶提交的數據（請求體裏面 講到http請求詳細說）
2、get請求安全級別低，post安全級別相對較高
3、get請求數據大小會有限制，post不會有限制
** 輸入項必須要寫name屬性
** 在單選輸入項裏面必須要有一個value屬性
** 在複選框裏面必須要有一個value屬性
- love=lanqiu&love=yumaoqiu
** 在下拉選擇輸入項裏面value屬性
* 大部分的輸入項使用一個標籤進行封裝 <input type="不同輸入項的類型"/>
** 輸入項的類型
1、普通輸入項：<input type="text"/>
2、密碼輸入項：<input type="password"/>
3、單選輸入項：<input type="radio" name="sex"/>:
* 必須要寫name屬性
* name屬性值必須相同
* 默認選中狀態 屬性 checked="checked"
4、複選框：<input type="checkbox"/>
* 必須要寫name屬性
* name屬性值必須相同
* 默認選中狀態 屬性 checked="checked"
5、下拉選擇框（不是input標籤裏面封裝的）
<select name="xueli">
<option value="1">大學</option>
<option value="2">中學</option>
</select>
* 必須有name屬性
6、文本域（不是input標籤裏面封裝的）
<textarea cols="列" rows="行"></textarea>
7、文件輸入項
<input type="file"/>
8、提交按鈕（把數據提交到服務器）
<input type="submit"/>
* 屬性 value：設置按鈕上顯示的內容
* file:///C:/Users/asus/Desktop/0302/day01/code/09-表單標籤一.html
?sex=on&love=on&love=on&
* 在輸入項裏面寫了name屬性之後
file:///C:/Users/asus/Desktop/0302/day01/code/09-表單標籤一.html
?user=1111&pwd=123456&sex=on&love=on&love=on&xueli=%B2%A9%CA%BF&miaoshu=qqqqqq
* file:///C:/Users/asus/Desktop/0302/day01/code/09-表單標籤一.html
?user=555&pwd=5555&sex=nv&love=lanqiu&love=yumaoqiu&love=pingpang&xueli=3&miaoshu=wwwwww
** 每個輸入項提交的數據部分 使用&進行隔開
** 提交數據相當於一個key-value形式
9、提交操作，使用圖片進行提交（把數據提交到服務器）
<input type="image" src="圖片地址"/>
10、重置按鈕：
<input type="reset"/>：回到表單的初始狀態
11、普通按鈕
<input type="button" value="普通按鈕"/>:經常和js一起使用
12、隱藏項
<input type="hidden" name=""/>
* 比如系統，用戶管理系統
存儲用戶信息
比如： id 用戶名 性別 年齡
001 張三 男 20
002 李四 女 20
003 張三 男 20
需要在頁面上顯示用戶信息
* 只需要顯示 用戶名 性別 年齡
<input type="hidden" name="id"/>
** 案例二：使用表單標籤實現註冊頁面
** 作業：看着註冊頁面圖，把代碼寫出來
** html中其他常用標籤
b 加粗
u 下劃線
i 斜體
s 刪除線
p 段落標籤
sub 下標
sup 上標
pre 原樣輸出
div 會自動換行
span 在一行顯示
** html頭標籤（瞭解）
* html有兩部分組成 head body
* 在head裏面的標籤是頭標籤
** title：設置標題
** base：設置超鏈接一些操作
** meta：可提供有關頁面的基本信息
** link：引入一些外部的文件 經常和css、js一起使用
** 框架標籤的使用（會用）
* 把頁面分成獨立的多個頁面
** <FRAMESET>
- rows: 頁面劃分方式
- cols: 頁面劃分方式
** <FRAME>
***** 在使用框架標籤時候，這個框架標籤不能寫在body裏面，把body去掉
* <frameset rows="80,*"> //把頁面分成上下兩部分，上面部分值80，剩下的值是下面的部分
<frame name="top" src="a.html"> //封裝頁面 name值top
<frameset cols="150,*"> // 把下面的部分分成左右兩部分，左邊部分值150，剩下的值是右邊的部分
<frame name="left" src="b.html"> //封裝頁面 name是left
<frame name="right" src="c.html"> //封裝頁面 name 是right
</frameset>
</frameset>
* 點擊b.html裏面的超鏈接，把鏈接到的頁面顯示在右邊的部分
* 設置b.html裏面的超鏈接的打開方式 target值是c.html的name值
** 擴展a標籤(瞭解)
<a href="路徑"></a>
* 比如說 <a href="www.baidu.com">百度</a>
* 百度是網絡資源 ，如果訪問網絡資源 必須要加一個協議 http://
* 如果不寫協議，到當前路徑下去找百度
* 瀏覽器不支持的協議，
** thunder://qqqq
** ed2k://
** mailto:[email protected]
* 比如迅雷，電驢協議，公司自己開發的協議，到本地去找支持這個協議的應用程序