HTML标签

时间:2019-02-16
本文章向大家介绍HTML标签，主要包括HTML标签使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

HTML常用标签

<!DOCTYPE html> 声明这是一个HTML文件
<html> </html>根标签
<head> </head>头标签
<body> </body>体标签 
<!-- html标签中可以添加html标签的属性 <meta charset="utf-8" /> meta 属性名  = 之后是属性值 -->
<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！
随机文章
WEB前端知识点必读
最近更新