Learning Notes

# HTML 重点标签

# a 标签

# a.href

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>a.href</title>
  </head>
  <body>
    <h1>a标签</h1>
    <a href="https://www.baidu.com" target="blank" rel="noopener">百度</a>
    <!-- ? a 的href 取值 -->
    <!-- ! 网址 -->
    <!--* https://google.com  -->
    <!-- * //google.com 无协议网址会被不断重定向到正确的网址然后再访问 -->
    <!-- ! 路径 -->
    <!-- * /a/b/c 当前根目录不是本地文件系统, 而是部署在服务器上的目录-->
    <!-- * index.html -->
    <!-- * ./index.html -->
    <!-- ! 伪协议 -->
    <!-- * javascript:; 作为点击不跳转的最佳实践, #会回到页面顶部, 什么也不写则刷新页面-->
    <!-- * mailto: 发送邮件 -->
    <!-- * tel: 手机号 -->
    <a href="javascript:;">空</a>
    <a href="mailto:wequart@gmail.com">发送邮件给我</a>
    <a href="tel:110">欢迎报警</a>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# a.target

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>a.target</title>
  </head>
  <body>
    <a href="http://www.baidu.com" target="_self" rel="noopener noreferrer"></a>
    <!-- * _blank 空白页打开 -->
    <!-- * _self 当前页打开 -->
    <!-- * _top 被嵌套的窗口的最外层打开 -->
    <!-- * _parent 被嵌套的窗口的父窗口打开 -->

    <div>
      <a href="https://taobao.com" target="xxx">淘宝</a>
      <a href="https://jd.com" target="xxx">京东</a>
      <!-- ! 会在同一个新窗口打开页面 -->
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# table 标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双表头</title>
    <style>
      table {
        width: 600px;
        table-layout: auto;
        border-collapse: collapse;
      }
      td,
      th {
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <!-- ! 如果不自己写thead, tbody, 浏览器会自动创建一个tbody并把内容加到里面 -->
    <table>
      <thead>
        <tr>
          <th></th>
          <th>hong</th>
          <th>ming</th>
          <th>yin</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>math</th>
          <th>76</th>
          <th>87</th>
          <th>98</th>
        </tr>
        <tr>
          <th>literature</th>
          <th>66</th>
          <th>87</th>
          <th>88</th>
        </tr>
        <tr>
          <th>eng</th>
          <th>66</th>
          <th>97</th>
          <th>92</th>
        </tr>
      </tbody>
    </table>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

# img 标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>img</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        max-width: 100%;
        /* 自适应 */
      }
    </style>
  </head>
  <body>
    <img
      id="xxx"
      width="100%"
      src="https://f10.baidu.com/it/u=3096412971,768830525&fm=72"
      alt="金毛"
    />
    <!-- !height 会自适应width -->
    <script>
      xxx.onload = function() {
        console.log("图片成功加载");
      };
      xxx.onerror = function() {
        console.log("图片加载失败");
        xxx.src = "./1.PNG";
      };
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# form 标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>form</title>
  </head>
  <body>
    <form action="/bbb" method="get" autocomplete="on">
      <input type="text" name="username" id="" />
      <input type="submit" value="提交" />
      <button type="submit"><h1>提交</h1></button>
      <hr />
      <input type="color" name="" id="" />
      <hr />
      <input type="password" name="" id="" />
      <hr />
      <input type="radio" name="gender" id="" />男
      <input type="radio" name="gender" id="" />女
      <hr />
      <input type="checkbox" name="hobby" id="" />唱
      <input type="checkbox" name="hobby" id="" />跳
      <input type="checkbox" name="hobby" id="" />篮球
      <input type="checkbox" name="hobby" id="" />rap
      <hr />
      <input type="file" name="" id="" />
      <input type="file" name="" id="" multiple />
    </form>
    <!-- ? 在提交里input和button有什么区别 -->
    <!-- *button里还可以添加样式 -->
    <!-- ! form 里的input要有name属性 -->
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

← 文档流 →