html 部分标签

本文主要讲述以下内容：

• <iframe>

• <a>及伪协议

• <form>

• <input>

• <table> 及 <colgroup>

• 可替换元素

• 其他

---

一.iframe

iframe 标签 用于嵌套页面,新开一个窗口（沙箱隔离，引用第三方内容）,下面为两种使用方式

src指定：

<iframe src="https://www.baidu.com" name="xxx"></iframe>

链接打开：

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

iframe可用于所见即所得的网页编辑器。

---

二. a (anchor) , 伪协议

• <a>用于http get 请求

• 属性download 下载链接指定文件

• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#%E7%A4%BA%E4%BE%8B 查看使用<a>来创建可点击图片，如何创建email链接，电话链接

• <a> 的示范:

<a href="qq.com">qq</a> 错误示范，表示qq.com文件

<a href="//qq.com">qq</a>

       1.浏览器会根据当前协议，补全无协议链接的协议

        2.如果用 file:// 协议浏览页面，就会访问到 file://qq.com，这是一个不存在的路径

        3.应该尽量不使用 file:// 协议预览网页，以免无协议链接出错

<a href="?name='li'">link</a> 浏览器发起 GET /?name=li HTTP/1.1 请求

<a href="#">anchor</a> 页面内跳转，

<a href="javascript:alert("a") > 伪协议,

<a href="javascript:;"> 阻止页面跳转

<a href="#">滚回顶部

<a href="">刷新页面

<a href="/..">link</a> 浏览器发起 GET / HTTP/1.1 的请求

伪协议：

• 可以在用户点击 a 时执行一段 javascript 代码
• 在地址栏输入 javascript:alert(1) 可以在当前页面执行一段代码
• 伪协议可以实现「点击之后没有任何动作的 a 标签」，满足一些奇葩需求

• target属性

_self : 当前页面加载，即当前的响应到同一HTML 4 frame

_blank : 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文

_parent : 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。

_top : HTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self

---

三. form

<form> 必须有提交按钮，一般作为post请求

get 默认会把参数放在查询参数里面

post默认会把参数放在请求header的第四部分里面

form 具有target属性

如果一个<form>里面只有一个<button>btn</button> ,他会自动升级为提交按钮

只有一个<button type="button">或者<input type="button"> 依然只是普通按钮

只有一个<input type="submit">可以提交，是唯一能确定form是否可以提交

---

四.input

如果 input 不加 name，那么在表单提交时，input 的值就不会出现在请求里,checkbox, radio 的 name表示一组。

<label>把input包起来，可以关联，input

属性： require表示该表单必填 ，<input>：输入（表单输入）元素

type部分类型

• submit / reset

• range

• search

• data / datatime /datetime-local

• image

• file

• email

• hidden

---

五.<table> 及<colgroup>

<table>： thead tbody tfoot caption tr td/th

<colgroup> : 定义表格内的一组列。

示例:

<table border=1>
  <colgroup>
    <col width=100> //col控制列宽,第一列
    <col width=100> //第二列
  </colgroup>
  <thead>
  ....
</table>

---

六.可替换元素

CSS 里，展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的 外部对象。 典型的可替换元素有 img object video audio 表单元素，textarea canvas 。这些元素自带宽高，可以用属性覆盖，或者css控制。

---

七.其他

• <select> 下拉列表，指定name！ multiple 多选
• <textarea> resize：none 禁止拖动
• <aside> 跟文章不相关的内容,旁边经常作为侧边栏或标注框出现
• 全局属性contenteditable 内容可编辑
• 除了div 和 span 其他标签都有默认样式
• <b> 与 <strong>的区别：<strong>元素表示更重要的内容，而<b>元素用于提醒，
• dl > dt +dd
• <meta charset="utf-8"> 等价于 <meta http-equiv="content-type" content="text/html;charset=utf-8"> :http-equiv:http 的等价物
• html只管含义，不管样式