HTML标签使用

一:<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>

</head>

<body>

用户名:

密码:

性别:<br/>

<input type="radio" name="sex" value="男"/>男

爱好:<br/>

<input type="checkbox" name="hobbies" value="篮球"/>篮球

<input type="checkbox" name="hobbies" value="足球"/>足球

<input type="checkbox" name="hobbies" value="健身"/>健身

籍贯:

</select><br/>

</form>

</body>

</html>

#使用<form></form>嵌套<table></table>标签实现用户注册页面

<!DOCTYPE HTML>

<html>

<head>

<title>beautifulForm</title>

</head>

<body>

</tr>

</tr>

<td><input type="radio" name="sex" value="男"/>男

<input type="radio" name="sex" value="女"/>女

</td>

</tr>

<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>

<option value="请选择学历">请选择学历</option>

</select>

</td>

</tr>

<td><input type="file" name="files" value="上传的文件"/>上传文件

</td>

</tr>

</td>

</tr>

</td>

</tr>

</table>

</form>

</center>

</body>

</html>

#另外一个框架标签<iframe></iframe>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

三:导入css样式的三种方法:

1. 行内样式:在每个标签的里面,都会有style属性,<a href=”该css样式文件” style=”font-size:24px;color:#f00;”>

2. 内部样式:在head标签里面定义一个style标签

a{…内部样式}

</style>

3. 外部样式:

#开发中常用第三种方式,尽量将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>

tbody tr:hover{

color:#099;

}

</style>

</head>

<body>

<caption >学生成绩表</caption>

</tr>

</thead>

<tr>

</tr>

<tr>

</tr>

<tr>

</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>

tbody tr:hover{

color:#099;

}

table{

border-collapse:collapse;

}

</style>

</head>

<body>

<caption >学生成绩表</caption>

</tr>

</thead>

<tr>

</tr>

<tr>

</tr>

<tr>

</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

猜你喜欢