一:<frameset>框架标签</frameset>
1. 该标签不能在HTML的body部分使用
2. Row属性:按行的方向进行划分,从上往下划分,划分的页面在整个页面的百分比
3. Clo属性:按列的方向进行划分,从左右往右划分, 划分的页面在整个页面的百分比.
#使用<frameset></frameset>标签建立网页框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>框架标签</title>
</head>
<frameset rows="20%,*">
<frame src="head.html" />
<frameset cols="30%,*">
<frame src="left.html" />
<frame src="main.html" />
</frameset>
<frame src="../Program Files/Dreamweaver/Adobe_Dreamweaver_CS5/UntitledFrame-1">
<frame src="../Program Files/Dreamweaver/Adobe_Dreamweaver_CS5/UntitledFrame-2">
</frameset><noframes></noframes>
<body>
</body>
</html>
二:表单标签<form></form>
1. form标签常见的属性
action:表单最终提交的地址(url)某个页面
method:表单提交的方式;分post/get
get提交方式:
(1)表单提交后,用户的敏感数据会显示在地址栏中,不安全
(2)提交的用户数据有限制
post提交方式:
(1)该方式提交后,用户的敏感数据不会显示在地址栏中
(2)该方式提交的数据没有限制,也是提交小的文件
2. 表单标签的子标签<input/>标签
(1)文本输入框:<input type=”text” name=”…”/>
(2)密码输入框:<input type=”password” name=” …”/>
(3)单选框:<input type=”radio” name=”…”/>
(4)复选框:<input type=”checkbox” name=”…”/>
(5)下拉菜单:<select name=”…”><option value=”文本显示的内容”></option></select>
(6)上传文件:<input type=”file”/>
(7)文本输入域:<textarea></textarea>
(8)按钮:<input type=”buttom” value=”…” />
(9)提交:<input type=”submit” value=”…”/>
(10)重置:<input type=”rest” value=”重置”/>
(11)隐藏域<input type=”hidden” name=”…”/>
#单选和复选框:name必填属性值,将他们看作同一组信息,指定name属性的值
表单标签的中和应用:
<!DOCTYPE HTML> |
<html> |
<head> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
<title>表单标签</title> |
</head> |
<body> |
<form method="post" action="#"> |
用户名: |
<input type="text" name="userName" value="请输入4-12位数字"/><br/> |
密码: |
<input type="password" name="password" value="请输入密码" /><br/> |
性别:<br/> |
<input type="radio" name="sex" value="男"/>男 |
|
<input type="radio" name="sex" value="女"/>女<br/> |
爱好:<br/> |
<input type="checkbox" name="hobbies" value="篮球"/>篮球 |
|
<input type="checkbox" name="hobbies" value="足球"/>足球 |
|
<input type="checkbox" name="hobbies" value="健身"/>健身 |
|
<input type="checkbox" name="hobbies" value="登山"/>登山<br/> |
籍贯: |
<select name="adress"> |
<option value="陕西">陕西</option> |
<option value="浙江">浙江</option> |
<option value="重庆">重庆</option> |
<option value="四川">四川</option> |
</select><br/> |
<input type="hidden" name="id"/> |
<input type="file" name="file" value="自我描述"/><br/> |
<input type="submit" name="submit" value="提交"/> |
<input type="reset" name="reset" value="重置" /> |
<input type="button" name="bu" value="按钮" /> |
</form> |
</body> |
</html> |
#使用<form></form>嵌套<table></table>标签实现用户注册页面
<!DOCTYPE HTML> |
<html> |
<head> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
<title>beautifulForm</title> |
</head> |
<body> |
<center><font color="#666666" size="+6">用户注册</font> |
<form action="#" method="post"> |
<table border="1px"> |
<tr align="center"> |
<td width="30%,*">用户名</td> |
<td align="left"><input type="text" name="username" value="请输入4-12位有效数字"/></td> |
</tr> |
<tr align="center"> |
<td width="30%,*">密码</td> |
<td align="left"><input type="password" name="password" value="请输入密码"/></td> |
</tr> |
<tr align="center"> |
<td width="30%,*">性别</td> |
<td><input type="radio" name="sex" value="男"/>男 |
<input type="radio" name="sex" value="女"/>女 |
</td> |
</tr> |
<tr align="center"> |
<td width="30%,*">爱好</td> |
<td><input type="checkbox" name="hobbies" value="篮球"/>篮球 |
<input type="checkbox" name="hobbies" value="健身"/>健身 |
<input type="checkbox" name="hobbies" value="游泳"/>游泳 |
<input type="checkbox" name="hobbies" value="登山"/>登山 |
</td> |
</tr> |
<tr align="center"> |
<td width="30%,*">学历</td> |
<td align="left"><select name="leve"> |
<option value="请选择学历">请选择学历</option> |
<option value="博士生">博士生</option> |
<option value="研究生">研究生</option> |
<option value="本科生">本科生</option> |
<option value="专科生">专科生</option> |
</select> |
</td> |
</tr> |
<tr align="center"> |
<td width="30%,*">上传照片</td> |
<td><input type="file" name="files" value="上传的文件"/>上传文件 |
</td> |
</tr> |
<tr><td width="30%,*">自我介绍</td> |
<td><textarea rows="5" cols="25" name="介绍"/>自我介绍</textarea> |
</td> |
</tr> |
<tr align="center"><td colspan="2" > |
<input type="submit" name="submit" value="提交" /> |
<input type="reset" name="reset" value="重置" /> |
</td> |
</tr> |
</table> |
</form> |
</center> |
</body> |
</html> |
|
#另外一个框架标签<iframe></iframe>
<!DOCTYPE HTML> |
<html> |
<head> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
<title>框架标签</title> |
</head> |
<body> |
<iframe src="beautifulForm.html" width="300" height="400"></iframe> |
</body> |
</html> |
|
三:导入css样式的三种方法:
1. 行内样式:在每个标签的里面,都会有style属性,<a href=”该css样式文件” style=”font-size:24px;color:#f00;”>
2. 内部样式:在head标签里面定义一个style标签
<style tyle=”text/css”>
a{…内部样式}
</style>
3. 外部样式:
<link rel=”stylesheet”href=”css文件”/>
#开发中常用第三种方式,尽量将css样式与HTML样式分离开来
四:css样式的语法:
1. ID选择器:
若:<p id=”demo”></p>则#demo{css样式内容}
2. 类选择器:
若:<a class=”name” url=”…”/>则:.name{css样式内容}
3. 标签选择器:
若<body></body>则:body{css样式内容}
4. 包含选择器:
若:<p class=”demo”><a class=”name” url=”…”/></p>
则:.demo .name{css样式内容}
5. 并集选择器:
若:<p>…</p><div>…</div>
则:p,div{css样式内容}
6.*{css样式内容} *指代所有的HTML标签
7.伪类选择器:
若<p>段落标记</p>
则:p:link{css样式}表示没有访问的一种状态
P:visited{css样式}表示一种被访问过的状态
P:hover{css样式}表示鼠标停留时,悬浮的一种状态
P:active{css样式}表示一种激活的状态,点击没有松开
#css语法中:该伪类选择器需要满足p:link{}---p:visited{}---p:hover{}---p:active{}顺序才会有以上效果;
#伪类选择器的hover标签和表格标签综合使用:
<!DOCTYPE HTML> |
<html> |
<head> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
<title>伪类练习</title> |
<style type="text/css"> |
tbody tr:hover{ |
color:#099; |
} |
</style> |
</head> |
<body> |
<center> |
<table align="center" border="1px" width="200" height="150"> |
<caption >学生成绩表</caption> |
<thead><tr> |
<th>姓名</th> |
<th>班级</th> |
<th>成绩</th> |
</tr> |
</thead> |
<tbody align="center"> |
<tr> |
<td>张三</td> |
<td>1班</td> |
<td>86</td> |
</tr> |
<tr> |
<td>李四</td> |
<td>1班</td> |
<td>90</td> |
</tr> |
<tr> |
<td>王五</td> |
<td>2班</td> |
<td>80</td> |
</tr> |
</tbody> |
</table> |
</center> |
</body> |
</html> |
|
1. css文本的标签属性:
(1)color:给文本设置颜色
(2)letter-spacing:设置字符边距
(3)text-decoration:none取消下划线
underline:下划线
overline:上划线
line-through:中划线
(4) word-spacing:单词间距(系统默认两个字为一个单词)
2.css文字标签属性:
(1) font-family:字体类型(默认宋体)
(2) font-size:字体大小
(3) font-style:normal(默认正体)
italic:斜体
(4) font-weight:给字体设置粗细(bold)
(5) font的简写属性: font:字体的样式(normal/italic)字体的粗细(bold)字体的大小(font-size)字体的类型(font-family)
3.CSS背景中常用属性:
(1) background-color设置背景颜色
(2) background-image将某个图像设置为背景
(3) background-repeat:设置图像是否重复以及如何重复
no-repeat:不重复;repeat-x:沿X轴重复;repeat-y:沿Y轴重复;repeat:重复;
(4) background-position设置背景图像的起始位置
(5) background的简写属性:
background: background-color background-image
background-repeat
background-position
4.list-style-type:none ;(设置列表css属性)
list-style-image:设置列表项的类型符号
5.css表格属性
border-collapse:collapse;合并表格边框
<!DOCTYPE HTML> |
<html> |
<head> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
<title>伪类练习</title> |
<style type="text/css"> |
tbody tr:hover{ |
color:#099; |
} |
table{ |
border-collapse:collapse; |
} |
</style> |
</head> |
<body> |
<center> |
<table align="center" border="1px" width="200" height="150"> |
<caption >学生成绩表</caption> |
<thead><tr> |
<th>姓名</th> |
<th>班级</th> |
<th>成绩</th> |
</tr> |
</thead> |
<tbody align="center"> |
<tr> |
<td>张三</td> |
<td>1班</td> |
<td>86</td> |
</tr> |
<tr> |
<td>李四</td> |
<td>1班</td> |
<td>90</td> |
</tr> |
<tr> |
<td>王五</td> |
<td>2班</td> |
<td>80</td> |
</tr> |
</tbody> |
</table> |
</center> |
</body> |
</html> |
6.css框架属性
(1) 边框颜色:border-top-color:设置上边框颜色
border-right-color:设置右边框颜色
border-bottom-color:设置下边框颜色
border-left-color:设置左边框颜色
(2) 设置边框宽度:border-top-width:设置上边框宽度
border-right-width:设置右边框宽度
border-bottom-width:设置下边框宽度
border-left-width:设置左边框宽度
(3) 设置边框样式:border-top-style:设置上边框样式
border-right- style:设置右边框样式
border-bottom- style:设置下边框样式
border-left- style:设置左边框样式
#简写形式:border:width style color