常见的HTML标签详解（iframe、a、form、input、
一、iframe标签（它能够将另一个HTML页面嵌入到当前页面中）
iframe目前比较少用，如果公司有几年前的项目，就会有遗留下来的项目会用到这个标签。这个标签结合a标签使用会比较容易理解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
iframe{
width:50%;
height:300PX //iframe标签高度属性不能以%形式表示
}
</style>
</head>
<body>
<iframe src="https://www.baidu.com" name=xxx frameborder="0"></iframe>
<a target=xxx href="https://www.qq.com">qq</a>
</body>
</html>
点击前效果图
点击后效果图
通过点击a标签中内容QQ，页面由最初的百度网页变成腾讯网页，从而实现了iframe标签嵌套页面功能
知识点：
1、a标签中target意思就是在目标名为xxx的页面打开qq页面；
2、iframe标签中frameborder=0一般都是自动补上，意思就是写上这个就没有边界，默认时候有个边框存在。
二、a标签（定义了一个超链接，可以转到页面上的特定位置或Internet上的另一个页面）--get请求
1、a标签中target属性使用：
（1）在空的页面打开QQ（target="_blank“）
<a href="https://www.qq.com" target="_blank">QQ</a>
（2）在自身页面打开QQ（target="_self"）
<a href="https://www.qq.com" target="_self">QQ</a>
（3）在父母页面打开QQ（target="_parent"）
<a href="https://www.qq.com" target="_parent">QQ</a>
（4）在顶层打开QQ（target="_top"）
<a href="https://www.qq.com" target="_top"></a> //例如爷-父-子（顶层指的是在爷页面打开）
2、a标签中download属性使用：
<a href="https://www.qq.com" download>下载</a>
a标签的download指可以下载东西，不是展示的（例如下载安装包等）
1：content-type:apolication/octet-stream当HTTP响应类型是这句时，就不需要写download属性就可以使用
2：content-type:text/html当HTTP响应类型是这句时，你又想下载，那就需要加上download这个属性
3、a标签中的href属性使用：
<a href="//qq.com">QQ</a> //无协议打开
<a href="http://qq.com">QQ</a> //http协议打开
第一种指的是当前页面用的是什么协议，就用什么协议打开（无协议绝对地址），如果没有安装其他插件一般都是以文件的协议打开，而不是网页。如果我们是想以http://形式打开，就需要在git bash中运行下面两行代码:
npm i -g http-server //下载一个插件
http-server -c-1 //无缓存意思，然后将运行结果复制到网页链接中运行
（1）、路径识别和发起get请求（除了锚点不能发起请求，其他都能）
<a href="xxx.html">QQ</a>
A:访问的是/index.html/xxx.html
B:访问的是/xxx.html
上述代码访问地址其实是B，我们写路径的时候是以指引目录为参考的跟文件没有关系
<a href="?name=qqq">QQ</a>
A：不应该这样写
B：这样写很自然
上述代码这样写很自然，因为浏览器会自动判断你的意思并补齐路径,并发起一个get请求
（2）锚点使用，不能发起get请求，锚点作用是只能在页面内跳转
<a href="#yyyy">QQ</a> //点击a标签就会跳转到页面yyyy处
（3）href还有一个值使用就是伪协议
<a href="javascript:alert(1);">QQ</a> //点击a标签执行JS的代码内容，弹出界面显示内容为1
<a href="javascript:;">QQ</a> //点击a标签，页面不发生跳转什么也不做（满足某种需求写法）
三、form标签（表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息）--post请求
<form action="index2.html" method="post">
<input type="submit" value="提交">
</form>
form表单没有提交按钮，就要提供一个input标签，否则填写内容无法提交
<body>
<form action="users" method="post">
账户 <input type="text" name="username">
密码 <input type="password" name="password">
<input type="submit" value="提交">
</form>
</body>
上述代码效果图
区分
form表单和a标签区别：1、前者用于post请求、后者用于get请求。
2、
form标签用action，a标签用href3、同时要注意的是
form标签要加method="post"这个参数，如果不加还是get请求。4、
form标签中target用法和a标签用法一样。
1、 <form action="users" method="post" target="_blank">
<input type="submit" value="提交">
</form>
2、 <form action="users" method="post" target="_self">
<input type="submit" value="提交">
</form>
3、 <form action="users" method="post" target="_parent">
<input type="submit" value="提交">
</form>
4 <form action="users" method="post" target="_top">
<input type="submit" value="提交">
</form>
四、input标签(用于在Web表单中创建交互式控件以从用户检索数据；根据设备和用户代理的不同可以使用多种输入类型和控件)
（1）input标签type属性中的submit使用：
<body>
<form action="users" method="post">
<input type="button" value="button">
<input type="submit" value="button">
</form>
</body>
1、如果type类型是button，说明这是一个普通按钮，不会向页面提交；
2、如果type类型是submit，说明这个按钮可以提交，输入按回车也可以提交；
3、<button>button</button>如果我们用button标签，同样可以自动形成为提交按钮。
（2）input标签type属性中的checkbox（多选）使用：
<input type="checkbox">我爱你
<input type="checkbox" id="xxx"><label for="xxx">爱我</label>
上述代码效果图
代码1点击方框就能勾选上，点击文字不能勾选。代码2点击方框和文字都能勾选上，原因是加上了
label标签,代码2还能简化成下面形式：
<label> <input type="checkbox">爱你</label>
（3）input标签type属性中的radio（单选）使用：
<label><input type="checkbox" name="fruit" value="orange">橙子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>
多选效果图
爱我
<label><input type="radio" name="loveme" value="yes">yes</label>
<label><input type="radio" name="loveme" value="no">no</label>
单选效果图
拓展知识点：
1、select表示一个提供选项菜单的控件：
<select name="group" > //这里加上multiple表示可多选几组（按住shift键），没有加只能选一组
<option value="">-</option>
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disable>第三组</option> //加了disabel说明是不能选中
<option value="4" selected>第四组</option> //加了selected，意思默认下显示第四组
</select>
效果图
2、textarea表示一个多行纯文本编辑控件(当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用)：
<textarea style="resize:none;width：200px;height:100px" name="爱好" ></textarea>
效果图
如果不加css样式：
resize:none,用户可以随意拉动边框。除了用css的width和height，也可以用cols和rows代替不过不够精确。
五、table标签（表示表格数据—即通过二维数据表表示的信息）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table{
border-collapse:collapse; //table border都是有缝隙的，用这句就可以消除
}
</style>
</head>
<body>
<table border=1>
<colgroup> //标签用来定义表中的一组列表
<col width=80 > //表示第1列的像素，就是宽度
<col bgcolor=red width=80> //表示第2列的宽度,颜色是红色（bgcolor已经废除，现在用css添加样式）
<col width=70> //表示第3列的宽度
<col width=70> //表示第4列的宽度
</colgroup>
<thead> //tablet头
<tr> //tr是table row （表示一行）
<th>项目</th><td>姓名</td><td>班级</td><td>分数</td> //th是表头的标题
</tr>
</thead>
<tbody> //table身体
<tr>
<th></th><td>小明</td><td>1</td><td>94</td> //td是table data（表里数据）
</tr>
<tr>
<th></th><td>小红</td><td>2</td><td>96</td>
</tr>
<tr>
<th>平均分</th><td></td><td></td><td>95</td>
</tr>
</tbody>
<tfoot> //table 脚
<tr>
<th>总分</th><td></td><td></td><td>190</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果图
如果
thead、tbody、tfoot这三个标题都没有写，就按照你写的顺序，写什么是什么。如果有标签，不论你三个标签顺序怎样放，浏览器都会帮你识别。
