02.01_HTML的常用标签
1.表单标签
作用:可以提交不同的数据到服务器
标签:
:表示表单的范围【父标签】 主要作用:用于采集用户信息
子标签的分类:
表单标签:包含数据提交服务器地址、提交方式【get和post】
表单域:用于采集用户信息【姓名,密码,邮箱,上传文件。。。。。】
表单按钮:提交按钮,复原按钮
属性:
action:提交到服务器的地址【#】
method:提交采用的方式
enctype:很少用,做文件上传的时候需要设置这个属性
:表示输入项,可以输入内容【子标签】
type:输入内容的类型
普通输入项:type=“text”
密码输入项:type=“password”
单项输入项:type=“radio”
多项输入项:type=“checkbox”
文件输入项:type=“file”
邮箱输入项:type=“email”
name:用于提交
value:标记【值】
checked:checked= “checked“表示默认选中
重置按钮:type=“reset”
提交按钮:type=“submit”
普通按钮:type=“button”
:下拉输入项【年份,城市的选择】【子标签】
:select标签的子标签,表示可以选择的选项
name:名称
value:值
selected=“selected”
:文本域【子标签】
cols:列
rows:行
表单提交案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
form标签
input标签:
type:
text
password
radio
checkbox
file
email
reset
name:
value:
checked:checked="checked"
-->
<form>
手机号码:<input type="text" name="phone" placeholder="请输入手机号码"/><br />
创建密码:<input type="password" name="pwd" placeholder="请输入密码"/><br />
重复密码:<input type="password" name="repwd" placeholder="请再次输入密码"/><br />
用户姓名:<input type="text" name="username" placeholder="请输入您的姓名"/><br />
性 别:<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女<br />
爱 好:<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football"/>足球<input type="checkbox" name="hobby" value="yumaoball"/>羽毛球
<br />
上传头像:<input type="file" />
<br />
出生年月:<select name="birth">
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
</select>
<br />
邮箱地址:<input type="email" placeholder="请输入注册邮箱"/>
<br />
<input type="hidden" name="err" value="wrong"/>
<br />
在线时间:<input type="date" name="time" />
<br />
自我描述:<textarea rows="5" cols="20" placeholder="请输入自我描述信息"></textarea>
<br />
<input type="color" name="color" />
<br />
<input type="range" name="range" max="100" min="0" value="10"/>
<br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
问题:提交的内容提交到哪去了?
使用method指定的方式,提交到action表示的服务器
【经典面试题】get和post的区别
a.get请求地址栏中会携带页面中所有的信息,post中不会【http请求】
b.get请求安全性低,post相对较高
c.get请求效率高,post相对较低
d.get请求对数据的大小限制,而post没有任何限制
###无意标签
针对 HTML5 中的那些有明确表示文档结构含义的标签
2.头标签
head和body
:指定浏览器标题栏显示的内容 :设置超链接的基本位置,可以统一设置超链接的打开方式 :设置和页面相关的一些信息 name:关键字
content:内容
charset:编码格式
:一般用于引入外部文件【css中】
无意标签案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="keywords" content="千锋,it">
<meta http-equiv="refresh" content="3;url=http://www.baidu.com"></meta>
<base target="_blank" />
<title>无意标签</title>
</head>
<body>
无意标签
<a href="formDemo02.html">注册账户</a>
</body>
</html>
3.框架标签
:划分规则【父标签】 rows:按照行进行划分
cols::按照列进行划分
:显示具体的页面【子标签】
frame框架使用案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<frameset cols="20%,50%,30%">
<frame src="formDemo01.html" />
<frame src="index.html" />
<frame src="markupDemo.html"/>
</frameset>
<frameset rows="20%,50%,30%">
<frame src="formDemo01.html" />
<frame src="index.html" />
<frame src="markupDemo.html"/>
</frameset>-->
<frameset rows="20%,80%">
<frame src="formDemo01.html"/>
<frameset cols="50%,50%">
<frame src="index.html"/>
<frame src="markupDemo.html" />
</frameset>
</frameset>
</html>
注意:frameset标签不能使用在body中,也不能使用body的外面,一旦使用了框架标签之后,则需要删除body标签【违背了规范,很少使用】
如有错误,请在下面评论。好及时更正,谢谢!