HTML常用标签
<!DOCTYPE html> 声明这是一个HTML文件
<html> </html>根标签
<head> </head>头标签
<body> </body>体标签
<meta charset="utf-8">
<br/>换行标签
<hr/>下划线标签 属性:color下划线颜色、width 1.px像素2.百分比,相对当前页面的宽度、3.align对齐方式
<p></p>段落标签 属性:align对齐方式
<div></div>块标签,如果没有任何约束的情况下,一定是单独成行的标签(一般和CSS)
<span></span>行内标签,左右的内容处于同一行(一般用于友好型提示)
<font></font> 文本标签 属性:size:字体的大小、color:字体的颜色(#RGB)、face:字体样式
<h1></h1>~<h6></h6> 标题标签,数字越大字体越小
<ul></ul>无序列表 属性:type 值:circle 圆圈、square 方块、none 去除列表标识、disc默认实心圆
<ol></ol>有序列表 属性:type 值:a A i I 1; start : 从多少开始
<img/> 单边标签 图片加载 属性: src:可以是本机地址也可以是网络地址
width:宽度 height : 高度 border:边框 align:对齐方式,相对于相邻文本的对齐(top middle,bottom) alt:图片的文字说明,指的是当前图片无法显示的情况下,在页面显示的提示
<a></a>连接标签:可以是一个按钮、一个或一段文字、图片
属性: href : 链接的目标地址,可以是本机的HTML文件,后台接口,网站地址
target:_self在当前页面打开,_blank新建页面打开
name:锚点
<table></table>表格标签,声明这是一个表格
<tr></tr>表格里的行标签
<td></td>表格的列标签
表格里可以存放图片、文本、链接、输入框、、、、
属性:
border:边框的宽度
bordercolor:边框的颜色
cellspacing:单元格的外边距
cellpadding:单元格的内边距
align:表格居中center
表格的标题:
<caption></caption>标题
表头:
<th></th>标签,默认加粗,黑体,居中
colspan:"合并多少列"
rowspan:"合并多少行"
form表单
<form></form>
属性:
action:表示当前from表单中的内容提交到的目标路径,可以是本机服务器路径。后台程序,其他界面
method:请求方式
get:【主要用于查询 select】
1.通过地址栏直接带有参数数据通过URL传递给其他页面或者程序
2.不安全
3.效率高
4.get请求方式限制数据的大小,一般要求是2kb
post:【主要用于 update delete insert】
1.一种不在地址栏展示的传输方式
2.安全系数相对较高
3.效率低
4.post请求数据大小没有限制
input标签:
input标签中type属性对应的值:
text:缺省属性默认按照文本方式传递
password:密码
radio:单选 checked默认选项
checkbox:多选
file:文件上传
date:日期
submit:提交
reset:重置
hidden:通过隐藏方式传入
image:图片
数据提交失败的原因:
1.input标签对应的数据没有name属性,后台会认为是无效数据,直接丢弃
2.form表单只处理form表单内的数据
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form表单</title>
<style type="text/css">
.t1{
text-align: right;
}
</style>
</head>
<body>
<h3 align="center">注册</h3>
<form action="" method="get">
<div>
<table align="center">
<tr>
<td class="t1">用户名:</td>
<td><input type="text" name="name" placeholder="bluesky"></td>
</tr>
<tr>
<td class="t1">密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td class="t1">确认密码:</td>
<td><input type="password" name="confirm"></td>
</tr>
<tr>
<td class="t1">性别:</td>
<td><input type="radio" name="sex" value="0" />男
<input type="radio" name="sex" value="1" checked/>女
</td>
</tr>
<tr>
<td class="t1">爱好:</td>
<td>
<input type="checkbox" name="hobby[]" value="篮球" checked/>篮球
<input type="checkbox" name="hobby[]" value="足球" />足球
<input type="checkbox" name="hobby[]" value="乒乓球" />乒乓球
<input type="checkbox" name="hobby[]" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td class="t1">上传头像:</td>
<td><input type="file" name="file"/></td>
</tr>
<tr>
<td class="t1">居住地:</td>
<td><select name="city">
<option value="上海">上海</option>
<option value="开封">开封</option>
<option value="郑州">郑州</option>
<option value="广州">广州</option>
<option value="天津">天津</option>
<option value="厦门">厦门</option>
</select>
</td>
</tr>
<tr>
<td class="t1">个人简介:</td>
<td><textarea rows="4" cols="50" name="desc"></textarea>></td>
</tr>
<tr align="center">
<td cols ="2"></td>
<td>
<input type="submit" value="提交">
<input type="reset" value="重置" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
frameset分割页面框架
使用frameset框架分割页面,不能使用body
frameset可以认为是frame的集合,所以里面需要使用frame来做分割
rows:200px, *
表示当前页面分成上下两层,一层是200px,其他是剩余部分
cols:200px, *
表示当前页面分为左右两边,一边是200px,其他是剩余部分
border可以移动,如果想要border不移动:
1. 设置border为0
2. 添加属性noresize
若想在一个块里写的链接在另外一个块中显示
在被显示块中frame添加一个name属性
在链接块中添加一个target属性,设置它的值与被显示块中的name值一直就OK!