HTML标签

a 标签的用法

属性

href

<a href="https://google.com">超链接</a>

这是一个普通的超链接

它有以下几种取值

1. 网址
   https页面:https://xxxx.com
   http页面:http://xxxx.com
   无协议网址://xxxx.com
2. 路径
3. 伪协议
   js代码

<a href="javascript:;">空的伪协议</a>

什么也不会发生的a标签,a标签被点击会默认刷新,要用空的js代码来阻止它

4. mailto:

<a href="mailto:xxx@gmail.com">发邮件给xxx</a>

5. 电话

<a href="tel:12345678901">打电话</a>

6. id

<a href="#xxx">打电话</a>

跳转到页面id为XXX的地方

target

<a href="https://google.com" target="_blank">超链接</a>

这是一个要在新窗口打开页面的超链接,也可以设置为

<a href="https://google.com" target="_self">超链接</a>

这是一个在当前窗口打开的超链接(它是默认值)

<a href="https://google.com" target="_top">在顶层打开</a>

用在iframe里

<a href="https://google.com" target="_parent">在顶层打开</a>

在父级页面中打开,多层iframe嵌套的时候可以用到

<a href="https://google.com" target="_xxx">我在xxx打开</a>
<a href="https://google.com" target="_xxx">我也在xxx打开</a>

这两个页面会始终在同一个页面打开,这个xxx就是这个窗口的名字

download
这个属性一般浏览器不支持,了解一下,就是用来下载当前网页的

rel = noopener
是用来堵住钓鱼漏洞的

作用

跳到内部锚点
跳到外部链接
跳到邮箱、电话之类的

img 标签的用法

img会发出一个get请求展示一张图片

<img src="xxxx" alt="一张图片" width="233">

最好不要同时设定width和height属性,这样可能导致图片变形

事件

图片的两个事件

1. onerror(图片加载失败时调用)
2. onload(图片加载成功时调用)

form标签的用法

form标签会发一个get或者post请求来发送表单

<form action="/xxx" methods="POST" autocomplate="on">
  <input name="username" type="text"/>
  <input type="submit"/>
</form>

methods默认是GET
autocomplate会根据name来给你推荐一些可能的选项
此外form表单也有target属性,基本与a标签的target行为一致,提交表单的地址在哪里打开

<input type="submit">和<button type="submit"></button>的区别
button里面可以有除了文字的其它东西,但是input不行
一个form表单必须得有它们其中的一个才能提交

事件

onsubmit

table 标签的用法

<table>
      <thead>
        <tr>
          <th></th>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>tablehead</th>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <th>tablehead</th>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <th>tablehead</th>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>tablehead</th>
          <td>jiojio</td>
          <td>jiojio</td>
          <td>jiojio</td>
        </tr>
      </tfoot>
    </table>

如果不写thead,tbody,tfoot所有内容都会被放在浏览器自动生成的tbody里