-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
312 lines (154 loc) · 227 KB
/
atom.xml
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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>lzh-zone</title>
<link href="https://old.lzh1.eu.org/atom.xml" rel="self"/>
<link href="https://old.lzh1.eu.org/"/>
<updated>2024-02-08T13:53:54.384Z</updated>
<id>https://old.lzh1.eu.org/</id>
<author>
<name>Sterling</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>「折腾日记」记一次更换域名</title>
<link href="https://old.lzh1.eu.org/2024/02/08/%E8%AE%B0%E4%B8%80%E6%AC%A1%E6%8D%A2%E5%9F%9F%E5%90%8D/"/>
<id>https://old.lzh1.eu.org/2024/02/08/%E8%AE%B0%E4%B8%80%E6%AC%A1%E6%8D%A2%E5%9F%9F%E5%90%8D/</id>
<published>2024-02-08T13:26:00.000Z</published>
<updated>2024-02-08T13:53:54.384Z</updated>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a><strong><h2>前言</h2></strong></h2><p>在今天，我遇到了一个令人不愉快的事情。Freenom，一家提供免费域名服务多年的公司，突然宣布收回了所有后缀免费域名。这对我来说是个巨大的打击，因为我在Freenom上拥有多个站点，这些站点的服务都依赖于这些域名的解析。然而，现在所有的域名都无法正常解析了，我的网站也无法访问了，许多测试服务全部下线。</p><h2 id="所有域名变成pending"><a href="#所有域名变成pending" class="headerlink" title="所有域名变成pending"></a><strong><h2>所有域名变成pending</h2></strong></h2><h2 id="登录上freenom官网，发现我的域名页面直接全部变成下图的样子"><a href="#登录上freenom官网，发现我的域名页面直接全部变成下图的样子" class="headerlink" title="登录上freenom官网，发现我的域名页面直接全部变成下图的样子"></a>登录上freenom官网，发现我的域名页面直接全部变成下图的样子<br><img src="https://img2.imgtp.com/2024/02/08/NTkV9H5g.png" alt="freenom官网"></h2><h2 id="可以看到，离域名过期还有至少半年，强制收回了检查域名可用性"><a href="#可以看到，离域名过期还有至少半年，强制收回了检查域名可用性" class="headerlink" title="可以看到，离域名过期还有至少半年，强制收回了检查域名可用性"></a>可以看到，离域名过期还有至少半年，强制收回了<br><strong><h2>检查域名可用性</h2></strong></h2><p>在我逐个站点的排查下，发现部分域名还是有解析的，即使他现在是pending的状态，但我感觉用不长久了，毕竟是免费的，现在freenom也是濒临倒闭的状态，立马准备丢掉了。</p><h2 id="寻找替代方案"><a href="#寻找替代方案" class="headerlink" title="寻找替代方案"></a><strong><h2>寻找替代方案</h2></strong></h2><p>对这个突发情况，我必须迅速采取行动来恢复我的站点服务。首先，我决定寻找替代的域名注册服务。在研究了几个选项后，我决定选择.xyz后缀域名。.xyz后缀是一个相对较新的通用顶级域名（gTLD），它提供了一种低廉的注册费用和广泛的可用性。</p><p>我前往一个可靠的域名注册网站spaceship，并进行了购买。我发现，购买一个.xyz域名相对便宜，只需要支付8美元，并且可以注册为期10年。这对学生党来说是一个不错的选择，因为我可以长期使用这个域名来维护我的站点。</p><p><img src="https://img2.imgtp.com/2024/02/08/GIrbi98c.png" alt="新域名"></p><p>目前暂时将博客停靠在 lzh1.eu.org<a href="https://lzh1.eu.org/">暂时地址</a>，我需要检查下之前部署的服务，事发突然，目前准备开始迁移部分web应用！</p><h2 id="结论"><a href="#结论" class="headerlink" title="结论"></a><strong><h2>结论</h2></strong></h2><p>在我所有的站点服务突然解析失败的情况下，Freenom收回所有后缀免费域名给我带来了巨大的困扰。然而，通过购买一个10年期限的.xyz后缀域名，人称小姨子域名，但作为个人博客网站域名，我觉得足以，不需要买一个COM之类的，续费太贵。这个过程让我意识到域名的重要性，同时也让我对备用方案和选择有了更深入的了解。</p><p>尽管我遇到了一些困难，但我相信我能够通过这次经历变得更加坚强和有经验。对于其他人来说，我也希望这篇文章能够提醒大家在选择免费域名时要谨慎，并考虑备用方案，以免在类似情况下遭受损失。</p><p>最后的最后，告诉白嫖的永远是最贵，希望大家还是珍惜教训，花点钱解决大麻烦把！</p>]]></content>
<summary type="html"><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a><strong><h2>前言</h2></strong></h2><p>在今天，我遇到了一个令人不愉快的事情。Freenom，一家提供免费域名服务多年的公司，突</summary>
</entry>
<entry>
<title>[技术分享] 非常手段CNAME接入任何域名到CF</title>
<link href="https://old.lzh1.eu.org/2024/01/09/[%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB]%20%E9%9D%9E%E5%B8%B8%E6%89%8B%E6%AE%B5CNAME%E6%8E%A5%E5%85%A5%E4%BB%BB%E4%BD%95%E5%9F%9F%E5%90%8D%E5%88%B0CF/"/>
<id>https://old.lzh1.eu.org/2024/01/09/[%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB]%20%E9%9D%9E%E5%B8%B8%E6%89%8B%E6%AE%B5CNAME%E6%8E%A5%E5%85%A5%E4%BB%BB%E4%BD%95%E5%9F%9F%E5%90%8D%E5%88%B0CF/</id>
<published>2024-01-09T13:38:37.000Z</published>
<updated>2024-01-10T04:59:21.516Z</updated>
<content type="html"><![CDATA[<h2 id=""><a href="#" class="headerlink" title=""></a></h2><h2 id="CloudFlare-for-SaaS是什么？"><a href="#CloudFlare-for-SaaS是什么？" class="headerlink" title="CloudFlare for SaaS是什么？"></a><strong>CloudFlare for SaaS是什么？</strong></h2><p>CloudFlare for SaaS（Software as a Service）是一种为 SaaS 应用程序提供安全和性能的云服务。CloudFlare for SaaS 提供了一种 CNAME 接入的方式，这使得用户可以使用自己的域名来访问 SaaS 应用程序。</p><h2 id="-1"><a href="#-1" class="headerlink" title=""></a></h2><hr><p><strong>前言</strong><br>从2021年11月开始，CloudFlare禁用了Partner使用的zone_setAPI以避免滥用（因为该API接入不需要验证域名所有权），通过Partner实现CNAME接入的方式近乎落幕。</p><p>2022 年 3 月份，CloudFlare 宣布更改了 CloudFlare for SaaS 的收费策略，每个账户可以有 100 个域名免费额度，我们所依赖这个功能所提供的免费额度可以实现免费 CNAME接入。使用CNAME接入后自定义节点就可以随便玩了。</p><p>为什么使用自定义节点 IP 呢？CloudFlare 免费套餐节点比较少，且“鱼龙混杂”，对中国大陆的线路不友好，使用 CloudFlare 自定义节点 IP 的好处就是可以一定程度上缓解 CloudFlare 速度慢的问题。本文详细介绍了 CloudFlare for SaaS 的开通及如何使用自定义 IP 节点对三网线路进行优化，同时分享了一些 CloudFlare 对中国大陆三网线路较友好的IP段。</p><h2 id="-2"><a href="#-2" class="headerlink" title=""></a></h2><h2 id="前期准备："><a href="#前期准备：" class="headerlink" title="前期准备："></a><strong>前期准备：</strong></h2><p>准备两个域名和一个paypal或一张信用卡。特别说明：一个域名的回源IP有且只能有一个。也就是说如果你服务器有a.com、b.com、c.com三个网站，你只要一个域名以NS的方式接入到cloudflare即可，但如果你这三个网站位于不同的服务器你就需要多个域名了。以这里为例的话就是指xxx.xxxx.xx.com这样的域名你需要2个。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xxx.<span class="property">xyz</span> <span class="comment">//域名1 需有设置NS的控制权，NS接入到cloudflare。</span></span><br><span class="line">xxx.<span class="property">xxxx</span>.<span class="property">xx</span>.<span class="property">com</span> <span class="comment">//域名2 需要加速的域名，cname接入任意解析商，多少级都行</span></span><br></pre></td></tr></table></figure><h2 id="-3"><a href="#-3" class="headerlink" title=""></a></h2><h2 id="正式教程："><a href="#正式教程：" class="headerlink" title="正式教程："></a><strong>正式教程：</strong></h2><h2 id="-4"><a href="#-4" class="headerlink" title=""></a></h2><h2 id="一、定义一个回源域名"><a href="#一、定义一个回源域名" class="headerlink" title="一、定义一个回源域名"></a><strong>一、定义一个回源域名</strong></h2><p>之前使用过 CloudFlare Partner 应该都知道什么是回源域名，顾名思义用于找源站用的。登录 cloudflare 进入接入的域名 056056.xyz，点击左侧的DNS再点击记录，按下图设置一个“名称”为cname，“内容（即IP）”为你真实源站IP的A记录。小黄云要打开。注：图片中的8.8.8.8一定要改成你的服务器的真实IP。</p><h2 id="-5"><a href="#-5" class="headerlink" title=""></a></h2><h2 id="二、开通-CloudFlare-for-SaaS"><a href="#二、开通-CloudFlare-for-SaaS" class="headerlink" title="二、开通 CloudFlare for SaaS"></a><strong>二、开通 CloudFlare for SaaS</strong></h2><p>点击左侧的SSL/TLS 再点击自定义主机名，就可以看到一个启用 CloudFlare for SaaS的按钮。如下图所示：</p><p>点击启用 CloudFlare for SaaS后选择一个付款方式，这里选择的是Paypal。如果你没有Paypal也可以使用信用卡。注：如果没有出现Paypal选项可以要使用科学上网的方式才会出Paypal选项。</p><p>点击上图箭头指向的Paypal，在出现的窗口中填入你Paypal的用户名和密码，然后点击登入。</p><p>在出现的窗口中点击同意并付款。注：这里只是一个认证，实际不会产生费用。请请放心使用。如果你使用的国内网络环境，可能会等待较长的时间（原因大家应该都知道），耐心等待即可。Paypal的登入方式最好不要换，容易风控。</p><p>Paypal关联成功后会自动关闭并跳转到 Cloudflare 的付款页面，填写其中的名字、姓氏、国家/地区、邮政编码和帐户类型后点击确认。</p><p>在弹出的页面中会有一些 CloudFlare for SaaS 的相关信息，如功能介绍和免费额度等。目前的政策是前100个免费，对于大部分人出说应该是足够用了。没问题的话就直接点击确认付款。</p><p>最后在订阅完成的页面中点close，CloudFlare for SaaS 开通完成。你就可以愉快的玩耍了。</p><h2 id="-6"><a href="#-6" class="headerlink" title=""></a></h2><h2 id="三、添加回退源"><a href="#三、添加回退源" class="headerlink" title="三、添加回退源"></a><strong>三、添加回退源</strong></h2><p>打开SSL/TLS下面的自定义主机名，增加一个回退源。在回退源中填写第一个步设置的域名 cname.xxx.xyz。然后点击左侧的添加回退源。</p><p>等待生效，大部分会在 1 分钟内生效。 如果1分钟过去后还没有生效，直接F5刷新页面。</p><h2 id="-7"><a href="#-7" class="headerlink" title=""></a></h2><h2 id="四、添加自定义主机"><a href="#四、添加自定义主机" class="headerlink" title="四、添加自定义主机"></a><strong>四、添加自定义主机</strong></h2><p>在添加的回退源生效后点击页面中的添加自定义主机名，在页面中输入自定义主机名，并且选择最低TLS 版本以及证书验证方法，其中自定义主机名就是你要 CNAME 接入的域名，即需要加速的域名，确认输入信息无误后点击添加自定义主机名。<br>注：添加域名时可以是根域名也可以是二级域名，这里是以二级域名xxx.xxxx.xx.com。</p><p>添加完成后是待验证状态。点击刚刚添加的主机名，可以看到要求验证的证书验证TXT和主机名预验证TXT。</p><p>按要求在你接入域名的DNS服务商中填写证书验证TXT和主机名预验证TXT。注：这里CF给出的验证TXT名称是完整域名的解析记录，所以在DNS服务商（这里是阿里云）中设置域名TXT记录时不要直接全部复制。这里要填入的应该是_cf-custom-hostname.www 和 _acme-challenge.www。目前可以自定义线路的DNS服务商有阿里云，DNSPOD，华为云，京东云等，喜欢那个就用那个。</p><p>验证时长一般是10分钟内，不同的DNS服务器可能会有点区别，但区别不大。如果超过30分钟你可以就要检查一下是不是设置错误了。验证成功后如下图所示，证书状态和主机名状态下面都是有效。</p><p>接下来你就可以在接入的域名（这里是xxx.xxxx.xx.com）里面添加A记录或CNAME记录了。但更建议你使用A记录。注：CNAME记录的记录值你可以直接写第一步添加的cname.xxx.xyz。大部分DNS服务商只允许CNAME和A记录启用一个，下图只是举例。</p><p>好了，这时候你已经可以分线路来加速你的网站或者使用魔法了。请愉快的玩耍吧。CloudFlare使用的Anycast技术，所以也就没有什么固定的或者永久优质的IP的说法了。但是在路由的配置上，不同的IP段路由存在着些许的不同。找找还是可以找到适合你的IP来加速你的网站或者魔法的，下面介绍一些常用的节点以方便你能更快的找到一个称心如意的。</p><h2 id="-8"><a href="#-8" class="headerlink" title=""></a></h2><h2 id="节点问题"><a href="#节点问题" class="headerlink" title="节点问题"></a><strong>节点问题</strong></h2><p>CloudFlare的节点：<br>CloudFlare 百度云合作 ip：</p><p>162.159.208.4-162.159.208.103<br>162.159.209.4-162.159.209.103<br>162.159.210.4-162.159.210.103<br>162.159.211.4-162.159.211.103</p><p>官方列表：CloudFlare公开的节点</p><p>各线路推荐列表：<br>电信：推荐走圣何塞，例：104.16.160.* 或者上面的百度云合作 ip。<br>移动：推荐走移动香港，例：172.64.32.<em>、141.101.115.</em> 或者 104.23.240.0-104.23.243.254。<br>联通：没发布什么好线路，可走圣何塞。例：104.16.160.* 或者 104.23.240.0-104.23.243.254。也可以试一下走亚特兰大 108.162.236.*（日前不可用。） 。</p>]]></content>
<summary type="html"><h2 id=""><a href="#" class="headerlink" title=""></a></h2><h2 id="CloudFlare-for-SaaS是什么？"><a href="#CloudFlare-for-SaaS是什么？" class="header</summary>
<category term="/折腾日记" scheme="https://old.lzh1.eu.org/categories/%E6%8A%98%E8%85%BE%E6%97%A5%E8%AE%B0/"/>
<category term="cloudflare,域名,cdn,加速" scheme="https://old.lzh1.eu.org/tags/cloudflare-%E5%9F%9F%E5%90%8D-cdn-%E5%8A%A0%E9%80%9F/"/>
</entry>
<entry>
<title>aplayer+meting 的妙用</title>
<link href="https://old.lzh1.eu.org/2023/04/24/aplayer+meting%E7%9A%84%E5%A6%99%E7%94%A8/"/>
<id>https://old.lzh1.eu.org/2023/04/24/aplayer+meting%E7%9A%84%E5%A6%99%E7%94%A8/</id>
<published>2023-04-24T06:30:00.000Z</published>
<updated>2024-01-10T04:50:27.688Z</updated>
<content type="html"><![CDATA[<h2 id="Aplayer-介绍"><a href="#Aplayer-介绍" class="headerlink" title="Aplayer 介绍"></a>Aplayer 介绍</h2><hr><p>Aplayer是一个功能强大的HTML5音乐播放器，兼容所有浏览器。</p><h2 id="Meting-js-介绍"><a href="#Meting-js-介绍" class="headerlink" title="Meting.js 介绍"></a>Meting.js 介绍</h2><p><img src="/./images/1682316600424.png" alt="Meting JS"></p><p>Meting.js 依赖 APlayer.js，扩展了 APlayer.js 的功能，能够使 APlayer.js 加载网易云音乐、QQ 音乐、虾米音乐中的歌单。</p><h2 id="apayer-meting-简单调用"><a href="#apayer-meting-简单调用" class="headerlink" title="apayer+meting 简单调用"></a>apayer+meting 简单调用</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><!<span class="variable constant_">DOCTYPE</span> html></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">html</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">head</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> /></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="comment"><!-- require APlayer --></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://testingcf.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://testingcf.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="comment"><!-- require MetingJS --></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://testingcf.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">head</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">body</span>></span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">meting-js</span> <span class="attr">server</span>=<span class="string">"netease"</span> <span class="attr">type</span>=<span class="string">"playlist"</span> <span class="attr">id</span>=<span class="string">"60198"</span>></span><span class="tag"></<span class="name">meting-js</span>></span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">body</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">html</span>></span></span></span><br></pre></td></tr></table></figure><h2 id="Metingjs-的简单说明"><a href="#Metingjs-的简单说明" class="headerlink" title="Metingjs 的简单说明"></a>Metingjs 的简单说明</h2><p>解析：server=”netease” type=”playlist” id=”60198”</p><p>server指音乐平台，netease指网易云音乐， type类型，playlist列表，id指歌曲的i或者专辑或列表外链id<br>因此重点在于指定平台，指定外链id</p><h2 id="Metingjs-的源码解析"><a href="#Metingjs-的源码解析" class="headerlink" title="Metingjs 的源码解析"></a>Metingjs 的源码解析</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">MetingJSElement</span> <span class="keyword">extends</span> <span class="title class_ inherited__">HTMLElement</span> {</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 当自定义元素第一次被连接到文档 DOM 时被调用</span></span><br><span class="line"><span class="comment"> * connectedCallback</span></span><br><span class="line"><span class="comment"> * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="title function_">connectedCallback</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">APlayer</span> && <span class="variable language_">window</span>.<span class="property">fetch</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">_init</span>()</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">_parse</span>()</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 与 connectedCallback 反</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="title function_">disconnectedCallback</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (!<span class="variable language_">this</span>.<span class="property">lock</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">aplayer</span>.<span class="title function_">destroy</span>()</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 驼峰化</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type"> string </span>} <span class="variable">str</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@returns</span> {<span class="type"> string </span>} <span class="variable">str</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="title function_">_camelize</span>(<span class="params">str</span>) {</span><br><span class="line"> <span class="keyword">return</span> str</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/^[_.\- ]+/</span>, <span class="string">''</span>)</span><br><span class="line"> .<span class="title function_">toLowerCase</span>()</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/[_.\- ]+(\w|$)/g</span>, <span class="function">(<span class="params">m, p1</span>) =></span> p1.<span class="title function_">toUpperCase</span>())</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 初始化</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="title function_">_init</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> config = {}</span><br><span class="line"></span><br><span class="line"> <span class="comment">// attributes -> NamedNodeMap</span></span><br><span class="line"> <span class="comment">// https://developer.mozilla.org/zh-CN/docs/Web/API/NamedNodeMap</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="variable language_">this</span>.<span class="property">attributes</span>.<span class="property">length</span>; i += <span class="number">1</span>) {</span><br><span class="line"> config[<span class="variable language_">this</span>.<span class="title function_">_camelize</span>(<span class="variable language_">this</span>.<span class="property">attributes</span>[i].<span class="property">name</span>)] = <span class="variable language_">this</span>.<span class="property">attributes</span>[i].<span class="property">value</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> keys = [</span><br><span class="line"> <span class="string">'server'</span>,</span><br><span class="line"> <span class="string">'type'</span>,</span><br><span class="line"> <span class="string">'id'</span>,</span><br><span class="line"> <span class="string">'api'</span>,</span><br><span class="line"> <span class="string">'auth'</span>,</span><br><span class="line"> <span class="string">'auto'</span>,</span><br><span class="line"> <span class="string">'lock'</span>,</span><br><span class="line"> <span class="string">'name'</span>,</span><br><span class="line"> <span class="string">'title'</span>,</span><br><span class="line"> <span class="string">'artist'</span>,</span><br><span class="line"> <span class="string">'author'</span>,</span><br><span class="line"> <span class="string">'url'</span>,</span><br><span class="line"> <span class="string">'cover'</span>,</span><br><span class="line"> <span class="string">'pic'</span>,</span><br><span class="line"> <span class="string">'lyric'</span>,</span><br><span class="line"> <span class="string">'lrc'</span>,</span><br><span class="line"> ]</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">meta</span> = {}</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 构建 meta</span></span><br><span class="line"> <span class="comment">// config 保留 keys 数组中没有的属性</span></span><br><span class="line"> <span class="comment">// keys 中有 config 中也有的属性给 meta 赋值，没有的先设为 undefined</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">of</span> keys) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">meta</span>[key] = config[key]</span><br><span class="line"> <span class="keyword">delete</span> config[key]</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">config</span> = config</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">api</span> =</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">api</span> ||</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">meting_api</span> ||</span><br><span class="line"> <span class="string">'https://api.injahow.cn/meting/api?server=:server&type=:type&id=:id&r=:r'</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">auto</span>) <span class="variable language_">this</span>.<span class="title function_">_parse_link</span>()</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 解析 auto 属性的值</span></span><br><span class="line"><span class="comment"> * 将解析后的结果赋值给 meta 对象的 server、type、id</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="title function_">_parse_link</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> rules = [</span><br><span class="line"> [<span class="string">'music.163.com.*song.*id=(\\d+)'</span>, <span class="string">'netease'</span>, <span class="string">'song'</span>],</span><br><span class="line"> [<span class="string">'music.163.com.*album.*id=(\\d+)'</span>, <span class="string">'netease'</span>, <span class="string">'album'</span>],</span><br><span class="line"> [<span class="string">'music.163.com.*artist.*id=(\\d+)'</span>, <span class="string">'netease'</span>, <span class="string">'artist'</span>],</span><br><span class="line"> [<span class="string">'music.163.com.*playlist.*id=(\\d+)'</span>, <span class="string">'netease'</span>, <span class="string">'playlist'</span>],</span><br><span class="line"> [<span class="string">'music.163.com.*discover/toplist.*id=(\\d+)'</span>, <span class="string">'netease'</span>, <span class="string">'playlist'</span>],</span><br><span class="line"> [<span class="string">'y.qq.com.*song/(\\w+).html'</span>, <span class="string">'tencent'</span>, <span class="string">'song'</span>],</span><br><span class="line"> [<span class="string">'y.qq.com.*album/(\\w+).html'</span>, <span class="string">'tencent'</span>, <span class="string">'album'</span>],</span><br><span class="line"> [<span class="string">'y.qq.com.*singer/(\\w+).html'</span>, <span class="string">'tencent'</span>, <span class="string">'artist'</span>],</span><br><span class="line"> [<span class="string">'y.qq.com.*playsquare/(\\w+).html'</span>, <span class="string">'tencent'</span>, <span class="string">'playlist'</span>],</span><br><span class="line"> [<span class="string">'y.qq.com.*playlist/(\\w+).html'</span>, <span class="string">'tencent'</span>, <span class="string">'playlist'</span>],</span><br><span class="line"> [<span class="string">'xiami.com.*song/(\\w+)'</span>, <span class="string">'xiami'</span>, <span class="string">'song'</span>],</span><br><span class="line"> [<span class="string">'xiami.com.*album/(\\w+)'</span>, <span class="string">'xiami'</span>, <span class="string">'album'</span>],</span><br><span class="line"> [<span class="string">'xiami.com.*artist/(\\w+)'</span>, <span class="string">'xiami'</span>, <span class="string">'artist'</span>],</span><br><span class="line"> [<span class="string">'xiami.com.*collect/(\\w+)'</span>, <span class="string">'xiami'</span>, <span class="string">'playlist'</span>],</span><br><span class="line"> ]</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> rule <span class="keyword">of</span> rules) {</span><br><span class="line"> <span class="comment">// 返回匹配</span></span><br><span class="line"> <span class="comment">// eg: "https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html"</span></span><br><span class="line"> <span class="comment">// ["y.qq.com/n/yqq/song/001RGrEX3ija5X.html", "001RGrEX3ija5X"]</span></span><br><span class="line"> <span class="keyword">let</span> patt = <span class="keyword">new</span> <span class="title class_">RegExp</span>(rule[<span class="number">0</span>])</span><br><span class="line"> <span class="keyword">let</span> res = patt.<span class="title function_">exec</span>(<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">auto</span>)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (res !== <span class="literal">null</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">server</span> = rule[<span class="number">1</span>]</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">type</span> = rule[<span class="number">2</span>]</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">id</span> = res[<span class="number">1</span>]</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 对不同 url 进行处理</span></span><br><span class="line"><span class="comment"> * 生成配置并加载 APlayer</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="title function_">_parse</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">url</span>) {</span><br><span class="line"> <span class="comment">// 直接构建 APlayer 配置并加载 APlayer</span></span><br><span class="line"> <span class="keyword">let</span> result = {</span><br><span class="line"> <span class="attr">name</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">name</span> || <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">title</span> || <span class="string">'Audio name'</span>,</span><br><span class="line"> <span class="attr">artist</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">artist</span> || <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">author</span> || <span class="string">'Audio artist'</span>,</span><br><span class="line"> <span class="attr">url</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">url</span>,</span><br><span class="line"> <span class="attr">cover</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">cover</span> || <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">pic</span>,</span><br><span class="line"> <span class="attr">lrc</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lrc</span> || <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lyric</span> || <span class="string">''</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">type</span> || <span class="string">'auto'</span>,</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (!result.<span class="property">lrc</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lrcType</span> = <span class="number">0</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">innerText</span>) {</span><br><span class="line"> result.<span class="property">lrc</span> = <span class="variable language_">this</span>.<span class="property">innerText</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lrcType</span> = <span class="number">2</span></span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">_loadPlayer</span>([result])</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 1. 通过 meta 拼凑接口参数获得完整接口 （_init 中存放的默认 api）</span></span><br><span class="line"> <span class="comment">// 2. 请求接口，得到播放列表数据</span></span><br><span class="line"> <span class="comment">// 3. 加载 APlayer</span></span><br><span class="line"> <span class="keyword">let</span> url = <span class="variable language_">this</span>.<span class="property">api</span></span><br><span class="line"> .<span class="title function_">replace</span>(<span class="string">':server'</span>, <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">server</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="string">':type'</span>, <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">type</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="string">':id'</span>, <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">id</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="string">':auth'</span>, <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">auth</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="string">':r'</span>, <span class="title class_">Math</span>.<span class="title function_">random</span>())</span><br><span class="line"></span><br><span class="line"> <span class="title function_">fetch</span>(url)</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =></span> res.<span class="title function_">json</span>())</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =></span> <span class="variable language_">this</span>.<span class="title function_">_loadPlayer</span>(result))</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="title function_">_loadPlayer</span>(<span class="params">data</span>) {</span><br><span class="line"> <span class="keyword">let</span> defaultOption = {</span><br><span class="line"> <span class="attr">audio</span>: data,</span><br><span class="line"> <span class="attr">mutex</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">lrcType</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lrcType</span> || <span class="number">3</span>,</span><br><span class="line"> <span class="attr">storageName</span>: <span class="string">'metingjs'</span>,</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!data.<span class="property">length</span>) <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> options = {</span><br><span class="line"> ...defaultOption,</span><br><span class="line"> ...<span class="variable language_">this</span>.<span class="property">config</span>,</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> optkey <span class="keyword">in</span> options) {</span><br><span class="line"> <span class="keyword">if</span> (options[optkey] === <span class="string">'true'</span> || options[optkey] === <span class="string">'false'</span>) {</span><br><span class="line"> options[optkey] = options[optkey] === <span class="string">'true'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> div = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'div'</span>)</span><br><span class="line"> options.<span class="property">container</span> = div</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">appendChild</span>(div)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">aplayer</span> = <span class="keyword">new</span> <span class="title class_">APlayer</span>(options)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建标签</span></span><br><span class="line"><span class="comment">// customElements -> https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements</span></span><br><span class="line"><span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">customElements</span> && !<span class="variable language_">window</span>.<span class="property">customElements</span>.<span class="title function_">get</span>(<span class="string">'meting-js'</span>)) {</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">MetingJSElement</span> = <span class="title class_">MetingJSElement</span></span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">customElements</span>.<span class="title function_">define</span>(<span class="string">'meting-js'</span>, <span class="title class_">MetingJSElement</span>)</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="Metingjs的高级调用方法"><a href="#Metingjs的高级调用方法" class="headerlink" title="Metingjs的高级调用方法"></a>Metingjs的高级调用方法</h2><p>当我们需要听vip版权歌曲，需要调用私人api，所以不能再使用无登陆访客状态，需更改cookie值，下面看下代码解析。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line">private <span class="keyword">function</span> <span class="title function_">curlset</span>(<span class="params"></span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="keyword">switch</span> ($this->server) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'netease'</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">array</span>(</span><br><span class="line"> <span class="string">'Referer'</span> => <span class="string">'https://music.163.com/'</span>,</span><br><span class="line"> <span class="string">'Cookie'</span> => <span class="string">'appver=8.2.30; os=iPhone OS; osver=15.0; EVNSM=1.0.0; buildver=2206; channel=distribution; machineid=iPhone13.3'</span>,</span><br><span class="line"> <span class="string">'User-Agent'</span> => <span class="string">'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 CloudMusic/0.1.1 NeteaseMusic/8.2.30'</span>,</span><br><span class="line"> <span class="string">'X-Real-IP'</span> => <span class="title function_">long2ip</span>(<span class="title function_">mt_rand</span>(<span class="number">1884815360</span>, <span class="number">1884890111</span>)),</span><br><span class="line"> <span class="string">'Accept'</span> => <span class="string">'*/*'</span>,</span><br><span class="line"> <span class="string">'Accept-Language'</span> => <span class="string">'zh-CN,zh;q=0.8,gl;q=0.6,zh-TW;q=0.4'</span>,</span><br><span class="line"> <span class="string">'Connection'</span> => <span class="string">'keep-alive'</span>,</span><br><span class="line"> <span class="string">'Content-Type'</span> => <span class="string">'application/x-www-form-urlencoded'</span>,</span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'tencent'</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">array</span>(</span><br><span class="line"> <span class="string">'Referer'</span> => <span class="string">'http://y.qq.com'</span>,</span><br><span class="line"> <span class="string">'Cookie'</span> => <span class="string">'pgv_pvi=22038528; pgv_si=s3156287488; pgv_pvid=5535248600; yplayer_open=1; ts_last=y.qq.com/portal/player.html; ts_uid=4847550686; yq_index=0; qqmusic_fromtag=66; player_exist=1'</span>,</span><br><span class="line"> <span class="string">'User-Agent'</span> => <span class="string">'QQ%E9%9F%B3%E4%B9%90/54409 CFNetwork/901.1 Darwin/17.6.0 (x86_64)'</span>,</span><br><span class="line"> <span class="string">'Accept'</span> => <span class="string">'*/*'</span>,</span><br><span class="line"> <span class="string">'Accept-Language'</span> => <span class="string">'zh-CN,zh;q=0.8,gl;q=0.6,zh-TW;q=0.4'</span>,</span><br><span class="line"> <span class="string">'Connection'</span> => <span class="string">'keep-alive'</span>,</span><br><span class="line"> <span class="string">'Content-Type'</span> => <span class="string">'application/x-www-form-urlencoded'</span>,</span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'xiami'</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">array</span>(</span><br><span class="line"> <span class="string">'Cookie'</span> => <span class="string">'_m_h5_tk=15d3402511a022796d88b249f83fb968_1511163656929; _m_h5_tk_enc=b6b3e64d81dae577fc314b5c5692df3c'</span>,</span><br><span class="line"> <span class="string">'User-Agent'</span> => <span class="string">'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) XIAMI-MUSIC/3.1.1 Chrome/56.0.2924.87 Electron/1.6.11 Safari/537.36'</span>,</span><br><span class="line"> <span class="string">'Accept'</span> => <span class="string">'application/json'</span>,</span><br><span class="line"> <span class="string">'Content-type'</span> => <span class="string">'application/x-www-form-urlencoded'</span>,</span><br><span class="line"> <span class="string">'Accept-Language'</span> => <span class="string">'zh-CN'</span>,</span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'kugou'</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">array</span>(</span><br><span class="line"> <span class="string">'User-Agent'</span> => <span class="string">'IPhone-8990-searchSong'</span>,</span><br><span class="line"> <span class="string">'UNI-UserAgent'</span> => <span class="string">'iOS11.4-Phone8990-1009-0-WiFi'</span>,</span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'baidu'</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">array</span>(</span><br><span class="line"> <span class="string">'Cookie'</span> => <span class="string">'BAIDUID='</span>.<span class="property">$this</span>-><span class="title function_">getRandomHex</span>(<span class="number">32</span>).<span class="string">':FG=1'</span>,</span><br><span class="line"> <span class="string">'User-Agent'</span> => <span class="string">'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) baidu-music/1.2.1 Chrome/66.0.3359.181 Electron/3.0.5 Safari/537.36'</span>,</span><br><span class="line"> <span class="string">'Accept'</span> => <span class="string">'*/*'</span>,</span><br><span class="line"> <span class="string">'Content-type'</span> => <span class="string">'application/json;charset=UTF-8'</span>,</span><br><span class="line"> <span class="string">'Accept-Language'</span> => <span class="string">'zh-CN'</span>,</span><br><span class="line"> );</span><br><span class="line"><span class="keyword">case</span> <span class="string">'kuwo'</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">array</span>(</span><br><span class="line"><span class="string">'Cookie'</span> => <span class="string">'Hm_lvt_cdb524f42f0ce19b169a8071123a4797=1623339177,1623339183; _ga=GA1.2.1195980605.1579367081; Hm_lpvt_cdb524f42f0ce19b169a8071123a4797=1623339982; kw_token=3E7JFQ7MRPL; _gid=GA1.2.747985028.1623339179; _gat=1'</span>,</span><br><span class="line"> <span class="string">'csrf'</span> => <span class="string">'3E7JFQ7MRPL'</span>,</span><br><span class="line"><span class="string">'Host'</span> => <span class="string">'www.kuwo.cn'</span>,</span><br><span class="line"><span class="string">'Referer'</span> => <span class="string">'http://www.kuwo.cn/'</span>,</span><br><span class="line"><span class="string">'User-Agent'</span> => <span class="string">'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36'</span>,</span><br><span class="line"> );</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br></pre></td></tr></table></figure><p> 我们需要自行更改对应平台的cookie值，然后调用私人api。</p><p> 私人api好处：稳定不会挂，可以听版权音乐，即使是某抑变灰歌曲。</p><p> <meting-js server="netease" type="playlist" id="60198"></meting-js><meting-js server="netease" type="playlist" id="60198"></meting-js></p>]]></content>
<summary type="html"><h2 id="Aplayer-介绍"><a href="#Aplayer-介绍" class="headerlink" title="Aplayer 介绍"></a>Aplayer 介绍</h2><hr>
<p>Aplayer是一个功能强大的HTML5音乐播放器，兼容所有浏览器</summary>
<category term="/折腾日记" scheme="https://old.lzh1.eu.org/categories/%E6%8A%98%E8%85%BE%E6%97%A5%E8%AE%B0/"/>
<category term="music,aplayer,meting" scheme="https://old.lzh1.eu.org/tags/music-aplayer-meting/"/>
</entry>
<entry>
<title>给自己一次机会</title>
<link href="https://old.lzh1.eu.org/2023/04/23/%E7%BB%99%E8%87%AA%E5%B7%B1%E4%B8%80%E6%AC%A1%E6%9C%BA%E4%BC%9A/"/>
<id>https://old.lzh1.eu.org/2023/04/23/%E7%BB%99%E8%87%AA%E5%B7%B1%E4%B8%80%E6%AC%A1%E6%9C%BA%E4%BC%9A/</id>
<published>2023-04-23T11:30:00.000Z</published>
<updated>2024-01-10T04:58:09.792Z</updated>
<content type="html"><![CDATA[<p>2023考研对我来说已经结束了，经过几轮的调剂，还是准备二战了，即使需要面对很大的压力，但我也愿意，真的只差一点点。</p><hr><p>2023/02/25<br> 考研出分啦，一直胆颤心惊，那是一个下午两点，我假装自己睡着，其实一点没睡，直到三点零一分，我打开研招网查成绩，看到300+，以为自己稳了，我想今年疫情这么严重，还有博主说上了考场考完就是上岸，就算卷点也不至于被刷吧！</p><p> 2023/03/01<br> 逐渐意识到问题的严重性了，今年原本想捡漏，却没想到要bbq了，排名直接就是计划外，估计进复试都够呛！</p><p> 2023/03/27<br> 进复试啦，虽然在计划外，但超过复试线十几分，复试的专业课还没看完，淦，开始赶进度了。</p><p> 2023/03/29<br> 到宁波啦，但是预感不太好，主要是排名和复习进度让我很慌！</p><p> 2023/04/03<br> 果然，一志愿被刷了，我真吐了，准备开始调剂。</p><p>2023/04/06<br> 开始调剂，都是已查看没通知，焦虑了开始</p><p> 2023/04/20<br> 去福建参加调剂复试，是真的dog学校，叫了一堆电子信息去，结果一个没录！<br> 辣鸡学校</p><p> 2023到此为止，彻底放弃调剂，也明白了085400的恐怖，调剂连狗都不如，只能一志愿上岸，否则调剂就别想，我总结了下经验，准备好了再出发，我相信只是我的录取通知书比别人晚了一年而已，2024出发！</p>]]></content>
<summary type="html"><p>2023考研对我来说已经结束了，经过几轮的调剂，还是准备二战了，即使需要面对很大的压力，但我也愿意，真的只差一点点。</p>
<hr>
<p>2023&#x2F;02&#x2F;25<br> 考研出分啦，一直胆颤心惊，那是一个下午两点，我假装自己睡着，其实一点没睡，直到三</summary>
<category term="/生活" scheme="https://old.lzh1.eu.org/categories/%E7%94%9F%E6%B4%BB/"/>
<category term="2024,考研,二战" scheme="https://old.lzh1.eu.org/tags/2024-%E8%80%83%E7%A0%94-%E4%BA%8C%E6%88%98/"/>
</entry>
<entry>
<title>2023每天60秒读懂世界_实时更新</title>
<link href="https://old.lzh1.eu.org/2023/02/16/2023%E6%AF%8F%E5%A4%A960%E7%A7%92%E8%AF%BB%E6%87%82%E4%B8%96%E7%95%8C_%E5%AE%9E%E6%97%B6%E6%9B%B4%E6%96%B0/"/>
<id>https://old.lzh1.eu.org/2023/02/16/2023%E6%AF%8F%E5%A4%A960%E7%A7%92%E8%AF%BB%E6%87%82%E4%B8%96%E7%95%8C_%E5%AE%9E%E6%97%B6%E6%9B%B4%E6%96%B0/</id>
<published>2023-02-16T06:47:00.000Z</published>
<updated>2024-01-10T04:59:06.111Z</updated>
<content type="html"><![CDATA[<p>欢迎使用来到 Sterling’s Blog,我将在这里分享一些日常与技术问题，新人小白，不喜勿喷，明天见，天天见！</p><hr><p><img src="https://api.03c3.cn/api/zb" alt="每日早报"></p>]]></content>
<summary type="html"><p>欢迎使用来到 Sterling’s Blog,我将在这里分享一些日常与技术问题，新人小白，不喜勿喷，明天见，天天见！</p>
<hr>
<p><img src="https://api.03c3.cn/api/zb" alt="每日早报"></p>
</summary>
<category term="/早报" scheme="https://old.lzh1.eu.org/categories/%E6%97%A9%E6%8A%A5/"/>
<category term="新闻,每日更新" scheme="https://old.lzh1.eu.org/tags/%E6%96%B0%E9%97%BB-%E6%AF%8F%E6%97%A5%E6%9B%B4%E6%96%B0/"/>
</entry>
<entry>
<title>「netease」关于某云音乐解灰工具的初体验</title>
<link href="https://old.lzh1.eu.org/2023/02/15/%E5%85%B3%E4%BA%8E%E6%9F%90%E4%BA%91%E9%9F%B3%E4%B9%90%E8%A7%A3%E7%81%B0%E5%B7%A5%E5%85%B7%E7%9A%84%E5%88%9D%E4%BD%93%E9%AA%8C/"/>
<id>https://old.lzh1.eu.org/2023/02/15/%E5%85%B3%E4%BA%8E%E6%9F%90%E4%BA%91%E9%9F%B3%E4%B9%90%E8%A7%A3%E7%81%B0%E5%B7%A5%E5%85%B7%E7%9A%84%E5%88%9D%E4%BD%93%E9%AA%8C/</id>
<published>2023-02-15T12:13:00.000Z</published>
<updated>2024-01-10T04:59:16.035Z</updated>
<content type="html"><![CDATA[<pre><code> <h2>0.1 困扰</h2></code></pre><p> </p><p>由于经常被某云版权音乐所困扰，因此up主也一直再找办法去解决这个问题。直到有一天，发现在GitHub有一个博主的项目叫<strong><a href="https://github.com/UnblockNeteaseMusic" target="_blank" rel="nofollow" >UnblockNeteaseMusic，完美解锁网易云音乐客户端变灰歌曲。</a></strong></p><p> </p><h2>1.1 开工研究</h2><p> </p><p> </p><p>首先必须安排我们熟悉的node了，该程序使用node运行。</p><p>没安装的看官需要下载Node.js并且安装，安装时候直接默认设置就行。<a href="https://nodejs.org/zh-cn/download/" target="_blank" rel="nofollow" > Node</a>官网下载地址：https://nodejs.org/zh-cn/download/下载长期维护版就行了。</p><p> </p><h2>1.2 下载官方程序包</h2><p>接下来根据md文件去下载<span class="author flex-self-stretch"><a class="url fn link-instanted" href="https://github.com/UnblockNeteaseMusic" rel="author" data-hovercard-type="organization" data-hovercard-url="/orgs/UnblockNeteaseMusic/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" target="_blank" rel="nofollow" >UnblockNeteaseMusic</a></span><span class="mx-1 flex-self-stretch color-fg-muted">/</span><strong class="mr-2 flex-self-stretch"><a class="link-instanted" href="https://github.com/UnblockNeteaseMusic/server" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" target="_blank" rel="nofollow" >server</a></strong> <a class="link-instanted" href="https://github.com/UnblockNeteaseMusic/server/releases" data-view-component="true" data-turbo-frame="repo-content-turbo-frame" target="_blank" rel="nofollow" >Releases</a> <a href="https://github.com/UnblockNeteaseMusic/server/releases/tag/v0.27.0" aria-current="page" data-view-component="true" data-turbo-frame="repo-content-turbo-frame" target="_blank" rel="nofollow" >v0.27.0</a></p><p>有小伙伴可能GitHub被墙或者很慢，可以使用以下两种方法改善</p><p> </p><h2>1.2.1 油猴插件</h2><h2>gh-proxy+油猴脚本</h2><p data-pid="dzgZMdqc"> 实际上，目前大部分的情况属于GitHub网站可以正常访问，但是图片、文件的加载、release文件的下载和仓库克隆的速度较慢。</p><p data-pid="Czx6A3Bx"> 接下来介绍的两种方式便是针对这些情况的解决方案，也是这篇文章介绍的重点。</p><h3>gh-proxy</h3><p data-pid="-qG6D4v3"> 首先要介绍的是gh-proxy项目。</p><p data-pid="CD6E1ln6">gh-proxy是一个通过镜像站点和CDN，或者cloudflare Worker来加速GitHub的项目。</p><p data-pid="SbEYFTsK">Demo页面：<a class="external link-instanted" href="https://gh.api.99988866.xyz/" target="_blank" rel="nofollow noopener noreferrer" data-za-detail-view-id="1043" rel="nofollow" ><span class="invisible">https://</span><span class="visible">gh.api.99988866.xyz/</span></a></p><p data-pid="w_otHJwO">项目地址：<a class="external link-instanted" href="https://github.com/hunshcn/gh-proxy" target="_blank" rel="nofollow noopener noreferrer" data-za-detail-view-id="1043" rel="nofollow" ><span class="invisible">https://</span><span class="visible">github.com/hunshcn/gh-poxy</span></a></p><h3>油猴脚本gh-proxy-buttons</h3><p data-pid="8-21sRcc">项目地址：<a class="external link-instanted" href="https://github.com/du33169/gh-proxy-buttons" target="_blank" rel="nofollow noopener noreferrer" data-za-detail-view-id="1043" rel="nofollow" ><span class="invisible">https://</span><span class="visible">github.com/du33169/gh-p</span><span class="invisible">roxy-buttons</span></a></p><p data-pid="_4d2rLci">这个油猴脚本利用gh-proxy，可以在GitHub网页实现如下的功能：</p><p data-pid="y4qFGc0B">对于链接和文件，鼠标悬停时显示一个按钮，点击即可通过gh-proxy加速下载；</p><p data-pid="aI0nCX3y">对于仓库地址（HTTPS），点击按钮后复制 带上加速前缀的 仓库地址，clone时可以直接粘贴使用。</p><h2>1.2.2 查ip+修改host</h2><p data-pid="JO40IUMf"> 直接查找真实IP地址，修改hosts文件以避开DNS污染。</p><h3>步骤</h3><ol><li data-pid="yuK6Vv0_">使用<a class=" external" href="https://www.ipaddress.com/" target="_blank" rel="nofollow noopener noreferrer" data-za-detail-view-id="1043" rel="nofollow" ><span class="invisible">https://www.</span><span class="visible">ipaddress.com/</span></a>来查找github的IP（主要是raw.githubusercontent.com）</li><li data-pid="t9lxDZuJ">修改本地hosts文件</li><li data-pid="xpqsqiUf">刷新DNS缓存:<code>ipconfig /flushdns</code></li></ol><p> </p><h2>1.3 写bat脚本</h2><p>所有环境安装完毕后，我们就得开始配置文件咯。</p><p>先写一个bat可执行文件去干他，</p><p>start cmd /k "cd /d C:\本地文件路径...\UnblockNeteaseMusic-master && node app.js -p 代理端口 -f 某易IP"</p><p>本地文件路径:UnblockNeteaseMusic在本地符盘的路径位置</p><p>代理端口:自定义端口（我用的10086 ，就是瞎定义的，但别太靠前占用本地端口，hhhhhh）</p><p>网易IP:ping官网得到的ip地址</p><p> </p><p>配置完成后，会有以下效果图：</p><p><img decoding="async" alt="" data-src="https://blog.lzhtv.cf/wp-content/uploads/2023/01/屏幕截图-2023-01-16-175315.png" class="alignnone size-full wp-image-48 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img decoding="async" class="alignnone size-full wp-image-48" src="https://blog.lzhtv.cf/wp-content/uploads/2023/01/屏幕截图-2023-01-16-175315.png" alt="" /></noscript></p><p> </p><p> </p><p>这就代表我们配置的过程基本结束，最后一步啦</p><p> </p><h2>1.4 更改某易的代理端口</h2><p>打开网易云后，点开设置，往下划拉到http代理</p><p>更改代理ip为127.0.0.1（就是本机），端口为自定义端口（我的是10086），图中不是</p><p><img decoding="async" alt="" data-src="https://blog.lzhtv.cf/wp-content/uploads/2023/01/屏幕截图-2023-01-16-175647.png" class="alignnone size-full wp-image-49 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img decoding="async" class="alignnone size-full wp-image-49" src="https://blog.lzhtv.cf/wp-content/uploads/2023/01/屏幕截图-2023-01-16-175647.png" alt="" /></noscript></p><p> </p><p>然后点测试，出现可用后就确定，重启之后就可以尽情享受啦！（日常白票）</p><p> </p><p> </p><h2> Tips：</h2><p>1.每次启用前，务必开启可执行bat文件，打开代理端口</p><p>2.程序只在某易 2.9.5版本前通过测试，之后就被屏蔽了。所以记得安装<a href="https://xiaodao.lanzoui.com/b0dqa8f6j" target="_blank" rel="nofollow" >某易2.9.5 地址：https://xiaodao.lanzoui.com/b0dqa8f6j</a></p><p>3.原理总结：根据端口后台显示，我发现程序原理就是用其他音乐站进行资源替换，所以可能会出现没有音乐的情况。</p><p> </p><p> </p>]]></content>
<summary type="html"><pre><code> &lt;h2&gt;0.1 困扰&lt;/h2&gt;
</code></pre>
<p>&nbsp;</p>
<p>由于经常被某云版权音乐所困扰，因此up主也一直再找办法去解决这个问题。直到有一天，发现在GitHub有一个博主的项目叫<strong</summary>
</entry>
<entry>
<title>「一研为定」23数二辅导书pdf分享</title>
<link href="https://old.lzh1.eu.org/2022/04/20/2023%E8%80%83%E7%A0%94%E6%95%B0%E4%BA%8C%E8%B5%84%E6%96%99%E5%88%86%E4%BA%AB/"/>
<id>https://old.lzh1.eu.org/2022/04/20/2023%E8%80%83%E7%A0%94%E6%95%B0%E4%BA%8C%E8%B5%84%E6%96%99%E5%88%86%E4%BA%AB/</id>
<published>2022-04-20T11:30:00.000Z</published>
<updated>2024-01-10T04:58:57.306Z</updated>
<content type="html"><![CDATA[<p>欢迎来到lzh-zone，这是属于sterling的独家小站，现在是2022年4月20日19点30分，我将更新我的第7篇blog，这次咱来点资源分享。</p><p>多的不说少的不唠，这次咱直接上干货，目前小编也用某py把考研数学二的pdf资源全部爬过来了，整合一下，弄成了一个没有重复的，全都是新版本的辅导书，张宇武忠祥考虫要啥有啥，直接上货。</p><p><a href="https://pan.baidu.com/s/1KxPClypjsRNFL9Z-edH5PA?pwd=LZH1 ">点击这里！</a> </p><p>注：如跳转不了，可点击下方链接！<br>链接：<a href="https://pan.baidu.com/s/1KxPClypjsRNFL9Z-edH5PA?pwd=LZH1">https://pan.baidu.com/s/1KxPClypjsRNFL9Z-edH5PA?pwd=LZH1</a><br>提取码：LZH1</p><p>感谢各位看官的观看，欢迎下次再来！</p>]]></content>
<summary type="html"><p>欢迎来到lzh-zone，这是属于sterling的独家小站，现在是2022年4月20日19点30分，我将更新我的第7篇blog，这次咱来点资源分享。</p>
<p>多的不说少的不唠，这次咱直接上干货，目前小编也用某py把考研数学二的pdf资源全部爬过来了，整合一下，弄成了</summary>
</entry>
<entry>
<title>「油猴脚本」各大网页VIP视频解析（截止4.14稳定运行）</title>
<link href="https://old.lzh1.eu.org/2022/04/14/%E8%A7%86%E9%A2%91%E8%A7%A3%E6%9E%90/"/>
<id>https://old.lzh1.eu.org/2022/04/14/%E8%A7%86%E9%A2%91%E8%A7%A3%E6%9E%90/</id>
<published>2022-04-14T10:13:00.000Z</published>
<updated>2024-01-10T04:58:47.966Z</updated>
<content type="html"><![CDATA[<p>欢迎来到lzh-zone，这是属于sterling的独家小站，现在是2022年4月14日17点00分，我将更新我的第6篇blog，安装视频解析脚本，通过此脚本就可以实现不充钱看视频拉。</p><p>1.首先确保tampermonkey（如未安装可自行百度，切记只能在谷歌火狐edge等浏览器中运行）运行正常，打开edge或者geogle浏览器右上角集成油猴左击显示已运行。</p><p>2.确保运行正常后，点击<a href="https://www.zhaojiaoben.cn/download/script/753121da107047bb94a2d5ad34da4f43.user.js">视频解析</a> ，再点击安装视频解析自用版。</p><p>3.按照提示安装完毕后，关闭浏览器重启，再打开某奇艺某讯某果视频，选择想看的视频后点击左边的小方块选择可用的线路，即可实现观看视频拉，快去试试吧！</p><p>感谢各位看官的观看，欢迎下次再来！</p>]]></content>
<summary type="html"><p>欢迎来到lzh-zone，这是属于sterling的独家小站，现在是2022年4月14日17点00分，我将更新我的第6篇blog，安装视频解析脚本，通过此脚本就可以实现不充钱看视频拉。</p>
<p>1.首先确保tampermonkey（如未安装可自行百度，切记只能在谷歌火</summary>
</entry>
<entry>
<title>「学习笔记」CSS基础</title>
<link href="https://old.lzh1.eu.org/2022/04/03/css%E5%9F%BA%E7%A1%80/"/>
<id>https://old.lzh1.eu.org/2022/04/03/css%E5%9F%BA%E7%A1%80/</id>
<published>2022-04-03T07:50:00.000Z</published>
<updated>2024-01-10T04:58:40.868Z</updated>
<content type="html"><![CDATA[<p>前言<br>本篇文章着重梳理之前所学的CSS知识点，查漏补缺。同时，试着用git将重点案例存放到远程仓库中，更近一步贴近公司流程。💪💪</p><p>CSS构造块<br>「1. HTML的局限性」</p><p>HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。<br>操作html属性不方便<br>HTML里面添加样式带来的是无尽的臃肿和繁琐<br>「2. CSS网页的美容师」</p><p>让我们的网页更加丰富多彩，布局更加灵活自如。<br>CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS<br>「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。</p><p>作用<br>主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。<br>CSS以HTML为基础，提供了丰富的功能，如字体、样式、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。<br>「4. CSS注释」</p><p>/* 这是注释 */<br>引入CSS样式表<br>「1.行内式(内联样式)」</p><p>通过标签的style属性来设置元素的样式</p><p>style其实就是标签的属性<br>样式属性和值中间是:<br>多组属性值直接用;隔开<br>只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。<br>缺点:没有实现样式和结构相分离。<br><标签名 style=”属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名><br>例如：</p><div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>「2.内部样式表(内嵌样式表)」<p>也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。</p><p>style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。<br>type=”text/css” 在html5中可以省略。<br>只能控制当前的页面<br>缺点:没有彻底分离结构与样式</p><head><style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }</style></head>「3.外部样式表(外链式)」<p>也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。</p><p>rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。<br>href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。</p><link rel="stylesheet" href="index.css">「4.团队约定-代码风格」<p>/<em>1.紧凑格式 (Compact)</em>/<br>h3 { color: deeppink;font-size: 20px;}<br>// 2.一种是展开格式（推荐）<br>h3 {<br> color: deeppink;<br> font-size: 20px;<br>}</p><p>/* 团队约定-代码大小写*/<br>/* 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。*/<br>/* 推荐 */<br>h3{<br> color: pink;<br>}</p><p>/* 不推荐 */<br>H3{<br> COLOR: PINK;<br>}</p><p>CSS基础选择器<br>CSS选择器作用<br>找到指定的HTML页面元素，选择标签。</p><p>CSS基础选择器<br>「1. 标签选择器」</p><p>标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。<br>作用：可以把某一类标签全部选择出来。<br>优点：快速为网页中同类型的标签统一样式<br>缺点：不能设计差异化样式。<br>标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }<br>「2. 类选择器」</p><p>类选择器使用”.”(英文点号)进行标识，后面紧跟类名。<br>语法：类名选择器<br>.类名 {<br> 属性1:属性值1;<br> 属性2:属性值2;<br> 属性3:属性值3;<br>}</p><p class='类名'></p>优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。注意：类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)长名称或词组可以使用中横线来为选择器命名。不要纯数字、中文等命名， 尽量使用英文字母来表示。多类名选择器：各个类名中间用空格隔开。「3. id选择器」id选择器使用#进行标识，后面紧跟id名<p>元素的id值是唯一的，只能对应于文档中某一个具体的元素。<br>#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</p><p id="id名"></p>「4. 通配符选择器」<p>通配符选择器用<em>号表示，</em> 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。</p><p>注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用</p><ul><li><p>{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }<br>例如下面代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。</p></li><li><p>{<br>margin: 0; /* 定义外边距*/<br>padding: 0; /* 定义内边距*/<br>}<br>「5. 基础选择器总结」</p></li></ul><p>选择器作用缺点使用情况用法<br>标签选择器可以选出所有相同的标签，比如p不能差异化选择较多p { color：red;}<br>类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav { color: red; }<br>id选择器一次只能选择器1个标签只能使用一次不推荐使用#nav {color: red;}<br>通配符选择器选择所有的标签选择的太多，有部分不需要不推荐使用* {color: red;}<br>「6. 团队约定-选择器」</p><p>尽量少用通配符选择器 <em>。<br>尽量少用ID选择器<br>不使用无具体语义定义的标签选择器。<br>/</em> 推荐 */<br>.jdc {}<br>li {}<br>p{}</p><p>/* 不推荐 */<br>*{}<br>#jdc {}<br>div{} 因为div 没有语义，我们尽量少用</p><p>CSS复合选择器<br>复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的</p><p>「1. 后代选择器」又称为包含选择器</p><p>用来选择元素或元素组的子孙后代<br>其写法就是把外层标签写在前面，内层标签写在后面，中间用「空格」分隔，先写父亲爷爷，再写儿子孙子。<br>子孙后代都可以这么选择。或者说，它能选择任何包含在内 的标签。<br>父级 子级{属性:属性值;属性:属性值;}</p><p>.class h3 {color:red;font-size:16px;}<br>图片<br>当标签发生嵌套时，内层标签就成为外层标签的后代。<br>子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。<br>「2. 子元素选择器」</p><p>子元素选择器只能选择作为某元素子元素(亲儿子)的元素。<br>其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接<br>这里的子,指的是亲儿子。不包含孙子 重孙子之类。<br>.class>h3 {color:red;font-size:14px;}<br>「3. 交集选择器」</p><p>图片<br>其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。<br>交集选择器是并且的意思,即…又…的意思<br>比如： p.one 选择的是： 类名为 .one 的段落标签。<br>/<em>用的相对来说比较少，不建议使用。</em>/<br>「4. 并集选择器」如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。</p><p>任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分。<br>并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。<br>比如<br>.one,<br>p ,<br>#test {color: #F00;}<br>表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。<br>通常用于集体声明。<br>「5. 链接伪类选择器」</p><p>用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。</p><p>链接伪类，是利用交集选择器.</p><p>a:link 未访问的链接<br>a:visited 已访问的链接<br>a:hover 鼠标移动到链接上<br>a:active 选定的链接<br>实际工作中，很少写全四个状态，一般写法如下：<br>a { /* a是标签选择器 所有的链接 <em>/<br> font-weight: 700;<br> font-size: 16px;<br> color: gray;<br> text-decoration: none; /</em> 清除链接默认的下划线*/<br>}<br>a:hover { /* :hover 是链接伪类选择器 鼠标经过 <em>/<br> color: red; /</em> 鼠标经过的时候，由原来的 灰色 变成了红色 */<br>}<br>「6. 复合选择器总结」</p><p>选择器作用特征使用情况隔开符号及用法<br>后代选择器用来选择元素后代是选择所有的子孙后代较多符号是空格 .nav a<br>子代选择器选择 最近一级元素只选亲儿子较少符号是> .nav>p<br>交集选择器选择两个标签交集的部分既是 又是较少没有符号 p.one<br>并集选择器选择某些相同样式的选择器可以用于集体声明较多符号是逗号 .nav, .header<br>链接伪类选择器给链接更改状态<br>较多重点记住 a{} 和 a:hover 实际开发的写法<br>CSS字体样式<br>font字体<br>「1. font-size」</p><p>font-size属性用于设置字号(字体大小)<br>谷歌浏览器默认的文字大小为16px<br>不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。<br>p { font-size:20px; }<br>单位<br>相对长度单位、绝对长度单位<br>图片「2. font-family」</p><p>font-family属性用于设置哪一种字体。<br>p { font-family:”微软雅黑”;}<br>指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准。<br>p {font-family: Arial,”Microsoft Yahei”, “微软雅黑”;}<br>CSS Unicode字体<br>在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。<br>xp 系统不支持 类似微软雅黑的中文。<br>解决方案：英文来替代。比如font-family:”Microsoft Yahei”。在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。<br>font-family: “\5FAE\8F6F\96C5\9ED1”; 表示设置字体为“微软雅黑”。<br>「3. font-weight」</p><p>属性值描述<br>normal默认值（不加粗的）<br>bold定义粗体（加粗的）<br>100~900400 等同于 normal，而 700 等同于 bold (数字表示粗细用的多)<br>「4. font-weight」</p><p>font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：</p><p>属性作用<br>normal默认值，浏览器会显示标准的字体样式 font-style: normal;<br>italic浏览器会显示斜体的字体样式。<br>「5. font:综合设置字体样式」</p><p>选择器 { font: font-style font-weight font-size/line-height font-family;}<br>注意：使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开<br>其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用。<br>「6. font总结」</p><p>属性表示注意点<br>font-size字号我们通常用的单位是px 像素，一定要跟上单位<br>font-family字体实际工作中按照团队约定来写字体<br>font-weight字体粗细记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位<br>font-style字体样式记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal<br>font字体连写1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现<br>CSS外观属性<br>「1. color」</p><p>color属性用于定义文本的颜色<br>其取值方式有以下3种：</p><p>实际工作中，用16进制的写法是最多的，且我们更喜欢简写方式比如#f0代表红色。<br>表示表示属性值<br>预定义的颜色值red，green，blue，pink<br>十六进制#FF0000，#FF6600，#29D794<br>RGB代码rgb(255,0,0)或rgb(100%,0%,0%)<br>「2.text-align」</p><p>text-align属性用于设置文本内容的水平对齐方式，相当于html中的align对齐属性。</p><p>注意：是让盒子里面的文本内容水平居中， 而不是让盒子居中对齐<br>其可用属性值如下：</p><p>属性解释<br>left左对齐（默认值）<br>right右对齐<br>center居中对齐<br>「3. line-height」line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。</p><p>line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px<br>一般情况下，行距比字号大7–8像素左右就可以了。<br>line-height: 24px;<br>行高测量<br>行高测量方法：图片</p><p>图片行高测量方法行高我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。</p><p>文字的行高等于盒子的高度。行高 = 上距离 + 内容高度 + 下距离<br>上距离和下距离总是相等的，因此文字看上去是垂直居中的。</p><p>图片<br>行高与高度的三种关系<br>如果 行高 等 高度 文字会 垂直居中<br>如果行高 大于 高度 文字会 偏下<br>如果行高小于高度 文字会 偏上<br> /<em>line-height 要设置在font属性下面，否则无效，例如：</em>/<br> height: 80px;<br> text-align: center;<br> font: normal bold 30px “宋体”;<br> line-height: 80px;<br>可以使用display:flex;布局方式让文字水平垂直居中</p><p> display: flex;<br> align-items: center; /* 侧轴对齐方式*/<br> justify-content: center; /* 主轴对齐方式 */<br>「4. text-indent」</p><p>text-indent属性用于设置首行文本的缩进</p><p>其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。<br>建议使用em作为设置单位。<br>1em 就是一个字的宽度。如果是汉字的段落，1em 就是一个汉字的宽度<br>p {<br> /<em>行间距</em>/<br> line-height: 25px;<br> /<em>首行缩进2个字 em 1个em 就是1个字的大小</em>/<br> text-indent: 2em;<br> }<br>「5. text-decoration」文本的装饰</p><p>text-decoration,通常我们用于给链接修改装饰效果</p><p>值描述<br>none默认。定义标准的文本。取消下划线（最常用）<br>underline定义文本下的一条线。下划线 也是我们链接自带的（常用）<br>overline定义文本上的一条线。（不用）<br>line-through定义穿过文本下的一条线。（不常用）<br>「6. CSS外观属性总结」</p><p>属性表示注意点<br>color颜色我们通常用 十六进制 比如 而且是简写形式 #fff<br>line-height行高控制行与行之间的距离<br>text-align水平对齐可以设定文字水平的对齐方式<br>text-indent首行缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;<br>text-decoration文本修饰记住 添加 下划线 underline 取消下划线 none</p><p>标签显示模式(display)<br>标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。</p><p>标签显示模式转换 display<br>块转行内：display:inline;<br>行内转块：display:block;<br>块、行内元素转换为行内块：display: inline-block;<br>「1. 块级元素(block-level)」</p><p>常见的块元素有*<h1>**<h6>*、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。</p><p>块级元素的特点<br>独占一行<br>高度，宽度，外边距以及内边距都可以控制。<br>宽度默认是容器(父级宽度)的100%<br>是一个容器及盒子，里面可以放行内或者块级元素<br>注意：只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div。同理，还有h1~h6，dt,它们都是文字类块级标签，里面不能放其他块级元素。<br>「2. 行内元素(inline-level)」</p><p>有的地方也称为内联元素</p><p>常见的行内元素有/*<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>#等，其中<span>标签最典型的行内元素。</p><p>行内元素的特点<br>相邻行内元素在一行上，一行可以显示多个。<br>高度、宽度直接设置是无效的。<br>默认高度就是它本身内容的宽度。<br>行内元素只能容纳文本或其他行内元素。<br>注意<br>链接里面不能再放链接<br>特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。<br>「3. 行内块元素(inline-block)」</p><p>在行内元素中有几个特殊的标签——<img>、<input >、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。</p><p>行内块元素的特点<br>和相邻行内元素(行内块)在一行上，但是之间会有空白风险。一行可以显示多个<br>默认宽度就是它本身内容的宽度。<br>高度，行高，外边距以及内边距都可以控制。<br>三种模式总结<br>元素模式元素排列设置样式默认宽度包含<br>块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签<br>行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或则其他行内元素<br>行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度</p><p>CSS背景(background)<br>「1. 背景颜色」</p><p>background-color: 颜色值; 默认的值是 transparent 透明的<br>「2. 背景图片(image)」</p><p>语法：<br>background-image : none | url (url) ;<br>例如:<br>background-image: url(images/1.png);<br>「3. 背景平铺（repeat）」</p><p>background-repeat : repeat | no-repeat | repeat-x | repeat-y<br>参数作用<br>repeat背景图像在纵向和横向上平铺（默认的）<br>no-repeat背景图像不平铺<br>repeat-x背景图像在横向上平铺<br>repeat-y背景图像在纵向平铺<br>「4. 背景位置(position)」</p><p>background-position : length || length<br>background-position : position || position<br>参数值<br>length百分数 | 由浮点数字和单位标识符组成的长度值<br>positiontop | center | bottom | left | center | right 方位名词<br>注意：<br>必须先指定background-image属性<br>position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。<br>如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致<br>如果只指定了一个方位名词，另一个值默认居中对齐。<br>如果position 后面是精确坐标， 那么第一个，肯定是 x 第二个一定是y<br>如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中<br>如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标<br>背景简写：<br>background：属性的值的书写顺序官方没有强制的标准。为了可读性，建议如下写：<br>background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;<br>/* 有背景图片背景颜色可以不用写*/<br>background: transparent url(image.jpg) repeat-y scroll center top ;<br>「5. 背景半透明(CSS3)」</p><p>background: rgba(0, 0, 0, 0.3);<br>background: rgba(0, 0, 0, .3);<br>等同于background-color: rgba(0, 0, 0, .3)<br>最后一个参数是alpha 透明度 取值范围 0~1之间<br>我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);<br>注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响<br>低于IE 9的版本不支持<br>盒子半透明 opacity<br>设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度<br>opacity: .2;<br>「6. 背景总结」</p><p>属性作用值<br>background-color背景颜色预定义的颜色值/十六进制/RGB代码<br>background-image背景图片url(图片路径)<br>background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y<br>background-position背景位置length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法<br>background-attachment背景固定还是滚动scroll/fixed<br>背景简写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序<br>背景透明让盒子半透明background: rgba(0,0,0,0.3); 后面必须是 4个值</p><p>CSS三大特性<br>「1. CSS 层叠性」</p><p>图片<br>-概念：</p><p>所谓层叠性是指多种CSS样式的叠加<br>是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉<br>-原则：</p><p>样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。<br>样式不冲突，不会层叠。<br>「2. CSS 继承性」</p><p>图片-概念：</p><p>子标签会继承父标签的某些样式，如文本颜色和字号。<br>想要设置一个可继承的属性，只需将它应用于父元素即可。<br>-注意：</p><p>恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。<br>子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）<br>「3. CSS 优先级(CSS特殊性)」</p><p>图片-概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，</p><p>选择器相同，则执行层叠性<br>选择器不同，就会出现优先级的问题。<br>-权重计算公式：</p><p>标签选择器计算权重公式<br>继承或者 *0,0,0,0<br>每个元素（标签选择器）0,0,0,1<br>每个类，伪类0,0,1,0<br>每个ID0,1,0,0<br>每个行内样式 style=””1,0,0,0<br>每个!important 最重要的∞ 无穷大<br>值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。<br>关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）<br>div { color: pink !important; }<br>-权重叠加：</p><p> div ul li ——> 0,0,0,3<br> .nav ul li ——> 0,0,1,2<br> a:hover —–—> 0,0,1,1<br> .nav a ——> 0,0,1,1<br>-继承的权重是0：</p><p>我们修改样式，一定要看该标签有没有被选中<br>如果选中了，那么以上面的公式来计权重。谁大听谁的。<br>如果没有选中，那么权重是0，因为继承的权重为0.</p><p>盒子模型<br>css学习三大重点： css 盒子模型 、 浮动 、 定位 </p><p>网页布局的本质</p><p>首先利用CSS设置好盒子的大小，然后摆放盒子的位置。<br>最后把网页元素比如文字图片等等，放入盒子里面。</p><ol><li>盒子模型(Box Model)<br>盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。<br>盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。<br>盒子里面的文字和图片等元素是 内容区域<br>盒子的厚度 我们称为为盒子的边框<br>盒子内容与边框的距离是内边距<br>盒子与盒子之间的距离是外边距<br>W3c标准盒子模型</li></ol><p>标准 w3c 盒子模型的范围包括 margin、border、padding、content</p><p>当设置为box-sizing: content-box;时，将采用标准模式解析计算，也是默认模式；</p><p>内盒尺寸计算(元素实际大小)</p><p>宽度：Element Height = content height + padding + border （Height为内容高度）<br>高度：Element Width = content width + padding + border （Width为内容宽度）<br>盒子的实际大小：内容的宽度和高度 + 内边距 + 边框 图片IE盒子模型<br>IE 盒子模型的 content 部分包含了 border 和 pading</p><p>当设置为box-sizing: border-box时，将采用怪异模式解析计算；</p><ol start="2"><li>盒子边框(border)<br>属性作用<br>border-width定义边框粗细，单位是px<br>border-style边框的样式<br>border-color边框颜色<br>边框的样式：</li></ol><p>none：没有边框即忽略所有边框的宽度（默认值）<br>solid：边框为单实线(最为常用的)<br>dashed：边框为虚线<br>dotted：边框为点线<br>边框综合设置<br>border : border-width || border-style || border-color </p><p>border: 1px solid red; 没有顺序要求<br>盒子边框写法总结表：</p><p>很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。</p><p>上边框下边框左边框右边框<br>border-top-style:样式;border-bottom-style:样式;border-left-style:样式;border-right-style:样式;<br>border-top-width:宽度;border- bottom-width:宽度;border-left-width:宽度;border-right-width:宽度;<br>border-top-color:颜色;border- bottom-color:颜色;border-left-color:颜色;border-right-color:颜色;<br>border-top:宽度 样式 颜色;border-bottom:宽度 样式 颜色;border-left:宽度 样式 颜色;border-right:宽度 样式 颜色;<br>表格的细线边框：</p><p>图片<br>通过表格的cellspacing=”0”,将单元格与单元格之间的距离设置为0，<br>但是两个单元格之间的边框会出现重叠，从而使边框变粗<br>通过css属性：table{ border-collapse:collapse; }<br>collapse 单词是合并的意思,border-collapse: collapse;表示相邻边框合并在一起。</p><style> table { width: 500px; height: 300px; border: 1px solid red; } td { border: 1px solid red; text-align: center; } table, td { border-collapse: collapse; /*合并相邻边框*/ }</style><ol start="2"><li>内边距(padding)<br>padding属性用于设置内边距。是指边框与内容之间的距离。</li></ol><p>设置</p><p>属性作用<br>padding-left左内边距<br>padding-right右内边距<br>padding-top上内边距<br>padding-bottom下内边距<br>padding简写</p><p>值的个数表达意思<br>1个值padding：上下左右内边距;<br>2个值padding: 上下内边距 左右内边距 ；<br>3个值padding：上内边距 左右内边距 下内边距；<br>4个值padding: 上内边距 右内边距 下内边距 左内边距 ；<br>当我们给盒子指定padding值之后， 发生了2件事情：</p><p>内容和边框 有了距离，添加了内边距。<br>盒子会变大<br>解决措施：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。</p><p>padding不影响盒子大小情况：👉如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。</p><ol start="3"><li>外边距（margin）<br>margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离</li></ol><p>设置</p><p>属性作用<br>margin-left左外边距<br>margin-right右外边距<br>margin-top上外边距<br>margin-bottom下外边距<br>margin值的简写 （复合写法）代表意思 跟 padding 完全相同。</p><p>块级盒子水平居中</p><p>盒子必须指定宽度（width）<br>然后就给左右的外边距都设置为auto<br>实际工作中常用这种方式进行网页布局，示例代码如下：</p><p>.header { width: 960px; margin: 0 auto;}<br>常见的写法，以下下三种都可以👇👇。</p><p>margin-left: auto; margin-right: auto;<br>margin: auto;<br>margin: 0 auto;<br>文字居中和盒子居中区别👇👇</p><p>盒子内的文字水平居中是 text-align: center; 而且还可以让 行内元素和行内块居中对齐<br>块级盒子水平居中 左右margin 改为 auto<br>插入图片和背景图片区别👇👇</p><p>插入图片我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin<br>背景图片我们一般用于小图标背景或者超大背景图片、背景图片，移动位置只能通过 background-position<br>清除元素的默认内外边距👇👇</p><p>行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。</p><ul><li>{<br> padding:0; /* 清除内边距 <em>/<br> margin:0; /</em> 清除外边距 */<br>}<br>4.外边距合并<br>使用margin定义块元素的「垂直外边距」时，可能会出现外边距的合并。</li></ul><p>(1). 相邻块元素垂直外边距的合并<br>当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom<br>下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和<br>「取两个值中的较大者」这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。<br>图片「解决方案：尽量给只给一个盒子添加margin值」。</p><p>(2). 嵌套块元素垂直外边距的合并（塌陷）<br>对于两个嵌套关系的块元素，如果父元素没有上内边距及边框<br>父元素的上外边距会与子元素的上外边距发生合并<br>合并后的外边距为两者中的较大者<br>图片「解决方案：」</p><p>可以为父元素定义上边框。<br>可以为父元素定义上内边距<br>可以为父元素添加overflow: hidden。<br>还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。</p><p>盒子模型布局稳定性<br>优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）</p><p>width > padding > margin<br>原因：</p><p>margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。<br>padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。<br>width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。<br>5. CSS3 新增<br>圆角边框：</p><p>border-radius:length;</p><p>border-top-left-radius 定义了左上角的弧度<br>border-top-right-radius 定义了右上角的弧度<br>border-bottom-right-radius 定义了右下角的弧度<br>border-bottom-left-radius 定义了左下角的弧度<br>其中每一个值可以为 数值或百分比的形式。<br>技巧：让一个正方形 变成圆圈<br>border-radius: 50%;<br>图片如果要在四个角上一一指定，可以使用以下规则👇👇：</p><p>border-radius: 左上角 右上角 右下角 左下角;<br>四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。<br>三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角<br>两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角<br>一个值：四个圆角值相同<br>盒子阴影(box-shadow)：</p><p>box-shadow: offset-x offset-y [blur [spread]] [color] [inset]<br>值描述<br>offset-x阴影的水平偏移量。正数向右偏移，负数向左偏移。<br>offset-y阴影的垂直偏移量。正数向下偏移，负数向上偏移。<br>blur可选。阴影模糊距离，不能取负数。<br>spread可选。阴影大小<br>color可选。阴影的颜色<br>inset可选。表示添加内阴影，默认为外阴影<br>div {<br> width: 200px;<br> height: 200px;<br> border: 10px solid red;<br> /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); <em>/<br> /</em> box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */<br> box-shadow: 0 15px 30px rgba(0, 0, 0, .4);<br>}</p><p>浮动<br>浮动<br>「1. CSS布局的三种机制」</p><p>网页布局的核心——就是用CSS来摆放盒子。</p><p>CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：</p><p>A. 普通流（标准流）</p><p>块级元素会独占一行，从上向下顺序排列；<br>常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table<br>行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；<br>常用元素：span、a、i、em等<br>B. 浮动</p><p>让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。<br>C. 定位</p><p>将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。<br>「2. 什么是浮动」元素的浮动是指设置了浮动属性的元素会</p><p>脱离标准普通流的控制,不占位置，脱标<br>移动到指定位置。<br>作用<br>让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。<br>可以实现盒子的左右对齐等等。<br>浮动最早是用来控制图片，实现文字环绕图片效果。<br>float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。<br>语法<br>选择器 { float: 属性值; }<br>属性值描述<br>none元素不浮动（默认值）<br>left元素向左浮动<br>right元素向右浮动</p><p>浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。<br>建议:如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题</p><p>图片<br>浮动(float)小结</p><p>特点说明<br>浮加了浮动的盒子「是浮起来」的，漂浮在其他标准流盒子的上面。<br>漏加了浮动的盒子「是不占位置的」，它原来的位置「漏给了标准流的盒子」。<br>特「特别注意」：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙<br>清除浮动<br>因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。图片图片总结：</p><p>由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响<br>准确地说，并不是清除浮动，而是清除浮动后造成的影响<br>清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了</p><p>清除浮动的方法<br>选择器 { clear: 属性值; } clear 清除<br>属性值描述<br>left不允许左侧有浮动元素（清除左侧浮动的影响）<br>right不允许右侧有浮动元素（清除右侧浮动的影响）<br>both同时清除左右两侧浮动的影响<br>实际工作中,几乎只用clear: both</p><p>1).额外标签法(隔墙法)</p><p>是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。</p><p>优点：通俗易懂，书写方便<br>缺点：添加许多无意义的标签，结构化较差。<br>2).父级添加overflow属性方法</p><p>可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。<br>优点： 代码简洁<br>缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。<br>3).使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了</p><pre><code>.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}/* IE6、7 专有 */.clearfix { *zoom: 1;} </code></pre><p>优点：符合闭合浮动思想 结构语义化正确<br>缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。<br>4).使用双伪元素清除浮动</p><pre><code>.clearfix:before,.clearfix:after { content: ""; display: table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1;}</code></pre><p>优点： 代码更简洁<br>缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。<br>清除浮动总结<br>什么时候用清除浮动呢？</p><p>父级没高度<br>子盒子浮动了<br>影响下面布局了，我们就应该清除浮动了。</p><p>清除浮动的方式优点缺点<br>额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差。<br>父级overflow:hidden;书写简单溢出隐藏<br>父级after伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题<br>父级双伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题<br>CSS属性书写顺序<br>建议遵循以下顺序：</p><p>布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）</p><p>自身属性：width / height / margin / padding / border / background</p><p>文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word</p><p>其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …</p><p>.jdc {<br> display: block;<br> position: relative;<br> float: left;<br> width: 100px;<br> height: 100px;<br> margin: 0 10px;<br> padding: 20px 0;<br> font-family: Arial, ‘Helvetica Neue’, Helvetica, sans-serif;<br> color: #333;<br> background: rgba(0,0,0,.5);<br> -webkit-border-radius: 10px;<br> -moz-border-radius: 10px;<br> -o-border-radius: 10px;<br> -ms-border-radius: 10px;<br> border-radius: 10px;<br>}</p><p>定位(position)<br>「1. 定位详解」</p><p>将盒子「定」在某一个「位」置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。</p><p>所以，我们脑海应该有三种布局机制的上下顺序👇👇<br>标准流在最底层 (海底) ——- 浮动 的盒子 在 中间层 (海面) ——- 定位的盒子 在 最上层 （天空）</p><p>定位是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的「边偏移」：（方位名词）</p><p>边偏移属性示例描述<br>toptop: 80px「顶端」偏移量，定义元素相对于其父元素「上边线的距离」。<br>bottombottom: 80px「底部」偏移量，定义元素相对于其父元素「下边线的距离」。<br>leftleft: 80px「左侧」偏移量，定义元素相对于其父元素「左边线的距离」。<br>rightright: 80px「右侧」偏移量，定义元素相对于其父元素「右边线的距离」<br>图片<br>「2. 定位模式(position)」在 CSS 中，通过 position 属性定义元素的「定位模式」，语法如下：</p><p>选择器 { position: 属性值; }<br>值语义<br>static「静态」定位<br>relative「相对」定位<br>absolute「绝对」定位<br>fixed「固定」定位<br>「3. 静态定位(static)」</p><p>静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。<br>静态定位 按照标准流特性摆放位置。它没有边偏移。<br>静态定位在布局时几乎不用<br>「4. 相对定位(relative)」</p><p>相对定位是元素相对于它原来在标准流中的位置来说的。图片<br>相对于自己原来在标准流中位置来移动的<br>原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。<br>「5. 绝对定位(absolute)」</p><p>绝对定位是元素以带有定位的父级元素来移动位置</p><p>完全脱表–完全不占位置；<br>父元素没有定位，则以浏览器为准定位(Document文档)。<br>图片<br>父元素有定位<br>图片<br>定位口诀–子绝父相<br>「6. 固定定位(fixed)」</p><p>固定定位是绝对定位的一种特殊形式;</p><p>完全脱标–完全不占位置；<br>只认浏览器的可视窗口–浏览器可视窗口+边偏移属性来设置元素的位置<br>跟父元素没有任何关系；单独使用<br>不随滚动条滚动<br>定位(position)的扩展<br>绝对定位的盒子居中<br>绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要向实现水平居中，可以按照下面的方法：</p><p>图片<br>left : 50%:让盒子的左侧移动到父级元素的水平中心位置；<br>margin-left: -100px;让盒子向左移动自身宽度的一半。<br>同理垂直居中。<br>堆叠顺序（z-index）<br>在使用「定位」布局时，可能会「出现盒子重叠的情况」。</p><p>加了定位的盒子，默认「后来者居上」， 后面的盒子会压住前面的盒子。</p><p>应用 z-index 层叠等级属性可以「调整盒子的堆叠顺序」。如下图所示：</p><p>图片z-index的特性如下:</p><p>属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；<br>如果属性值相同，则按照书写顺序，后来居上；<br>数字后面不能加单位<br>z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。<br>定位改变display属性<br>前面提过， display 是 显示模式， 可以通过以下方式改变显示模式:</p><p>可以用inline-block 转换为行内块<br>可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）<br>绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。<br>所以说， 一个行内的盒子，如果加了「浮动」、「固定定位」和「绝对定位」，不用转换，就可以给这个盒子直接设置宽度和高度等。</p><p>定位小结<br>定位模式是否脱标占有位置移动位置基准模式转换（行内块）使用情况<br>静态static不脱标，正常模式正常模式不能几乎不用<br>相对定位relative不脱标，占有位置相对自身位置移动不能基本单独使用<br>绝对定位absolute完全脱标，不占有位置相对于定位父级移动位置能要和定位父级元素搭配使用<br>固定定位fixed完全脱标，不占有位置相对于浏览器移动位置能单独使用，不需要父级<br>注意：</p><p>边偏移 需要和 定位模式 联合使用，单独使用无效；<br>top 和 bottom 不要同时使用；<br>left 和 right 不要同时使用。</p><p>CSS高级技巧<br>元素的显示与隐藏<br>目的:让一个元素在页面中消失或者显示出来</p><p>场景:类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！</p><p>1.1 display 显示（重点）<br>display设置或检索对象是否显示或如何显示。</p><p>display: none 隐藏对象<br>特点：隐藏之后，不再保留位置。<br>display: block 除了转换为块级元素之外，同时还有显示元素的意思。<br>图片实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛</p><p>1.2 visibility 可见性<br>设置或检索是否显示对象</p><p>visibility：visible ; 对象可视</p><p>visibility：hidden; 对象隐藏<br>特点：隐藏之后，继续保留原有位置。<br>图片<br>1.3 overflow 溢出<br>检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。</p><p>属性值描述<br>visible不剪切内容也不添加滚动条<br>hidden不显示超过对象尺寸的内容，超出的部分隐藏掉<br>scroll不管超出内容否，总是显示滚动条<br>auto超出自动显示滚动条，不超出不显示滚动条<br>图片实际开发场景：</p><p>清除浮动<br>隐藏超出内容，隐藏掉, 不允许内容超过父盒子。<br>1.4 显示与隐藏总结<br>属性区别用途<br>display隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛<br>visibility隐藏对象，保留位置使用较少<br>overflow只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围<br>CSS用户界面样式<br>所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。</p><p>更改用户的鼠标样式<br>表单轮廓等。<br>防止表单域拖拽<br>2.1 鼠标样式<br>设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。</p><p>属性值描述<br>default小白 默认<br>pointer小手<br>move移动<br>text文本<br>not-allowed禁止</p><ul> <li style="cursor:default">我是小白</li> <li style="cursor:pointer">我是小手</li> <li style="cursor:move">我是移动</li> <li style="cursor:text">我是文本</li> <li style="cursor:not-allowed">我是文本</li></ul>2.2 轮廓线 outline图片是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。<p>outline : outline-color ||outline-style || outline-width<br>但是我们都不关心可以设置多少，我们平时都是去掉的。<br>最直接的写法是 ： outline: 0; 或者 outline: none;</p><p>2.3 防止拖拽文本域resize<br>图片</p><textarea style="resize: none;"></textarea><p>2.4 用户界面样式总结<br>属性用途用途<br>鼠标样式更改鼠标样式cursor样式很多，重点记住 pointer<br>轮廓线表单默认outlineoutline 轮廓线，我们一般直接去掉，border是边框，我们会经常用<br>防止拖拽主要针对文本域resize防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none<br>vertical-align 垂直对齐<br>有宽度的块级元素居中对齐，是margin: 0 auto;<br>让文字居中对齐，是 text-align: center;<br>vertical-align 垂直对齐，它只针对于「行内元素」或者「行内块元素」</p><p>图片<br>设置或检索对象内容的垂直对其方式。<br>vertical-align : baseline |top |middle |bottom<br>注意：</p><p>vertical-align 不影响块级元素中的内容对齐，它只针对于「行内元素」或者「行内块元素」，</p><p>特别是行内块元素， 通常用来控制图片/表单与文字的对齐。</p><p>3.1 图片、表单和文字对齐<br>我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。</p><p>图片<br>图片<br>3.2 去除图片底侧空白缝隙<br>图片原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。</p><p>就是图片底侧会有一个空白缝隙。</p><p>解决方法：</p><p>给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。<br>图片<br>给img 添加 display：block; 转换为块级元素就不会存在问题了。<br>溢出的文字省略号显示<br>4.1 white-space<br>white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容<br>white-space:normal ；默认处理方式</p><p>white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。<br>4.2 text-overflow 文字溢出<br>设置或检索是否使用一个省略标记（…）标示对象内文本的溢出<br>text-overflow : clip ；不显示省略标记（…），而是简单的裁切 </p><p>text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（…）<br>「注意」：</p><p>一定要首先强制一行内显示，再次和overflow属性 搭配使用</p><p>图片<br>4.3 总结三步曲<br> /<em>1. 先强制一行内显示文本</em>/<br> white-space: nowrap;<br> /<em>2. 超出的部分隐藏</em>/<br> overflow: hidden;<br> /<em>3. 文字用省略号替代超出的部分</em>/<br> text-overflow: ellipsis;<br>CSS精灵技术（sprite)<br>CSS精灵技术（也称CSS Sprites、CSS雪碧）。图片</p><p>图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。<br>然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。<br>为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。</p><p>5.1 精灵技术讲解<br>CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。</p><p>图片这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。</p><p>我们需要使用CSS的:</p><p>background-image、<br>background-repeat<br>background-position属性进行背景定位，<br>其中最关键的是使用background-position 属性精确地定位。<br>5.2 精灵技术使用的核心总结<br>首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。</p><p>精确测量，每个小背景图片的大小和 位置。<br>给盒子指定小背景图片时， 背景定位基本都是 负值。<br>滑动门<br>图片<br>6.1 滑动门出现的背景<br>制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？</p><p>图片为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。</p><p>6.2 核心技术<br>核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。</p><p>一般的经典布局都是这样的：</p><li> <a href="#"> <span>导航栏内容</span> </a></li>* { padding:0; margin:0;<p> }<br> body{<br> background: url(images/wx.jpg) repeat-x;<br> }<br> .father {<br> padding-top:20px;<br> }<br> li {<br> padding-left: 16px;<br> height: 33px;<br> float: left;<br> line-height: 33px;<br> margin:0 10px;<br> background: url(./images/to.png) no-repeat left ;<br> }<br> a {<br> padding-right: 16px;<br> height: 33px;<br> display: inline-block;<br> color:#fff;<br> background: url(./images/to.png) no-repeat right ;<br> text-decoration: none;<br> }<br> li:hover,<br> li:hover a {<br> background-image:url(./images/ao.png);<br> }<br>总结：</p><p>a 设置 背景左侧，padding撑开合适宽度。<br>span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。<br>之所以a包含span就是因为 整个导航都是可以点击的。<br>CSS 三角形<br>div {</p><pre><code>width: 0; height: 0;line-height:0；font-size: 0;</code></pre><p> border-top: 10px solid red;</p><p> border-right: 10px solid green;</p><p> border-bottom: 10px solid blue;</p><p> border-left: 10px solid #000; </p><pre><code> }</code></pre><p>图片<br>我们用css 边框可以模拟三角效果<br>宽度高度为0<br>我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了<br>为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;</p>]]></content>
<summary type="html"><p>前言<br>本篇文章着重梳理之前所学的CSS知识点，查漏补缺。同时，试着用git将重点案例存放到远程仓库中，更近一步贴近公司流程。💪💪</p>
<p>CSS构造块<br>「1. HTML的局限性」</p>
<p>HTML满足不了设计者的需求，可以将网页结构与样式相分离，</summary>
</entry>
<entry>
<title>「学习笔记」HTML基础</title>
<link href="https://old.lzh1.eu.org/2022/04/03/html%E7%AC%94%E8%AE%B0/"/>
<id>https://old.lzh1.eu.org/2022/04/03/html%E7%AC%94%E8%AE%B0/</id>
<published>2022-04-03T07:50:00.000Z</published>
<updated>2024-01-10T04:58:34.588Z</updated>
<content type="html"><![CDATA[<p>前言<br> 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:”再次翻开笔记是什么感觉”，我的回答是:”初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。💖💖<br> 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨<br> 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。💪💪开始充电之旅啦~~~</p><p>一、认识WEB<br>「网页」主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。</p><p>「浏览器」是网页显示、运行的平台。</p><p>「浏览器内核」(排版引擎、解释引擎、渲染引擎)</p><p>负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。</p><p>浏览器内核备注<br>IETridentIE、猎豹安全、360极速浏览器、百度浏览器<br>firefoxGecko可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。<br>Safariwebkit现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。<br>chromeChromium/Blink在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发<br>Operablink现在跟随chrome用blink内核。<br>Web标准<br>「构成」👉 结构标准，表现标准和行为标准</p><p>结构标准用于对网页元素进行整理和分类(HTML)<br>表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)<br>行为标准用于对网页模型的定义及交互的编写(JavaScript)<br>「Web标准的优点」👇</p><p>易于维护：只需更改CSS文件，就可以改变整站的样式<br>页面响应快：HTML文档体积变小，响应时间短<br>可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别<br>设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式<br>搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名</p><p>二、HTML初识<br>HTML初识<br>「HTML」(Hyper Text Markup Language):超文本标记语言</p><p>「所谓超文本，有2层含义：」</p><p>因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）<br>不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。<br>「HTML骨架格式」</p><!-- 页面中最大的标签 根标签 --><html> <!-- 头部标签 --> <head> <!-- 标题标签 --> <title></title> </head> <!-- 文档的主体 --> <body> </body></html>「团队约定大小写」<p>HTML标签名、类名、标签属性和大部分属性值统一用小写<br>「HTML元素标签分类」</p><p>常规元素(双标签)<br>空元素(单标签)<br> 常规元素(双标签)<br> <标签名> 内容 </标签名> 比如<body>我是文字</body></p><p> 空元素(单标签)<br> <标签名 /> 比如 <br />或<br><br>「HTML标签关系」</p><p>嵌套关系父子级包含关系<br>并列关系兄弟级并列关系<br>如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。<br>文档类型<!DOCTYPE ><br>「文档类型」用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。</p><p>页面语言lang<br>lang指定该html标签内容所用的语言</p> <html lang="en"> en 定义语言为英语 zh-CN定义语言为中文「lang的作用」<p>根据根据lang属性来设定不同语言的css样式，或者字体<br>告诉搜索引擎做精确的识别<br>让语法检查程序做语言识别<br>帮助翻译工具做识别<br>帮助网页阅读程序做识别<br>字符集<br>「字符集」(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。</p><p>UTF-8是目前最常用的字符集编码方式<br>让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。<br> <meta charset="UTF-8" /><br>「meta viewport的用法」<br> 通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口</p><pre><code>meta有两个属性name 和 http-equiv</code></pre><p>name属性的取值</p><p>keywords(关键字) 告诉搜索引擎，该网页的关键字<br>description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。<br>viewport(移动端的窗口)<br>robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引<br>author(作者)<br>generator(网页制作软件）<br>copyright(版权)<br>http-equiv有以下参数</p><p>http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容</p><p>content-Type 设定网页字符集(Html4用法，不推荐)<br>Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。<br>Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出<br>Refresh(刷新),自动刷新并指向新页面。<br>cache-control（请求和响应遵循的缓存机制）</p><meta name="viewport" content="width=device-width, initial-scale=1.0">HTML标签的语义化方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页「拓展」 标签：规定页面上所有链接的默认 URL 和设置整体链接的打开状态<head> <base href="http://www.baidu.com" target="_blank"> <base target="_self"></head><body> <a href="">测试</a> 跳转到 百度</body><p>HTML常用标签<br>常用标签<br>「1. 排版标签」主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。</p><p>标题标签h(h1~h6)<br>段落标签p,可以把 HTML 文档分割为若干段落<br>水平线标签hr<br>换行标签br<br>div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。<br>「2. 排版标签」</p><p>b和strong 文字以粗体显示<br>i和em 文字以斜体显示<br>s和del 文字以加删除线显示<br>u和ins 文字以加下划线显示<br>「3. 标签属性(行内式)」</p><p>使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。</p><p><标签名 属性1=”属性值1” 属性2=”属性值2” …> 内容 </标签名><br><手机 颜色=”红色” 大小=”5寸”> </手机><br>「4. 图像标签img」</p><p>图片注意：</p><p>标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。<br>属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。<br>采取 键值对 的格式 key=”value” 的格式<br><img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br>「5. 链接标签(重点)」</p><p><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a><br>target=”_self” 默认窗口弹出方式<br>target=”_blank” 新窗口弹出<br>属性作用<br>href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能<br>target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。<br>src 和 href 的区别</p><p>一句话概括:src 是引入资源的 href 是跳转url的</p><p>src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。<br>src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。<br>href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。<br>注意：</p><p>外部链接 需要添加 http:// <a href="http://www.baidu.com/">www.baidu.com</a><br>内部链接 直接链接内部页面名称即可 比如 < a href=”index.html”> 首页<br>如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。<br>不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。<br>锚点定位：通过创建锚点链接，用户能够快速定位到目标内容。</p><ol><li><p>使用相应的id名标注跳转目标的位置。 (找目标)</p> <h3 id="two">第2集</h3> </li><li><p>使用<a href="#id名">链接文本</a>创建链接文本（被点击的） </p> <a href="#two"> 「6. 注释标签」</li></ol> <!-- 注释语句 --> <p> 快捷键是： ctrl + /<br> 或者 ctrl +shift + /<br>团队约定：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行</p><p>「7. 路径」</p><p>图片「8. 其他知识」</p><p>预格式化文本pre标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。格式化文本就是 ，按照我们预先写好的文字格式来显示页面， 保留空格和换行等。</p><p>特殊字符图片什么是XHTML</p><p>XHTML 指「可扩展超文本标签语言」（EXtensible HyperText Markup Language）。<br>XHTML 的目标是取代 HTML。<br>XHTML 与 HTML 4.01 几乎是相同的。<br>XHTML 是更严格更纯净的 HTML 版本。<br>XHTML 是作为一种 XML 应用被重新定义的 HTML,是严格版本的HTML。例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。<br>XHTML 是一个 W3C 标准。</p><p>写HTML代码时应注意什么？</p><p>尽可能少的使用无语义的标签div和span；<br>在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；<br>不要使用纯样式标签，如：b、font、u等，改用css设置。<br>需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；<br>使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；<br>表单域要用fieldset标签包起来，并用legend标签说明表单的用途；<br>每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for来让说明文本和相对应的input关联起来。<br>表格<br>「1. 表格」</p><p>现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。</p><p>「2. 创建表格」</p><table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>table、tr、td，他们是创建表格的基本标签，缺一不可<p>table用于定义一个表格标签。<br>tr标签 用于定义表格中的行，必须嵌套在 table标签中。<br>td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。<br>字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。图片<br>表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。</p><p>图片<br>表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。你是风儿我是沙</p><table> <caption>我是表格标题</caption></table>「3. 表格属性」<p>图片三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0</p><p>「4. 合并单元格」,合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。</p><p>跨行合并：rowspan=”合并单元格的个数”<br>跨列合并：colspan=”合并单元格的个数”<br>「5. 总结表格」</p><p>标签名定义说明</p><table></table>表格标签就是一个四方的盒子<tr></tr>表格行标签行标签要再table标签内部才有意义<td></td>单元格标签单元格标签是个容器级元素，可以放任何东西<th></th>表头单元格标签它还是一个单元格，但是里面的文字会居中且加粗<caption></caption>表格标题标签表格的标题，跟着表格一起走，和表格居中对齐clospan 和 rowspan合并属性用来合并单元格的「6. 表格划分结构」<pre><code>对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构。</code></pre><p>注意：<br>1.<thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签！<br>2. <tbody></tbody>：用于定义表格的主体。放数据本体 。<br>3. <tfoot></tfoot>放表格的脚注之类。<br>4. 以上标签都是放到table标签中。</p><p>列表<br>「列表ul」容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。</p><p>列表最大的特点就是整齐 、整洁、 有序，跟表格类似，但是它可组合自由度会更高。</p><p>「1. 无序列表 ul」</p><ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ......</ul>「2. 有序列表 ol」<ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。常用的type属性值分别为是1，a，A，i，I<ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。<ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。<ol type="A"> <li>列表项1</li> <li>列表二</li> <li>列表三</li></ol>「2. 自定义列表 dl」<p>定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。</p><dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ...</dl>图片<p>表单<br>在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。</p><p>图片表单控件：<br> 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。<br>提示信息：<br> 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。<br>表单域：<br> 它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。</p><p>「1. input 控件」</p><input type="属性值" value="你好">input 输入的意思<input />标签为单标签type属性设置不同的属性值用来指定不同的控件类型除了type属性还有别的属性常用属性：<p>图片<br>用户名: <input type="text" /><br>密 码：<input type="password" /><br>value属性</p><p>value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。<br>用户名:<input type="text" name="username" value="请输入用户名"><br>name属性</p><p>name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。<br>name属性后面的值，是我们自己定义的。<br>radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦<br>name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。<br><input type="radio" name="sex" />男<br><input type="radio" name="sex" />女<br>checked属性</p><p>表示默认选中状态。 较常见于 单选按钮和复选按钮。<br>性 别:<br><input type="radio" name="sex" value="男" checked="checked" />男<br><input type="radio" name="sex" value="女" />女<br>input 属性小结</p><p>属性说明作用<br>type表单类型用来指定不同的控件类型<br>value表单值表单里面默认显示的文本<br>name表单名字页面中的表单很多，name主要作用就是用于区别不同的表单。<br>checked默认选中表示那个单选或者复选按钮一开始就被选中了<br>「2. label标签」</p><p>label 标签为 input 元素定义标注（标签）。<br>label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。<br>作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。</p><p>如何绑定元素呢</p><p>第一种用法就是用label标签直接包含input表单， 适合单个表单选择<br>第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。<br> 第一种<br> <label> 用户名：<br> <input type="radio" name="usename" value="请输入用户名"><br> </label></p><p> 第二种<br> <label for="sex">男</label><br> <input type="radio" name="sex" id="sex"><br>「3. textarea控件(文本域)」</p><p>通过textarea控件可以轻松地创建多行文本输入框.<br>cols=”每行中的字符数” rows=”显示的行数” 我们实际开发不用<br>图片<br> <textarea ><br> 文本内容<br> </textarea><br>文本框和文本域区别</p><p>表单名称区别默认值显示用于场景<br>input type=”text”文本框只能显示一行文本单标签，通过value显示默认值用户名、昵称、密码等<br>textarea文本域可以显示多行文本双标签，默认值写到标签中间留言板<br>「4. select下拉列表」</p><p>如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。<br>在option 中定义selected =” selected “时，当前项即为默认选中项。<br>我们实际开发会用的比较少<br>图片<br><select></p> <option>选项1</option> <option>选项2</option> <option>选项3</option> ...</select>form表单域收集的用户信息怎么传递给服务器？通过form表单域目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>常用属性：<p>每个表单都应该有自己表单域。后面学 ajax 后台交互的时候，必须需要form表单域。<br>属性属性值作用<br>actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。<br>methodget/post用于设置表单数据的提交方式，其取值为get或post。<br>name名称用于指定表单的名称，以区分同一个页面中的多个表单。<br>GET 和 POST 的区别</p><p>GET在浏览器回退时是无害的，而POST会再次提交请求。<br>GET请求会被浏览器主动cache，而POST不会，除非手动设置。<br>GET请求只能进行url编码，而POST支持多种编码方式。<br>GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。<br>GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。<br>对参数的数据类型，GET只接受ASCII字符，而POST没有限制。<br>GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。<br>团队约定：</p><p>元素属性值使用双引号语法<br>元素属性值可以写上的都写上<br>推荐<br><input type="text" /><br><input type="radio" name="name" checked="checked" /></p><p>从输入url到页面展示发生了什么(面试)<br>作者：Twinkle_<br>链接：<a href="https://juejin.im/post/6869279683230629896">https://juejin.im/post/6869279683230629896</a><br>来源：掘金</p><p>浏览器的多进程架构<br>从浏览器输入 URL 到页面渲染的整个过程都是由 浏览器架构中的各个进程之间的配合完成。</p><p>浏览器主进程: 管理子进程、提供服务功能<br>渲染进程：将HTML、CSS、JS渲染成界面，js引擎v8和排版引擎Blink就在上面，他会为每一个tab页面创建一个渲染进程<br>GPU进程：本来是负责处理3Dcss的，后来慢慢的UI界面也交给GPU来绘制<br>网络进程：就是负责网络请求，网络资源加载的进程<br>插件进程：负责插件的运行的，因为插件很容易崩溃，把它放到独立的进程里不要让它影响别人<br>浏览器的多进程架构</p><p>从用户输入信息到页面展示的不同阶段，是不同的进程在发挥作用，示意图如下：图片从图中可以看出，整个过程是需要各个进程之间相互配合完成的，过程大致可以描述为：</p><p>用户输入url,处理输入信息，主进程开始导航，交给网络进程干活<br>网络进程发起网络请求，其中有可能会发生重定向<br>服务器响应URL之后，主进程就要通知渲染进程，你要开始干活了<br>渲染进程准备好了，要想渲染进程提交数据，这个时间叫做提交文档<br>渲染进程接受到数据，完成页面渲染。<br>具体过程</p><p>输入url<br>用户输入url，处理输入信息：<br>如果为非url结构的字符串，交给浏览器默认引擎去搜索改字符串；<br>若为url结构的字符串，浏览器主进程会交给 网络进程 ,开始干活。<br>2.1 查找浏览器缓存</p><p>网络进程会先看看是否存在本地缓存，如果有就直接返回资源给浏览器进程，无则下一步 DNS-> IP -> TCP<br>2.2 DNS解析</p><p>网络进程拿到url后，先会进行DNS域名解析得到IP地址。如果请求协议是HTTPS，那么还需要建立TLS连接。<br>2.2 建立TCP连接，三次握手</p><p>接下来就是利用IP地址和服务器建立TCP连接。连接建立之后，向服务器发送请求。<br>服务器响应<br>服务器收到请求信息后，会根据请求信息生成响应行、响应头、响应体，并发给网络进程。网络进程接受了响应信息之后，就开始解析响应头的内容。<br>网络进程解析响应行和响应头信息的过程：<br>3.1 重定向</p><p>如果响应行状态码为301（永久重定向）和302（临时），那么说明需要重定向到其他url。这时候网络进程会从响应头中的Location字段里读取重定向的地址，并重新发起网络请求。<br>3.2 响应数据处理</p><p>导航会通过请求头的Content-type字段判断响应体数据的类型。浏览器通过这个来决定如何显示响应体的内容。比如：若为application/octet-stream，则会按照下载类型来处理这个请求，导航结束。若为text/html，这就告诉浏览器服务器返回的是html格式，浏览器会通知渲染进程，你要干活了。<br>准备渲染进程<br>默认情况，每个页面一个渲染进程。但若处于同一站点（同根域名+协议），那么渲染进程就会复用。<br>提交文档<br>渲染进程准备好后，浏览器进程发出“提交文档的消息”，渲染进程接受了消息之后，会跟网络进程简历传输数据的管道。<br>等数据传输完成了，渲染进程会告诉浏览器进程，确认文档提交，这时候浏览器会更新页面，安全状态，url，前进后退的历史。<br>到这里导航结束，进入渲染阶段。<br>注：当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为百度首页的页面。因为需要等待提交文档阶段，页面内容才会被替换。</p><p>前端HTML基础面试题<br>iframe有哪些缺点？<br>iframe是一种框架，也是一种很常见的网页嵌入方式。</p><p>「iframe的优点」</p><p>iframe能够原封不动的把嵌入的网页展现出来。<br>如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。<br>网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。<br>如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。<br>「iframe的缺点」</p><p>会产生很多页面，不容易管理。<br>iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。<br>代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。<br>很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。<br>iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。<br>现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。<br>label的作用是什么？是怎么用的？<br>例子1: 点击” 用户名:” 就可以定位光标到输入框</p><form><label for="myid "> 用户名:</label><input type="text" id="myid" /></form> 例子2: 点击" 用户名:" 或按键alt+1, 都可以定位光标到输入框<form> <label for="myid" accesskey="1"> 用户名:</label> <input type="text" id="myid" tabindex="1" /></form> for 属性功能：表示Label 标签要绑定的HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。<p>acesskey 属性<br>功能：表示访问Label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。<br>局限性：accessKey 属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。</p><p>HTML5的form如何关闭自动完成功能？<br> HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。<br> 但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。</p><p>关闭输入框的自动完成功能有3种方法：</p><p>在IE的Internet选项菜单里的内容–自动完成里面设置<br>设置form的autocomplete为”on”或者”off”来开启或者关闭自动完成功能<br>设置输入框的autocomplete为”on”或者”off”来开启或者关闭该输入框的自动完成功能<br>将 HTML5 看作成开放的网络平台<br>「什么是 HTML5 的基本构件（building block）？」</p><p>语义 - 提供更准确地描述内容。<br>连接 - 提供新的方式与服务器通信。<br>离线和存储 - 允许网页在本地存储数据并有效地离线运行。<br>多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。<br>2D/3D 图形和特效 - 提供更多种演示选项。<br>性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。<br>设备访问 - 允许使用各种输入、输出设备。<br>外观 - 可以开发丰富的主题。<br>浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？<br> 在浏览器的html头部加上manifest属性，如果是第一次访问浏览器会根据manifest的内容进行下载存储离线内容，如果已经访问过则从离线存储中进行加载，然后在比对服务器如果有新内容在更新离线存储<br> 离线的情况下，浏览器就直接使用离线存储的资源。</p><p>浏览器的渲染过程？<br>1、将获取的html解析成dom树<br>2、处理css，构成层叠样式表模型CSSOM<br>3、将dom树和CSSOM合并为渲染树<br>4、根据CSSOM将渲染树的节点布局计算<br>5、将渲染树节点样式绘制到页面上</p><p>// 注意<br>在渲染的过程中是自上而下渲染，<br>js会阻塞页面的渲染，优先等js执行完成<br>如果在渲染的过程中改变了样式，会造成回流需要重新渲染<br>link和@import的区别？<br>1、从属关系区别：<br>link属于html标签，而@import是css提供的。<br>2、加载顺序区别：<br>页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。<br>3、兼容性区别：<br>import只在IE5以上才能识别，而link是html标签，无兼容问题。<br>4、dom可操作性区别：<br>可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式<br>5、权重区别：<br>如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。<br>（简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）</p><p>src与href的区别？<br>1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。<br>2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部</p>]]></content>
<summary type="html"><p>前言<br> 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:”再次翻开笔记是什么感觉”，我的回答是:”初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。💖💖<br> 本章着重复习Html的基础内容，学习Html</summary>
</entry>
<entry>
<title>「学习笔记」JavaScript基础</title>
<link href="https://old.lzh1.eu.org/2022/04/03/java%E7%AC%94%E8%AE%B0/"/>
<id>https://old.lzh1.eu.org/2022/04/03/java%E7%AC%94%E8%AE%B0/</id>
<published>2022-04-03T07:50:00.000Z</published>
<updated>2024-01-10T04:58:28.841Z</updated>
<content type="html"><![CDATA[<p>前言<br>最近一直在跟着黑马教程学习JavaScript内容，遂把这一阶段的学习内容整理成笔记，巩固所学知识，同时也会参考一些博客，书籍上的内容，查漏补缺，给自己充充电🔋🔋</p><p>文章内容如有错误，欢迎指正批评✔️✔️</p><p>工欲善其事，必先利其器，为了提高开发效率，选用VScode。</p><p>管理-设置-常用设置-字体 Consolas, ‘微软雅黑 Light’, monospace<br>Chinese 汉化Vscode<br>Prettier 格式化代码(缩进2格)<br>Auto Rename Tag 同步修改标签<br>HTML CSS SupportHtml文档的CSS支持<br>HTML Snippets 自动输入Html标签<br>JavaScript (ES6) code snippetsES6语法支持<br>open in browser 浏览器打开<br>编程基础<br>编程基础<br>「计算机语言」分为机器语言，汇编语言，高级语言。计算机内部最终执行的都是机器语言，由0和1这样的二进制数构成。</p><p>「数据存储单位」8bit(比特) = 1B(Byte)字节 千字节1KB = 1024B</p><p>「翻译器」高级语言编写的程序不能被计算机识别，需要经过转换，将源代码程序翻译成机器语言才能运行。浏览器里面的js解释器就是这样的一个翻译器。</p><p>「程序运行」</p><p>打开某个程序时，先从硬盘中把程序的代码加载到内存中<br>CPU执行内存中的代码<br>注意：之所以要内存的一个重要原因，是因为 cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）<br>初识JavaScript<br>「创始人」布兰登·艾奇(Brendan Eich),起初命名为LiveScript后来与Sun公司合作改名为JavaScript。</p><p>「JavaScript」运行在客户端的脚本语言，不需要编译，由js解释器(js引擎)逐行解释执行。Node.js也可以用于服务器端编程。</p><p>「JavaScript组成」ECMAScript(JavaScript语法)、DOM(文档对象模型)、BOM(浏览器对象模型)</p><p>JavaScript的作用</p><p>表单动态校验(密码强度检测)<br>网页特效<br>服务端开发(Node.js)<br>桌面程序(Electron)、App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)<br>「JavaScript书写位置」</p><p>JS有3种书写位置，分别为行内、内嵌和外部。</p><p>行内式<br><input type="button" value="点我试试" onclick="alert('Hello World')" /><br>内嵌式</p><script> alert('Hello World~!');</script><p>外部式<br>引用外部js文件</p><script src = "my.js"></script><p>「注释」</p><p>单行注释<br>// 我是单行注释 (快捷键 ctrl + / )<br>多行注释<br>/*<br> 获取用户年龄和姓名<br> 并通过提示框显示出来<br> 点击vscode左下角管理-键盘快捷方式-切换块注释<br> (默认快捷键 alt + shift + a) 修改为 (ctrl + shift + /)<br>*/<br>变量<br>变量的概念<br>「变量」是程序在内存中申请的一块用于存放数据的空间。变量是用于存放数据的容器，可以通过变量名获取数据，甚至修改数据。图片</p><p>变量的使用<br>「1. 声明变量」</p><p>// 1.声明变量<br>var num; // 声明一个 名称为 num 的变量<br>var是一个JS关键字，用来声明变量(variable变量的意思)。num是我们定义的变量名，可以通过变量名来访问内存中分配的空间。</p><p>「2. 赋值」</p><p>num = 10;//给 num 这个变量赋值为 10<br>「3. 变量的初始化」</p><p>声明一个变量并赋值， 我们称之为变量的初始化。</p><p>var num = 10;//声明变量并赋值为10<br>「4. 变量语法扩展」</p><p>// 1.一个变量被重新赋值后，它原有的值会被覆盖掉，变量值以最后一次赋的值为准。<br>var num = 10;<br>num = 11;<br>// 2.同时声明多个变量(只需要写一个var,多个变量名之间用英文逗号隔开)<br>var num = 10, age = 15, name = ‘fan’;<br>声明变量特殊情况</p><p>情况说明结果<br>var age ; console.log (age);只声明 不赋值undefined<br>console.log(age)不声明 不赋值 直接使用报错<br>age = 10; console.log (age);不声明 只赋值10<br>「5. 变量命名规范」图片</p><p>数据类型<br>分为两类：简单数据类型(Number,String,Boolean,Undefined,Null)和复杂数据类型(object)。</p><p>简单数据类型说明默认值<br>Number数字型,包含整型值和浮点型值0<br>String字符串型“”<br>Boolean布尔值型false<br>Undefinedvar a;声明了变量a但是没有赋值，此时a = undefinedundefined<br>Nullvar a = null;声明了变量a为空值null<br>Number数字型<br>「数字型进制」</p><p>// 1.在JS中八进制前面加0，十六进制前面加 0x<br>var num1 = 07; // 对应十进制的7<br>// 2.十六进制数字序列范围：0<del>9以及A</del>F<br> var num = 0xA;<br>「数字型范围」JavaScript中的数值有最大值和最小值</p><p>最大值:Number.MAX_VALUE，值为：1.7976931348623157e+308<br>最小值:Number.MIN_VALUE，值为：5e-32<br>特殊值：Infinity 无穷大 -Infinity 无穷小 NaN 代表一个非数字<br>isNaN():用来判断一个变量是否为非数字的类型。非数字型为true,数字型为false。<br>String字符串型<br>// 1.字符串型可以是引号中的任意文本，语法为 单引号 和 双引号<br>var msg = ‘我的名字叫’;<br>var name = “fan”;<br>「1. 字符串转义符」都是以 \ 开头，详细如下👇👇</p><p>转义符说明<br>\n换行符，n是 newline 的意思<br>\斜杆 <br>'单引号 ‘<br>"双引号 “<br>\ttab 缩进<br>\b空格,b是 blank 的意思<br>「2. 字符串长度」<br> 字符串是由若干字符组成的，这些字符的数量就是字符串的长度。</p><p>// 1.字符串型可以是引号中的任意文本，语法为 单引号 和 双引号<br>var msg = ‘我是帅气的饭老板’;<br>console.log(msg.length); // 显示 8<br>「3. 字符串拼接」<br> 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串。<br> 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串</p><p>//1.1 字符串 “相加”<br>alert(‘hello’ + ‘ ‘ + ‘world’); // hello world<br>//1.2 数值字符串 “相加”<br>alert(‘100’ + ‘100’); // 100100<br>//1.3 数值字符串 + 数值<br>alert(‘11’ + 12); // 1112 +号口诀：数值相加，字符相连<br>// 1.4 字符串拼接加强<br>var age = 18;<br>alert(“饭老板今年” + age +”岁了”);<br>布尔型Boolean<br> 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。<br> 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。</p><p>console.log(true + 1) // 2<br>console.log(false + 1) // 1<br>Undefined 和 Null<br> 一个变量声明后没有赋值会有一个默认值undefined(如果相连或者相加时，注意结果😊)</p><p> var variable;<br> console.log(variable); // undefined<br> console.log(“你好” + variable); // 你好undefined<br> console.log(11 + variable); // NaN<br> console.log(true + variable);// NaN<br> 一个变量声明并赋值null,里面存的值为空</p><p> var var2 = null;<br> console.log(var2); // null<br> console.log(“你好” + var2); // 你好null<br> console.log(11 + var2); // 11<br> console.log(true + var2);// 1<br>获取变量类型及转换<br>检测变量的数据类型 typeof<br> var num = 10;<br> console.log(typeof num)//结果为 number<br>字面量:是源代码中一个固定值的表示法，就是字面量如何去表达这个值。通过数据的格式特征可以判断数据的类型<br>有数字字面量:8,9,10<br>字符串字面量:’饭老板’，”前端开发”<br>布尔字面量:true,false<br>「数据类型转换」</p><p>转换为字符串<br>方式说明案例<br>toString()转成字符串var num=1; alert(num.toString())<br>String()强制转换var num=1; alert(String(num))<br>加号拼接字符串和字符串拼接的结果都是字符串var num=1; alert(num+’我是字符串’)</p><p>转换为数字型<br>方式说明案例<br>parseInt(String)函数将string类型转成整数型parseInt(‘11’)<br>parseFloat(String)函数将string类型转成浮点型parseFloat(‘11.2’)<br>Number() 强制转换函数将string类型强制转换为数值型Number(‘12’)<br>js隐式转换 ( - * /)利用算数运算隐式转换为数值型‘12’ - 0</p><p>转换为布尔型<br>代表空、否定的值会被转换为false，如’’、0、NaN、null、undefined 其余值都会被转换为true<br>方式说明案例<br>Boolean()其他类型转换为布尔值Boolean(‘true’)<br>关键字和保留字<br>「标识符」指开发人员为变量、属性、函数、参数取得名字。标识符不能是关键字或保留字。</p><p>「关键字」指 JS本身已经使用了的字，不能再用它们充当变量名、方法名</p><p>包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。</p><p>「保留字」实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。</p><p>boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。</p><p>注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。</p><p>运算符与流程控制<br>运算符(操作符)<br>「运算符」是用于实现赋值、比较和执行算数运算等功能的符号。常用运算符分类如下👇</p><p>算数运算符<br>递增和递减运算符<br>比较运算符<br>逻辑运算符<br>赋值运算符<br>「算数运算符」</p><p>运算符描述案例<br>+加10+20=30<br>-减10-20=-10<br>*乘10*20=200<br>/除10/20=0.5<br>%取余(取模)返回除法的余数9%2=1<br>浮点数的精度问题<br> var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004<br> console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001<br>浮点数值的最高精度是17位小数，但是在进行算数运算时其精确度远远不如整数,所以不要直接判断两个浮点数是否相等!<br>表达式与返回值<br>表达式：由数字、运算符和变量组成的式子。<br>返回值：每一个表达式经过相应的运算之后，会有一个最终结果，称为表达式的返回值<br>「递增和递减运算符」</p><pre><code>递增和递减运算符必须配合变量使用。</code></pre><p>递增运算符<br> var num = 10;<br> alert(++num + 10); // 21 使用口诀：先自加，后返回值</p><p> var num1 = 10;<br> alert(10 + num1++); // 20 使用口诀：先返回原值，后自加<br> var num = 1;<br> var num2 = ++num + num++; //num = 2<br> console.log(num2);//4</p><p> var num = 1;<br> var num1 = 1;<br> var num2 = num++ + num1++; // 1 + 1<br> console.log(num2);//2</p><p> var num = 1;<br> var num2 = num++ + num++;// 1 + 2<br> console.log(num2); // 3 </p><p>「比较运算符」</p><p>运算符描述案例结果<br><小于号1<2true</p><blockquote><p>大于号1>2false<br>=大于等于号(大于或者等于)2 >= 2true<br><=小于等于号(小于或者等于)3 <= 2false<br>==判等号(会转型)15 == ‘15’true<br>!=不等号37 != 37false<br>=== !===全等 全不等(要求值和数据类型都一致)37 === ‘37’false<br>「逻辑运算符」<br> 逻辑运算符是用来进行布尔值运算的运算符<br> 短路运算:当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;</p></blockquote><p>运算符描述案例特点<br>&&“逻辑与”,简称”与” andtrue && false两边都是 true才返回 true<br>||“逻辑或”,简称”或” ortrue有真为真<br>!“逻辑非”,简称”非” not!true取反<br>「赋值运算符」</p><p>运算符描述案例<br>=直接赋值var userName = ‘fan’<br>+= -=加减一个数后再赋值var age=5; age+=5<br><em>= /= %=乘、除、取模后再赋值var age=5; age</em>=5<br>「运算符优先级」</p><p>优先级运算符顺序<br>1小括号()<br>2一元运算符! ++ –<br>3算数运算符先* / % 后+ -<br>4关系运算符> >= < <=<br>5相等运算符== != === !==<br>6逻辑运算符先&& 后||<br>7赋值运算符=<br>8逗号运算符,<br>流程控制<br>「流程控制」在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。</p><p>「分支流程控制」</p><p> // 1. 条件成立执行的代码语句<br> if (条件表达式) {<br> }</p><p> // 2.if else 语句<br> if (条件表达式) {<br> // [如果] 条件成立执行的代码<br> } else {<br> // [否则] 执行的代码<br> }</p><p> // 3. if else if 语句(多分支语句)<br> // 适合于检查多重条件。<br> if (条件表达式1) {<br> 语句1；<br> } else if (条件表达式2) {<br> 语句2；<br> } else if (条件表达式3) {<br> 语句3；<br> ….<br> } else {<br> // 上述条件都不成立执行此处代码<br>}<br>「三元表达式」</p><p> //如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值<br> 表达式1 ? 表达式2 : 表达式3;<br>「switch分支流程控制」它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。</p><p> switch( 表达式 ){<br> case value1:<br> // 表达式 等于 value1 时要执行的代码<br> break;<br> case value2:<br> // 表达式 等于 value2 时要执行的代码<br> break;<br> default:<br> // 表达式 不等于任何一个 value 时要执行的代码<br> }<br>循环与代码规范<br>循环<br>运算符描述<br>初始化变量通常被用于初始化一个计数器,该表达式可以使用var关键字声明新的变量，这个变量帮我们来记录次数。<br>条件表达式用于确定每一次循环是否能被执行，如果结果是true就继续循环，否则退出循环<br>操作表达式每次循环的最后都要执行的表达式。通常用于更新计数器变量的值<br> for(初始化变量; 条件表达式; 操作表达式 ){<br> //循环体<br>}<br>「执行流程」</p><p>初始化变量，初始化操作在整个 for 循环只会执行一次。<br>执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。<br>执行操作表达式,此时第一轮结束。<br>第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。<br>继续执行操作表达式，第二轮结束。……<br>「双重for循环」循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。</p><p> for (外循环的初始; 外循环的条件; 外循环的操作表达式) {<br> for (内循环的初始; 内循环的条件; 内循环的操作表达式) {<br> 需执行的代码;<br> }<br>}<br>//for循环打印九九乘法表<br> var str = “”;<br> for (var i = 1; i <= 9; i++) {<br> for (var j = 1; j <= i; j++) {<br> str += j + “x” + i + “=” + j * i + “\t”;<br> }<br> str += “\n”;<br> }<br> console.log(str);<br>「while循环」</p><p> while (条件表达式) {<br> // 循环体代码<br> }<br> // 1. 先执行条件表达式，如果结果为 true，则执行循环体代码；<br> // 如果为 false，则退出循环，执行后面代码<br> // 2. 执行循环体代码<br> // 3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，<br> //计算1-100的累加和<br> var i = 1;<br> var sum = 0;<br> while (i <= 100) {<br> sum += i;<br> i++;<br> }<br> console.log(sum);<br>「do-while循环」</p><p>do {<br> // 循环体代码 - 条件表达式为 true 时重复执行循环体代码<br>} while(条件表达式);<br> // 先执行一次循环体代码，再执行条件表达式<br> //计算100以内的偶数累加和<br> var i = 1;<br> var sum = 0;<br> do {<br> if (i % 2 == 0) {<br> sum += i;<br> }<br> i++;<br> } while (i <= 100);<br> console.log(sum);<br>「continue、break」<br> continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。<br> break 关键字用于立即跳出整个循环（循环结束）。</p><p>代码规范</p><ol><li>标识符命名规范</li></ol><p>变量、函数的命名必须要有意义<br>变量的名称一般用名词<br>函数的名称一般用动词<br>2. 操作符规范</p><p>// 操作符的左右两侧各保留一个空格<br>for (var i = 1; i <= 5; i++) {<br> if (i == 3) {<br> break; // 直接退出整个 for 循环，跳到整个for循环下面的语句<br> }<br> console.log(‘我正在吃第’ + i + ‘个包子呢’);<br>}<br>3. 单行注释规范</p><p> for (var i = 1; i <= 5; i++) {<br> if (i == 3) {<br> break; // 单行注释前面注意有个空格<br> }<br> console.log(‘我正在吃第’ + i + ‘个包子呢’);<br>}<br>4. 其他规范</p><p>//关键词 操作符空格<br>if (true) {}<br>for (var i = 0; i<=10; i++) {}<br>数组与函数<br>数组<br>「1. 数组的概念」 一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。</p><p>「2. 创建数组」</p><p>利用new关键字创建数组；<br> var 数组名 = new Array([n]);//[]代表可选 若写n，则代表数组的长度<br> var arr = new Array();//创建了一个名为 arr 的空数组<br>利用数组字面量创建数组<br> // 1. 使用数组字面量方式创建空的数组<br> var 数组名 = [];//若写n，则代表数组的长度</p><pre><code>//2. 使用数组字面量方式创建带初始值的数组//3. 声明数组并赋值称为数组的初始化var arr =['1','2','3','4'];var arr2 = ['fan',true,17.5];//数组中可以存放任意类型的数据</code></pre><p>「3. 访问数组元素」<br>索引(下标):用来访问数组元素的序号。索引从 0 开始图片</p><p> // 定义数组<br> var arrStus = [1,2,3];<br> // 获取数组中的第2个元素<br> alert(arrStus[1]);<br> // 如果访问数组时没有和索引值对应的元素(数组越界)，<br> // 返回值为undefined<br>「4. 遍历数组」<br>把数组中的元素从头到尾都访问一次。</p><p> // 数组的长度,默认情况下等于元素的个数<br> // 当我们数组里面的元素发生了变化，length属性跟着一起变<br> // 如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；<br> // 如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除<br> var arr = [“red”, “blue”, “green”];<br> for (var i = 0; i < arr.length; i++) {<br> console.log(arr[i]);<br> }</p><p> arr.length = 2;<br> console.log(arr);// red blue<br>「4. 数组中新增元素」<br>数组中可以通过以下方式在数组的末尾插入新元素;</p><p> // 1. 数组[数组.length] = 新数据;<br> arr = [] //arr.length = 0;<br> for (var i = 0; i < 10; i++) {<br> arr[arr.length] = ‘0’;<br> }<br> console.log(arr);<br>「5. 案例」</p><p> // 1. 筛选数组 大于10的元素选出来放到新数组中<br> var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];<br> var newArr = [];<br> var j = 0;<br> for (var i = 0;i < arr.length; i++){<br> if (arr[i] >= 10) {<br> newArr[j] = arr[i];<br> j++;<br> }<br> }<br> console.log(newArr);<br> //第二种方法 利用数组长度的可变性<br> for (var i = 0;i < arr.length; i++){<br> if (arr[i] >= 10) {<br> newArr[j] = arr[i];<br> j++;<br> }<br> }<br> // 2. 翻转数组<br> // 把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)<br> // 我们采取 递减的方式 i–<br> var arr = [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’];<br> var newArr = [];<br> for(var i = arr.length - 1; i >= 0;i–) {<br> newArr[newArr.length] = arr[i]<br> }<br> console.log(newArr);<br> // 3. 数组转换为字符串 用”|” 或其他符号分割<br> // 需要一个新变量用于存放转换完的字符串str<br> //遍历取出数据加到str后面然后加上分隔符<br> var arr = [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’];<br> var str = ‘’;<br> for(var i = 0; i < arr.length; i++) {<br> str += arr[i] + ‘|’;<br> }<br> console.log(str);<br> // 4. 数组转换为字符串 用”|” 或其他符号分割<br> // 需要一个新变量用于存放转换完的字符串str<br> //遍历取出数据加到str后面然后加上分隔符<br> var arr = [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’];<br> var str = ‘’;<br> for(var i = 0; i < arr.length; i++) {<br> str += arr[i] + ‘|’;<br> }<br> console.log(str);<br>冒泡排序图片</p><p> function sort(arr) {<br> for(var i = 0; i < arr.length - 1; i++) {<br> for(var j = 0; j < arr.length - 1 - i; j++) {<br> if (arr[j] > arr[j+1]){<br> var temp = arr[j];<br> arr[j] = arr[j+1];<br> arr[j+1] = temp;<br> }<br> }<br> }<br> return arr;<br> }<br> var arr1 = sort([1,4,2,9]);<br> console.log(arr1);//1 2 4 9<br>函数<br>「1. 函数的概念」<br>封装了一段可被重复调用执行的代码块，通过函数可以实现大量代码的重复使用。函数是一种数据类型。</p><p>「2. 函数的使用」</p><p>声明函数</p><ol><li><p>通过function关键字定义函数 – 命名函数<br> function 函数名() {<br>//函数体代码<br> }<br> // 1.1 function 是声明函数的关键字，必须小写<br> // 1.2 函数名 命名为动词形式 例: getSum</p></li><li><p>通过函数表达式定义函数 —匿名函数<br> var fn = function() {};<br> // 2.1 fn是变量名，不是函数名<br> // 2.2 fn是变量，只不过变量存储的是函数<br> // 2.3 函数表达式创建的函数可以通过 变量名(); 来调用<br> // 2.4 函数表达式也可以定义形参和调用传入实参。<br> 匿名函数使用的第2种方式–匿名函数自调用<br> (function(){<br>alert(123);<br> })();<br>调用函数<br> 函数名();// 函数声明后调用才会执行函数体代码<br>函数的封装<br>函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。<br> /*<br>例用封装函数计算1-100累加和<br> */<br> function getSum() {<br> var sumNum = 0; // 准备一个变量，保存累加和<br> for (var i = 1; i <= 100; i++) {<br>sumNum += i; // 把每个数值 都累加 到变量中<br> }<br>alert(sumNum);<br> }<br> // 调用函数<br> getSum();<br>「3. 函数的参数」</p></li></ol><p>形参：函数定义时候，传递的参数(实参值传递给形参,不用声明的变量)<br>实参：函数调用时候，传递的参数<br> //带参数的函数声明<br> function 函数名(形参1,形参2,形参3…) {<br> //函数体<br> }<br> // 带参数的函数调用<br> 函数名(实参1,实参2,实参3…);<br>「函数形参和实参数量不匹配时」<br>参数个数说明<br>实参个数等于形参个数输出正确结果<br>实参个数多于形参个数只取到形参的个数<br>实参个数小于形参多的形参定义为undefined,结果为NaN<br> function getSum(a, b, c) {<br> return a + b + c;<br> }<br> // js中形参的默认值是undefined。<br> // 调用函数<br> var n = getSum(1, 2);// n = NaN<br> var n = getSum(1, 2, 3, 4); //1 + 2 +3 = 6<br>「4. 函数的返回值」<br> 返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回 。</p><p> // 声明函数<br> function 函数名() {<br> …<br> return 需要返回的值;<br> // 1. 函数遇到return会停止执行，并返回指定的值<br> // 1. 如果函数没有return 返回的值是undefined<br> }<br> // 调用函数<br> 函数名(); //此时调用函数就可以得到函数体内return的值<br>break,continue,return的区别</p><p>break: 结束当前的循环体 (如for、while)<br>continue: 跳出本次循环，继续执行下次循环<br>return: 不仅可以退出(函数体内)循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码<br>//避免踩坑 return只能结束函数体内的代码<br> function breakDown() {<br> for (var i = 0; i < 10; i++) {<br> if (i == 5) {<br> return 1;<br> }<br> console.log(i);<br> }<br> }<br> breakDown();</p><p> //避免踩坑2 函数如果有return 则返回的是 return 后面的值；<br> // return d,a,b; 返回的是b的值<br> //如果函数没有 return语句，则返回undefined</p><p>「5. arguments的使用」<br> 当不确定有多少个参数传递的时候，可以用 arguments 来获取。JS中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。</p><p>伪数组具有以下特点：<br>具有length属性<br>按索引方式存储数据<br>不具有数组的push，pop等方法<br> function fn() {<br> //arguments 里面存储了所有传递过来的实参<br> console.log(arguments);// [1,2,3…]<br> console.log(arguments[1]); // 2<br> console.log(arguments.length); // 3</p><pre><code>//我们可以按照数组的方式 遍历argument </code></pre><p> }<br> fn(1, 2, 3);<br> // 用伪数组 实现求最大值<br> function getMax() {<br> var max = arguments[0];<br> for (var i = 1; i < arguments.length; i++) {<br> if (arguments[i] > arguments[0]) {<br> max = arguments[i];<br> }<br> }<br> return max;<br> }<br> var result = getMax(1,3,77,5,85)<br> colsole.log(result);</p><p>作用域<br>作用域<br>「作用域」一段程序代码中所用到的名字并不总是有效和可靠的，而限定这个名字的可用性代码范围就是这个名字的作用域。</p><p>作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。<br>ES6之前作用域有两种 全局作用域和局部作用域(函数作用域)<br>「全局作用域」作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的js文件。</p><p>「局部作用域」作用于函数内部的代码环境，就是局部作用域。因为跟函数有关系，所以也被称为函数作用域。</p><p>「JS没有块级作用域」</p><p>块作用域由 {} 包括<br>在其他编程语言，if语句中，循环语句创建的变量，仅仅只能在本if语句，本循环语句中使用，如下👇👇<br> if(true){<br> int num = 123;<br> System.out.print(num); //123<br> }<br> System.out.print(num);//报错<br>以上java代码会报错，因为代码中 {}是一块作用域，其中声明的变量num，在{}之外不能使用，而JavaScript代码则不会报错</p><p>Js中没有块级作用域 (在ES6之前)</p><p> if(true){<br> var num = 123;<br> console.log(num); // 123<br> }<br> console.log(num);// 123<br>变量的作用域<br>在JavaScript中，根据作用域的不同，变量可以分为两种:👇</p><p>全局变量<br>局部变量<br>「全局变量」在全局作用域下声明的变量(在函数外部定义的变量)</p><p>全局变量在代码的任何位置都可以使用<br>在全局作用域下 var 声明的变量 是全局变量<br>特殊情况下，在函数内不使用var声明的变量也是全局变量(不建议使用)。<br>「局部变量」在局部作用域下声明的变量(在函数内部定义的变量)</p><p>局部变量只能在函数内部使用<br>在函数内部 var声明的变量是局部变量<br>函数的形参实际上就是局部变量<br>「全局变量和局部变量的区别」</p><p>全局变量:在任何一个地方都可以使用，只有在浏览器关闭时才会销毁，因此比较占内存<br>局部变量:旨在函数内部使用，当其所在的代码块被执行时，才会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。<br>作用域链<br>「作用域链」只要是代码都在一个作用域中，写在函数内部的局部作用域，未卸载仍和行数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据[内部函数可以访问外部函数变量] 的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。</p><p> function f1() {<br> var num = 123;<br> function f2() {<br> console.log( num );<br> }<br> f2();<br> }<br> var num = 456;<br> f1();<br>图片<br>作用域链采取就近原则的方式来查找变量最终的值</p><p> var a = 1;<br> function fn1() {<br> var a = 2;<br> var b = ‘22’;<br> fn2();<br> function fn2() {<br> var a = 3;<br> fn3();<br> function fn3() {<br> var a = 4;<br> console.log(a); //a的值 4<br> console.log(b); //b的值 ‘22’<br> }<br> }<br> }<br> fn1();<br>图片<br>预解析<br>「预解析相关概念」JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。</p><p>「预解析」在当前作用域下，JS代码执行之前，浏览器会默认把带有 var 和 function声明的变量在内存中进行提前声明或定义。<br>「代码执行」从上往下执行JS语句<br>预解析会把变量和函数的声明在代码执行之前完成，预解析也叫做变量、函数提升。</p><p>「变量预解析(变量提升)」 变量的声明会被提升到当前作用域的最上面，变量的赋值不提升。</p><p> console.log(num); // 结果是多少？<br> var num = 10; // ？</p><p> 相当于<br> var num;<br> console.log(num);// 结果是 undefined<br> num = 10;<br> 结果: undefined<br> 注意: 变量提升只提升声明，不提升赋值。<br>「函数预解析(函数提升)」 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。</p><p> fn();<br> function fn() {<br> console.log(‘打印’);<br> }<br> 结果: 控制台打印字符串 — “打印”<br> 注意: 函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！<br>「函数表达式声明函数问题」</p><p> 函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用<br> fn();<br> var fn = function(){<br> console.log(“想不到吧”);<br> }<br> 结果:报错提示 “fn is not a function”<br> 解释: 该段代码执行之前，会做变量声明提升，fn在提升之后的值<br> 是undefined;而fn调用是在fn被赋值为函数体之前，<br> 此时fn的值是undefined，所以无法被调用。<br> 预解析案例1<br> var num = 10;<br> fun();</p><p> function fun(){<br> console.log(num);<br> var num = 20;<br> }</p><p> 相当于执行了以下操作 结果打印 undefined<br> var num;</p><p> function fun(){<br> var num;<br> console.log(num);<br> num = 20;<br> }<br> num = 10;<br> fun();<br> 预解析案例2<br> var a = 18;<br> f1();</p><p> function f1(){<br> var b = 9;<br> console.log(a);<br> console.log(b);<br> var a = ‘123’;<br> }</p><p> 相当于执行了以下操作 结果为 undefined 9<br> var a;<br> function f1(){<br> var b;<br> var a;<br> b = 9;<br> console.log(a);<br> console.log(b);<br> a = ‘123’;<br> }<br> a = 18;<br> f1();<br> 预解析案例3<br> f1();<br> console.log(c);<br> console.log(b);<br> console.log(a);</p><p> function f1() {<br> var a = b = c = 9;<br> console.log(a);<br> console.log(b);<br> console.log(c);<br> }</p><p> 相当于执行了以下操作 结果为 9 9 9 9 9 “报错–a is not defined”<br> function f1() {<br> var a;<br> a = b = c = 9;<br> //相当于 var a = 9; b=9; c=9; b和c 直接赋值，没有var声明，当全局变量看。<br> // 差异：集体声明 var a = 9,b = 9, c = 9;<br> console.log(a);<br> console.log(b);<br> console.log(c);<br> }<br> f1();<br> console.log(c);<br> console.log(b);<br> console.log(a);</p><p>对象<br>对象的概念<br>「对象」在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。</p><p>对象是由属性和方法组成的<br>属性：事物的特征，在对象中用属性来表示（常用名词）<br>方法：事物的行为，在对象中常用方法来表示（常用动词）<br>「为什么需要对象」</p><p>保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组，如果保存一个的完整信息呢？<br>为了更好地存储一组数据，对象应用而生；对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。<br> var obj = {<br> “name”:”fan”,<br> “sex”:”male”,<br> “age”:18,<br> “height”:155<br> }<br>创建对象的三种方式<br>「1. 利用字面量创建对象」使用对象字面量创建对象：</p><p>就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示<br>-键：相当于属性名<br>-值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）<br> // star 就是创建的对象<br> var star = {<br> name : ‘pink’,<br> age : 18,<br> sex : ‘男’,<br> sayHi : function() {<br> alert(‘大家好啊’);<br> }<br> };<br>对象的使用<br>对象的属性：对象中存储具体数据的“键值对”中的键称为对象的属性，即对象中存储具体数据的项。<br>对象的方法：对象中存储函数的“键值对”中的“键”称为对象的方法，即对象中存储函数的项。<br>访问对象的属性：对象里面的属性调用：对象.属性名；对象里面属性的另一种调用方式：对象[‘属性名’],注意方括号里面的属性必须加上引号。<br>调用对象的方法:对象.方法名();<br>变量、属性、函数、方法总结：<br>①变量：单独声明赋值，单独存在<br>②属性:对象里面的变量称为属性，不需要声明，用来描述该对象的特征。<br>③方法：方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器。对象里面的函数称为方法，方法不需要声明，使用”对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。<br>④函数:单独存在的，通过”函数名()”的方式就可以调用。<br> console.log(star.name) // 调用名字属性<br> console.log(star[‘name’]) // 调用名字属性</p><p> star.sayHi();<br>「2. 利用new Object创建对象」</p><p>创建空对象<br> 通过内置构造函数Object创建对象，此时andy变量已经保存了创建出来的空对象<br> var andy = new Object();<br>给空对象添加属性和方法<br> 通过对象操作属性和方法的方式，来为对象增加属性和方法<br> andy.name = ‘pink’;<br> andy.age = 18; // andy.age = 19修改对象属性<br> andy.sex = ‘男；// andy.phoneNum = 110 添加属性<br> andy.sayHi = function() {<br> alert(‘大家好’);<br> }<br> obj.sayHi();调用对象的方法 //第二种写法 obj<a href="">‘sayHi’</a>;</p><p> // Object()第一个字母大写；<br> //new Object() 需要new关键字，使用的格式:对象.属性 = 值<br>「3. 利用构造函数创建对象」</p><p>构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值,它总与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽出来，然后封装到这个函数里面。</p><p>构造函数的封装格式：<br> function 构造函数名(形参1，形参2，形参3…) {<br> this.属性名1 = 参数1;<br> this.属性名2 = 参数2;<br> this.属性名3 = 参数3;<br> this.方法名 = 函数体;<br> }<br>构造函数的调用格式<br> var obj = new 构造函数名(实参1，实参2，实参3);<br> // 以上代码中，obj即接收到构造函数创建出来的对象。<br> 注意事项：<br> 1.构造函数约定首字母大写<br> 2.函数内的属性和方法前面需要添加this，表示当前对象的属性和方法<br> 3.构造函数中不需要retrun返回结果<br> 4.但我们创建对象的时候，必须用new 来调用构造函数</p><pre><code>1.其他：构造函数如Stars(),抽取了对象的公共部分，封装到了函数里面，它 泛指某一大类(class)2.创建对象，如new Stars();特指某一个，利用new关键字创建对象的过程 我们也称为对象实例化</code></pre><p>new关键字的作用(面试题)<br>1.在构造函数代码开始执行之前，创建一个空对象；<br>2.修改this的指向，把this指向创建出来的空对象；<br>3.执行构造函数内的代码，给这个新对象添加属性和方法<br>4.在函数完成之后，返回这个创建出来的新对象(所以构造函数里面不需要return)<br> // 工厂函数创建对象 这个把创建好的对象返回给函数调用处<br> function createPerson(name, age, job) {<br> var person = new Object();<br> person.name = name;<br> person.age = age;<br> person.job = job;<br> person.sayHi = function(){<br> console.log(‘Hello,everyBody’);<br> }<br> return person;<br> }<br> var p1 = createPerson(‘张三’, 22, ‘actor’);<br>遍历对象<br> for…in 语句用于对数组或者对象的属性进行循环操作。</p><p> 其语法如下：<br> for (变量 in 对象名字) {<br> // 在此执行代码<br> }<br> 语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。</p><p> for (var k in obj) {<br> console.log(k); // 这里的 k 是属性名<br> console.log(obj[k]); // 这里的 obj[k] 是属性值<br>}</p><p>内置对象<br>「内置对象」JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象<br>前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于JS独有的，JS API讲解内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而非必要的功能(属性和方法),内置对象最大的优点就是帮助我们快速开发。</p><p>「查文档」学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习。<br>MDN:<a href="https://developer.mozilla.org/zh-CN/">https://developer.mozilla.org/zh-CN/</a></p><p>Math对象<br>「Math对象」不是构造函数，它具有数学常数和函数的属性和方法，跟数学相关。</p><p>属性、方法名功能<br>Math.PI圆周率<br>Math.floor()向下取整<br>Math.ceil()向上取整<br>Math.round()四舍五入版 就近取整 注意 -3.5 结果是 -3<br>Math.abs()绝对值<br>Math.max()/Math.min()求最大和最小值<br>Math.random()获取范围在[0,1)内的随机值</p><ul><li><p>获取指定范围的随机整数</p><p>function getRandom(min, max) {<br> return Math.floor(Math.random() * (max - min + 1)) + min;<br>}</p></li></ul><p>日期对象<br> Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间</p><p>使用Date实例化日期对象<br>获取当前时间必须实例化<br>获取指定时间的日期对象<br> var now = new Date();<br> var future = new Date(‘2020/10/1’)<br> // 注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象<br>续上<br>使用Date实例的方法和属性<br>getMonth()方法获取到的月份 + 1 = 当月图片<br> //参数常用写法 数字型或者字符串型 ‘2019-10-1 8:8:8’<br> var date1 = new Date(2019,10,1);<br> //日期格式化<br> // 格式化日期 年 月 日<br> var date = new Date();<br> console.log(date.getFullYear()); //返回当前日期的年 2020<br> console.log(date.getMonth() + 1); //月份 返回的月份小1个月，记得月份加1呦<br> console.log(date.getDate()); //返回的是 几号<br> console.log(date.getDay); //周一返回的是1 周六返回的是6 周日返回的是0<br> //我们写一个 2020年 9月 6日 星期日<br> var year = date.getFullYear();<br> var month = date.getMonth() + 1;<br> var dates = date.getDate();<br> var day = date.getDay();<br> if (day == 0) {<br> day = “星期日”;<br> }<br> console.log(“今天是” + year + “年” + month + “月” + dates + “日” + day);<br> //格式化日期 时分秒<br> var date = new Date();<br> console.log(date.getHours()); //时<br> console.log(date.getMinutes()); //分<br> console.log(date.getSeconds()); // 秒</p><pre><code> //封装一个函数返回当前的 时 分 秒 格式 08:08:08 function getTimer() { var time = new Date(); var h = time.getHours(); var h = h < 10 ? "0" + h : h; var m = time.getMinutes(); var m = m < 10 ? "0" + m : m; var s = time.getSeconds(); var s = s < 10 ? "0" + s : s; return h + ":" + h + ":" + s; } console.log(getTimer());</code></pre><p>获取Date日期总的毫秒数(时间戳)<br>基于1970年1月1日(世界标准世界)起的毫秒数<br> // 实例化Date对象<br> var now = new Date();<br> // 1. 用于获取对象的原始值<br> console.log(now.valueOf())<br> console.log(now.getTime())<br> // 2. 简单写可以这么做 (最常用的)<br> var now = + new Date();<br> // 3. HTML5中提供的方法，有兼容性问题<br> var now = Date.now();<br> 倒计时案例 ：</p><ol><li><p>输入的时间减去现在的时间就是剩余的时间，即倒计时。<br> 2.用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，<br> 得到的就是剩余时间的毫秒数<br> 3.把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换时分秒)<br>转换公式如下：<br>d = parseInt(总秒数/60/60/24) // 计算天数<br>h = parseInt(总秒数/60/60%24) // 计算小时<br>m = parseInt(总秒数/60%60); // 计算分钟<br>s = parseInt(总秒数%60); // 计算当前秒数<br> // 倒计时案例 封装函数实现<br> function countDown(time) {<br> var nowTime = +new Date(); // 返回的是当前时间总的毫秒数<br> var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数<br> var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数<br> var d = parseInt(times / 60 / 60 / 24); // 天<br> d = d < 10 ? “0” + d : d;<br> var h = parseInt((times / 60 / 60) % 24); //时<br> h = h < 10 ? “0” + h : h;<br> var m = parseInt((times / 60) % 60); // 分<br> m = m < 10 ? “0” + m : m;<br> var s = parseInt(times % 60); // 当前的秒<br> s = s < 10 ? “0” + s : s;<br> return d + “天” + h + “时” + m + “分” + s + “秒”;<br> }<br> console.log(countDown(“2020-10-1 18:00:00”));<br> var date = new Date();<br> console.log(date);<br>数组对象<br>「创建数组的两种方式」</p></li><li><p>字面量方式var arr = [1,”test”,true];</p></li><li><p>实例化数组对象 new Array()var arr = new Array();<br>注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数<br>如果只传入一个参数(数字)，则参数规定了数组的长度。<br>如果传入了多个参数，则参数称为数组的元素。<br>「检测是否为数组」</p></li><li><p>instanceof 运算符<br>instanceof 可以判断一个对象是否是某个构造函数的实例<br> var arr = [1, 23];<br> var obj = {};<br> console.log(arr instanceof Array); // true<br> console.log(obj instanceof Array); // false</p></li><li><p>Array.isArray()<br>Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法<br> var arr = [1, 23];<br> var obj = {};<br> console.log(Array.isArray(arr)); // true<br> console.log(Array.isArray(obj)); // false</p></li><li><p>注意 typeof用法<br>typeof 用于判断变量的类型<br> var arr = [1, 23];<br> console.log(typeof arr) // object 对象arr是构造函数的实例因此是对象数据类型<br>「添加删除数组元素的方法」</p></li></ol><p>数组中有进行增加、删除元素的方法，部分方法如下表👇<br>图片<br> var arr = [1, 2, 3];<br> console.log(arr.push(4, 5)); // 5 向数组末尾添加元素<br> arr.pop(); //删除数组最后一个值并返回<br> console.log(arr); // [1,2,3,4]</p><pre><code> // 向数组的开头添加元素并返回数组长度 console.log(arr.unshift(5, 6)); // 6 数组变为[5,6,1,2,3,4] console.log(arr.shift()); // 5 删除数组开头的元素并返回该值</code></pre><p>「数组排序」</p><p>数组中有对数组本身排序的方法，部分方法如下表<br>方法名说明是否修改原数组<br>reverse()颠倒数组中元素的顺序，无参数该方法会改变原来的数组 返回新数组<br>sort()对数组的元素进行排序该方法会改变原来的数组 返回新数组<br>注意：sort方法需要传入参数(函数)来设置升序、降序排序<br>如果传入“function(a,b){ return a-b;}”，则为升序<br>如果传入“function(a,b){ return b-a;}”，则为降序<br> // 踩坑 数组sort()排序(冒泡排序) return a - b 则升序<br> // 写法固定 参考如下<br> var arr1 = [13,4,77,1,7];<br> arr1.sort(function(a,b){<br> return a-b;<br> });<br> console.log(arr1);<br>「数组索引方法」</p><p>数组中有获取数组指定元素索引值的方法，部分方法如下表<br>图片<br> var arr = [1, 2, 3, 4, 5, 4, 1, 2];<br> // 查找元素2的索引<br> console.log(arr.indexOf(2)); // 1<br> // 查找元素1在数组中的最后一个索引<br> console.log(arr.lastIndexOf(1)); // 6<br>「数组转换为字符串」</p><p>数组中有把数组转化为字符串的方法，部分方法如下表<br>注意：join方法如果不传入参数，则按照 “ , ”拼接元素图片<br> var arr = [1, 2, 3, 4];<br> var arr2 = arr;<br> var str = arr.toString(); // 将数组转换为字符串<br> console.log(str); // 1,2,3,4</p><pre><code>var str2 = arr2.join("|");//按照键入字符将数组转换为字符串console.log(str2);</code></pre><p>「其他方法」图片</p><pre><code>var arr = [1, 2, 3, 4];var arr2 = [5, 6, 7, 8];var arr3 = arr.concat(arr2);console.log(arr3); // [1,2,3,4,5,6,7,8]// slice(begin,end) 是一种左闭右开区间 [1,3)// 从索引1出开始截取，到索引3之前var arr4 = arr.slice(1, 3);console.log(arr4); // [2,3]var arr5 = arr2.splice(0, 3);console.log(arr5); // [5,6,7]console.log(arr2); // [8] splice()会影响原数组</code></pre><p>字符串对象<br>「基本包装类型」为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。<br> 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。</p><p> // 下面代码有什么问题？<br> var str = ‘andy’;<br> console.log(str.length); // 4<br> 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：</p><p> // 1. 生成临时变量，把简单类型包装为复杂数据类型<br> var temp = new String(‘andy’);<br> // 2. 赋值给我们声明的字符变量<br> str = temp;<br> // 3. 销毁临时变量<br> temp = null;<br>「字符串的不可变」</p><p>指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。<br>当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。<br>由于字符串的不可变，在「大量拼接字符串」的时候会有效率问题<br>「根据字符返回位置」</p><p>字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：图片<br> var str = “anndy”;<br> console.log(str.indexOf(“d”)); // 3<br> //指定从索引号为4的地方开始查找字符”d”<br> console.log(str.indexOf(“d”, 4)); // -1</p><pre><code>console.log(str.lastIndexOf("n")); // 2</code></pre><p>案例：查找字符串”abcoefoxyozzopp”中所有o出现的位置以及次数</p><p>先查找第一个o出现的位置<br>然后 只要indexOf 返回的结果不是 -1 就继续往后查找<br>因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找<br> var str = “oabcoefoxyozzopp”;<br> var index = str.indexOf(“o”);<br> var num = 0;<br> while (index !== -1) {<br> console.log(index);<br> num++;<br> index = str.indexOf(“o”, index + 1);<br> }<br>「根据位置返回字符」</p><p>字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：图片<br> // 根据位置返回字符<br> // 1. charAt(index) 根据位置返回字符<br> var str = ‘andy’;<br> console.log(str.charAt(3)); // y<br> // 遍历所有的字符<br> for (var i = 0; i < str.length; i++) {<br> console.log(str.charAt(i));<br> } // a n d y</p><pre><code> // 2. charCodeAt(index) //返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 console.log(str.charCodeAt(0)); // 97 // 3. str[index] H5 新增的 console.log(str[0]); // a</code></pre><p>案例：判断一个字符串 ‘abcoefoxyozzopp’ 中出现次数最多的字符，并统计其次数<br>核心算法：利用 charAt(） 遍历这个字符串<br>把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1<br>遍历对象，得到最大值和该字符 注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象中，对应的属性值是该字符出现的次数<br> var str = “abcoefoxyozzopp”;<br> var o = {};<br> for (var i = 0; i < str.length; i++) {<br> var chars = str.charAt(i); // chars 是 字符串的每一个字符<br> if (o[chars]) {<br> // o[chars] 得到的是属性值<br> o[chars]++;<br> } else {<br> o[chars] = 1;<br> }<br> }<br> console.log(o);<br> // 2. 遍历对象<br> var max = 0;<br> var ch = “”;<br> for (var k in o) {<br> // k 得到是 属性名<br> // o[k] 得到的是属性值<br> if (o[k] > max) {<br> max = o[k];<br> ch = k;<br> }<br> }<br> console.log(max);<br> console.log(“最多的字符是” + ch);<br>「字符串操作方法」</p><p>字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：图片<br> // 字符串操作方法<br> // 1. concat(‘字符串1’,’字符串2’….)<br> var str = ‘andy’;<br> console.log(str.concat(‘red’)); // andyred</p><pre><code> // 2. substr('截取的起始位置', '截取几个字符'); var str1 = '改革春风吹满地'; // 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符 console.log(str1.substr(2, 2)); // 春风</code></pre><p>replace()方法<br>replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：<br>字符串.replace(被替换的字符串， 要替换为的字符串)；<br>split()方法<br>split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。<br>其使用格式如下：<br>字符串.split(“分割字符”)<br> // 1. 替换字符 replace(‘被替换的字符’, ‘替换为的字符’) 它只会替换第一个字符<br> var str = “andyandy”;<br> console.log(str.replace(“a”, “b”)); // bndyandy<br> // 有一个字符串 ‘abcoefoxyozzopp’ 要求把里面所有的 o 替换为 *<br> var str1 = “abcoefoxyozzopp”;<br> while (str1.indexOf(“o”) !== -1) {<br> str1 = str1.replace(“o”, “<em>“);<br> }<br> console.log(str1); // abc</em>ef<em>xy</em>zz*pp</p><pre><code>// 2. 字符转换为数组 split('分隔符') // 前面我们学过 join 把数组转换为字符串var str2 = "red, pink, blue";console.log(str2.split(",")); //[red,pink,blue]var str3 = "red&pink&blue";console.log(str3.split("&")); // [red,pink,blue]</code></pre><p>简单数据类型和复杂数据类型<br>「简单类型（基本数据类型、值类型）」：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null</p><p>「复杂数据类型（引用类型）」：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；</p><p>「堆栈」</p><p>堆栈空间分配区别：<br>1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；<br>简单数据类型存放到栈里面<br>2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。<br>图片<br>简单数据类型的存储方式<br>值类型变量的数据直接存放在变量（栈空间）中图片<br>复杂数据类型的存储方式<br>引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中图片<br>「简单类型传参」<br> 函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。</p><p> function fn(a) {<br> a++;<br> console.log(a);<br> }<br> var x = 10;<br> fn(x);<br> console.log(x)；<br>运行结果如下图片</p><p>「复杂数据类型传参」<br> 函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。</p><p> function Person(name) {<br> this.name = name;<br> }<br> function f1(x) { // x = p<br> console.log(x.name); // 2. 这个输出什么 ?<br> x.name = “张学友”;<br> console.log(x.name); // 3. 这个输出什么 ?<br> }<br> var p = new Person(“刘德华”);<br> console.log(p.name); // 1. 这个输出什么 ?<br> f1(p);<br> console.log(p.name); // 4. 这个输出什么 ?<br>运行结果如下：url(<a href="https://mmbiz.qpic.cn/mmbiz_png/y7EkeCWAzmruAmtJf4nict04DRBVU4Jg17qicFrVibtHDx7pSYFvXPnVoQqGfAHOwtn877LCFBhaYP5hNQpWxALXA/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1">https://mmbiz.qpic.cn/mmbiz_png/y7EkeCWAzmruAmtJf4nict04DRBVU4Jg17qicFrVibtHDx7pSYFvXPnVoQqGfAHOwtn877LCFBhaYP5hNQpWxALXA/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1</a>)</p>]]></content>
<summary type="html"><p>前言<br>最近一直在跟着黑马教程学习JavaScript内容，遂把这一阶段的学习内容整理成笔记，巩固所学知识，同时也会参考一些博客，书籍上的内容，查漏补缺，给自己充充电🔋🔋</p>
<p>文章内容如有错误，欢迎指正批评✔️✔️</p>
<p>工欲善其事，必先利其器，为</summary>
</entry>
<entry>
<title>第一篇文</title>
<link href="https://old.lzh1.eu.org/2022/03/28/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87/"/>
<id>https://old.lzh1.eu.org/2022/03/28/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87/</id>
<published>2022-03-28T11:30:00.000Z</published>
<updated>2024-01-10T04:59:11.137Z</updated>
<content type="html"><![CDATA[<p>欢迎来到lzh-zone，这是属于sterling的独家小站，现在是2022年3月27日11点40分，我将更新我的第一篇blog，欢迎以后常来</p>]]></content>
<summary type="html"><p>欢迎来到lzh-zone，这是属于sterling的独家小站，现在是2022年3月27日11点40分，我将更新我的第一篇blog，欢迎以后常来</p>
</summary>
</entry>
<entry>
<title>学习通安装网课帮手脚本教程</title>
<link href="https://old.lzh1.eu.org/2022/03/27/%E5%AD%A6%E4%B9%A0%E9%80%9A%E5%AE%89%E8%A3%85%E7%BD%91%E8%AF%BE%E5%B8%AE%E6%89%8B%E8%84%9A%E6%9C%AC%E6%95%99%E7%A8%8B/"/>
<id>https://old.lzh1.eu.org/2022/03/27/%E5%AD%A6%E4%B9%A0%E9%80%9A%E5%AE%89%E8%A3%85%E7%BD%91%E8%AF%BE%E5%B8%AE%E6%89%8B%E8%84%9A%E6%9C%AC%E6%95%99%E7%A8%8B/</id>
<published>2022-03-27T02:08:37.000Z</published>
<updated>2024-01-10T04:58:14.602Z</updated>
<content type="html"><![CDATA[<p>欢迎来到lzh-zone，这是属于sterling的独家小站，现在是2022年3月27日15点00分，我将更新我的第2篇blog，安装网课帮手脚本。</p><p>1.首先确保tampermonkey（如未安装可自行百度，切记只能在谷歌火狐edge等浏览器中运行）运行正常，打开edge或者geogle浏览器右上角集成油猴左击显示已运行。</p><p>2.确保运行正常后，打开url链接：<a href="http://www.wangkebangshou.cn/">http://www.wangkebangshou.cn/</a> ，根据需求选择安装超星网课版或考试版。</p><p>3.按照提示安装完毕后，关闭浏览器重启，再打开浏览器超星界面，即可实现全自动化刷网课答题（第一次运行答题功能时记得打勾自动答题）。</p><p>感谢各位看官的观看，欢迎下次再来！</p>]]></content>
<summary type="html"><p>欢迎来到lzh-zone，这是属于sterling的独家小站，现在是2022年3月27日15点00分，我将更新我的第2篇blog，安装网课帮手脚本。</p>
<p>1.首先确保tampermonkey（如未安装可自行百度，切记只能在谷歌火狐edge等浏览器中运行）运行正常，</summary>
</entry>
</feed>