僕と花

HTML重点标签

<a>标签

作用：跳转至外部页面、内部锚点、邮箱或电话等

属性

href

=hypertext reference，超文本链接

  1. 网址
    • <a href="https://google.com"></a>
    • <a href="http://google.com"></a>
    • <a href="//google.com"></a> 无协议网址，会自动补全
  2. 路径
    • 绝对路径：href="/a/b/c"
    • 相对路径：href="a/b/c"，href="./a/b/c"
  3. 伪协议
    • JavaScript伪协议：javascript:代码;
      • eg：herf="javascript:alert(1);" 执行alert(1)
      • eg：herf="javascript:;" 点击后无反应（href=""时页面刷新，href="#"页面不会刷新，但会跳转至最顶端）
    • href="mailto:邮箱地址"
    • href="tel:电话号码"
  4. 锚点
    • herf="#id"，可以跳转至指定位置

target

指定在何种窗口打开超链接

  1. 内置名称

    • target="_blank"：在新的空白标签页打开超链接

      注意：在 <a> 元素上使用 target="_blank" 隐式提供了与使用 rel="noopener" 相同的 rel 行为，即不会设置 window.opener。[1]

    • target="_top"：在最顶层窗口打开超链接

    • target="_parent"：在父级窗口打开超链接

    • target="_self"：在自身窗口打开超链接（默认）

  2. 需要自行命名

    • 1
2

      <a href="//google.com" target="newWindow"></a>
<a href="//baidu.com" target="newWindow"></a>

      如果当前有名为newWindow的窗口，则在该窗口打开链接，若没有该窗口，则创建一个名称为newWindow的窗口打开链接。

    • 1
2
3
4

      <a href="//google.com" target="google"></a>
<a href="//baidu.com" target="baidu"></a>
<iframe src="" name="google"></iframe>
<iframe src="" name="baidu"></iframe>

      在不同name的iframe框架内打开链接

download

下载网页（并非所有浏览器都支持，尤其是手机浏览器可能不支持）

<img>标签

作用：发出get请求，展示一张图片

属性

alt

  • alternative，当图片加载失败时所显示的内容

height

  • 只写高度，宽度会自适应 避免同时设置宽高，永远不要使图片变形

width

  • 只写宽度，高度会自适应 避免同时设置宽高，永远不要使图片变形

src

  • source，即图片地址

事件

onload

图片加载成功时执行

1
2
3
4
5

<script>
  imgId.onload = function(){
    console.log('图片加载成功')
  }
</script>

onerror

图片加载失败时执行

1
2
3
4
5

<script>
  imgId.onerror = function(){
    console.log('图片加载失败');
  };
</script>

一般图片加载失败后，可以进行补救

1
2
3
4
5
6

<script>
  imgId.onerror = function(){
    console.log('图片加载失败');
    imgId.src = "图片地址"; //原图片加载失败后，显示该图片
  };
</script>

响应式

1
2
3
4
5

<style>
  img{
    max-width: 100%;
  }
</style>

<table>标签

表格

完整格式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<table>
  <thead> <!-- 表格的头部，可以省略 -->
    <tr> <!-- table row 表中的一行--> 
      <th> </th> <!-- table header cell 表头单元格 -->
    </tr>
  </thead>
  <tbody> <!-- 表身 -->
    <tr>
      <td> </td> <!-- table data cell 表中数据单元 -->
    </tr>
  </tbody>
  <tfoot> <!-- 表格的尾部，可以省略 -->
    <tr>
      <td> </td>
    </tr>
  </tfoot>
</table>

注意

  • 如果表格编写中没有书写<thead>、<tbody>和<tfoot>，浏览器会自动补充<tbody>，并将<tr>内全部内容填补其中。
  • <thead>、<tbody>和<tfoot>顺序可以颠倒，浏览器会自动纠正。

相关样式

  • table-layout：

    1
2
3
4
5
6

    <style>
    table{
      table-layout: auto; <!-- 根据内容长度，自动计算宽度 -->
      table-layout: fixed; <!-- 表格宽度尽量等宽 -->
    }
  </style>

  • border-collapse

    1
2
3
4
5

    <style>
    table{
     border-collapse: collapse; <!-- 合并单元格 -->
    }
  </style>

  • border-spacing

    1
2
3
4
5
6

    <style>
    table{
     border-spacing: 0; <!-- 单元格空隙为0 -->
     border-spacing: 10px; <!-- 单元格上下左右空隙10px -->
    }
  </style>

<form>标签

作用：发送get或者post请求，然后刷新页面

施工中…………正在努力补全(((o(ﾟ▽ﾟ)o)))