美文网首页饥人谷技术博客
常见的HTML标签详解（iframe、a、form、input、

常见的HTML标签详解（iframe、a、form、input、

作者: 飞天小猪_pig | 来源:发表于2020-09-14 21:58 被阅读0次
一、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标签用href
3、同时要注意的是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这三个标题都没有写，就按照你写的顺序，写什么是什么。如果有标签，不论你三个标签顺序怎样放，浏览器都会帮你识别。

相关文章