HTML常用标签

什么是HTML

HTML （Hypertext Markup Language）即超文本标记语言。HTML用于网页的制作，被浏览器解释后可以呈现出各式各样的精美页面。

常见标签： a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg

着重理解几个常用标签

<iframe>

它能够将另一个HTML页面嵌入到当前页面中

height以CSS像素格式，或百分比格式指定frame的高度。默认值为150
width以CSS像素格式或以百分比格式指定的 frame 的宽度。默认值是300

name用于定位嵌入的浏览上下文的名称。该名称可以用作<a>标签与<form>标签的target属性值，也可以用作<input>标签和<button>标签的 formtarget 属性值，还可以用作 window.open()方法的 windowName 参数值

<a>

（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接

<a href="https://example.com">Website</a>
<a href="mailto:m.bluth@example.com">Email</a>
<a href="tel:+123456789">Phone</a>
复制代码

download此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 / 和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名
href包含超链接指向的 URL 或 URL 片段。URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议

外部链接

<a href="http://www.baidu.com/">External Link</a>
复制代码

相同页面链接的描述

<a href="#属性">Description of Same-Page Links</a>
复制代码

创建一个可点击的图片

<a href="https://www.baidu.com/"><img src="xxx" alt="MDN logo" /></a>
复制代码

创建一个email链接

<a href="mailto:xxxx@xxx.com">Send email to xxxx</a>
复制代码

创建电话链接

<a href="tel:+123456789">+123456789</a>
复制代码

在点击链接后，会执行javascript代码

<a href="javascript:alert(1)">link<a>
复制代码

让页面回到顶部

<a href="#" >link</a>
复制代码

刷新页面

<a href="" >link</a>
复制代码

点击后没有任何动作的a标签(满足一些奇葩功能)

<a href="javascript:;" >link</a>
复制代码

target该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

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

iframename ：当target=” iframename”时，点击链接可以在指定的<iframe name="iframename"></iframe>中打开链接

<iframe name="xxx" src="#" frameborder="0"></iframe>
    <div>
        <a href="https://www.qq.com" target="xxx">点击</a>
    </div>
复制代码

<form>

表示了文档中的一个区域，此区域包含有交互控制元件，用来向 Web 服务器提交信息

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>
复制代码

action一个处理此表单信息的程序所在的URL。此值可以被 <button>或者 <input>元素中的 formaction 属性覆盖。规定了form提交到哪里。
method post：表单数据会包含在表单体内然后发送给服务器.get：表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送 给服务器。如果这样做（数据暴露在 URI 中）没什么副作用，或者表单仅包含ASCII字符时，再考虑使用这种方法
target 一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复

_self：在当前文档页面重新加载返回值。是默认值。如果此文档在一个frame中的话，self是在当前frame（document）中重新加载的，而不是整个页面（window）
_blank：以新的文档窗口加载返回值
_parent：在父级的 frame 中以文档形式加载返回值，如果没有父级的frame，行为和**_self**一致
_top：如果是 HTML 4 文档：清空当前文档，加载返回内容；HTML5：在当前文档的最高级内加载返回值，如果没有父级，和 _self的行为一致
iframename：返回值在指定 <iframe> 中显示

<input>

用于为基于Web的表单创建交互式控件，以便接受来自用户的数据
<input>的工作方式相当程度上取决于type属性的值，如果未指定此属性，则采用的默认类型为 text

text默认值。单行的文本区域，输入中的换行会被自动去除
button没有默认行为的按钮，上面显示value属性的值，默认为空
checkbox复选框，可设为选中或未选中
radio单选按钮，允许在多个拥有相同 name值的选项中选中其中一个
color用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器
date输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮
email编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘
file让用户选择文件的控件。使用accept属性规定控件能选择的文件类型
image带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src缺失，al属性就会显示
number用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘
password单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户
reset此按钮将表单的所有内容重置为默认值。不推荐
submit用于提交表单的按钮
checked如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态
disabled这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， click 事件 将不会被分发。 并且，禁用的控件的值在提交表单时也不会被提交
height如果type属性的值是image，这个属性定义了按钮图片的高度
max此项目的最大（数字或日期时间）值，且不得小于其最小值（min属性）值
min此项目的最小（数字或日期时间）值，且不得大于其最大值（最大属性）值
maxlength如果 type 的值是 text, email, search, password, tel, 或 url，那么这个属性指明了用户最多可以输入的字符个数（按照Unicode编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 size 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符
multiple这个属性指示用户能否输入多个值。这个属性仅在type属性为email或file的时候生效 ; 否则被忽视
name控件的名称，与表单数据一起提交
size控件的初始大小。以像素为单位,适用于当 type 属性为 text, search, tel, url, email,或 password；否则会被忽略。它的值必须大于0。 如果未指定大小，则使用默认值20。
value控件的初始值. 此属性是可选的，除非type 属性是radio或checkbox

<button>

表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方

name button的名称，与表单数据一起提交
type button的名称，与表单数据一起提交

submit此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值
reset此按钮重置所有组件为初始值

valuebutton的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器