-
網頁元素HTML
-
列表
-
(1)無序列表
<ul>
<li>****</li>
<li>***</li>
</ul>
更多樣式:<ul type="circle|square">
(2)有序列表
<ol start="100">
<li>****</li>
<li>***</li>
</ol>
更多樣式:<ol type="A|a|i|I">
-
-
表單元素
-
(1)文本框
<input type="text" maxlength="20" placeholder="請輸入用戶名...">
(2)密碼框
<input type="password" maxlength="16" >
(3)單選按鈕
<input type="radio" name="sex" checked>男</input>
<input type="radio" name="sex">女</input>
(4)下拉列表
<select>
<option>請選擇--</option>
<option>北京</option>
<option>廣東</option>
</select>
(5)復選框
<input type="checkbox" name="jiuye">游戲測試</input>
<input type="checkbox" name="jiuye">銀行測試</input>
(6)多行文本框
<textarea rows="8" cols="30">
包括教育背景、工作經驗、性格特征等
</textarea>
(7)上傳文件
<input type="file">
(8)按鈕
<button>確定提交</button>
<input type="submit" value="注冊">
<input type="reset" value="重置">
-
二、CSS美化網頁
1、CSS選擇器
(1)Html標簽選擇器:當前網頁中同一種標簽會設置成指定的樣式
(2)class標簽選擇器:當前網頁中相同的class處會設置成指定的樣式
(3)id標簽選擇器:當前網頁中某一處需要設置成唯一的樣式
2、CSS樣式的應用方法
(1)行內:位於<body>中的某個標簽內,只對該標簽生效。
(2)內嵌:位於<head></head>,針對該html文件生效
(3)外部樣式:將樣式代碼單獨存在css文件中,在html文件的head中使用link鏈接法將css文件與網頁文件進行綁定
<link rel="stylesheet" type="text/css" href="gushi.css">
-
三、框架
1、上下結構:
<html> <head></head> <frameset rows="20%,*" bordercolor="#0000FF" border="5"> <frame name="top" src=“1.html"> <frame name="bottom" src=“2.html"> </frameset> </html>
2、左右結構
<html> <head></head> <frameset cols="20%,*" bordercolor="#0000FF" border="5"> <frame name="left" src=“1.html"> <frame name="right" src=“2.html"> </frameset> </html>
3、上中下結構
<html> <head></head> <frameset rows="20%,*,10%" bordercolor="#0000FF" border="5"> <frame name="top" src=“1.html"> <frame name="middle" src=“2.html"> <frame name="bottom" src=“3.html"> </frameset> </html>
4、上下結構,下面又分成左中右兩部分
<html> <head></head> <frameset rows="20%,*" bordercolor="#0000FF" border="5"> <frame name="top" src=“1.html"> <frameset cols="20%,*,10%" bordercolor="#0000FF" border="5"> <frame name="left" src=“1.html"> <frame name="right" src=“1.html"> <frame name="right" src=“1.html"> </frameset> </frameset> </html>
5、上中下結構,中間拆分成左中右三部分
<html> <head></head> <frameset rows="10%,*,10%" bordercolor="#0000FF" border="5"> <frame name="top" src=“1.html"> <frameset cols="20%,*,10%" bordercolor="#0000FF" border="5"> <frame name="left" src=“1.html"> <frame name="middle" src=“1.html"> <frame name="right" src=“1.html"> </frameset> <frame name="bottom" src=“1.html"> </frameset> </html>