常用标签总结1. iframe 标签这个标签目前用的很少，可能会有一些遗留的项目，典型的例子，打开开发者工具，查看 h

1. iframe 标签

这个标签目前用的很少，可能会有一些遗留的项目，典型的例子，打开开发者工具，查看 html 结构。

首先，整理一下 iframe 的基础概念：

iframe 就是新打开一个窗口

默认窗口大小：宽100，高 50

src 属性可以写相对路径

name 属性跟 a 标签结合起来用，才起作用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    iframe {
      width:100%;
      height:400px;
    }
  </style>
</head>
<body>
  <iframe name=xxx src="#" frameborder="0"></iframe>
  <a href="http://qq.com" target="xxx">QQ</a>
  <a href="http://baidu.com" target="xxx">百度一下</a>
</body>
</html>

2. a 标签

作用：跳转页面（发起 HTTP GET 请求）属性见 MDN

属性

target 属性值（只有结合 iframe的时候，才更易理解）

_blank blank 是空白的；空的的意思。_blank 就是在空页面打开
_self self 是自己；本人；的意思。_self 就是在自己这个页面打开
_parent parent 是父亲（或母亲）；先辈；根源，起源；保护者的意思。_parent 就是在父窗口页面打开
_top top 是顶，顶部的意思。_top 就是在顶层窗口页面打开，如果有祖孙三代的时候，可以看出区别

download 属性

理解：这个页面是用来下载的，不是用来展示的

⚠️ 这个 download 属性是否是 download 效果，是由两点决定的：

http 响应决定，如果 http 响应的 Content-Type: application/octet-stream ，浏览器就会以下载的形式去接收这个请求，而不是在页面上展示
给 a 标签添加 download 属性

href 属性

思考：a 标签的 href 属性里到底可以写些什么东西？如果 a 标签没有 href，它就会变成一个 span 了，所以 a 标签必须有 href 属性

请看下面代码

<a href="//qq.com">QQ</a>
<a href="xxx.html">跳转</a>
<a href="#hhh">href 里的内容是锚点</a>
<a href="?name=guoguo">很自然</a>
<a href="javascript:alert(1);">伪协议</a>
<a href="">跳转到自身了，页面重新刷新了</a>

注意,下面逐个分析：

1.// a 标签的无协议绝对地址（没有协议，自动继承协议） //qq.com 等同于链接 www.qq.com/?fromdefaul…

2.我们在写这个路径的时候，只以目录为参考，跟文件没什么关系

3.如果直接写一个锚点，它会直接添加到路径后面 (锚点的作用：页面内的跳转)

4.浏览器会自动判断 href 里面的内容，然后发送一个 get 请求 http://127.0.0.1:8080/index.html?name=guoguo

5.伪协议,不是url，它是一个历史遗留的问题，因为有些人想点击一下，就执行 js

问：点击之后什么都不做，该如何实现？

<a href="javascript:;"></a>

3. form 标签

作用：跳转页面（发起 HTTP POST 请求）

重点

如果 form 表单里面没有提交按钮，你就无法提交 form。除非你用 js

<form action="users?zzz=3" method="post">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type=“submit” value='提交'>
</form>

method 的值默认是 get，它只能写两个值：get 和 post，一般 get 不用。总结： get 默认会把参数放到 Query String Parameters 里面。post 默认会把参数放到 http 第四部分 Form Data 里面，我们可以通过给 url 加参数，让 post 也有查询参数,但是我们不能通过任何方法让 get 请求有第四部分 Form Data，第四部分 Form Data 的语法是：application/x-www-form-urlencoded

2.target 属性规则和 a 标签一样

3.可以配合 iframe 标签使用

<iframe src="#" frameborder="0" name="bbb"></iframe>
<form action="user" method="post" name="bbb">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

a 标签属性见 MDN

4. input / button

1.input 的 type

<form action="users" method="get">
 <label>用户名： <input type="text" name="username"></label>
 <label>密码： <input type="password" name="password"></label>
喜欢的水果：
 <label><input type="checkbox" name="fruit" value="orange">桔子</label>
 <label><input type="checkbox" name="fruit" value="banana">香蕉</label>
是否喜欢看电影:
 <label><input type="radio" name="movie">是</label>
 <label><input type="radio" name="movie">否</label>
 <select name="group">
   <option value="">-</option>
   <option value="1">first</option>
   <option value="2">second</option>
   <option value="3" disabled="">thirst</option>
   <option value="4" selected="">four</option>
 </select>
<textarea name="hoby" style="resize:none;width:100px;height:50px;"></textarea>
<input type="submit" value="提交">
</form>

如果 form 里没有写 <input type=’submit’ value='提交’>，如下代码：button 会自动升级成 submit 功能

<form action="user" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <button>提交</button>
<form>

但如果给 button 按钮加上 type=‘button’,则 button 的功能还是就是 button 的功能，不会升级

问：input 的 type 为 button 和 submit 的区别？

区别：是否为「空标签」。 submit 是一个唯一能确定这个 form 表单能不能点击提交的按钮，如果 type 为 button，它不能提交，它就是一个普通的按钮

input 的属性见

button 的属性见

5. table 标签

1.html 里规定 table 里只能有 3 个元素：thead、tbody、tfoot

thead：table head

th：table header

tbody：table body

tfoot：table foot

tr：table row

td：table data

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    table {
      border-collapse:collapse;
    }
  </style>
</head>
<body>
  <table border='1'>
    <colgroup>
      <col width=100>
      <col bgcolor=red width=200>
      <col width=100>
      <col width=70>
    </colgroup>
    <thead>
      <tr>
        <th>项目</th>
        <th>姓名</th>
        <th>班级</th>
        <th>分数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th>
        <td>小明</td>
        <td>1</td>
        <td>94</td>
      </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>
       <tr>
        <th>总分</th>
        <td></td>
        <td></td>
        <td>190</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>