KWAN的解忧杂货铺

# 一.html 格式

# 1.1.概览

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>文档标题</title>

    <base href="http://www.runoob.com/images/" target="_blank" />
    <link rel="stylesheet" type="text/css" href="mystyle.css" />

    <style type="text/css">
      body {
        font-size: 16px;
      }
      p {
        color: blue;
      }
    </style>
    <script>
      document.write("Hello World!");
    </script>
  </head>
  <body>
    文档内容......
  </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

# 1.2.标题

<title>文档标题</title>
1

# 1.3.图标

<link rel="icon" href="图片url" />
1

# 1.4.base 标签

img 标签的 src 链接的地址就是 base 里的地址加上 img 里的地址。

　<head>
  　　
  <base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" />
</head>
　　
<body>
  　 　<img src="banner7.jpg" />
</body>
　
1
2
3
4
5
6
7
8
9

# 1.5.样式

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
1
2
3
<style type="text/css">
1

# 1.6.meta 元数据

// 编码格式定义
<meta charset="utf-8" />
// 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
// 为网页定义描述内容:
<meta name="description" content="头部标签 & 使用" />
// 定义网页作者:
<meta name="author" content="Runoob" />
// 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30" />
1
2
3
4
5
6
7
8
9
10

# 1.7.script 标签

加载 js 文件

<script>
  document.write("Hello World!");
</script>

// or
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
1
2
3
4
5
6

# 二.常用代码

# 1.添加模块

<div class="cc-row cc-row-gutter-20">
  <h2>1111</h2>
</div>
1
2
3

# 2.JavaScrip 对象

