前端07班 王
3、標(biāo)題標(biāo)簽、水平線標(biāo)簽和特殊字符
* 標(biāo)題標(biāo)簽
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 從h1到h6，大小是依次變小，同時會自動換行
* 水平線標(biāo)簽
- <hr/>
- 屬性
** size: 水平線的粗細(xì) 取值范圍 1-7
** color: 顏色
- 代碼
<hr size="5" color="blue"/>
* 特殊字符
- 想要在頁面上顯示這樣的內(nèi)容 <html>:是網(wǎng)頁的開始！
- 需要對特殊字符進(jìn)行轉(zhuǎn)義
* < <
* > >
* 空格：
* & : &
4、列表標(biāo)簽
- 比如現(xiàn)在顯示這樣的效果
大學(xué)
財務(wù)部
學(xué)工部
人事部
** <dl> </dl>: 表示列表的范圍
** 在dl里面 <dt></dt>: 上層內(nèi)容
** 在dl里面 <dd></dd>：下層內(nèi)容
- 代碼
<dl>
<dt>大學(xué)</dt>
<dd>財務(wù)部</dd>
<dd>學(xué)工部</dd>
<dd>人事部</dd>
</dl>
- 想要在頁面上顯示這樣的效果
1. 財務(wù)部
2. 學(xué)工部
3. 人事部
a. 財務(wù)部
b. 學(xué)工部
c. 人事部
i. 財務(wù)部
ii. 學(xué)工部
iii. 人事部
** <ol></ol> : 有序列表的范圍
- 屬性 type：設(shè)置排序方式 1(默認(rèn)) a i
** 在ol標(biāo)簽里面 <li>具體內(nèi)容</li>
- 代碼
<ol>
<li>財務(wù)部</li>
<li>學(xué)工部</li>
<li>人事部</li>
</ol>
- 想要在頁面上顯示這樣的效果
特殊符號（方框） 財務(wù)部
特殊符號（方框） 學(xué)工部
** <ul></ul> : 表示無序列表的范圍
屬性： type: 空心圓circle 、實心圓disc 、實心方塊square ，默認(rèn)disc
在ul里面 <li></li>
- 代碼
<ul>
<li>財務(wù)部</li>
<li>學(xué)工部</li>
<li>人事部</li>
</ul>
5、圖像標(biāo)簽（*******）
* <img src="圖片的路徑"/>
- src: 圖片的路徑
- width：圖片的寬度
- height：圖片的高度
- alt: 圖片上顯示的文字，把鼠標(biāo)移動到圖片上，停留片刻顯示內(nèi)容
** 有些瀏覽器下不顯示（沒有效果）
6、路徑的介紹
* 分類：兩類
** 絕對路徑
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
** 相對路徑
- 一個文件相對于另外一個文件的位置
- 三種：
** html文件和圖片在一個路徑下，可以直接寫文件名稱
- <img src="b1.jpg" alt="這是一個美女"/>
** 圖片在html的下層目錄
在html文件中，使用img文件夾下面的a.jpg
-- C:\Users\asus\Desktop\0413\day01\code\ 4.html
-- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
*** 在html中使用圖片 4.html和img在一個路徑下
img\a.jpg
** 圖片在html文件的上層目錄
--- C:\Users\asus\Desktop\0413\day01\ code\4.html
--- C:\Users\asus\Desktop\0413\day01\ c.png
*** html文件所在的目錄和圖片是一個目錄
** 圖片和html文件是什么關(guān)系？
- 圖片在html的所在目錄的上層目錄 day01
** 怎么表示上層路徑 ../
- ../: day01
-- ../c.png
** 想要表示上層的上層 ../../
7、案例一：列表標(biāo)簽的使用（作業(yè)：完成剩余的部分）
8、超鏈接標(biāo)簽（******）
* 鏈接資源(******)
- <a href="鏈接到資源的路徑"> 顯示在頁面上的內(nèi)容 </a>
** href: 鏈接的資源的地址
** target：設(shè)置打開的方式 ，默認(rèn)是在當(dāng)前頁打開
-- _blank : 在一個新窗口打開
-- _self: 在當(dāng)前頁打開 默認(rèn)
- 當(dāng)超鏈接不需要到任何的地址 在href里面加#
- <a href="#">這是一個超鏈接2</a>
* 定位資源
** 如果想要定位資源：定義一個位置
<a name="top">頂部</a>
** 回到這個位置
<a href="#top">回到頂部</a>
** 引入一個標(biāo)簽 pre：原樣輸出
9、表格標(biāo)簽（****重要的標(biāo)簽*****）
* 可以對數(shù)據(jù)進(jìn)行格式化，使數(shù)據(jù)顯示更加清晰
* <table></table>: 表示表格的范圍
- border：表格線
- bordercolor：表格線的顏色
- cellspacing：單元格直接的距離
- width：表格的寬度
- height：表格的高度
** 在table里面 <tr></tr>
- 設(shè)置對齊方式 align： left center right
*** 在tr里面 <td></td>
- 設(shè)置顯示方式 align： left center right
*** 使用th也可以表示單元格
- 表示可以實現(xiàn)居中和加粗
* 代碼
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
* 畫圖分析表格的寫法
- 首先定義一個表格的范圍使用table
- 定義一行使用 tr
- 定義一個單元格使用 td
** 操作技巧：
- 首先數(shù)有多少行 ，數(shù)每行里面有多少個單元格
** 表格的標(biāo)題
<caption></caption>
** 合并單元格
- rowspan：跨行
** <td rowspan="3">人員信息</td>
- colspan：跨列
** <td colspan="3">人員信息</td>
10、表單標(biāo)簽（****今天最重要的標(biāo)簽****）
* 可以提交數(shù)據(jù)到開心網(wǎng)的服務(wù)器，這個過程可以使用表單標(biāo)簽實現(xiàn)
* <form></form>: 定義一個表單的范圍
- 屬性
** action： 提交到地址，默認(rèn)提交到當(dāng)前的頁面
** method: 表單提交方式
- 常用的有兩種 get和post，默認(rèn)是get請求
** 面試題目： get和post區(qū)別
1、get請求地址欄會攜帶提交的數(shù)據(jù)，post不會攜帶（請求體里面。在第七天時候講http協(xié)議時候）
2、get請求安全級別較低，post較高
3、get請求數(shù)據(jù)大小的限制，post沒有限制
** enctype：一般請求下不需要這個屬性，做文件上傳時候需要設(shè)置這個屬性（第22天時候講文件上傳）
** 輸入項：可以輸入內(nèi)容或者選擇內(nèi)容的部分
- 大部分的輸入項 使用 <input type="輸入項的類型"/>
******* 在輸入項里面需要有一個name屬性
*** 普通輸入項：<input type="text"/>
*** 密碼輸入項：<input type="password"/>
*** 單選輸入項：<input type="radio"/>
- 在里面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現(xiàn)默認(rèn)選中的屬性
-- checked="checked"
*** 復(fù)選輸入項：<input type="checkbox"/>
- 在里面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現(xiàn)默認(rèn)選中的屬性
-- checked="checked"
*** 文件輸入項（在后面上傳時候用到）
- <input type="file"/>
*** 下拉輸入項（不是在input標(biāo)簽里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默認(rèn)選擇
*** selected="selected"
*** 文本域
<textarea cols="10" rows="10"></textarea>
*** 隱藏項（不會顯示在頁面上，但是存在于html代碼里面）
<input type="hidden" />
*** 提交按鈕
<input type="submit"/>
<input type="submit" value="注冊"/>
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表單標(biāo)簽一.html
?sex=on&love=on&love=on&birth=1991
當(dāng)在輸入項里面寫了name屬性之后
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表單標(biāo)簽一.html
?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表單標(biāo)簽一.html?
phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=
** ?輸入項name的值=輸入的值&
** 參數(shù)類似于key-value形式
*** 使用圖片提交
<input type="image" src="圖片路徑"/>
*** 重置按鈕： 回到輸入項的初始狀態(tài)
<input type="reset"/>
*** 普通按鈕(和明天講js在一起使用的)
<input type="button" value=""/>
11、案例：使用表單標(biāo)簽實現(xiàn)注冊頁面
- 使用表格實現(xiàn)頁面效果
- 超鏈接不想要他有效果 href="#"
- 如果表格里面的單元格沒有內(nèi)容， 使用空格作為占位符
- 使用圖片提交表單 <input type="image" src="圖片的路徑"/>
12、html中的其他的常用標(biāo)簽的使用
b : 加粗
s ：刪除線
u ：下劃線
i ：斜體
pre ：原樣輸出
sub : 下標(biāo)
sup : 上標(biāo)
p ：段落標(biāo)簽 比br標(biāo)簽多一行
====明天css時候一直使用
div ：自動換行
span：在一行顯示
13、html的頭標(biāo)簽的使用
* html兩部分組成 head和body
** 在head里面的標(biāo)簽就是頭標(biāo)簽
** title標(biāo)簽：表示在標(biāo)簽上顯示的內(nèi)容
** <meta>標(biāo)簽：設(shè)置頁面的一些相關(guān)內(nèi)容
- <meta name="keywords" content="畢姥爺，熊出沒，劉翔">
<meta http-equiv="refresh" content="3;url=01-hello.html" />
** base標(biāo)簽：設(shè)置超鏈接的基本設(shè)置
- 可以統(tǒng)一設(shè)置超鏈接的打開方式
<base target="_blank"/>
** link標(biāo)簽：引入外部文件
** 明天css，可以使用link標(biāo)簽引入css文件
14、框架標(biāo)簽的使用（會用）
* <frameset>
- rows:按照行進(jìn)行劃分
** <frameset rows="80,*">
- cols:按照列進(jìn)行劃分
** <frameset cols="80,*">
* <frame>
- 具體顯示的頁面
- <frame name="lower_left" src="b.html">
*** 使用框架標(biāo)簽時候，不能寫在body里面，使用了框架標(biāo)簽，需要把body去掉
* <frameset rows="80,*"> //把頁面劃分成上下兩部分
<frame name="top" src="a.html"> //上面頁面
<frameset cols="150,*"> //把下面部分劃分成左右兩部分
<frame name="lower_left" src="b.html"> //左邊的頁面
<frame name="lower_right" src="c.html"> //右邊的頁面
</frameset>
</frameset>
* 如果在左邊的頁面超鏈接，想讓內(nèi)容顯示在右邊的頁面中
- 設(shè)置超鏈接里面屬性 target值設(shè)置成名稱
- <a href="01-hello.html" target="right">超鏈接1</a>
15、a標(biāo)簽的擴(kuò)展（了解）
- 百度是網(wǎng)絡(luò)資源
- 當(dāng)a標(biāo)簽里面訪問網(wǎng)絡(luò)資源時候，必須要加一個協(xié)議 http：表示一個網(wǎng)絡(luò)的公共協(xié)議，
如果加上http協(xié)議之后，自動識別訪問資源是一個網(wǎng)絡(luò)資源
- 當(dāng)瀏覽器里面找到相關(guān)協(xié)議，首先看這個協(xié)議是不是公共協(xié)議http。
如果不是公共協(xié)議，會去本地電腦找支持這個協(xié)議的應(yīng)用程序。
-->
