1. 程式人生 > >第十九章:HTML語言

第十九章:HTML語言

作者:java_wxid

font標籤是字型標籤

color是顏色屬性
size是大小屬性。值是1-7,1最小,7最大
face屬性設定文字的字型

需求1:在網頁上顯示 我是字型標籤 ,並修改字型為 宋體,顏色為紅色。
舉例:

<font color="red" face="楷體" size="7">我是字型標籤</font>

特殊字元

		<		特殊字元			&lt;
		>		特殊字元			&gt;
		空格		特殊字元			&nbsp;
		html會把多個連續的空白字元,都會轉換成為一個空格來處理。

需求1:把<br> 換行標籤 變成文字 轉換成字元顯示在頁面上
舉例:

我很&lt;br&gt;帥!<br/>
我很&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帥!

標題標籤

	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>