注意:HTML 的注释为<!---->,这里为了方便,使用Java注释://
form 标签是创建HTML表单的标签;常用的部分属性如下;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<fieldset>
<legend>基本信息</legend>
<input type="text" placeholder="请输入用户名:"/>
<input type="password" placeholder="请输入密码"/>
<input type="submit" value="提交"/>
<input type="file"/>
<input type="radio" name="sex" id="male"/><label for="male">男</label>
<input type="radio" name="sex" id="female"/><label for="female">女</label>
</fieldset>
<fieldset>
<legend>详尽信息</legend>
<textarea cols="60" rows="30" style="resize: none;">评价</textarea>
<input type="checkbox" name="sports" id="s"/><label for="s">篮球</label>
<input type="checkbox" name="sports" id="sp"/><label for="sp">足球 </label>
<input type="checkbox" name="sports" id="spo"/><label for="spo">羽毛球</label>
</fieldset>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</form>
</body>
</html>
生成的效果图如下;
-
fileset 标签的作用是将form下的一些标签合在一个框中,类似于集合,效果如上的“基本信息”框和“详尽信息”框;
-
legend 标签就是fileset标签集合框的提示信息,上图的“基本信息”和“详尽信息”均是;
-
input 输入标签;text 普通文本框,输入什么显示什么;placeholder 提示文本,当普通文本框等可输入的文本框还没有输入数据之前显示的提示信息,如上图的“请输入用户名”和“请输入密码”;password 密码框,将用户的输入的密码以黑色实心圆显示,保护输入的内容,如微信、QQ的密码输入显示;submit 提交框,点击该框可将输入的数据提交;file 文本选择框,可选择电脑的文件进行上传;
-
radio、checkbox 单选和多选标签;name 标记为一组选项,name属性不同或不存在的单选框,则单选框不为一组(即每个都可以选,默认每个都是一组,一组可选一个值);label 标签将标签的内容(“男”)升级为标签(即可以点击),id 标记本个radio标签,for标签指向id的属性,使得标签(“男”)和它隶属的标签有关联,即点击标签(“男”)就有点击与其对应的单选框的效果;id和for标签是一起使用,缺少则没有该联系和效果;checkbox标签是多选标签即一组选择框可选多个值,类似于多选;其他属性用法和radio相同;
-
selection 下拉标签;option是下拉的可选内容;
-
textarea 标签设置一个大的文本框,一般是评价、描述、补充;cols 列宽,rows 行宽,resize:none 框的大小固定(不可拉伸);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<th width="120px" >姓名</th> //width设置本列单元格的宽度
<th>性别</th>
<th>手机</th>
<th>住址</th>
</tr>
<tr>
<td height="120px" style="text-align: center; vertical-align: middle;" >Tom</td>
//设置本行单元格的高度,text-align 是设置字体左右的位置,这里是居中;vertical-align是设置字体垂直的位置,这里是居中
<td>男</td>
<td>911</td>
<td >华盛顿</td>
</tr>
<tr>
<td>Jerry</td>
<td>男</td>
<td>119</td>
<td >华盛顿</td>
</tr>
</table>
<style>
table{
border:black 1px solid ;
border-spacing: 0px;
border-collapse: collapse;
}
th{
border:black 1px solid ;
}
td{
border:black 1px solid ;
}
</style>
</body>
</html>
table 标签在 HTML标签:上 已有部分详述,这里只说上篇博客没有说的东西,即合并行和列,下图是上边这个代码的执行效果;
然后我们修改一些属性;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<th width="120px" colspan="2">姓名</th> //这里使用colspan合并2列
<!--<th>性别</th>--> //注释掉
<th>手机</th>
<th>住址</th>
</tr>
<tr>
<td height="120px" style="text-align: center; vertical-align: middle;" >Tom</td>
<td>男</td>
<td>911</td>
<td rowspan="2">华盛顿</td> //这里使用rowspan合并2行
</tr>
<tr>
<td>Jerry</td>
<td>男</td>
<td>119</td>
<!--<td >华盛顿</td>--> //注释掉
</tr>
</table>
<style>
table{
border:black 1px solid ;
border-spacing: 0px;
border-collapse: collapse;
}
th{
border:black 1px solid ;
}
td{
border:black 1px solid ;
}
</style>
</body>
</html>
然后效果图:
可以看到;colspa 的作用是合并列,后面的属性值是合并的列数;rowspan 是合并行,后面的属性值是合并的行数;
//top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: blanchedalmond;"> //设置背景颜色
</body>
</html>
//left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: beige re; resize: none;">
<!-- <a href="http://www.baidu.com">百度</a>-->
<!-- <a href="http://www.baidu.com" target="_blank">百度</a>-->
<!-- <a href="http://www.baidu.com" target="_top">百度</a>-->
<!-- <a href="http://www.baidu.com" target="right">百度</a>-->
<a href="http://www.baidu.com" target="top" >百度</a> //设置衔接打开方式
</body>
</html>
//right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: greenyellow;">
</body>
</html>
//index1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%,*">
<frame src="top.html" name="top" noresize="noresize"/>
<frameset cols="20%,*">
<frame src="left.html" noresize="noresize"/>
<frame src="right.html" noresize="noresize" name="right" />
</frameset>
</frameset>
</html>
一次创建top left right index 四个HTML文件;背景色分别为 blanchedalmond、 beige re、greenyellow 和默认,再在index1.html 文件中将其他三个文件进行布局,可得下图效果;
-
frameset 标签:框架集标签,用于规定框架集中有多少个框架窗口或框架集;将其他的html文件的显示效果在本文件中分区显示;效果如上;
-
rows 竖向占用比值,单位%,这里是 20%,*;即2:8,其中*代表前者占用剩下的所有部分;
-
cols 横向占用比值,用法同 rows;
-
src 该部分显示的效果是哪个HTML文件的,即为路径;
-
<a></a>超链接标签,target 是超链接打开的方式:这里给出了四种:_blank 新窗口打开;_self 本窗口打开,因为left.html文件仅占用了上图左下方白色部分,因此只会在白色部分打开新窗口;_top 在整个窗口界面打开;name 属性,会根据其他部分html中name的属性进行选择跳转(逐个截图很麻烦,这里供大家自行测试);
-
noresize 固定窗口,使其不可拉伸;
接下来介绍一下超链接第5种打开方式_parent 和 iframe 标签
//bottom.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="second.html" ></iframe>
</body>
</html>
//second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: bisque;">
<iframe src="third.html" width="80%" height="80%"></iframe>
</body>
</html>
//third.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: yellow;">
<a href="http://www.baidu.com" width="40%" height="40%" target="_parent">百度</a>
</body>
</html>
创建三个HTML文件bottom、second 和 third;背景色设置各不相同;利用 iframe 标签嵌入另一个页面,形成层层嵌套的形式;
效果如下:
白色部分是bottom的显示页面,黄色的是third页面,中间的是second页面,src指向HTML文件,即嵌套的页面是哪个HTML文件的显示效果;target="_parent" 是在父页面打开链接,即嵌套该页面的页面,这里是second页面;点击超链接“百度”,效果如下图;