html知識加強(qiáng)總結(jié)3
內(nèi)嵌標(biāo)簽：
iframe
src ：可顯示得網(wǎng)頁資源路徑
可以本地（相對路徑）也可以網(wǎng)絡(luò)資源（URL）
注意：
默認(rèn)當(dāng)前頁面打開及加載src指向的資源
width ：顯示區(qū)域的寬度
height ：顯示區(qū)域的高度
name ：設(shè)置內(nèi)嵌區(qū)域的名字盼樟，結(jié)合超鏈接標(biāo)簽的target屬性使用回梧。
作用：
在當(dāng)前網(wǎng)頁中加載其他網(wǎng)頁的資源姑蓝，達(dá)到不同網(wǎng)頁資源之間互不干擾，并且能在同一個頁面顯示給用戶肄梨。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內(nèi)嵌標(biāo)簽</title>
</head>
<body>
<h3>內(nèi)嵌標(biāo)簽</h3>
<hr>
<a target="_jd">京東</a>
<a target="_tb">淘寶</a><br>
<iframe src="" frameborder="0" height="400px" width="49%" name="_jd"></iframe>
<iframe src="" frameborder="0" height="400px" width="49%" name="_tb"></iframe>
<br>
<a target="_bd">百度一下</a>
<a target="_ss">360搜索</a><br>
<iframe src="" frameborder="0" height="400px" width="49%" name="_bd"></iframe>
<iframe src="" frameborder="0" height="400px" width="49%" name="_ss"></iframe>
</body>
</html>
四搜效果顯示
圖片.png
框架標(biāo)簽(已經(jīng)過時 用div加iframe代替)
登錄頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸頁面</title>
</head>
<body>
<h3 align="center">歡迎訪問框架主頁面</h3>
<hr>
<form action="10框架標(biāo)簽.html" method="get" >
<table bgcolor="#7fffd4" border="0" cellpadding="0" cellspacing="10" align="center">
<tr height="50px">
<td width="100">手機(jī)號：</td>
<td width="100">
<input type="text" name="phone">
</td>
</tr>
<tr height="50px">
<td>密碼：</td>
<td>
<input type="password" name="psw">
</td>
</tr>
<tr height="50px">
<td>
<input type="checkbox" name="agree">記住密碼
</td>
<td align="right">
<input type="hidden" name="hidden">忘記密碼莺匠？
</td>
</tr>
<tr height="50px">
<td colspan="2" align="center" >
<input type="submit" value="登錄">
</td>
</tr>
</table>
</form>
</body>
</html>
框架標(biāo)簽主頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架標(biāo)簽</title>
</head>
<frameset rows="10%,*,10%">
<frame src="frameset/top.html">
<frameset cols="10%,*">
<frame src="frameset/left.html" >
<frame src="frameset/right.html" name="_right">
</frameset>
<frame src="frameset/bottom.html">
</frameset>
</html>
top退出頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
</head>
<body>
<a href="../登錄頁面.html" target="_top">退出</a>
</body>
</html>
left選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<ul>
<li><a target="_right">百度一下</a> </li>
<li><a target="_right">淘寶網(wǎng)</a></li>
<li><a target="_right">京東網(wǎng)</a></li>
</ul>
</body>
</html>
right網(wǎng)頁顯示頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>right</title>
</head>
<body>
<ul>網(wǎng)頁顯示頁面</ul>
<li>請點(diǎn)擊左側(cè)超鏈接進(jìn)行選擇</li>
</body>
</html>
效果顯示
圖片.png
點(diǎn)擊登錄后
圖片.png
點(diǎn)擊左側(cè)百度一下
圖片.png
表單標(biāo)簽
form表單標(biāo)簽：
作用：收集并提交數(shù)據(jù)給指定服務(wù)器
屬性：
action：收集數(shù)據(jù)提交地址，也就是URL
method：收集數(shù)據(jù)的提交方式
get：適合小量數(shù)據(jù)懒构，表單數(shù)據(jù)以餐济？展開拼接在URL后面剂陡，不同的鍵值對使用&符號隔開议双，不安全。
post：適合大量數(shù)據(jù)卫袒，安全秩霍，隱式提交篙悯。
注意1：表單數(shù)據(jù)的提交，要提交的表單必須擁有name屬性值铃绒，否則不會提交
提交的表單項數(shù)據(jù)為鍵值對鸽照，鍵為name屬性的值，值為用戶輸入的數(shù)據(jù)
注意2：form標(biāo)簽會收集其標(biāo)簽內(nèi)部的數(shù)據(jù)
注意3：form表單的數(shù)據(jù)提交需要依賴于submit提交按鈕
form表單域標(biāo)簽
作用：給用戶提供可以進(jìn)行數(shù)據(jù)書寫或者選擇的標(biāo)簽
使用：
文本框：
input
type：
text 收集少量數(shù)據(jù)的文本數(shù)據(jù)颠悬，用戶可見
password 手機(jī)用戶的密碼數(shù)據(jù)
name：
數(shù)據(jù)提交的鍵矮燎，也會被js使用
value：默認(rèn)值
單選框：
input
type:
radio
name: name屬性值相同的単迭框只能選擇一項數(shù)據(jù)
value:要提交的數(shù)據(jù)
checked: checked使用此屬性的單選默認(rèn)是選擇狀態(tài)
多選框:
input:
type:
checkbox
name:一一個多選組需要使用相同的name屬性值
value :要提交的數(shù)據(jù)
checked:checked使用此屬性的多選框默認(rèn)是選擇狀態(tài)
單選下拉框:
select :
name :數(shù)據(jù)提交的鍵名,必須聲明
子標(biāo)簽
option:一個opt ion標(biāo)簽表示一個下拉選項
value:要提交的數(shù)據(jù)
文本域:
textarea :聲明一個可以書寫大量文字的文本區(qū)域
name :數(shù)據(jù)提交的鍵名, js和CSS也會使用
rows :聲明文本域的行數(shù)
cols :聲明文本域的列數(shù)
普通按鈕:
input :
type:
button
value :
隱藏標(biāo)簽:
input :
type:
hidden
name :
value :
注意：表單數(shù)據(jù)提交的表單域標(biāo)簽的value值
form表單標(biāo)簽的使用：
在點(diǎn)擊數(shù)據(jù)提交時，form標(biāo)簽會將其內(nèi)部所有的form表單標(biāo)簽中的用戶書寫的數(shù)據(jù)按照method指明的提交方式
提交給action屬性指明的提交地址赔癌。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單標(biāo)簽學(xué)習(xí)</title>
</head>
<body>
<h3>表單標(biāo)簽</h3>
<from action="#" method="get">
用戶名：<input type="text" name="uname" value="王五"><br>
密碼：<input type="password" name="upwd"><br>
性別：男<input type="radio" name="sex" checked="checked">女 <input type="radio" value="0" name="sex"> <br>
籍貫：<br>
<select name="address" >
<option value="" >---請選擇---</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">廈門</option>
<option value="5" selected="selected">深圳</option><!--selected 默認(rèn)選擇-->
</select>
<br>
文本域：<br>
<textarea name="intro" cols="30" rows="10"></textarea><br>
普通按鈕：<br>
<input type="button" value="普通按鈕"><br>
隱藏按鈕：<br>
<input type="hidden" name="hidden" value="haha">
<input type="submit" value="登錄">
</from>
</body>
</html>
效果顯示
圖片.png
模擬百度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬百度</title>
</head>
<body>
<h3>模擬百度</h3>
<form action="https://www.baidu.com/s" method="get"><!--action是漏峰？之前的提交地址，method的get是獲取的届榄？后面的鍵值對-->
<input type="text" name="wd"><!--wd是輸入的字符串對應(yīng)的鍵浅乔，而我們輸入的字符串為值-->
<input type="submit" value="百度一下"><!--提交給action-->
</form>
<br>
<h3>模擬360</h3>
<form action="https://www.so.com/s" method="get">
<input type="text" name="q">
<input type="submit" value="搜索">
</form>
</body>
</html>
效果顯示
圖片.png
登錄注冊頁面制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊頁面</title>
</head>
<body>
<h3 align="center">注冊頁面</h3>
<hr>
<form action="#" method="get" >
<table border="0px" align="center" cellspacing="0" cellpadding="5" bgcolor="#7fffd4">
<tr height="35px">
<td>用戶名：</td>
<td>
<input type="text" name="tet" >
</td>
</tr>
<tr height="35px">
<td>密碼：</td>
<td>
<input type="password" name="psw">
</td>
</tr>
<tr height="35px">
<td>郵箱：</td>
<td>
<input type="text" name="mail">
</td>
</tr>
<tr height="35px">
<td>手機(jī)號：</td>
<td>
<input type="text" name="phone">
</td>
</tr>
<tr height="35px">
<td>性別：</td>
<td>
男<input type="radio" value="1" name="sex" checked="checked">
女 <input type="radio" value="2" name="sex">
</td>
</tr>
<tr height="35px">
<td>愛好：</td>
<td>
<input type="checkbox" value="1" name="hobby">唱歌
<input type="checkbox" value="2" name="hobby">打球
<input type="checkbox" value="3" name="hobby">打游戲
<input type="checkbox" value="4" name="hobby">跳舞
</td>
</tr>
<tr height="35px">
<td>籍貫：</td>
<td>
<select name="address">
<option value="">--請選擇--</option>
<option value="1" >成都</option>
<option value="2">重慶</option>
<option value="3">廈門</option>
<option value="4">上海</option>
<option value="5">西安</option>
<option value="6">深圳</option>
<option value="7">廣西</option>
</select>
</td>
</tr>
<tr height="35px">
<td>個人介紹：</td>
<td>
<textarea name="intro" cols="23" rows="5"></textarea>
</td>
</tr>
<tr height="35px" align="center">
<td colspan="2">
<input type="checkbox" value="0" name="agree">是否同意本公司的協(xié)議
</td>
</tr>
<tr height="35px" align="center">
<td colspan="2" >
<input type="submit" value="登錄">
</td>
</tr>
</table>
</form>
</body>
</html>
效果顯示
圖片.png
html復(fù)習(xí)超鏈接頁面顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html復(fù)習(xí)</title>
<meta name="keyword" content="HTML,sxt">
<meta name="description" content="HTML學(xué)習(xí),特別簡單">
<meta name="author" content="lx">
<meta http-equiv="refresh" content="5" url="http://www.baidu.com">
</head>
<body>
<h3>html學(xué)習(xí)</h3>
<hr>
<p>
生活一種相遇，沒有預(yù)約，更在 <b>心</b>上靖苇，無論歲月變遷席噩，<br>
有情相隨，<del>心就不覺寒冷</del>贤壁， 因?yàn)橛星榈渴啵谎裕南嗤ǎ?lt;br>
有愛相伴脾拆，路上不會 <i>孤單</i> 馒索，因?yàn)橛袗郏徽Z名船，也傾情绰上，<br>
情在，片片飛花潛入夢渠驼，相逢蜈块，<u>愛就前世緣</u>，心心相印迷扇，<br>
情在百揭，片片飛花潛入夢，相逢蜓席，愛就前世緣器一，心心相印，<br>
心若相知厨内，彼此默契盹舞，人生，也可簡單隨意隘庄，愛就有緣踢步，<br>
情若相眷，心生憐惜丑掺，感情获印，也可默然相對，緣來有情街州。<br>
</p>
<dl>
<dt><b> html復(fù)習(xí)筆記及其代碼：</b></dt>
<dd><a href="01html標(biāo)簽.html" target="_blank">html標(biāo)簽復(fù)習(xí)</a></dd>
<dd><a href="02Head標(biāo)簽.html" target="_blank">head標(biāo)簽復(fù)習(xí)</a></dd>
<dd><a href="03文字標(biāo)簽.html" target="_blank">body文字標(biāo)簽復(fù)習(xí)</a></dd>
<dd><a href="04列表標(biāo)簽_有序無序.html" target="_blank">列表標(biāo)簽復(fù)習(xí)</a></dd>
<dd><a href="06圖片標(biāo)簽.html" target="_blank">圖片標(biāo)簽復(fù)習(xí)</a></dd>
<dd><a href="07超鏈接標(biāo)簽.html" target="_blank">超鏈接標(biāo)簽復(fù)習(xí)</a></dd>
<dd><a href="08表格標(biāo)簽.html" target="_blank">表格標(biāo)簽復(fù)習(xí)</a></dd>
<dd><a href="08簡歷表格制作.html" target="_blank">簡歷作業(yè)復(fù)習(xí)</a></dd>
<dd><a href="09內(nèi)嵌標(biāo)簽.html" target="_blank">內(nèi)嵌標(biāo)簽</a></dd>
<dd><a href="10登錄頁面.html" target="_blank">登錄框架頁面復(fù)習(xí)</a></dd>
<dd><a href="11表單標(biāo)簽.html" target="_blank">表單標(biāo)簽</a></dd>
<dd><a href="12模擬百度.html" target="_blank">表單標(biāo)簽?zāi)M百度作業(yè)</a></dd>
<dd><a href="13注冊頁面制作.html" target="_blank">注冊頁面制作</a></dd>
</dl>
</body>
</html>
顯示效果
圖片.png
