day01 關於html常用標籤的使用
1、html的簡介
* 什麼是html？
- HyperText Markup Language：超文本標記語言，網頁語言
** 超文本：超出文本的範疇，使用html可以輕鬆實現這樣操作
** 標記：html所有的操作都是通過標記實現的，標記就是標籤，<標籤名稱>
** 網頁語言：
* 第一個html程序。
- 創建java文件.java
** 先編譯，然後再運行（jvm）
- html後綴是 .html .htm
** 直接通過瀏覽器就可以運行
- 代碼
** 這是我的<font size="5" color="red">第一個html程序！</font>
* html的規範（遵循）
1、一個html文件開始標籤和結束的標籤 <html> </html>
- 定義一個java方法 { }
2、html包含兩部分內容
（1）<head> 設置相關信息</head>
（2）<body> 顯示在頁面上的內容都寫在body裏面</body>
3、html的標籤有開始標籤，也要有結束標籤
- <head></head>
4、html的代碼不區分大小寫的
5、有些標籤，沒有結束標籤 ，在標籤內結束
- 比如 換行 <br/> <hr/>
* html的操作思想（******理解）
網頁中有很多數據，不同的數據可能需要不同的顯示效果，這個時候需要使用標籤把要操作的數據包起來（封裝起來），
通過修改標籤的屬性值實現標籤內數據樣式的變化。
一個標籤相當於一個容器，想要修改容器內數據的樣式，只需要改變容器的屬性值，就可以實現容器內數據樣式的變化。
html中常用的標籤
2、文字標籤和註釋標籤
* 文字標籤：修改文字的樣式
- <font></font>
- 屬性：
* size: 文字的大小 取值範圍 1-7,超出了7，默認還是7
* color：文字顏色0
- 兩種表示方式
** 英文單詞：red green blue black white yellow gray......
** 使用十六進制數表示 #ffffff : RGB
- 通過工具實現不同的顏色 #66cc66
* 註釋標籤
- java註釋幾種？三種
- html的註釋 ： <!-- html的註釋 -->
3、標題標籤、水平線標籤和特殊字符
* 標題標籤
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 從h1到h6，大小是依次變小，同時會自動換行
* 水平線標籤
- <hr/>
- 屬性
** size: 水平線的粗細 取值範圍 1-7
** color: 顏色
- 代碼
<hr size="5" color="blue"/>
* 特殊字符
- 想要在頁面上顯示這樣的內容 <html>:是網頁的開始！
- 需要對特殊字符進行轉義
* < <
* > >
* 空格：
* & : &
4、列表標籤
- 比如現在顯示這樣的效果
傳智播客
財務部
學工部
人事部
** <dl> </dl>: 表示列表的範圍
** 在dl裏面 <dt></dt>: 上層內容
** 在dl裏面 <dd></dd>：下層內容
- 代碼
<dl>
<dt>傳智播客</dt>
<dd>財務部</dd>
<dd>學工部</dd>
<dd>人事部</dd>
</dl>
- 想要在頁面上顯示這樣的效果
1. 財務部
2. 學工部
3. 人事部
a. 財務部
b. 學工部
c. 人事部
i. 財務部
ii. 學工部
iii. 人事部
** <ol></ol> : 有序列表的範圍
- 屬性 type：設置排序方式 1(默認) a i
** 在ol標籤裏面 <li>具體內容</li>
- 代碼
<ol>
<li>財務部</li>
<li>學工部</li>
<li>人事部</li>
</ol>
- 想要在頁面上顯示這樣的效果
特殊符號（方框） 財務部
特殊符號（方框） 學工部
** <ul></ul> : 表示無序列表的範圍
屬性： type: 空心圓circle 、實心圓disc 、實心方塊square ，默認disc
在ul裏面 <li></li>
- 代碼
<ul>
<li>財務部</li>
<li>學工部</li>
<li>人事部</li>
</ul>
5、圖像標籤（*******）
* <img src="圖片的路徑"/>
- src: 圖片的路徑
- width：圖片的寬度
- height：圖片的高度
- alt: 圖片上顯示的文字，把鼠標移動到圖片上，停留片刻顯示內容
** 有些瀏覽器下不顯示（沒有效果）
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文件是什麼關係？
- 圖片在html的所在目錄的上層目錄 day01
** 怎麼表示上層路徑 ../
- ../: day01
-- ../c.png
** 想要表示上層的上層 ../../
7、案例一：列表標籤的使用（作業：完成剩餘的部分）
8、超鏈接標籤（******）
* 鏈接資源(******)
- <a href="鏈接到資源的路徑"> 顯示在頁面上的內容 </a>
** href: 鏈接的資源的地址
** target：設置打開的方式 ，默認是在當前頁打開
-- _blank : 在一個新窗口打開
-- _self: 在當前頁打開 默認
- 當超鏈接不需要到任何的地址 在href裏面加#
- <a href="#">這是一個超鏈接2</a>
* 定位資源
** 如果想要定位資源：定義一個位置
<a name="top">頂部</a>
** 回到這個位置
<a href="#top">回到頂部</a>
** 引入一個標籤 pre：原樣輸出
9、表格標籤（****重要的標籤*****）
* 可以對數據進行格式化，使數據顯示更加清晰
* <table></table>: 表示表格的範圍
- border：表格線
- bordercolor：表格線的顏色
- cellspacing：單元格直接的距離
- width：表格的寬度
- height：表格的高度
** 在table裏面 <tr></tr>
- 設置對齊方式 align： left center right
*** 在tr裏面 <td></td>
- 設置顯示方式 align： left center right
*** 使用th也可以表示單元格
- 表示可以實現居中和加粗
* 代碼
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
* 畫圖分析表格的寫法
- 首先定義一個表格的範圍使用table
- 定義一行使用 tr
- 定義一個單元格使用 td
** 操作技巧：
- 首先數有多少行 ，數每行裏面有多少個單元格
** 表格的標題
<caption></caption>
** 合併單元格
- rowspan：跨行
** <td rowspan="3">人員信息</td>
- colspan：跨列
** <td colspan="3">人員信息</td>
10、表單標籤（****今天最重要的標籤****）
* 可以提交數據到開心網的服務器，這個過程可以使用表單標籤實現
* <form></form>: 定義一個表單的範圍
- 屬性
** action： 提交到地址，默認提交到當前的頁面
** method: 表單提交方式
- 常用的有兩種 get和post，默認是get請求
** 面試題目： get和post區別
1、get請求地址欄會攜帶提交的數據，post不會攜帶（請求體裏面。在第七天時候講http協議時候）
2、get請求安全級別較低，post較高
3、get請求數據大小的限制，post沒有限制
** enctype：一般請求下不需要這個屬性，做文件上傳時候需要設置這個屬性（第22天時候講文件上傳）
** 輸入項：可以輸入內容或者選擇內容的部分
- 大部分的輸入項 使用 <input type="輸入項的類型"/>
******* 在輸入項裏面需要有一個name屬性
*** 普通輸入項：<input type="text"/>
*** 密碼輸入項：<input type="password"/>
*** 單選輸入項：<input type="radio"/>
- 在裏面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現默認選中的屬性
-- checked="checked"
*** 複選輸入項：<input type="checkbox"/>
- 在裏面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現默認選中的屬性
-- checked="checked"
*** 文件輸入項（在後面上傳時候用到）
- <input type="file"/>
*** 下拉輸入項（不是在input標籤裏面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默認選擇
*** 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-表單標籤一.html
?sex=on&love=on&love=on&birth=1991
當在輸入項裏面寫了name屬性之後
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表單標籤一.html
?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表單標籤一.html?
phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=
** ?輸入項name的值=輸入的值&
** 參數類似於key-value形式
*** 使用圖片提交
<input type="image" src="圖片路徑"/>
*** 重置按鈕： 回到輸入項的初始狀態
<input type="reset"/>
*** 普通按鈕(和明天講js在一起使用的)
<input type="button" value=""/>
11、案例：使用表單標籤實現註冊頁面
- 使用表格實現頁面效果
- 超鏈接不想要他有效果 href="#"
- 如果表格裏面的單元格沒有內容， 使用空格作爲佔位符
- 使用圖片提交表單 <input type="image" src="圖片的路徑"/>
12、html中的其他的常用標籤的使用
b : 加粗
s ：刪除線
u ：下劃線
i ：斜體
pre ：原樣輸出
sub : 下標
sup : 上標
p ：段落標籤 比br標籤多一行
====明天css時候一直使用
div ：自動換行
span：在一行顯示
13、html的頭標籤的使用
* html兩部分組成 head和body
** 在head裏面的標籤就是頭標籤
** title標籤：表示在標籤上顯示的內容
** <meta>標籤：設置頁面的一些相關內容
- <meta name="keywords" content="畢姥爺，熊出沒，劉翔">設置頁面關鍵字---沒啥用
<meta http-equiv="refresh" content="3;url=01-hello.html" />設置這個頁面在3秒鐘後自動跳轉到url代表的鏈接裏去
** base標籤：設置超鏈接的基本設置
- 可以統一設置超鏈接的打開方式
<base target="_blank"/>
** link標籤：引入外部文件
** 明天css，可以使用link標籤引入css文件
14、框架標籤的使用（會用）
* <frameset>
- rows:按照行進行劃分
** <frameset rows="80,*">
- cols:按照列進行劃分
** <frameset cols="80,*">
* <frame>
- 具體顯示的頁面
- <frame name="lower_left" src="b.html">
*** 使用框架標籤時候，不能寫在body裏面，使用了框架標籤，需要把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>
* 如果在左邊的頁面超鏈接，想讓內容顯示在右邊的頁面中
- 設置超鏈接裏面屬性 target值設置成名稱
- <a href="01-hello.html" target="right">超鏈接1</a>
15、a標籤的擴展（瞭解）
- 百度是網絡資源
- 當a標籤裏面訪問網絡資源時候，必須要加一個協議 http：表示一個網絡的公共協議，
如果加上http協議之後，自動識別訪問資源是一個網絡資源
- 當瀏覽器裏面找到相關協議，首先看這個協議是不是公共協議http。
如果不是公共協議，會去本地電腦找支持這個協議的應用程序。