HTML 常见标签详解

1.iframe 标签

嵌套页面

<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx href="http://qq.com">qq</a>

iframe 可以拥有一个 name，a\form 标签的 target 可以通过 name 指向这个 iframe。
现代前端开发中，iframe 很少用。
”#“这代表的就是链接的一种占位符！通常用于页面设计时期的假链接！也就相当于一个空链接！
frameborder="0"，去边框，由于边框太丑请习惯性加上。
src直支持相对路径，src="./index2.html"。
sandbox="allow-forms"：
1. "" 启用所有限制条件。
2. allow-same-origin 允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。
3. allow-top-navigation 嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。
4. allow-forms 允许表单提交。
5. allow-scripts 允许脚本执行。

2.a 标签

跳转页面（HTTP GET 请求）
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

target

target="_blank"
target="_self"
targer="_parent"
target="_top"

download

如果后端没写content-type: application/octet-stream，则用download，浏览器以下载的形式接受请求，而不是在网页上展示

href

href="http://qq.com"
href="//qq.com" 浏览器会根据当前协议，补全无协议链接的协议
href="" 当前页面刷新
href="#"  锚点，表示页面内跳转，不会发起请求，页面滚动到顶部
href="javascript: alert(1);"
href="javascript:;"
  伪协议：可以在用户点击 a 时执行一段 javascript 代码；
  在地址栏输入 javascript:alert(1) 可以在当前页面执行一段代码；
  伪协议可以实现「点击之后没有任何动作的 a 标签」，满足一些奇葩需求。

3.form 标签

跳转页面（HTTP POST 请求）
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form

input

checkbox，复选框

<label><input type="checkbox" name="fruit" value="orange">桔子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>

radio，单选框，相同的name只能选一个

<label><input type="radio" name="loveme" value="yes">Yes</label>
<label><input type="radio" name="loveme" value="no">No</label>

text，文本框
password，密码框
submit，form表单要有提交按钮才能提交，或者JS
button，按钮

textarea，文本域、多行文本

<textarea rows="10" cols="30">
<textarea style="resize:none;width=20px;height=100px;" name="爱好">

如果不写roes（行）和cols（列）则用户可以随意拖动文本域改变其大小，cols不精确。
想要精确宽高要用CSS。

select，下拉列表

<form action="">
  <select name="cars" multiple> multiple，按住ctrl可多选
    <option value="Volvo"></option> 空选项
    <option value="volvo">Volvo</option>
    <option value="saab" disabled>Saab</option> disabled不能选
    <option value="fiat" selected>Fiat</option> selected默认选中
    <option value="audi">Audi</option>
</select>
</form>

input 和 button 区别

button如果没写type，则会升级成 submit 提交按钮。
前者是空标签，后者不是。
input 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
button 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button

4.table 标签

用于展示数据
属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

td，table data，表数据
tr，table row，表行
th，table head，表标题

table案列如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表格</title>
  <style>
    table{border-collapse: collapse; 去掉单元格间隙
  }
  </style>
</head>
<body>
<table border=1>
  
  <thead>
    <colgroup>
      <col bgcolor=red width=150>
      <col width=100>
      <col width=100>
      <col width=100>
    </colgroup>
    <th>序号</th><th>姓名</th><th>班级</th><th>分数</th>
  </thead>
  <tbody>
    <tr>
      <th>1</th><td>小明</td><td>一</td><td>80</td>
    </tr>
    <tr>
      <th>2</th><td>小花</td><td>二</td><td>90</td>
    </tr>
    <tr>
      <th>3</th><td>小星</td><td>三</td><td>100</td>
    </tr>
    </tr>
  </tbody>
  <tfoot>
    <th>平均分</th><td></td><td></td><td>90</td>
  </tfoot>
</table>
</body>
</html>

table常见用法