a标签download属性无效_HTML常用的几个标签

本文主要讲述以下内容：

• <iframe>
• <a>及伪协议
• <form>
• <input>
• <table> 及 <colgroup>
• 可替换元素
• 其他

一<iframe>

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

1. src属性：主要用来加链接。
2. name属性：与a标签的target属性一起用有奇效，会在iframe的窗口里打开a标签链接的地址。

用法

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

<a>（HTTP GET请求）
HTML <a>元素（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。在跳转页面的时候，<a>用于发送HTTP GET请求。它是HTML中最短也最常用的标签之一。1.target属性
该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

• _self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
• _blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
• _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。
• _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。

用法

<a href="https://www.example.com" target="_self">自己</a>
<a href="https://www.example.com" target="_blank">新开页</a>
<a href="https://www.example.com" target="_parent">爹妈</a>
<a href="https://www.example.com" target="_top">祖宗</a>

2.download属性
此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。点击页面中的该“下载”标签，会直接下载。
另外的一种做法是将HTTP请求的content-type写成application/octet-stream，但如果content-type是text/html，则需要用download属性强制下载。

<a href="https://www.example.com" download>下载</a>

3.href属性
href包含超链接指向的 URL 或 URL 片段。
有以下几种情况需要注意：

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

浏览器会根据当前协议，补全无协议链接的协议
如果用 file:// 协议浏览页面，就会访问到 file:// http:// qq.com ，这是一个不存在的路径
应该尽量不使用 file:// 协议预览网页，以免无协议链接出错

• <a href="?name='li'">link</a> 浏览器发起 GET /?name=li HTTP/1.1 请求
• <a href="#xxx">anchor</a> 页面内跳转，
• <a href="javascript:alert("a") > 伪协议,
• <a href="javascript:;"> 阻止页面跳转

伪协议：

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

<form>（HTTP POST请求）
HTML <form> 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。 1.method属性
下面是一个用于提交用户名和密码的form，常用于登录网址。

<form action="users" method="post" target="_blank">
<input type="text" name="username"> <input type="password" name="password">
<input type="submit" value="提交">
</form>

首先，一个表单如果没有提交按钮，则无法提交表单，除非用js。
假设用户输入的username是Tom，password是123456，点击提交按钮后，会发起一个POST请求，并且在POST请求的第四部分，name和password会以Tom&123456的形式发送出去，其Content-Type: application/x-www-form-urlencoded。而基于这个content-type，所有非英文的内容都会被转义为UTF-8。
<form>的method属性默认情况下为get，即发起一个GET请求，但这并没有什么用，直接用GET请求相当于在网址末尾加上users?name=Tom&password=123456。
POST请求添加查询参数的方式是加到action里：比如action="users?z=123"。

2.target属性
<form>标签的target属性和<a>标签完全一致。

如果一个<form>里面只有一个<button>btn</button> ,他会自动升级为提交按钮
只有一个<button type="button">或者<input type="button"> 依然只是普通按钮
只有一个<input type="submit">可以提交，是唯一能确定form是否可以提交

四.input

HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。

1.type="checkbox"

表示复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。

使用<label>标签将内容包起来，可以点击文字直接选中，否则只能点方框。

喜欢的水果：
<label><input type="checkbox" name="fruit" value="orange">橘子</input></label>
<label><input type="checkbox" name="fruit" value="apple" checked>苹果</input></label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</input></label>

2.type="radio"

表示单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。

使用方法同上。

五.<table> 及<colgroup>

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

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

示例:

<table border=1>

<colgroup>

<col width=100>控制列宽

<col width=100>......

六.可替换元素

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