HTML常用标签

a标签的作用

用户通过点击<a>标签显示的链接后，浏览器会跳转到指定的网址。

a标签的属性

• href属性给出链接指定的网址，它的取值如下：
  • id href=#xxx
  • 路径：/a/b/c & a/b/c ； index.html & ./index.html
  • 伪协议：mailto:邮箱 ；tel:手机号码
• target属性指定如何展示打开的链接，它可以是在指定的窗口打开，也可以在<iframe>里面打开，target的取值如下：
  • _blank表示在新窗口中打开
  • _top表示在顶层窗口打开
  • _self表示在当前窗口打开，默认值
  • _parent表示从上层窗口打开，通常用于从父窗口打开子窗口，或者<iframe>里面的链接

<a href="//douban.com" target="_blank">百度</a> // 在新窗口打开链接
<a href="//douban.com" target="_self">百度</a> //在当前窗口打开链接
<a href="//douban.com" target="_parent">百度</a> //在父级窗口打开链接
<a href="//douban.com" target="_top">百度</a> // 在顶层窗口打开链接
复制代码

• download 属性表明当前链接用于下载，而不是跳转到另一个 URL。

2. img标签

img标签的作用

发出GET请求，用于插入图片，单标签。

img标签的属性

• alt用来设定图片的文字说明，在图片加载失败之后，用文字显示图片内容。
• height可以指定图片显示时的高度，单位是像素或百分比。
• width可以指定图片显示时的宽度，单位是像素或百分比。
• src用来指定图片路径。

img标签事件

• onload图片加载成功调用onload
• onerror图片加载失败调用onerror

响应式图像

img { max-width: 100%;}
复制代码

设置后，图像在不同尺寸的设备上，都能产生良好的显示效果。

3. table标签

table标签的作用

table标签是一个块级容器标签，所有表格内容都要放在这个标签里面

table标签的一级子元素标签

<table>
  <thead>……</thead>
  <tbody>……</tbody>
  <tfoot>……</tfoot>
</table>
复制代码

thead tbody tfoot分别表示表头、表身和表尾，table标签里通常只包含这3个标签。

table标签里面的其他标签

• <tr>标签表示表格里的一行（table row），如果表格有<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级。
• <th>标签是标题单元格，加粗显示。
• <td>标签表是数据单元格。

 <table>
        <thead>
            <tr>
                <th>英语aaaaa</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>link</td>
                <td>链接</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
            </tr>
        </tfoot>
 </table>
复制代码

table标签相关样式

• table-layout
• border-collaps样式控制表格是否合并
• border-spacing表示表格之间的距离

4.form表单标签

form标签的作用

form标签是用户输入信息与网页互动的一种形式，发送GET或POST请求，然后刷新页面。

form属性

• action是服务器接收数据的 URL，用来控制使用哪个页面。
• method是提交数据的HTTP方法，取值为GET或POST。
• target表示在哪个窗口展示服务器返回的数据。
• autocomplete表示如果用户没有填写某个控件，浏览器是否可以自动填写该值，会自动给出建议，取值为off或on。

<form action="/xxx" method="GET" autocomplete="on">
        <input type="text" name="username" id="">
        <input type="submit">
</form>
复制代码

form表单submit

<form action="xxx" method="GET" autocomplete="on" target="_blank">
  <button type="submit">提交</button>
</form>
复制代码

只有当type="submit" 时，表单才能提交。

5.input标签

input标签的作用

让用户输入内容。

input标签的属性

• 类型type：checkBox、radio、name、number、password、file、submit等
• 其他：name、checked、value等

input事件

• onchange 用户改变的内容
• onfocus 用户聚焦内容
• onblur用户失去聚焦的内容

6.其他*

1. 一定要记得a标签可以触发GET请求。
2. 一般不监听input的click事件。
3. form必须要用一个type=submit的input，不然就会无法提交数据。
4. 如果form表单里面没有一个type=submit的input,可以使用type=submit的button的标签,也可以使用<button>提交</button>。
5. form标签和a标签的最大区别就是form标签是POST提交。
6. 可替换元素