三天学完HTML基础（三）
表单标签
表单的作用
用于 显示、收集 用户信息 ，并且提交给服务器
表单的组成
1.表单元素 -------将信息提交给服务器
2.表单控件 --------负责接收用户的数据
表单提交： 点了提交按钮就会跳转到新的页面
form 代表的就是一个表单元素
表单的属性
action 设置提交表单的地址
method 设置表单的提交方式
get 显示传输
post 隐式传输
表单的控件
属性：
type 类型
value 值
name 名称
type类型：
text 普通文本输入框
password 密码框
image 图片（默认是提交属性）
file 文件上传
radio 单选
checkbox 多选
email 邮箱
tel 电话
submit 提交
reset 重置
表单实例
代码如下：
<!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>
<h1>  用户注册</h1>
<form>
<p>
<label>
姓  名：
<input type="text" size="12">
</label>
</p>
<p>
性  别：
<label><input type="radio" name="sex"/>男</label>
<label><input type="radio" name="sex"/>女</label>
</p>
<p><label>
年  龄：
<input type="text">
</label>
</p>
<p><label>
联系电话：
<input type="tel"></label>
</p>
<p><label>
电子邮件：
<input type="email"value="请输入你的电子邮件"></label>
</p>
<p><label>
联系地址：
<input type="text" placeholder="请输入你的详细的家庭地址"></label>
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="清除"/>
</p>
</form>
</body>
</html>
浏览器显示结果如下：
关联标签（label）
属性 ： for
第一种用法
1.给要关联的控件加上一个id
2.通过for属性连接id
第二种方法
直接包裹input元素
文本域 （textarea）
文本域的大小不取决于宽高
而是 行数 列数
cols 列数
rows 行数
下拉菜单 （select）
列表项(option)
size : 默认选项的数量 如果取值大于1的话 则成为一个滚动列表
selected 默认选中
文本域下拉菜单实例
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<textarea cols="20" rows="5"></textarea>
<hr/>
请输入你的爱好：<br/>
<select size="3" multiple>
<option>唱</option>
<option>跳</option>
<option selected>rap</option>
<option>篮球</option>
</select>
<br>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
浏览器显示结果如下：
按钮标签（button）
button 默认的情况下是一个普通按钮
浮动框架(iframe)
1.第一个作用 在一个屏幕中显示多个页面（小窗口的形式展现的）
2.第二个作用 可以在小窗口中显示不同的网页
实例
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<a href="https://www.csdn.net/" target="call">CSDA</a>
<a href="https://www.cnblogs.com/" target="call">博客园</a>
<a href="https://www.runoob.com/" target="call">菜鸟教程</a>
<br/>
<iframe src="index5.html"height="500" width="500" name="call"></iframe></p>
<iframe src="" frameborder="0"></iframe>
</body>
</html>
浏览器显示结果如下：
跑马灯标签(marquee)
behavior 滚动的方式（属性值可以是slide、alternate）
scrollamount 速度
direction滚动的方向（属性值可以是up、down、left、right）
实例
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<marquee behavior="scroll" scrollamount="50" direction="right" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="40" direction="up" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="30" direction="down" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="50" direction="left" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="60" direction="" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="10" direction="" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="80" direction="right" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="70" direction="" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="10" direction="" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="80" direction="right" height="100"><img src="images/1.jpg"></marquee>
<marquee behavior="scroll" scrollamount="70" direction="" height="100"><img src="images/1.jpg"></marquee>
</body>
</html>
浏览器显示结果如下：
给网页标题前添加小图标实例
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon " type="images/x-icon" href="images/狗.png">
</head>
<body>
<q>制作网页标题前的小图标</q>左边文字运用q标签产生双引号
</body>
</html>
浏览器显示结果如下：
无语义标签
元素分类：
行级元素 块级元素
行级元素：紧跟着前面的元素
块级元素：独占一行
div是一个典型的无语义块级标签
span是一个典型的无语义行级标签
div 和span 没有任何含义