第十九章：HTML技術
阿新 • • 發佈：2018-12-17
作者：java_wxid
font標籤是字型標籤
color是顏色屬性
size是大小屬性。值是1-7,1最小，7最大
face屬性設定文字的字型
需求1：在網頁上顯示 我是字型標籤 ，並修改字型為 宋體，顏色為紅色。 舉例：
<font color="red" face="楷體" size="7">我是字型標籤</font>
特殊字元
< 特殊字元 <
> 特殊字元 >
空格 特殊字元
html會把多個連續的空白字元，都會轉換成為一個空格來處理。
需求1：把<br> 換行標籤 變成文字 轉換成字元顯示在頁面上 舉例：
我很<br>帥！<br/>
我很 帥！
標題標籤
h1 - h6 都是標題標籤
h1 最大
h6 最小
align 對齊屬性
left 左對齊（預設值）
center 居中
right 右對齊
需求1：演示標題1到 標題6的 舉例：
<h1 align="left">標題1</h1> <h2 align="center">標題2</h2> <h3 align="right">標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6>
a標籤
超連結標籤
href 屬性是連線跳轉的地址
target 屬性 設定哪個視窗進行跳轉
_self 表示當前視窗（預設值）
_blank 開啟一個新視窗去跳轉
舉例：
<a href="http://www.baidu.com">百度</a><br/> <a href="http://www.baidu.com" target="_self">百度_self</a><br/> <a href="http://www.baidu.com" target="_blank">百度_blank</a><br/>
列表標籤
ul 是無序列表
type屬性是每個列表項前面的符號
li 是列表項
需求1：使用無序，列表方式，把東北F4，劉能、趙四、宋小寶、小瀋陽 ，展示出來 舉例：
<h1>東北F4</h1>
<ul type="none">
<li>劉能</li>
<li>趙四</li>
<li>宋小寶</li>
<li>小瀋陽</li>
</ul>
img 標籤
可以用來顯示圖片
src 設定你要顯示的圖片路徑
alt 當設定的路徑找不到圖片的時候，用來代替顯示的文字
height 設定圖片的高度
width 設定圖片的寬度
border 設定圖片的邊框大小
JavaSE的路徑也分為相對路徑和絕對路徑兩種：
絕對路徑是： 碟符：\目錄\檔名
相對路徑： 從工程名開始算
web中的路徑：分為相對路徑和絕對路徑
相對路徑
. 表示當前目錄
.. 表示上一級目錄
資源名 相當於./資源名 （./ 可以省略）
絕對路徑
http://localhost:8080/imgs/10.jpg
http://ip:port/工程名/資源名
JavaSE的絕對路徑不能在html頁面中使用。
需求1：使用img標籤顯示一張美女的照片。並修改寬高，和邊框屬性 舉例：
<img alt="美女找不到" src="../imgs/1.jpg" height="120" width="100" border="1"/>
<img alt="美女找不到" src="2.jpg" height="120" width="100" border="1"/>
<img alt="美女找不到" src="../3.jpg" height="120" width="100" border="1"/>
<img alt="美女找不到" src="../imgs/4.jpg" height="120" width="100" border="1"/>
<img alt="美女找不到" src="../imgs/5.jpg" height="120" width="100" border="1"/>
<img alt="美女找不到" src="http://localhost:8080/imgs/10.jpg" height="120" width="100" border="1"/>
table表格
border是設定表格的邊框
width是設定表格的寬度
height是設定表格的高度
tr 是表格的行
td 是表格的單元格
align 是對齊 屬性
th 是表格的表頭（第一行標題。預設是居中，並加粗）
b 標籤是加粗標籤
center 讓被包含的內容居中顯示
需求1：做一個 帶表頭的 ，三行，三列的表格，並顯示邊框 需求2：修改表格的寬度，高度，表格的對齊方式，單元格間距。 舉例：
<center>
<table border="1" width="200" height="200" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</center>
跨行跨列表格
colspan屬性設定單元格所佔的列數
rowspan屬性設定單元格所佔的行數
需求1：新建一個五行，五列的表格，第一行，第一列的單元格要跨兩列，第二行第一列的單元格跨兩行，第四行第四列的單元格跨兩行兩列。 舉例：
<table border="1" cellspacing="0" height="500" width="500">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
iframe框架標籤 (內嵌視窗)
iframe 標籤 可以在一個頁面上，開一個視窗，單獨載入（顯示）一個頁面內容
src 屬性設定 需要單獨顯示的哪個頁面的 地址（可以相對路徑，也可以是絕對路徑）
width 設定寬度
height 設定高度
iframe和a標籤組合使用步驟：
1、給iframe標籤設定name屬性。設定一個名稱
2、給a標籤的target屬性設定需要跳轉的iframe的name屬性值
舉例：
<iframe src="./6.表格標籤.html" width="500" height="300" name="bbj"></iframe>
<ul>
<li><a href="1.font標籤.html" target="bbj">1.font標籤.html</a></li>
<li><a href="2.特殊字元.html" target="bbj">2.特殊字元.html</a></li>
<li><a href="3.標題標籤.html" target="bbj">3.標題標籤.html</a></li>
<li><a href="5.img標籤.html" target="bbj">5.img標籤.html</a></li>
</ul>
表單標籤
input type=text 表示一個普通文字輸入框 value屬性是文字框的預設值
input type=password 表示一個密碼輸入框 value屬性是文字框的預設值
input type=radio 表示一個單選框 name屬性可以對其進行分組 checked="checked" 表示預設選中
input type=checkbox 表單一個篩選框 checked="checked" 表示預設選中
input type=submit 是提交按鈕 value屬性可以修改按鈕的文字
input type=reset 是重置按鈕 value屬性可以修改按鈕的文字 讓所有表單項都恢復預設值
input type=button 是按鈕 value屬性可以設定按鈕的文字
input type=file 是檔案上傳域
input type=hidden 是隱藏域。當我們需要給伺服器傳送一些資訊，而這些資訊，不希望使用者看到。這個時候就可以使用隱藏域。
select 是下拉列表框
option 是下拉列表中的選項 selected="selected"表示預設選中
textarea 表示多行文字輸入框 起始標籤和結束標籤中的內容就是預設值
rows 設定顯示幾行
cols 設定每行幾個字
舉例：
<form action="">
使用者名稱：<input type="text"><br/>
密碼：<input type="password" /><br/>
確認密碼：<input type="password" /><br/>
選擇性別：<input name="sex" type="radio" />男<input name="sex" type="radio" />女<br/>
選擇興趣愛好：
<input type="checkbox" />喝酒
<input type="checkbox" />抽菸
<input type="checkbox" />燙頭<br/>
選擇國籍：
<select>
<option>中國</option>
<option>美國</option>
<option>日本</option>
</select><br/>
自我評價：<textarea rows="10" cols="20"></textarea><br/>
<input type="submit" value="註冊"/>
<input type="reset"/>
</form>
表單格式化 在表單里加上table表格 舉例：
<center>
<h1>註冊使用者</h1>
<form action="">
<table>
<tr>
<td>使用者名稱：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>確認密碼：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>選擇性別：</td>
<td>
<input name="sex" type="radio" />男
<input name="sex" type="radio" />女
</td>
</tr>
<tr>
<td>興趣愛好：</td>
<td>
<input type="checkbox" />喝酒
<input type="checkbox" />抽菸
<input type="checkbox" />燙頭
</td>
</tr>
<tr>
<td>選擇國籍：</td>
<td>
<select>
<option>中國</option>
<option>美國</option>
<option>小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我評價：</td>
<td>
<textarea rows="10" cols="20"></textarea>
</td>
</tr>
<tr>
<td><input type="submit" value="註冊"/></td>
<td><input type="reset"/></td>
</tr>
</table>
</form>
</center>
表單提交的細節 form 是表單 action 表單提交的伺服器地址 method 請求的方式 GET或POST
當我們提交表單的時候。如果表單項的資料沒有傳送給伺服器 1、表單項必須要有name屬性，沒有name屬性在提交表單的時候。資料不會發給伺服器。 2、單選、複選框、（下拉列表項可選）。都要新增value屬性。否則只會提交給伺服器on值 3、表單提交的時候。如果表單項不在提交的表單內，也不會把資料發給伺服器。 GET請求和POST請求的區別
GET請求的特點：
1、瀏覽器位址列中是action屬性值+?+請求引數（表單資訊）例如： http://localhost:8080/?action=add&username=wzg168&password=123456&sex=boy&hobby=hj&country=cn&desc=1234
2、不安全
3、請求資料的長度限制
POST請求的特點：
1、瀏覽器位址列只有action的屬性值
2、相對安全
3、資料沒有長度限制
div、span、p標籤
div :div標籤（塊標籤） 預設獨佔一行
span ：是內聯標籤 預設寬度就是封裝的資料的長度
p ：是段落標籤 預設會在段落的上方或下方各空出一行來
需求1：div、span、p標籤的演示
<div>這是div塊標籤1</div>
<div>這是div塊標籤2</div>
<span>span標籤1</span>
<span>span標籤2</span>
<p>段落1</p>
<p>段落2</p>