<script>
  var item = {
    id: 9527,
    name: "王语嫣",
    age: 16,
    introduce: "燕子坞·王夫人的姑娘·段誉的媳妇，琅嬛福地的神仙姐姐。",
  };
  // 输出的是item
  document.write("编号：" + item["id"] + "<br/>");
  document.write("昵称：" + item["name"] + "<br/>");
  document.write("年龄：" + item["age"] + "<br/>");
  document.write("简介：" + item["introduce"] + "<br/>");
  //整个对象
  document.write(item);
  //控制台查看
  console.log(item);
  //Object-对象的总结
  /*
   * 1、对象的声明赋值使用的是{}花括号，大括号
   * 2、对象中的值以key:value的格式进行赋值，多个值中间使用【,】区分
   * 3、获取对象中的值的方法需要通过[]并给与key名的方式获取：item["name"]
   */
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
  var item = [
    {
      id: 9527,
      name: "王语嫣",
      age: 16,
      introduce: "燕子坞·王夫人的姑娘·段誉的媳妇，琅嬛福地的神仙姐姐。",
    },
    {
      id: 89757,
      name: "JJ林俊杰",
      age: 20,
      introduce: "林俊杰·唱的《美人鱼》。",
    },
  ];
  // 遍历输出的是item
  for (let i = 0; i < 2; i++) {
    document.write("编号：" + item[i]["id"] + "<br/>");
    document.write("昵称：" + item[i]["name"] + "<br/>");
    document.write("年龄：" + item[i]["age"] + "<br/>");
    document.write("简介：" + item[i]["introduce"] + "<br/>");
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Data != Date -->
<!-- 数据  != 日期 -->
<script>
  var time = new Date();
  document.write(time);
  // 控制台输出time——Date类型
  console.log(time);
  //输出Date对象包含的内容
  document.write("<hr color='red'/>");
  document.write("年：" + time.getFullYear());
  document.write("月：" + time.getMonth());
  document.write("日：" + time.getDate());
  document.write("时：" + time.getHours());
  document.write("分：" + time.getMinutes());
  document.write("秒：" + time.getSeconds());
  document.write("<hr/>");
  //时间拼接：
  document.write(
    time.getFullYear() +
      "-" +
      time.getMonth() +
      "-" +
      time.getDate() +
      " " +
      time.getHours() +
      ":" +
      time.getMinutes() +
      ":" +
      time.getSeconds()
  );
</script>
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
<!-- Image对象 -->
<script>
  var isf = 0;

  function ChangeSrc() {
    if (isf == 0) {
      document.getElementById("imgs").src = "imgs//2.png";
      isf = 1;
    } else {
      document.getElementById("imgs").src = "imgs//1.png";
      isf = 0;
    }
    // Image图片标签在切换图片的时候使用的是src属性，
    //图片路径规则可以为相对路径也可以为绝对路径
  }
</script>
<p><img src="imgs//1.png" title="更换图片标签" id="imgs" width="1000px" /></p>
<p>
  <button onclick="ChangeSrc()" style="width: 50%;height: 30vh;">切换</button>
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
  document.write(Math.abs(-10));
  document.write("<br/>");
  document.write(Math.ceil(3.14));
  document.write("<br/>");
  document.write(Math.floor(3.94));
  document.write("<br/>");
  document.write(Math.pow(2, 10));
  document.write("<br/>");
  document.write(Math.max(2, 10));
  document.write("<br/>");
  document.write(Math.min(2, 10));
  document.write("<br/>");
  document.write(Math.ceil(Math.random() * 10));
  document.write("<br/>");
  document.write(Math.round(50.534));
  document.write("<br/>");
  document.write(Math.sqrt(3));
  document.write("<br/>");
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <script type="text/javascript">
    var arr = [" 白色", " 紫色", " 橙色", " 红色"];
    for (var i = 0; i < arr.length; i++) {
      document.write(arr[i] + "<br/>");
    }
  </script>
</body>
1
2
3
4
5
6
7
8
<script type="text/javascript">
  var arr = ["王语嫣", " 小龙女", " 赵灵儿", " 关关雎鸠"];
  for (var i in arr) {
    document.write(arr[i] + "<br/>");
  }
</script>
1
2
3
4
5
6

# 3.a 标签

<a href="http://www.baidu.com">百度</a>
1

# 4.十六转十

在浏览器的控制台可以执行

image-20230307171953057

# 三.keyCode 对应的编码值

keycode 0 =

keycode 1 =
keycode 2 =
keycode 3 =
keycode 4 =
keycode 5 =
keycode 6 =
keycode 7 =
keycode 8 = BackSpace
keycode 9 = Tab
keycode 10 =
keycode 11 =
keycode 12 = Clear
keycode 13 = Enter
keycode 14 =
keycode 15 =
keycode 16 = Shift_L
keycode 17 = Control_L
keycode 18 = Alt_L
keycode 19 = Pause
keycode 20 = Caps_Lock
keycode 21 =
keycode 22 =
keycode 23 =
keycode 24 =
keycode 25 =
keycode 26 =
keycode 27 = Esc Escape
keycode 28 =
keycode 29 =
keycode 30 =
keycode 31 =
keycode 32 = Space
keycode 33 = Page Up
keycode 34 = Page Down
keycode 35 = End
keycode 36 = Home
keycode 37 = Left Arrow
keycode 38 = Up Arrow
keycode 39 = Right Arrow
keycode 40 = Down Arrow
keycode 41 = Select
keycode 42 = Print
keycode 43 = Execute
keycode 44 =
keycode 45 = Insert
keycode 46 = Delete
keycode 47 = Help
keycode 48 = 0 )
keycode 49 = 1 !
keycode 50 = 2 @
keycode 51 = 3 #
keycode 52 = 4 $
keycode 53 = 5 %
keycode 54 = 6 ^
keycode 55 = 7 &
keycode 56 = 8 *
keycode 57 = 9 (
keycode 58 =
keycode 59 =
keycode 60 =
keycode 61 =
keycode 62 =
keycode 63 =
keycode 64 =
keycode 65 = a A
keycode 66 = b B
keycode 67 = c C
keycode 68 = d D
keycode 69 = e E
keycode 70 = f F
keycode 71 = g G
keycode 72 = h H
keycode 73 = i I
keycode 74 = j J
keycode 75 = k K
keycode 76 = l L
keycode 77 = m M
keycode 78 = n N
keycode 79 = o O
keycode 80 = p P
keycode 81 = q Q
keycode 82 = r R
keycode 83 = s S
keycode 84 = t T
keycode 85 = u U
keycode 86 = v V
keycode 87 = w W
keycode 88 = x X
keycode 89 = y Y
keycode 90 = z Z
keycode 91 =
keycode 92 =
keycode 93 =
keycode 94 =
keycode 95 =
keycode 96 = KP_0
keycode 97 = KP_1
keycode 98 = KP_2
keycode 99 = KP_3
keycode 100 = KP_4
keycode 101 = KP_5
keycode 102 = KP_6
keycode 103 = KP_7
keycode 104 = KP_8
keycode 105 = KP_9
keycode 106 = KP_* KP_Multiply
keycode 107 = KP_+ KP_Add
keycode 108 = KP_Enter KP_Separator
keycode 109 = KP_- KP_Subtract
keycode 110 = KP_. KP_Decimal
keycode 111 = KP_/ KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock
keycode 138 =
keycode 139 =
keycode 140 =
keycode 141 =
keycode 142 =
keycode 143 =
keycode 144 =
keycode 145 =
keycode 146 =
keycode 147 =
keycode 148 =
keycode 149 =
keycode 150 =
keycode 151 =
keycode 152 =
keycode 153 =
keycode 154 =
keycode 155 =
keycode 156 =
keycode 157 =
keycode 158 =
keycode 159 =
keycode 160 =
keycode 161 =
keycode 162 =
keycode 163 =
keycode 164 =
keycode 165 =
keycode 166 =
keycode 167 =
keycode 168 =
keycode 169 =
keycode 170 =
keycode 171 =
keycode 172 =
keycode 173 =
keycode 174 =
keycode 175 =
keycode 176 =
keycode 177 =
keycode 178 =
keycode 179 =
keycode 180 =
keycode 181 =
keycode 182 =
keycode 183 =
keycode 184 =
keycode 185 =
keycode 186 =
keycode 187 = =+
keycode 188 = ,<
keycode 189 = -_
keycode 190 = .>
keycode 191 = /?
keycode 192 = `~
keycode 193 =
keycode 194 =
keycode 195 =
keycode 196 =
keycode 197 =
keycode 198 =
keycode 199 =
keycode 200 =
keycode 201 =
keycode 202 =
keycode 203 =
keycode 204 =
keycode 205 =
keycode 206 =
keycode 207 =
keycode 208 =
keycode 209 =
keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters
keycode 219 = [{
keycode 220 = \|
keycode 221 = ]}
keycode 222 = '"
keycode 223 =
keycode 224 =
keycode 225 =
keycode 226 =
keycode 227 = multiply division
keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
上次更新: 10/29/2024, 10:27:50 AM

← 04-Vue学习 →