-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
281 lines (135 loc) · 79.3 KB
/
search.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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>javaScript-BOM操作</title>
<link href="/posts/z7.html"/>
<url>/posts/z7.html</url>
<content type="html"><![CDATA[<p>BOM（浏览器对象模型 Browser object model ）</p><ul><li>BOM描述与浏览器进行交互的方法和接口</li></ul><p>BOM包括：</p><ul><li>document—DOM</li><li>location对象 —–用于获取或者设置窗体的URL</li><li>history对象 —–浏览器历史记录 访问过的URL</li><li>navigator对象 —–有关浏览器的信息</li><li>Screen对象 ——对象包含有关用户屏幕的信息</li></ul><h3 id="location对象"><a href="#location对象" class="headerlink" title="location对象:"></a>location对象:</h3><p>location对象的属性：</p><ul><li>location.href —————- 获取或者设置整个url</li><li>location.search ————-返回参数</li><li>location.host —————- 返回主机名（域名） <a href="http://www.baidu.com/">www.baidu.com</a></li><li>location.port —————–返回端口号</li><li>location.pathname ———返回路径</li><li>location.hash ————-返回片段 #后面的内容 常见于锚点链接</li></ul><p>location对象方法：</p><ul><li>location.assign() ————–跟href一样，可以跳转页面 （也称为重定向页面）</li><li>location.replace() ————-替换当前页面，因为不记录历史 ，所以不能后退</li><li>location.reload() —————重新加载页面 ，相当于f5刷新按钮</li></ul>]]></content>
<categories>
<category> Javascript </category>
</categories>
<tags>
<tag> JavaScript </tag>
<tag> BOM </tag>
</tags>
</entry>
<entry>
<title>JS的运行机制</title>
<link href="/posts/z10.html"/>
<url>/posts/z10.html</url>
<content type="html"><![CDATA[<p>相遇皆是缘分</p><p>JS的运行机制：</p><ul><li>先执行执行栈里面的同步任务</li><li>异步任务（回调函数）放入任务队列中</li><li>一旦执行栈中的全部同步任务执行完成后，系统就会按次序读取任务队列中的异步任务 于是异步任务结束等待状态，进入执行栈开始执行</li></ul><p><a href="https://imgtu.com/i/5gpLvT"><img src="https://z3.ax1x.com/2021/10/22/5gpLvT.png" alt="JS的运行机制.png"></a></p>]]></content>
<categories>
<category> javaScript </category>
</categories>
<tags>
<tag> javaScript </tag>
</tags>
</entry>
<entry>
<title>javaScript-DOM操作</title>
<link href="/posts/z8.html"/>
<url>/posts/z8.html</url>
<content type="html"><![CDATA[<h2 id="DOM（文档对象模式-document-object-Model）"><a href="#DOM（文档对象模式-document-object-Model）" class="headerlink" title="DOM（文档对象模式 document object Model）"></a>DOM（文档对象模式 document object Model）</h2><ul><li>文档：就是整个HTML网页文档</li><li>对象：网页中的每一个标签</li><li>模型：表示对象之间的关系 方便我们获取操作的对象</li></ul><h3 id="操作DOM的步骤："><a href="#操作DOM的步骤：" class="headerlink" title="操作DOM的步骤："></a>操作DOM的步骤：</h3><h3 id="1-获取操作元素："><a href="#1-获取操作元素：" class="headerlink" title="1.获取操作元素："></a><font color:red="">1.获取操作元素：</font></h3><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">//通过id获取标签元素 -- 获取id为box1的标签元素var box = document.getElementById('box1');//通过class获取标签元素 -- 获取class为box2的全部标签元素 注意 这里获取的是多个 是数组形式 通过下标来访问 比如box2[0]var box2 = document.getElementsByClassName('.box2');//通过标签名获取标签元素 --获取所有标签为div的元素 注意 这里获取的是多个 是数组形式 通过下标来访问 比如div[0]var divs = document.getElementsTagName('div');//通过id 或者class 来获取元素的另一种方法//通过id 获取标签元素 --获取id为box3的标签元素var box3 = document.querySelector('#box3');//通过class 获取标签元素 --获取class为box3的标签元素var box3 = document.querySelector('.box3');//通过class 获取标签颜色 --获取class为box3的全部标签元素var box3 = document.querySelectorAll('.box3');//通过标签名获取标签元素 --获取所有标签为div的元素 --获取第一个 var box1 = document.querySelector('div');<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="2-绑定响应事件-（回调函数）"><a href="#2-绑定响应事件-（回调函数）" class="headerlink" title="2.绑定响应事件 （回调函数）"></a><font color:red="">2.绑定响应事件 （回调函数）</font></h3><pre class="line-numbers language-javaScript" data-language="javaScript"><code class="language-javaScript">//给对象绑定事件//对象.事件名=function(){}//比如box1.onclick=function(){}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h4 id="常见的事件"><a href="#常见的事件" class="headerlink" title="常见的事件"></a>常见的事件</h4><ul><li>onclick 用户点击触发</li><li>onload 页面加载完成触发</li><li>onfocus 元素获得焦点</li><li>onblur 元素失去焦点 </li><li>onsubmit 提交表单被点击 </li><li>onmouseover 鼠标移入该元素之上</li><li>onmouserout 鼠标移出该元素</li><li>onmousemove 鼠标被移动</li></ul><p><font color:red="">注意：</font></p><ul><li><p>一个标签只能绑定一个相同的事件 如果给一个标签绑定两个onclick事件的话 第一个事件会失效 </p></li><li><p>若想给一个标签绑定多个相同的事件的话 使用addEventListener(‘去掉on的事件名称’，function(){});</p></li><li><p>可以同时为一个元素的相同事件同时绑定多个响应函数</p><pre class="line-numbers language-javaScript" data-language="javaScript"><code class="language-javaScript">//例如：box1.addEventListener('click',function(){});<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></li></ul><h3 id="3-具体操作："><a href="#3-具体操作：" class="headerlink" title="3.具体操作："></a>3.具体操作：</h3><ul><li><p>DOM操作节点</p><ul><li> document.createElement(‘标签名称’); —-创建元素（标签）节点</li></ul><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> btn<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><ul><li><p>document.createTextNode(‘文本内容’); —-创建文本节点</p><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">var text=document.createTextNode('我是一个按钮');<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><p>document.createAttribute(‘属性名’);——创建属性节点</p><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">var sx =document.createAttribute('id');<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><p>appendChild() ——向父节点添加一个新的子节点 用法：父节点.appendChild(子节点);</p><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">//向上面创建好的按钮元素添加上面创建好的文本节点btn.appendChild(text);<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></li><li><p>removeChild()——–可以删除一个子节点 用法： 父节点.removeChild(子节点);</p><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">document.removeChild(btn);<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><p>insertBefore()———可以在指定的子节点前插入新的子节点</p><p>用法：父节点.insertBefore(新节点,旧节点);</p></li></ul><h3 id="例子："><a href="#例子：" class="headerlink" title="例子："></a><font color:red="">例子：</font></h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>html<span class="token operator">></span><span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'load'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'box'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建button 元素 节点</span> <span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建 文本节点 内容为 我是一个按钮</span> <span class="token keyword">var</span> text <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">'我是一个按钮'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//向button 节点中 添加 text 文本节点</span> btn<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//向盒子中添加创建好的按钮</span> box<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>btn<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span><span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"box"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>DOM操作css样式 </p><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">//通过样式直接设置元素的某一样式元素.style.属性='值';如： a1.style.color='red';//通过样式文本设置多项元素样式元素.styleText="属性:值;属性:值;属性:值;";如： a1.cssText="width:500px;height:100px;background:red;";<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>DOM操作元素属性 (Attribute)</p><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">//获取HTML自带的属性 元素.属性 不能获取自定义的属性 如srcid.属性 如： a1.class a1.id //获取标签的属性 可以获取自带的属性也可以获取自定义的属性id.getAttribute('属性名'); 如： a1.getAttribute('class');//设置或者修改元素的属性 id.setAttribute('属性名','属性值'); 如 a1.setAttribute('id','box2');//移除元素属性 removeAttribute('属性名'); 如 a1.removeAttribute('id');<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>DOM操作表单（form）</p><ol><li><p>value属性 设置或者获取文本框的值</p><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">a1.value='小钟'; alert(a1.value);<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><p>onsubmit () 可设置用户提交表单触发事件 onreset() 表单重置触发事件</p><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token comment"><!-----onsubmit 返回false 禁止表单提交 如 onsubmit='return false'-----></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>1.php</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>post</span> <span class="token attr-name">onsubmit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>return a()<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>disabled属性 设置或者返回是否禁用文本框</p><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">a1.disabled='true' //禁用该内容<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><p>checked属性 作用于表单中的checkbox和radio 用于设置或者判断表单的当前状态</p></li></ol></li></ul>]]></content>
<categories>
<category> Javascript </category>
</categories>
<tags>
<tag> JavaScript </tag>
<tag> DOM </tag>
</tags>
</entry>
<entry>
<title>bootstrarp框架的使用</title>
<link href="/posts/a3.html"/>
<url>/posts/a3.html</url>
<content type="html"><![CDATA[<p>欢迎来到小钟的博客！</p><h2 id="什么是Bootstrarp框架？"><a href="#什么是Bootstrarp框架？" class="headerlink" title="什么是Bootstrarp框架？"></a>什么是Bootstrarp框架？</h2><ul><li>bootstrarp是一个写网页的框架 就是说你只需要写HTML标签然后调用它提供的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！</li><li>用它提供的样式和组件快速写网站</li><li>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</li><li>里面创建了很多样式或者组件供你使用</li></ul><h2 id="使用Bootstrarp框架的步骤："><a href="#使用Bootstrarp框架的步骤：" class="headerlink" title="使用Bootstrarp框架的步骤："></a>使用Bootstrarp框架的步骤：</h2><ol><li><p>到bootstrarp官网下载bootstrarp相关文件：</p><ul><li><a href="https://v3.bootcss.com/getting-started/#download">https://v3.bootcss.com/getting-started/#download</a></li></ul></li><li><p>创建文件夹结构：</p><p><a href="https://imgtu.com/i/5QMo59"><img src="https://z3.ax1x.com/2021/10/14/5QMo59.png" alt="bootstrarp文件夹.png"></a></p></li><li><p>打开HTML文件 引入下载好的bootstrarp相关文件：</p><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML"><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li></ol><ol start="4"><li>书写你的网页内容</li></ol><h2 id="Bootstrarp框架的栅格系统："><a href="#Bootstrarp框架的栅格系统：" class="headerlink" title="Bootstrarp框架的栅格系统："></a>Bootstrarp框架的栅格系统：</h2><table><thead><tr><th align="center"></th><th align="center">超小屏幕（手机）<768px</th><th align="center">小屏设备（平板）>=768px</th><th align="center">中等屏幕（桌面显示器）>=922px</th><th align="center">大屏屏幕（大桌面显示器） >=1200px</th></tr></thead><tbody><tr><td align="center">.container 最大宽度</td><td align="center">自动（100%）</td><td align="center">750px</td><td align="center">970px</td><td align="center">1170px</td></tr><tr><td align="center">类前缀</td><td align="center">.col-xs-</td><td align="center">.col-sm-</td><td align="center">.col-md-</td><td align="center">.col-lg-</td></tr><tr><td align="center">列（column）数</td><td align="center">12</td><td align="center">12</td><td align="center">12</td><td align="center">12</td></tr></tbody></table><ul><li><p>Bootstrarp提供了一套响应式，移动设备优先的流式栅格系统 ，随着屏幕或视口尺寸的增加，</p><p>系统会自动分为最多12列</p></li><li><p>行（row）必须放在container布局容器里面</p></li><li><p>通过行（row）在水平方向创建一组列（column） 你的内容应当放在列（column）内</p></li><li><p>一行最多分成12列 超过的则在下一行显示</p></li><li><p>实现列的平均划分 需要给列添加类前缀</p></li><li><p>可以同时为一列指定多个设备的类名，以便划分不同的份数 例如 class=”col-xs-12 col-md-2 col-lg-3”</p></li><li><p>每一列默认有15px的padding</p></li></ul><h3 id="例子："><a href="#例子：" class="headerlink" title="例子："></a>例子：</h3><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML"><!--------大屏幕的时候 一列占3份 中等屏幕的时候 一列占4份 平板的时候 一列占6份 手机的时候 一列占12份-------> <style> .row{ margin-top:50px; } .container .row div { border: 1px solid salmon; } </style> <!-----------container容器--> <div class="container"> <!------------一行--> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div> </div> </div><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="效果图："><a href="#效果图：" class="headerlink" title="效果图："></a>效果图：</h3><p><a href="https://imgtu.com/i/5Q4lNT"><img src="https://z3.ax1x.com/2021/10/14/5Q4lNT.png" alt="5Q4lNT.png"></a></p>]]></content>
<categories>
<category> 框架 </category>
<category> bootstrap </category>
</categories>
<tags>
<tag> 框架 </tag>
<tag> bootstrarp </tag>
</tags>
</entry>
<entry>
<title>Ajax笔记</title>
<link href="/posts/z2.html"/>
<url>/posts/z2.html</url>
<content type="html"><![CDATA[<h2 id="为什么要学习Ajax呢？"><a href="#为什么要学习Ajax呢？" class="headerlink" title="为什么要学习Ajax呢？"></a>为什么要学习Ajax呢？</h2><h4 id="因为传统网站中存在以下的问题："><a href="#因为传统网站中存在以下的问题：" class="headerlink" title="因为传统网站中存在以下的问题："></a>因为传统网站中存在以下的问题：</h4><ul><li>网速慢的情况下，页面加载时间长，用户只能等待</li><li>表单提交后，如果一项内容不合格，需要重新填写所有表单内容</li><li>页面跳转，重新加载页面，造成资源的浪费，增加用户等待时间 </li></ul><h3 id="Ajax-阿贾克斯"><a href="#Ajax-阿贾克斯" class="headerlink" title="Ajax:阿贾克斯"></a>Ajax:阿贾克斯</h3><p>它是浏览器提供的一套方法，可以实现页面无刷新就能<font color:red="">更新数据</font>,提高用户浏览网站应用的体验。</p><h3 id="Ajax的应用场景："><a href="#Ajax的应用场景：" class="headerlink" title="Ajax的应用场景："></a>Ajax的应用场景：</h3><ul><li>页面上拉加载更多数据</li><li>列表数据无刷新分页</li><li>表单项离开焦点数据验证</li><li>搜索框提示文字下拉列表</li></ul><h3 id="Ajax的运行环境："><a href="#Ajax的运行环境：" class="headerlink" title="Ajax的运行环境："></a><font color:red="">Ajax的运行环境：</font></h3><ul><li><font color:red="">Ajax技术需要运行在网站环境中才能生效 就是要搭建在服务区上</font></li></ul><h3 id="Ajax运行原理："><a href="#Ajax运行原理：" class="headerlink" title="Ajax运行原理："></a>Ajax运行原理：</h3><p>Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览网页的情况下局部刷新界面，从而提高用户体验</p><h3 id="Ajax的实现步骤："><a href="#Ajax的实现步骤：" class="headerlink" title="Ajax的实现步骤："></a><font color:red="">Ajax的实现步骤：</font></h3><ol><li><p>创建对象</p><ul><li>var xhr = new XMLHttpRequest();</li></ul></li><li><p>用open(‘请求方式’,’请求地址’,同步（true）还是异步)；</p><ul><li>xhr.open(‘get’,’a.php’,true);</li></ul></li><li><p>用send发送请求 或者参数(二选一)</p><ul><li>xhr.send(); (没有带参数)</li><li>xhr.send(username=zhong&age=20); (带参数)</li></ul></li><li><p>监听状态变化</p><ul><li><p>xhr.onreadystatechange = function () {</p><p> if (xhr.readyState == 4 && xhr.status == 200) {</p><p> 5.通过xhr.responseText获取服务器端响应的数据</p><p> a.innerHTML = xhr.responseText;</p><p> }</p><p> }</p></li></ul></li></ol><h3 id="例子："><a href="#例子：" class="headerlink" title="例子："></a>例子：</h3><h4 id="客户端："><a href="#客户端：" class="headerlink" title="客户端："></a>客户端：</h4><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>a<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1.创建对象</span> <span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//2.用open('请求发送','请求地址',同步(true)还是异步);</span> xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'a.php'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 用send发送请求 或者参数</span> xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//3.在Ajax的onreadystatechange中创建函数，在函数中判断Ajax的状态并体现</span> xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span> <span class="token operator">&&</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//5.通过xhr.responseText获取服务器端响应的数据并且应用DOM技术局部刷新页面</span> a<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="服务端："><a href="#服务端：" class="headerlink" title="服务端："></a>服务端：</h3><pre class="line-numbers language-php" data-language="php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><span class="token keyword">echo</span> <span class="token single-quoted-string string">'my name is xiaozhong'</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="效果图："><a href="#效果图：" class="headerlink" title="效果图："></a>效果图：</h3><p><a href="https://imgtu.com/i/5uC5lt"><img src="https://z3.ax1x.com/2021/10/13/5uC5lt.png" alt="Ajax.png"></a></p><h3 id="服务器端响应的数据格式（JSON）："><a href="#服务器端响应的数据格式（JSON）：" class="headerlink" title="服务器端响应的数据格式（JSON）："></a>服务器端响应的数据格式（JSON）：</h3><ul><li>在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式</li><li>当客户端拿到数据后，要将JSON数据和HTML字符串拼接，然后将拼接结果展示在页面中</li><li>因为服务器端响应过来的数据是字符串 所以将JSON字符串转换为JSON对象（JSON.parse(Ajax对象.responseText)）</li></ul><h3 id="例子：-1"><a href="#例子：-1" class="headerlink" title="例子："></a>例子：</h3><ul><li>客户端：</li></ul><pre class="line-numbers language-html" data-language="html"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'load'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//通过DOM操作获取网页中的标签元素</span> <span class="token keyword">var</span> text <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> age <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建Ajax对象</span> <span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//用什么方式请求 请求的地址 同步还是异步</span> xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'cs.php'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//用send发送请求</span> xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//监听状态变化</span> xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span> <span class="token operator">&&</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//JSON.parse()将JSON字符串解析为javaScript对象</span> <span class="token keyword">var</span> responseText <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span> text<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> responseText<span class="token punctuation">.</span>name<span class="token punctuation">;</span> age<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> responseText<span class="token punctuation">.</span>age<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>用户名:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>年龄：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>服务器端：</li></ul><pre class="line-numbers language-php" data-language="php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><span class="token keyword">echo</span> <span class="token single-quoted-string string">'{"name":"zhong","age":"20"}'</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="效果图：-1"><a href="#效果图：-1" class="headerlink" title="效果图："></a>效果图：</h3><p><a href="https://imgtu.com/i/5MAve1"><img src="https://z3.ax1x.com/2021/10/13/5MAve1.png" alt="服务器端传递JSON对象.png"></a></p><h3 id="请求参数传递："><a href="#请求参数传递：" class="headerlink" title="请求参数传递："></a>请求参数传递：</h3><ul><li><p>GET请求方式：</p></li><li><p>xhr.open(‘get’,’a.php?username=xiaozhnog&pass=20’);</p><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token comment">//获取输入框的内容存入str</span> <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'username='</span> <span class="token operator">+</span> username<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">'&'</span> <span class="token operator">+</span> <span class="token string">'pass='</span> <span class="token operator">+</span> pass<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">'&'</span> <span class="token operator">+</span> <span class="token string">'email='</span> <span class="token operator">+</span> email<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token comment">// 创建AJAX对象</span> <span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//用什么方式发送请求 请求的地址 是同步还是异步</span> xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'b.php?'</span> <span class="token operator">+</span> str<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul><ul><li><p>POST请求方式：</p></li><li><p>xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);</p></li><li><p>xhr.send(‘name=xiaozhong&age=20’);</p></li></ul><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML"><script> //创建Ajax对象 var xhr = new XMLHttpRequest(); //用什么方式请求 请求的地址 同步还是异步 xhr.open('post', 'post.php', true); //使用send发送 var str = username.value; xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send('username=' + str);</script><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>]]></content>
<categories>
<category> Web前端 </category>
<category> Ajax </category>
</categories>
<tags>
<tag> Web前端 </tag>
<tag> Ajax </tag>
</tags>
</entry>
<entry>
<title>GET提交与POST提交详解</title>
<link href="/posts/z5.html"/>
<url>/posts/z5.html</url>
<content type="html"><![CDATA[<h3 id="GET提交与POST提交详解："><a href="#GET提交与POST提交详解：" class="headerlink" title="GET提交与POST提交详解："></a><font color:blue="">GET提交与POST提交详解：</font></h3><h3 id="GET提交："><a href="#GET提交：" class="headerlink" title="GET提交："></a><font color:red="">GET提交：</font></h3><ul><li>以键值对的方式提交 key:value 通过键名获取键值</li><li>安全性不高 因为请求数据加在地址（url）后面</li><li>传输数据量小 </li></ul><h3 id="以GET提交方式有哪些："><a href="#以GET提交方式有哪些：" class="headerlink" title="以GET提交方式有哪些："></a>以GET提交方式有哪些：</h3><ul><li>网页中的超链接</li><li>form表单提交方式method为get</li></ul><h3 id="例子："><a href="#例子：" class="headerlink" title="例子："></a>例子：</h3><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本"> <!---------第一种方法--> <a href="login.php?username=xiaozhong">点击</a> <!--------第二种方法--> <form action="login.php" method="get"> 用户名：<input type="text" name="username"> <br /> 密码：<input type="password" name="pass"> <br /> <input type="submit" value="登录"> </form>服务器端获取传递过来的数据（php）<?php //get方式获取传递的值 通过键名获取键值$username=$_GET['username']; ?><?php//post方式提交的获取传递的值 通过键名获取键值$username=$_POST['username'];$pass=$POST['pass'];?>服务器端获取传递过来的数据（javaweb）String pname = request.getParameter("username");String pass = request.getParameter("pass");<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="POST提交"><a href="#POST提交" class="headerlink" title="POST提交:"></a><font color:red="">POST提交:</font></h3><ul><li>以键值对的方式提交 key:value 通过键名获取键值</li><li>安全性高 因为请求数据封装在HTML头中</li><li>传输数据量大</li></ul><h3 id="以POST提交方式："><a href="#以POST提交方式：" class="headerlink" title="以POST提交方式："></a>以POST提交方式：</h3><ul><li>form表单提交方式method为post</li></ul><h3 id="例子：-1"><a href="#例子：-1" class="headerlink" title="例子："></a>例子：</h3><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本"> <!--------以post方式提交--> <form action="login.php" method="post"> 用户名：<input type="text" name="username"> <br /> 密码：<input type="password" name="pass"> <br /> <input type="submit" value="登录"> </form>服务器端获取传递过来的数据（php）<?php//post方式提交的获取传递的值 通过键名获取键值$username=$_POST['username'];$pass=$POST['pass'];?>服务器端获取传递过来的数据（javaweb）String pname = request.getParameter("username");String pass = request.getParameter("pass");<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="有两种提交数据的方式-那到底用哪种呢？"><a href="#有两种提交数据的方式-那到底用哪种呢？" class="headerlink" title="有两种提交数据的方式 那到底用哪种呢？"></a>有两种提交数据的方式 那到底用哪种呢？</h3><ul><li>具体需求具体分析</li><li>如果该项目对安全性有较高的要求 就用post</li><li>如果该表单需要上传文件时 就用post</li><li>如果该项目对安全性没有较高的要求 就用get</li><li><font color:red="">值得注意的是get提交有长度限制 因为地址（url）有长度限制</font></li></ul>]]></content>
<categories>
<category> web前端 </category>
</categories>
<tags>
<tag> Web前端 </tag>
</tags>
</entry>
<entry>
<title>CSS之三大特性（层叠性-继承性-优先性）</title>
<link href="/posts/z4.html"/>
<url>/posts/z4.html</url>
<content type="html"><![CDATA[<h2 id="各位在编写样式时有遇到以下问题吗？"><a href="#各位在编写样式时有遇到以下问题吗？" class="headerlink" title="各位在编写样式时有遇到以下问题吗？"></a>各位在编写样式时有遇到以下问题吗？</h2><ol><li><p>在设置标签的样式时 选择器相同的情况下 样式相同会被覆盖</p></li><li><p>有些标签在你没有设置任何样式时 会默认有样式呢 比如（文字颜色和大小）</p></li><li><p>有时候设置标签样式没有效果</p><hr></li></ol><h3 id="问题一解答："><a href="#问题一解答：" class="headerlink" title="问题一解答："></a>问题一解答：</h3> <pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">为什么在设置标签的样式时 选择器相同的情况下 样式相同会被覆盖？--这是因为CSS的层叠性--层叠性：是指相同的选择器设置相同的样式时，一个样式会覆盖另一个样式 层叠性主要用来解决样式冲突问题--在样式冲突时，遵循就近原则（后来居上），样式不冲突就不会层叠 因为代码顺序执行<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h3 id="例如："><a href="#例如：" class="headerlink" title="例如："></a>例如：</h3> <pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML"><html lang="en"> <head><style> .box { width: 100px; height: 100px;background-color: red; } .box { /*相同的选择器*/ background-color: orange; /*相同的样式，会被覆盖上面的背景颜色red*/ border: 3px solid green; /*不同的样式 不会被覆盖*/ } </style></head> <body> <div class="box">box</div> </body> </html><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="效果图："><a href="#效果图：" class="headerlink" title="效果图："></a>效果图：</h3><p> <a href="https://imgtu.com/i/5EOa0f"><img src="https://z3.ax1x.com/2021/10/10/5EOa0f.png" alt="问题1.png"></a></p><h3 id="问题二解答："><a href="#问题二解答：" class="headerlink" title="问题二解答："></a>问题二解答：</h3><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">有些标签在你没有设置任何样式时 会默认有样式呢 比如（文字颜色和大小）？--这是因为CSS的继承性--继承性:子标签会继承父标签的某些样式 如文字颜色和大小 以text-,line-,font-开头的会被继承<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="例如：-1"><a href="#例如：-1" class="headerlink" title="例如："></a>例如：</h3><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML"> <html> <style> /*只设置父标签div的样式 没有设置子标签p的样式*/ .box { width: 100px; height: 100px; background-color: violet; color: greenyellow; font-size: 25px; } </style> <div class="box"> <!----父标签-----> <p>我是小钟</p> <!------子标签------> </div></html><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="效果图：-1"><a href="#效果图：-1" class="headerlink" title="效果图："></a>效果图：</h3><p><a href="https://imgtu.com/i/5EjnIO"><img src="https://z3.ax1x.com/2021/10/11/5EjnIO.png" alt="问题二.png"></a></p><h3 id="问题三解答："><a href="#问题三解答：" class="headerlink" title="问题三解答："></a>问题三解答：</h3><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">为什么有时候设置标签样式没有效果？--这是因为CSS中的优先级--优先级（权重）：当给一个标签设置样式时，选择不同的选择器时， 会执行选择器权重高的样式，选择器权重低的样式不会被执行 --权重可以叠加<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h3 id="优先级（权重）表格："><a href="#优先级（权重）表格：" class="headerlink" title="优先级（权重）表格："></a>优先级（权重）表格：</h3><table><thead><tr><th align="center">选择器</th><th align="center">选择器的权重</th></tr></thead><tbody><tr><td align="center">继承或者*</td><td align="center">0.0.0.0</td></tr><tr><td align="center">标签选择器</td><td align="center">0.0.0.1</td></tr><tr><td align="center">类选择器，伪类选择器</td><td align="center">0.0.1.0</td></tr><tr><td align="center">id选择器</td><td align="center">0.1.0.0</td></tr><tr><td align="center">行内样式</td><td align="center">1.0.0.0</td></tr><tr><td align="center">！important</td><td align="center">无穷大</td></tr></tbody></table><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">可以简单的记忆：---继承和通配符的权重为0---标签选择器的权重为1---类选择器以及伪类选择器的权重为10---id选择器的权重为100---行内样式的权重为1000--- !important 的权重为无穷大<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="权重叠加："><a href="#权重叠加：" class="headerlink" title="权重叠加："></a>权重叠加：</h3><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML">--如： -- p #text {} 权重为 1 + 100 = 101 -- .a1 #w {} 权重为 10 + 100 = 110 <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h3 id="继承例子："><a href="#继承例子：" class="headerlink" title="继承例子："></a>继承例子：</h3><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML"><html> <style> /*继承权重为0*/ .box1{ width: 100px; height: 100px;border: 2px solid black; color: green; } p{ color:red; } </style> <div class="box1"> <p>小钟</p> </div></html><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="效果图：-2"><a href="#效果图：-2" class="headerlink" title="效果图："></a>效果图：</h3><p><a href="https://imgtu.com/i/5ExcPU"><img src="https://z3.ax1x.com/2021/10/11/5ExcPU.png" alt="继承.png"></a></p><h3 id="权重叠加例子："><a href="#权重叠加例子：" class="headerlink" title="权重叠加例子："></a>权重叠加例子：</h3><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML"><html> <style> .box2 { /* 权重为 0.0.1.0 */ width: 10px; height: 10px; background-color: coral; } .box1 .box2 { /* 权重为0.0.1.0 + 0.0.1.0 = 0.0.2.0 */ width: 200px; height: 200px; background-color: greenyellow; } </style> <div class="box1"> <div class="box2">我是一个盒子</div> </div></html><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="效果图：-3"><a href="#效果图：-3" class="headerlink" title="效果图："></a>效果图：</h3><p><a href="https://imgtu.com/i/5EzFzQ"><img src="https://z3.ax1x.com/2021/10/11/5EzFzQ.png" alt="权重叠加.png"></a></p>]]></content>
<categories>
<category> CSS </category>
<category> web前端 </category>
</categories>
<tags>
<tag> Web前端 </tag>
<tag> CSS </tag>
</tags>
</entry>
<entry>
<title>HTML中块级元素和行内元素以及行内块元素详解</title>
<link href="/posts/z6.html"/>
<url>/posts/z6.html</url>
<content type="html"><![CDATA[<h1 id="你是否有以下困惑："><a href="#你是否有以下困惑：" class="headerlink" title="你是否有以下困惑："></a>你是否有以下困惑：</h1><ol><li><p>为什么有些标签能够设置宽度和高度，而有些标签不能设置呢？</p></li><li><p>为什么有些标签能够独占一行，而有些标签一行可以放很多个呢？</p></li><li><p>可我就想让这个标签可以设置宽度和宽度并且自己不占满一行呢？</p></li></ol><h2 id="问题1解答："><a href="#问题1解答：" class="headerlink" title="问题1解答："></a>问题1解答：</h2><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">为什么有些标签能够设置宽度和高度，而有些标签不能设置呢？---因为在html中块级（block）元素和行内块（inline-block）元素可以设置宽度和高度---行内（inline）元素不可以设置宽度和高度<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="例如"><a href="#例如" class="headerlink" title="例如:"></a>例如:</h3><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.box1</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> violet<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.box1</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>box1</span><span class="token punctuation">></span></span>box1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>box2</span><span class="token punctuation">></span></span>box2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="效果："><a href="#效果：" class="headerlink" title="效果："></a>效果：</h3><p><a href="https://imgtu.com/i/5AGhNV"><img src="https://z3.ax1x.com/2021/10/10/5AGhNV.png" alt="问题1.png"></a></p><hr><h2 id="问题2解答："><a href="#问题2解答：" class="headerlink" title="问题2解答："></a>问题2解答：</h2><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">为什么有些标签能够独占一行，而有些标签一行可以放很多个呢？ ---因为块级（block）元素独占一行 ---相邻行内（inline）元素或者行内块(inline-block)元素一行可以放很多个，直到充满整个父级盒子的宽度，才会换下一行显示<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="例如："><a href="#例如：" class="headerlink" title="例如："></a>例如：</h3><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.box1</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.box2</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> greenyellow<span class="token punctuation">;</span> <span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>box1</span><span class="token punctuation">></span></span>one<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>box1</span><span class="token punctuation">></span></span>two<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>box2</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>box2</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="效果：-1"><a href="#效果：-1" class="headerlink" title="效果："></a>效果：</h3><p><a href="https://imgtu.com/i/5AG0tf"><img src="https://z3.ax1x.com/2021/10/10/5AG0tf.png" alt="问题2.png"></a></p><hr><h2 id="问题3解答："><a href="#问题3解答：" class="headerlink" title="问题3解答："></a>问题3解答：</h2><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">可我就想让这个标签可以设置宽度和宽度并且自己不占满一行呢？ ---如果该标签不是块级（block）元素或者不是行内块元素时： ---就将该标签进行模式转换成块级（display: block;）或者行内块元素(display: inline-block;) <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="例如-1"><a href="#例如-1" class="headerlink" title="例如:"></a>例如:</h3><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.box1</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span> <span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="效果：-2"><a href="#效果：-2" class="headerlink" title="效果："></a>效果：</h3><p><a href="https://imgtu.com/i/5AGv4K"><img src="https://z3.ax1x.com/2021/10/10/5AGv4K.png" alt="问题3.png"></a></p><hr><h2 id="常见的块级元素，行内元素，行内块元素有哪些？"><a href="#常见的块级元素，行内元素，行内块元素有哪些？" class="headerlink" title="常见的块级元素，行内元素，行内块元素有哪些？"></a>常见的块级元素，行内元素，行内块元素有哪些？</h2><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">---块级元素： div,h1~h6, p,ul,ol,li---行内元素： a,span,i,strong---行内块元素：input,img,td<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h2 id="总结："><a href="#总结：" class="headerlink" title="总结："></a>总结：</h2><pre class="line-numbers language-文本" data-language="文本"><code class="language-文本">--块级元素的特点： (1)可以设置宽度和高度 （2）自己单独占一行 （3）宽度默认是父级元素的宽度的100% （4）块级元素是一个容器或者是一个盒子，里面可以放行内元素或者放行内块元素 --行内元素的特点： （1）不能设置宽度和高度（无效） （2）相邻行内元素一行可以放很多个，直到充满整个父级盒子的宽度，才会换下一行显示 （3）默认宽度是它本身的内容宽度 （4）行内元素只能放行内元素或者文本 -行内块元素的特点： （1）它拥有块级元素和行内元素的特点 （2）可以设置宽度和高度（块级元素的特点） （3）宽度是它本身的内容宽度（行内元素的特点） （4）一行可以显示多个行内元素（行内元素的特点） <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>作者：<a href="httsp://zhongyuanqiong.github.io">小钟个人博客</a></p>]]></content>
<categories>
<category> HTML </category>
<category> web前端 </category>
</categories>
<tags>
<tag> HTML </tag>
<tag> Web前端 </tag>
</tags>
</entry>
<entry>
<title>JS的同步与异步</title>
<link href="/posts/z9.html"/>
<url>/posts/z9.html</url>
<content type="html"><![CDATA[<p>相遇皆是缘分</p><p>js是单线程语言 同一时间只能做一件事情 所以就意味着 所有的任务需要排队 上一个任务执行结束了 ， 下一个任务才会去执行<br>这样就会导致 js执行时间过长的话 ， 就会造成页面渲染不连贯 为了解决这个问题 html5就允许JavaScript脚本可以创建多线程 所以就出现了同步和异步<br>同步和异步：<br>同步：上一个任务执行结束后 下一个任务才会执行；<br>异步：在执行这个任务的同时，你还可以执行其他的任务；<br>它们本质的区别是：这条流水线上各个流程的执行顺序不同；<br>同步任务：同步任务都在主线程上执行，形成一个执行<br>异步任务：js的异步是通过回调函数实现的；<br>异步任务有以下三种类型：<br> 1.普通事件，如click,resize</p><p> 2.资源加载，如load,error等</p><p> 3.定时器： setinterval , setTimeout等</p><p>异步任务相关回调函数添加到任务队列（消息队列）</p>]]></content>
<categories>
<category> javaScript </category>
</categories>
<tags>
<tag> javaScript </tag>
</tags>
</entry>
<entry>
<title>Markdown快速入门小技巧(hexo博客文章--格式用法)</title>
<link href="/posts/z1.html"/>
<url>/posts/z1.html</url>
<content type="html"><![CDATA[<p>相遇皆是缘分</p><h1 id="Markdown-的快速入门-后缀是-md"><a href="#Markdown-的快速入门-后缀是-md" class="headerlink" title="Markdown 的快速入门(后缀是 .md)"></a>Markdown 的快速入门(后缀是 .md)</h1><h2 id="快捷键"><a href="#快捷键" class="headerlink" title="快捷键"></a>快捷键</h2><pre class="line-numbers language-html" data-language="html"><code class="language-html">ctrl+shift+1 大纲显示ctrl+/ 源代码显示<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h2 id="代码块："><a href="#代码块：" class="headerlink" title="代码块："></a>代码块：</h2><pre class="line-numbers language-java" data-language="java"><code class="language-java">```<span class="token function">java</span><span class="token punctuation">(</span>html等等<span class="token punctuation">)</span> 会自动提示<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h2><pre class="line-numbers language-html" data-language="html"><code class="language-html">#标题1 （大）##标题2###标题3####标题4 （小）以此类推 最高标题6<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="加粗"><a href="#加粗" class="headerlink" title="加粗"></a>加粗</h2><pre class="line-numbers language-java" data-language="java"><code class="language-java"><span class="token comment">//加粗</span><span class="token operator">*</span><span class="token operator">*</span>加粗<span class="token operator">*</span><span class="token operator">*</span><span class="token comment">//代码高亮显示</span><span class="token operator">==</span>高亮<span class="token operator">==</span><span class="token comment">//删除线</span><span class="token operator">~</span><span class="token operator">~</span>删除线<span class="token operator">~</span><span class="token operator">~</span><span class="token comment">//斜体</span> <span class="token operator">*</span>斜体内容<span class="token operator">*</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="引用："><a href="#引用：" class="headerlink" title="引用："></a>引用：</h2><pre class="line-numbers language-java" data-language="java"><code class="language-java"><span class="token comment">//引用语法</span><span class="token operator">></span>作者：泽<span class="token operator">>></span>作者：泽<span class="token operator">>>></span>作者：泽<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p>作者：泽</p><blockquote><p>作者：泽</p><blockquote><p>作者：泽</p></blockquote></blockquote></blockquote><h2 id="分割线"><a href="#分割线" class="headerlink" title="分割线"></a>分割线</h2><pre class="line-numbers language-java" data-language="java"><code class="language-java"><span class="token comment">//分割线</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h2 id="图片插入"><a href="#图片插入" class="headerlink" title="图片插入"></a>图片插入</h2><pre class="line-numbers language-java" data-language="java"><code class="language-java"><span class="token comment">//在线图片与本地图片</span><span class="token operator">!</span><span class="token punctuation">[</span>照片名子<span class="token punctuation">]</span>（<span class="token operator">/</span>image<span class="token operator">/</span>me<span class="token punctuation">.</span>png）<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p><img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" alt="img"></p><h2 id="超链接"><a href="#超链接" class="headerlink" title="超链接"></a>超链接</h2><pre class="line-numbers language-java" data-language="java"><code class="language-java"><span class="token comment">//超链接语法</span><span class="token punctuation">[</span>超链接名字<span class="token punctuation">]</span>（https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>gihub<span class="token punctuation">.</span>com<span class="token operator">/</span>yerenping）<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p><a href="https://music.163.com/#/song?id=28892408&market=baiduqk">我的天空</a></p><h2 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h2><pre class="line-numbers language-java" data-language="java"><code class="language-java"><span class="token comment">//无需列表</span><span class="token operator">-</span> 目录<span class="token number">1</span> <span class="token operator">-</span>后加空格<span class="token operator">-</span> 目录<span class="token number">2</span><span class="token operator">-</span> 目录<span class="token number">3</span><span class="token comment">//有序列表</span> <span class="token number">1</span><span class="token operator">+</span><span class="token punctuation">.</span> <span class="token operator">+</span>名称<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h2><pre class="line-numbers language-java" data-language="java"><code class="language-java">右键》插入》表格用代码过于复杂不推荐使用<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><table><thead><tr><th align="center">姓名</th><th align="center">数字</th><th align="center">语文</th></tr></thead><tbody><tr><td align="center">小王</td><td align="center">85</td><td align="center">21</td></tr><tr><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td align="center"></td><td align="center"></td><td align="center"></td></tr></tbody></table>]]></content>
<categories>
<category> hexo博客 </category>
<category> Markdown </category>
</categories>
<tags>
<tag> hexo博客 </tag>
<tag> Markdown </tag>
</tags>
</entry>
</search>