day01? 關(guān)于html常用標(biāo)簽的使用
* 什么是html？
- HyperText Markup Language：超文本標(biāo)記語言辛蚊，網(wǎng)頁語言
** 超文本：超出文本的范疇，使用html可以輕松實現(xiàn)這樣操作
** 標(biāo)記：html所有的操作都是通過標(biāo)記實現(xiàn)的，標(biāo)記就是標(biāo)簽彼哼，<標(biāo)簽名稱>
** 網(wǎng)頁語言：
* 第一個html程序迹淌。
- 創(chuàng)建java文件.java
** 先編譯河绽，然后再運行（jvm）
- html后綴是 .html .htm
** 直接通過瀏覽器就可以運行
- 代碼
** 這是我的<font size="5" color="red">第一個html程序！</font>
* html的規(guī)范（遵循）
1唉窃、一個html文件開始標(biāo)簽和結(jié)束的標(biāo)簽? <html>? </html>
- 定義一個java方法 { }
2耙饰、html包含兩部分內(nèi)容
（1）<head> 設(shè)置相關(guān)信息</head>
（2）<body> 顯示在頁面上的內(nèi)容都寫在body里面</body>
3、html的標(biāo)簽有開始標(biāo)簽纹份，也要有結(jié)束標(biāo)簽
- <head></head>
4苟跪、html的代碼不區(qū)分大小寫的
5、有些標(biāo)簽蔓涧，沒有結(jié)束標(biāo)簽 件已，在標(biāo)簽內(nèi)結(jié)束
- 比如 換行? <br/>? <hr/>
* html的操作思想（******理解）
網(wǎng)頁中有很多數(shù)據(jù)，不同的數(shù)據(jù)可能需要不同的顯示效果蠢笋，這個時候需要使用標(biāo)簽把要操作的數(shù)據(jù)包起來（封裝起來）拨齐，
通過修改標(biāo)簽的屬性值實現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化。
一個標(biāo)簽相當(dāng)于一個容器昨寞，想要修改容器內(nèi)數(shù)據(jù)的樣式瞻惋，只需要改變?nèi)萜鞯膶傩灾迪寐耍涂梢詫崿F(xiàn)容器內(nèi)數(shù)據(jù)樣式的變化。
html中常用的標(biāo)簽
* 文字標(biāo)簽：修改文字的樣式
- <font></font>
- 屬性：
* size: 文字的大小 取值范圍 1-7,超出了7歼狼，默認還是7
* color：文字顏色0
- 兩種表示方式
** 英文單詞：red? green? blue? black? white? yellow? gray......
** 使用十六進制數(shù)表示 #ffffff :? RGB
- 通過工具實現(xiàn)不同的顏色? #66cc66
* 注釋標(biāo)簽
- java注釋幾種掏导？三種
- html的注釋 ： <!--? html的注釋? -->
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: 水平線的粗細 取值范圍 1-7
** color: 顏色
- 代碼
<hr size="5" color="blue"/>
* 特殊字符
- 想要在頁面上顯示這樣的內(nèi)容? <html>:是網(wǎng)頁的開始梅屉！
- 需要對特殊字符進行轉(zhuǎn)義
* <? ? <
* >? ? >
* 空格：
* &? : &
4值纱、列表標(biāo)簽
- 比如現(xiàn)在顯示這樣的效果
傳智播客
? 財務(wù)部
? 學(xué)工部
? 人事部
** <dl> </dl>: 表示列表的范圍
** 在dl里面? <dt></dt>: 上層內(nèi)容
** 在dl里面? <dd></dd>：下層內(nèi)容
- 代碼
<dl>
<dt>傳智播客</dt>
<dd>財務(wù)部</dd>
<dd>學(xué)工部</dd>
<dd>人事部</dd>
</dl>
- 想要在頁面上顯示這樣的效果
? 1. 財務(wù)部
? 2. 學(xué)工部
? 3. 人事部
? b. 學(xué)工部
? c. 人事部
? i. 財務(wù)部
? ii. 學(xué)工部
? iii. 人事部
** <ol></ol> : 有序列表的范圍
- 屬性 type：設(shè)置排序方式 1(默認)? a? i
? ** 在ol標(biāo)簽里面 <li>具體內(nèi)容</li>
- 代碼
<ol>
<li>財務(wù)部</li>
<li>學(xué)工部</li>
<li>人事部</li>
</ol>
- 想要在頁面上顯示這樣的效果
特殊符號（方框） 學(xué)工部
** <ul></ul> : 表示無序列表的范圍
屬性： type: 空心圓circle 、實心圓disc 坯汤、實心方塊square 虐唠，默認disc
在ul里面? <li></li>
- 代碼
<ul>
<li>財務(wù)部</li>
<li>學(xué)工部</li>
<li>人事部</li>
</ul>
5、圖像標(biāo)簽（*******）
* <img src="圖片的路徑"/>
- src: 圖片的路徑
- width：圖片的寬度
- 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è)置打開的方式 ，默認是在當(dāng)前頁打開
-- _blank : 在一個新窗口打開
-- _self: 在當(dāng)前頁打開 默認
- 當(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ù)進行格式化罢缸，使數(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)
* 下面是一個簡單的毛坯
<html>
<head>
? <title>HTML示例</title>
</head>
<body>
<form action="01-hello.html" method="get">
手機號碼：<input type="text" name="phone"/><br/>
創(chuàng)建密碼：<input type="password" name="pwd"/><br/>
性別：<input type="radio" name="sex" value="nv" checked="checked"/>女 <input type="radio" name="sex" value="nan"/>男<br/>
愛好：<input type="checkbox" name="love" value="y"/>羽毛球 <input type="checkbox" name="love" value="p"? checked="checked"/>乒乓球
<input type="checkbox" name="love" value="pp"/> 排球<br/>
文件：<input type="file"/><br/>
生日：<select name="birth">
<option value="0">請選擇</option>
<option value="1991" selected="selected">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
<br/>
自我描述：<textarea cols="10" rows="10" name="tex"></textarea><br/>
隱藏項：<input type="hidden" name="hid"/><br/>
<input type="submit" value="注冊"/>
<input type="reset" value="重置注冊"/>
<input type="button" value="普通按鈕"/>
<br/>
<!--? <input type="image" src="a.jpg"/>-->
</form>
</body>
</html>
* <form></form>: 定義一個表單的范圍
- 屬性
** action： 提交到地址爵川，默認提交到當(dāng)前的頁面
** method:? 表單提交方式
- 常用的有兩種? get和post敷鸦，默認是get請求
** 面試題目： get和post區(qū)別
1、get請求地址欄會攜帶提交的數(shù)據(jù)寝贡，post不會攜帶（請求體里面扒披。在第七天時候講http協(xié)議時候）
2、get請求安全級別較低圃泡，post較高
3碟案、get請求數(shù)據(jù)大小的限制，post沒有限制
** 輸入項：可以輸入內(nèi)容或者選擇內(nèi)容的部分
- 大部分的輸入項 使用? <input type="輸入項的類型"/>
******* 在輸入項里面需要有一個name屬性
*** 普通輸入項：<input type="text"/>
*** 密碼輸入項：<input type="password"/>
*** 單選輸入項：<input type="radio"/>
- 在里面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現(xiàn)默認選中的屬性
-- checked="checked"
*** 復(fù)選輸入項：<input type="checkbox"/>
- 在里面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現(xià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>
- 默認選擇
*** selected="selected"
*** 文本域
*** 隱藏項（不會顯示在頁面上颇蜡，但是存在于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="畢姥爺扮叨，熊出沒，劉翔">設(shè)置頁面關(guān)鍵字---沒啥用
? <meta http-equiv="refresh" content="3;url=01-hello.html" />設(shè)置這個頁面在3秒鐘后自動跳轉(zhuǎn)到url代表的鏈接里去
** base標(biāo)簽：設(shè)置超鏈接的基本設(shè)置
- 可以統(tǒng)一設(shè)置超鏈接的打開方式
<base target="_blank"/>
** link標(biāo)簽：引入外部文件
** 明天css领迈，可以使用link標(biāo)簽引入css文件
14彻磁、框架標(biāo)簽的使用（會用）
* <frameset>
- rows:按照行進行劃分
** <frameset rows="80,*">
- cols:按照列進行劃分
** <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)簽的擴展（了解）
- 百度是網(wǎng)絡(luò)資源
- 當(dāng)a標(biāo)簽里面訪問網(wǎng)絡(luò)資源時候恍箭，必須要加一個協(xié)議 http：表示一個網(wǎng)絡(luò)的公共協(xié)議，
如果加上http協(xié)議之后瞧省，自動識別訪問資源是一個網(wǎng)絡(luò)資源
如果不是公共協(xié)議扯夭，會去本地電腦找支持這個協(xié)議的應(yīng)用程序。
* 使用標(biāo)簽把要操作的數(shù)據(jù)包起來鞍匾，通過修改標(biāo)簽的屬性值交洗，來實現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化
