前端秘法基础式(HTML)(第二卷)
(第二卷))
目录
一.表单标签
1.表单域
2.表单控件
2.1input标签
2.2label/select/textarea标签
2.3无语义标签
三.特殊字符
一.表单标签
用来完成与用户的交互,例如登录系统
1.表单域
<form>通过action属性,将用户填写的数据转交给服务器
2.表单控件
2.1input标签
type属性:text文本输入框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是标题</title>
</head>
<body><!-- 这里是注释 --><form action = "">姓名<input type = "text"></form>
</body>
</html>
type = password
这种情况下对用户输入的数据具有加密效果
type = radio单选框
<body><!-- 这里是注释 --><form action = "">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender">男<input type = "radio" name = "gender">女</form>
</body>附加相同的name属性,只能选择一个,当加入checked = "checked"则可以默认一个选项
type = checkbox复选框可以选择多个选项
<form action = "">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender" checked = "checked">男<input type = "radio" name = "gender">女<br>爱好<input type = "checkbox">吃饭<input type = "checkbox">睡觉<input type = "checkbox">打豆豆</form>
type = button普通按钮(配合JS监听用户操作)
<form action = "">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender" checked = "checked">男<input type = "radio" name = "gender">女<br>爱好<input type = "checkbox">吃饭<input type = "checkbox">睡觉<input type = "checkbox">打豆豆<br><input type = "button" value=" 登录 " onclick="alert('登录成功')"></form>
type = submit/reset提交/重置
<form action = "https://www.baidu.com/">姓名<input type = "text"><br>密码<input type = "password"><br><input type = "submit"><input type = "reset"></form>
2.2label/select/textarea标签
label标签通常搭配单选框使用,与单选框对应的文本内容进行绑定
select标签是下拉菜单框
textarea标签是可变化的文本框,超出默认行数就会出现滚动条
<form action = "https://www.baidu.com/">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender" id = "male"><label for="male">男</label><input type = "radio" name = "gender" id = "female"><label for="female">女</label><br>出生年份<select><option>--请选择出生年份--</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select><br>个人经历<br><textarea rows="2" cols="30"></textarea><br><input type = "submit"><input type = "reset"></form>2.3无语义标签
有两种
div独占一行(可以替代<br>)
span不独占一行
<body><!-- 这里是注释 --><form action = "https://www.baidu.com/"><div>姓名<input type = "text"></div><div>密码<input type = "password"></div><div>性别<input type = "radio" name = "gender" id = "male"><label for="male">男</label><input type = "radio" name = "gender" id = "female"><label for="female">女</label></div><div>出生年份<select><option>--请选择出生年份--</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select></div><div>个人经历</div><div><textarea rows="2" cols="30"></textarea></div><div><input type = "submit"><input type = "reset"></div></form>
</body>三.特殊字符
在html中如何表示空格,<>,&呢,肯定不能直接表示,因为html会将多余的空格字符叠加为一个,<>又会和标签符号混淆,那么我们需要用额外的方法来表示
空格 
<< <> & &
看一下效果
