</code></td>
<td>控制网页小标题</td>
</tr>
<tr>
<td><code><stytle></style></code></td>
<td>内部支持编写css控制标签样式的</td>
</tr>
<tr>
<td><code><link></code></td>
<td>引入外部css文件</td>
</tr>
<tr>
<td><code><script></script></code></td>
<td>内部支持编写JS代码 还可以通过src属性引入外部JS文件</td>
</tr>
<tr>
<td><code><meta></code></td>
<td>通过内部属性的不同 可以有很多功能</td>
</tr>
</tbody>
</table>
<h3>2.3、body内基本标签</h3>
<table>
<thead>
<tr>
<th>标签字符</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>h1~h6</code></td>
<td>标题标签</td>
</tr>
<tr>
<td><code><p></p></code></td>
<td>段落标签</td>
</tr>
<tr>
<td><code><hr></code></td>
<td>分割线</td>
</tr>
<tr>
<td><code><br></code></td>
<td>换行</td>
</tr>
<tr>
<td><code><u></u></code></td>
<td>下划线</td>
</tr>
<tr>
<td><code><s></s></code></td>
<td>删除线</td>
</tr>
<tr>
<td><code><b></b></code></td>
<td>加粗</td>
</tr>
</tbody>
</table>
<p><strong>注意：有很多样式 可能存在很多种标签可以实现</strong></p>
<p><strong>块儿级标签 与行内 标签</strong><br> 块儿级标签：一块标签独占一行</p>
<p>行内标签：内部文本多大自身就占多大</p>
<h3>2.4、body内基本符号</h3>
<table>
<thead>
<tr>
<th>字符</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td><code> </code></td>
<td>空格</td>
</tr>
<tr>
<td><code>gt</code></td>
<td>大于号</td>
</tr>
<tr>
<td><code>lt</code></td>
<td>小于号</td>
</tr>
<tr>
<td><code>amp</code></td>
<td>&</td>
</tr>
<tr>
<td><code>yen</code></td>
<td>￥</td>
</tr>
<tr>
<td><code>reg</code></td>
<td>注册</td>
</tr>
<tr>
<td><code>copy</code></td>
<td>版权</td>
</tr>
</tbody>
</table>
<h3>2.5、body内布局标签</h3>
<p><strong>div</strong><br> 块儿级标签</p>
<p><strong>spen</strong><br> 行内标签</p>
<p><strong>块儿级标签是可以通过CSS调整为不独占一行</strong><br> <strong>标签之间很多时候可以嵌套</strong></p>
<ul>
<li> <p>块儿级可以嵌套任何类型标签</p> <p>p标签虽然是块儿级标签 但是不能嵌套块儿级标签</p> <p>行内标签只能嵌套行内标签</p> </li>
</ul>
<h3>2.6、body内常见标签</h3>
<p><strong>a标签<code><a></a></code></strong></p>
<p><strong>链接标签</strong></p>
<ul>
<li><strong>herf可以填写网址 点击自动跳转</strong>
<ul>
<li>herf 还可以填写其他标签的id值 实现锚点功能</li>
</ul> </li>
<li><strong>target 可以控制是否新建页面跳转</strong>
<ul>
<li><code>_self</code>在原来页面跳转</li>
<li><code>_blank</code>新起一个页面跳转</li>
</ul> </li>
</ul>
<p><strong>img 标签</strong><br> <strong>图片标签</strong></p>
<ul>
<li>src 填写图片地址（网络地址 本地地址）</li>
<li>title 鼠标悬浮在图片上回提示信息</li>
<li>alt图片加载失败提示信息</li>
<li>width 调整图片高度
<ul>
<li>上诉两给调整一个 另一个就会等比缩放</li>
</ul> </li>
</ul>
<h3>2.7、标签两个重大属性</h3>
<p><strong>下面的两个属性都是用来快速定位 需要操作的标签</strong><br> <strong>id属性（一对一管理）</strong><br> 类似于身份证号 再同一个html页面上id值不能重复</p>
<p><strong>classs属性（批量管理）</strong><br> 类似于分组 多个标签可以拥有相同的class值</p>
<h3>2.8、列表标签</h3>
<p><strong>无序列表</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> 可以添加参数 type="disc 实心默认 circle空心圆 square实心方块 nonne无样式"
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>python<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>mysql<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>httml<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
</code></pre>
<ul>
<li>页面上有规则的横向或者竖向的多个元素几乎使用的都是无序列表</li>
</ul>
<p><strong>有序列表</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>1<span class="token punctuation">"</span></span> <span class="token attr-name">start</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<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>li</span><span class="token punctuation">></span></span>第一个<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第二个<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第三个<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>表格标签</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> #表格
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> 字段
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> 添加一行
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>id<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> 字段一 th相比td 粗一点
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>pwd<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> 数据
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> 添加一行数据
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>001<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>kk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
</code></pre>
<h2>3、form 表单标签</h2>
<p><strong>能够 获取用户（输入 选择 上传）的数据并发送给后端服务器</strong><br> <code>form</code>表单 能完成上述操作的不仅仅只有它</p>
<pre><code class="prism language-html"><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><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><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>
</code></pre>
<p><code>action</code> 属性<br> 用于控制数据的提交地址 不写的话就是朝当前页面所在地址提交<br> <code>method</code> 控制数据提交的方式</p>
<p><strong>用户输入 账号密码</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>password<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>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>用户日期选择</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>birthday:<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>date<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>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>用户 邮箱填写 自动识别 @</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>emil:<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>email<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>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>单选（性别）</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>hoby:
<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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hoby<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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hoby<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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hoby<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>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>上传文件 单个或多个</strong></p>
<pre><code class="prism language-html">上传单个文件
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>file:
<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>file<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>p</span><span class="token punctuation">></span></span>
上传多个文件
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>file:
<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>file<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>下拉单选</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>province:
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></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><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>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><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>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><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>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><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>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>下拉多选</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>GF:
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></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><span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>kk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ming<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>hong<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>大内容文本框</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>简介
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></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><span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<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>textarea</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>提交数据</strong></p>
<pre><code class="prism language-html"><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>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>用户注册<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>重置输入的内容</strong></p>
<pre><code class="prism language-html"><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>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置内容<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>无功能按钮</strong><br> 可以后期自己添加功能</p>
<pre><code class="prism language-html"><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>button<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>无功能按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
<h3>3.1、获取用户输入的标签两大重要属性</h3>
<p><strong>name 属性</strong><br> 类似于字典的键</p>
<p><strong>value 属性</strong><br> 类似于字典的值</p>
<p>form表单在朝后端发送得到得数据时候 标签必须要有name 否则不会发送该标签得值</p>
<p><strong>获取用户输入得input 标签理论上需要label配合使用</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<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 attr-name">mame</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>账号<span class="token punctuation">"</span></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>username<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>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>获取用户输入input标签 也可以添加背景提示</strong><br> <code>placeholder</code></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<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">tyep</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 attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>密码<span class="token punctuation">"</span></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>pwd<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>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>获取的用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value</strong></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<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>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hoby<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checked<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>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>province<span class="token punctuation">"</span></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><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>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sh<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>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>针对radio 和 checkbox 可以默认选中</strong><br> <code>checked="checked"</code> 如果属性名和属性值 相等 那么可以简写成checked</p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>女
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p>针对option标签也可以默认选中<br> <code>selected</code></p>
<h2>4、CSS层叠样式表</h2>
<p><strong>调整标签样式</strong><br> <strong>语法结构</strong></p>
<pre><code class="prism language-css"><span class="token selector">选择器</span> <span class="token punctuation">{</span>
属性名1<span class="token punctuation">;</span>属性值1<span class="token punctuation">;</span>
属性名2；属性值2；
<span class="token punctuation">}</span>
</code></pre>
<p>**注释语法 **</p>
<pre><code class="prism language-css"><span class="token comment">/*注释内容*/</span>
</code></pre>
<p><strong>三种编写CSS的方式</strong></p>
<ol>
<li>head 中 style标签内部直接编写（学习阶段使用 方便）</li>
<li>head 中link标签引入外部css文件（最正规）</li>
<li>直接在标签内部通过style属性编写（不推荐）</li>
</ol>
<h3>4.1、CSS选择器</h3>
<h3>4.2、CSS基本选择器</h3>
<p><strong>选择标签</strong><br> 直接编写标签名来查找标签</p>
<pre><code class="prism language-css"><span class="token comment">/*查找所有的div标签 并将内部的文本颜色变为绿色*/</span>
<span class="token selector">div</span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>类选择器</strong><br> 通过编写class值来查找标签</p>
<pre><code class="prism language-css"><span class="token comment">/*朝朝所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/</span>
<span class="token selector">.c1</span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>id选择器</strong><br> 通过编写 id的值来精确查找标签</p>
<pre><code class="prism language-css"><span class="token comment">/*查找id值是d1的标签 并将内部的文本颜色 改为清色*/</span>
<span class="token selector">#d1</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>aquamarine<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>通用选择器</strong><br> 查找所有的标签</p>
<pre><code class="prism language-css"><span class="token selector">查找所有的标签 并将内部的文本颜色改为蓝色
*</span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>bulue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3>4.3、css组合选择器</h3>
<p><strong>后代选择器</strong><br> 两个选择器之间空格隔开 查找前面选择器获取到的标签内所有符号 空格后面选择器要求标签</p>
<pre><code class="prism language-css"><span class="token comment">/*查找div 标签内部所有的 span （后代）*/</span>
<span class="token selector">#d1 span</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>儿子选择器</strong><br> 两个选择器之间大于号隔开 查找前面选择器获取到的标签 内部第一层级符合大于号后面选择器要求的标签</p>
<pre><code class="prism language-css"><span class="token comment">/*朝div标签内所有的儿子span*/</span>
<span class="token selector">#d1>span</span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>orange
<span class="token punctuation">}</span>
</code></pre>
<p><strong>毗邻选择器</strong><br> 两个选择器 加号隔开 查找前面选择器取到标签下方 紧挨着的一个 符合加号后面选择器要求的标签</p>
<pre><code class="prism language-css"><span class="token selector">#d1+span</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>弟弟选择器</strong><br> 两个选择器 波浪隔开 查找 前面选择器取到的标签 下方所有的符合波浪后面选择器 要求的标签</p>
<pre><code class="prism language-css"><span class="token selector">#d1~span</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3>4.4CSS属性选择器</h3>
<p><strong>所有标签除了有自己默认的属性之外 还可以拥有自定义的任意属性</strong></p>
<ul>
<li>默认属性：<code>id</code> <code>class</code></li>
<li>自定义属性：<code>x=1</code> <code>y=2</code></li>
</ul>
<p><strong>查找属性名含有name的标签</strong></p>
<pre><code class="prism language-css"><span class="token selector">[name]</span><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 comment">/*背景色设为 红色*/</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>查找属性名含有那么 并且值是username 的标签</strong></p>
<pre><code class="prism language-css"><span class="token selector">[name='username']</span><span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>查找input标签并且 属性名含有name值是username的</strong></p>
<pre><code class="prism language-css"><span class="token selector">input[name='username']</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre>
<h3>4.5、选择器之分组与嵌套</h3>
<p><strong>当多个选择器找到的标签需要调整相同的样式 那么可以合并</strong></p>
<pre><code class="prism language-css"><span class="token selector">div,p,span</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>并且合并的选择器彼此不干扰 也没有类型限制</strong></p>
<pre><code class="prism language-css"><span class="token selector">#d1,c1,span</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>还可以在选择器基础上添加额外的选择 使得查找更精确</strong></p>
<pre><code class="prism language-css"><span class="token selector">span.c1</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div#d1</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3>4.6、CSS选择器之伪类选择器</h3>
<p><strong>a标签 默认的颜色 有两种 紫色跟蓝色</strong><br> 紫色：谅解地址一家被点过了<br> 蓝色：链接地址从来没有点击过</p>
<pre><code class="prism language-css"><span class="token comment">/*鼠标悬浮上去 之后样式改变 适用于所有含有文本的标签*/</span>
<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
a
</code></pre>
<h3>4.7、CSS选择器 之伪元素 选择器</h3>
<p><strong>通过CSS代码来操作标签的文本内容</strong></p>
<pre><code class="prism language-css"><span class="token comment">/*将文本第一个字 修改样式*/</span>
<span class="token selector">p:first-letter</span> <span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*在文本前面 添加文本 内容 且该内容 不会被选中*/</span>
<span class="token selector">p:before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span><span class="token string">"哈哈哈哈!"</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 在文本后面添加 内容 且 该文本不会被选中*/</span>
<span class="token selector">p:after</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"哦哦哦"</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<ul>
<li>为元素选择可以用在解决标签浮动所带来的负面影响 也可以用来做数据的防爬</li>
</ul>
<h3>4.8、选择器优先级</h3>
<p><strong>当多个选择器查找到相同的标签 改不同的样式 那么标签该听谁的</strong></p>
<ol>
<li> <p>选择器相同 引入位置不同</p> <p>就近原则 覆盖上面 内容</p> </li>
<li> <p>选择器不同的情况</p> <p>行内 > id选择器 > 类选择器 > 标签选择器</p> <p><code>越精确 优先级越高</code></p> </li>
</ol>
<p>**强制修改标签样式的操作 !important **</p>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>red !import
<span class="token punctuation">}</span>
</code></pre>
<h3>4.9、字体样式</h3>
<p><strong>width</strong> 属性可以为元素设置宽度<br> <strong>height</strong> 属性可以为元素设置高度<br> 块级标签才能设置宽度，行内标签的宽度由内容来决定</p>
<pre><code class="prism language-css"><span class="token comment">/*设置 字体大小*/</span>
<span class="token selector">p</span> <span class="token punctuation">{</span>
font=<span class="token property">size</span><span class="token punctuation">:</span>30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*设置 字体更细*/</span>
<span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span>lighter<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*设置字体颜色样式*/</span>
<span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token comment">/*字体颜色*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>61<span class="token punctuation">,</span> 25<span class="token punctuation">,</span> 21<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*三基色 设定颜色*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> #153d2f<span class="token punctuation">;</span> <span class="token comment">/*十六进制设置颜色*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>252<span class="token punctuation">,</span> 190<span class="token punctuation">,</span> 6<span class="token punctuation">,</span> 0.84<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*设置颜色透明度（最后一位数）*/</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>设置文本居中</strong></p>
<pre><code class="prism language-css"><span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>取消文本下划线</strong></p>
<pre><code class="prism language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>首行缩进</strong></p>
<pre><code class="prism language-css"><span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">text-indent</span><span class="token punctuation">:</span>32px<span class="token punctuation">;</span> 字标签 默认16px 这是首行缩进两字符
<span class="token punctuation">}</span>
</code></pre>
<h2>5、背景属性</h2>
<p><strong>设置背景颜色</strong></p>
<pre><code class="prism language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #b7b6b6<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>设置图片为背景</strong></p>
<pre><code class="prism language-css"><span class="token selector">div#d1</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span>1000px<span class="token punctuation">;</span> <span class="token comment">/*调整块 高度*/</span>
<span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token comment">/*调整长度*/</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -342px 0px /* 图片 漂移
<span class="token punctuation">}</span>
</code></pre>
<ul>
<li>可以通过 网页开发者工具 来调整 图片移动</li>
</ul>
<p><strong>填写填充</strong></p>
<pre><code class="prism language-css"><span class="token selector">div#d1</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span>1000px<span class="token punctuation">;</span> <span class="token comment">/*调整块 高度*/</span>
<span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token comment">/*调整长度*/</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -342px 0px /* 图片 漂移
<span class="token punctuation">}</span>
</code></pre>
<h2>6、边框属性</h2>
<p><strong>给上下左右设定 边框</strong></p>
<pre><code class="prism language-css"><span class="token selector">#d2</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span>1000px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 5px solid black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#d2</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span>1000px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/*border: 5px solid black;*/</span>
<span class="token property">border-left</span><span class="token punctuation">:</span> 10px solid red<span class="token punctuation">;</span> /**给左边 边框设置样式/
<span class="token property">border-top</span><span class="token punctuation">:</span> 10px solid blue<span class="token punctuation">;</span> /**给上边边 边框设置样式/
<span class="token property">border-right</span><span class="token punctuation">:</span> 10px solid green<span class="token punctuation">;</span> /**给右边 边框设置样式/
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 10px solid red<span class="token punctuation">;</span> /**给下面边 边框设置样式/
</code></pre>
<p><strong>边框画圆</strong><br> <code>border-radius:50%</code></p>
<pre><code class="prism language-css"><span class="token selector">#d2</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/*border: 5px solid black;*/</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> center center<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token comment">/*在块儿级标签 画圆*/</span>
<span class="token punctuation">}</span>
</code></pre>
<h2>7、display</h2>
<p><strong>隐藏标签</strong><br> <code>display:none</code></p>
<pre><code class="prism language-css"><span class="token selector"><style>
div</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
</code></pre>
<ul>
<li>多用于非法用途 将原本的 显示的 账户输入窗口的 k值 清除</li>
<li>创建一个隐藏标签 来绑定一个账户 用户已提交 提交的是该kv数据</li>
</ul>
<p><strong>使元素同时具备行内元素和块儿级元素的特点</strong><br> <code>display:"inline-block"</code></p>
<h2>8、盒子模型</h2>
<p><strong>所有的标签的可以看成是一个快递盒</strong></p>
<table>
<thead>
<tr>
<th>比喻</th>
<th>实际</th>
<th>名词</th>
</tr>
</thead>
<tbody>
<tr>
<td>两个快递盒之间的距离</td>
<td>标签之间的距离</td>
<td>外边距（margin）</td>
</tr>
<tr>
<td>快递盒的厚度</td>
<td>标签的边框</td>
<td>边框（border）</td>
</tr>
<tr>
<td>盒子内物体距离盒子内壁</td>
<td>内部文本与边框的距离</td>
<td>内边距（padding）</td>
</tr>
<tr>
<td>物体自身的大小</td>
<td>标签内部的内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<p><strong>外边距操作</strong><br> <code>margin</code></p>
<pre><code class="prism language-css"><span class="token property">margin-top</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span> <span class="token comment">/*设置上外边距*/</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token comment">/*设置左外边距*/</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token comment">/*设置右外边距*/</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token comment">/*设置 下外边距为100px*/</span>
</code></pre>
<p><strong>body 标签自带8px的外边距</strong></p>
<pre><code class="prism language-css"><span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>简写形式 作用域上下左右
<span class="token property">margin</span><span class="token punctuation">:</span> 10px 20px<span class="token punctuation">;</span> 上下 左右
<span class="token property">margin</span><span class="token punctuation">:</span> 10px 20px 30px 40px<span class="token punctuation">;</span> 上右下左（顺时针）
margin 还可以让内部标签 居中显示
margin：100px auto 仅限于水平方向 居中
</code></pre>
<ul>
<li>padding 使用方式与margin一致</li>
</ul>
<h2>9、浮动布局</h2>
<p><strong>靠左 或靠右浮动：<code>float:left\right</code></strong><br> <strong>浮动会造成 父标签坍陷 这是一个不好的现象 因为会引起歧义</strong><br> 解决福哦那个造成的父亲标签塌陷</p>
<pre><code class="prism language-css"><span class="token selector">.clearfix:after</span><span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token comment">/*空文本*/</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token comment">/*让其变成块儿级*/</span>
<span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span> <span class="token comment">/*让其左右两边蹦年右浮动元素*/</span>
<span class="token punctuation">}</span>
</code></pre>
<ul>
<li>提前写好 上述的css擦欧总 遇到标签塌陷就给标签添加 clearfix类值 即可</li>
<li><strong>游览器针对文本 时优先展示的（浮动的元素如果 遮挡会想办法展示）</strong></li>
</ul>
<p><strong>溢出属性</strong></p>
<table>
<thead>
<tr>
<th>overflow属性值</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>visble</code></td>
<td>默认值，内容不会被修剪，会是呈现在元素框之外</td>
</tr>
<tr>
<td><code>hidden</code></td>
<td>内容会被修剪，并且其余内容是不可见的</td>
</tr>
<tr>
<td><code>scroll</code></td>
<td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容</td>
</tr>
<tr>
<td><code>auto</code></td>
<td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容</td>
</tr>
<tr>
<td><code>inherit</code></td>
<td>规定从父元素继承 overflow 属性的值</td>
</tr>
</tbody>
</table>
<h2>10、定位</h2>
<p><strong>static（静态）</strong><br> 所有标签默认都不能直接通过定位修改位置 必须切换成下面三种之一</p>
<p><strong>relatice（相对 定位）</strong><br> 相对于标签原来的位置咋定位</p>
<p><strong>absolute（绝对定位）</strong><br> 基于已经定位过的父标签左定位（如果没有父表则以body为参照）</p>
<p><strong>fixed（固定定位）</strong><br> 相对于浏览器窗口做定位</p>
<h3>10.1、z-index</h3>
<p><strong>浏览器界面其实是一个三维坐标 z轴指向用户</strong></p>
<h2>11、JavaScript</h2>
<p><em>跟java没有关系 主要是伪类噌热度</em></p>
<p><strong>JavaScript 与 ECMASript的区别</strong></p>
<ul>
<li>前者是后者的规划 后者是前者的一种实现</li>
<li>EcmaScript不是JavaScript唯一的部分 也不是唯一被标准化的部分</li>
<li>完整的JavaScript 由以下三个不同的部分组成
<ul>
<li>核心（ECMAScript）</li>
<li>文档对象模型（DOM）</li>
<li>浏览器对象模型（BOM）</li>
</ul> </li>
</ul>
<p><strong>JavaScript 是一门编程有传言（NodeJS 是能够 执行js在后端服务器运行的工具）</strong></p>
<h3>11.1、html引入js的方式</h3>
<p><strong>通过<code>script</code>标签键 直接编写js代码</strong></p>
<pre><code class="prism 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">
在这里写js代码
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>引入js文件 通过<code>script</code> 标签中 src属性 导入js文件</strong></p>
<h3>11.2、js变量与常量</h3>
<p><strong>在js中声明 变量和 常量 都需要使用关键字</strong></p>
<ul>
<li><strong>var：全局有效</strong></li>
<li><strong>let：如果在局部名称空间中使用那么仅仅在局部名称空间有效</strong></li>
<li><strong>const：定义常量</strong></li>
</ul>
<p><strong>JS也是动态类型：变量名绑定的数据值类型不固定</strong></p>
<pre><code class="prism language-css">var name=<span class="token string">'jason'</span>
name = 123
name =[11<span class="token punctuation">,</span>22<span class="token punctuation">,</span>33<span class="token punctuation">,</span>]
</code></pre>
<h3>11.3、js数据类型之数值类型</h3>
<p><strong>在js中常看数据类型可以使用typef</strong></p>
<p><strong>在js中整型浮点型称为数值类型number</strong></p>
<pre><code class="prism language-js"><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//整数</span>
parseFloat（） <span class="token comment">//小数</span>
</code></pre>
<p><code>NaN</code> : Not a Number不是一个数字</p>
<h3>11.4、js数据类型之字符串类型</h3>
<p><strong>字符串 string</strong></p>
<pre><code class="prism language-js"><span class="token keyword">var</span> name <span class="token operator">=</span><span class="token string">'kk'</span> <span class="token comment">//单引号</span>
<span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"kk"</span> <span class="token comment">//双引号</span>
<span class="token keyword">var</span> s1 <span class="token operator">=</span> <span class="token string">'你好啊$(name)'</span> <span class="token comment">//格式化输出</span>
</code></pre>
<h3>11.5、js数据类型之布尔值</h3>
<p><code>bollean</code> 布尔值</p>
<ol>
<li><strong>True</strong></li>
<li><strong>Faise</strong>
<ol>
<li>（空字符串）</li>
<li><code>0</code></li>
<li><code>null</code></li>
<li><code>undefined</code></li>
<li><code>NaN</code></li>
</ol> </li>
</ol>
<p><strong>null 与 undefined 的区别</strong><br> <code>null</code> 可以理解为曾经拥有过 现在暂时空了</p>
<p><code>undefined</code> 可以理解为从来没拥有过</p>
<h3>11.6、js数据类型之对象（object）</h3>
<p><strong>JS中也是一切皆对象</strong><br> 所有事物都是对象：字符串、数组、函数···</p>
<h4>11.6.1、对象之数组</h4>
<p><strong>就是python中列表</strong></p>
<pre><code class="prism language-css">// 直接生成
let l1 = [12<span class="token punctuation">,</span><span class="token string">'kk'</span><span class="token punctuation">,</span>22<span class="token punctuation">,</span>44<span class="token punctuation">,</span>55]
</code></pre>
<p><strong>forEACH</strong></p>
<p>将 数组的每个元素传递给回调函数 类似于for循环</p>
<pre><code class="prism language-js"><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span>index<span class="token punctuation">,</span>arr</span><span class="token punctuation">)</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span>index<span class="token punctuation">,</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span>
l1<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span><span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<p><strong>splice</strong></p>
<pre><code class="prism language-js">l1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token number">33</span><span class="token punctuation">,</span><span class="token number">44</span><span class="token punctuation">]</span>
l1<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">'kk'</span><span class="token punctuation">)</span>
l1
<span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token string">'kk'</span><span class="token punctuation">,</span><span class="token number">44</span><span class="token punctuation">,</span><span class="token punctuation">]</span>
</code></pre>
<p><strong>map</strong></p>
<pre><code class="prism language-js">l1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token number">33</span><span class="token punctuation">,</span><span class="token number">44</span><span class="token punctuation">,</span><span class="token number">55</span><span class="token punctuation">]</span>
l1<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span> value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span><span class="token number">23</span><span class="token punctuation">,</span><span class="token number">34</span><span class="token punctuation">,</span><span class="token number">45</span><span class="token punctuation">,</span><span class="token number">56</span><span class="token punctuation">]</span>
</code></pre>
<h3>11.7、js类型之自定义对象（）</h3>
<p><strong>自定义对象 相当于 python中的字典</strong><br> 自定义对象 定义方式</p>
<pre><code class="prism language-js"><span class="token comment">//方式一</span>
<span class="token keyword">let</span> d1 <span class="token operator">=</span><span class="token punctuation">{</span><span class="token string-property property">'name'</span><span class="token operator">:</span><span class="token string">'jason'</span><span class="token punctuation">,</span><span class="token string-property property">'pwd'</span><span class="token operator">:</span><span class="token number">123</span><span class="token punctuation">}</span>
<span class="token comment">//方式二</span>
<span class="token keyword">let</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>
<p><strong>获取键值的方式</strong><br> d1 点键的方式获取值</p>
<h3>11.8、运算符</h3>
<p><strong>自增</strong><br> 加号位置不同 其预算的流程也不同</p>
<pre><code class="prism language-js"><span class="token keyword">var</span> x<span class="token operator">=</span><span class="token number">10</span>
<span class="token keyword">var</span> res1<span class="token operator">=</span>x<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token comment">//加号 值 后面 那么就是先赋值 在在进行自增</span>
<span class="token keyword">var</span> res2<span class="token operator">=</span><span class="token operator">++</span>x<span class="token punctuation">;</span> <span class="token comment">//加号在值前面 那么就是 先自增 在赋值</span>
</code></pre>
<p><strong>弱等于 与强等于</strong><br> <code>==</code>弱等于 js会自动 转换成相同数据类型<br> <code>===</code>强等于 不会自动转换 等于oython中的==</p>
<p><strong>逻辑运算符</strong></p>
<table>
<thead>
<tr>
<th>符号</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>&&</td>
<td>等于python中and</td>
</tr>
<tr>
<td>||</td>
<td>等于pyton中or</td>
</tr>
<tr>
<td>！</td>
<td>等于python中的not</td>
</tr>
</tbody>
</table>
<h3>12、js流程控制</h3>
<h3>12.1、分支结构</h3>
<ol>
<li> <p><strong>单if分支</strong></p> <pre><code class="prism language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token punctuation">)</span><span class="token punctuation">{</span>条件成立之后执行的代码<span class="token punctuation">}</span>
</code></pre> </li>
<li> <p><strong>if····else分支</strong></p> <pre><code class="prism language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token punctuation">)</span><span class="token punctuation">{</span>
条件链成立之后执行的代码
<span class="token punctuation">}</span>
<span class="token keyword">else</span><span class="token punctuation">{</span>
条件不成立之后执行的代码
<span class="token punctuation">}</span>
</code></pre> </li>
<li> <p><strong>if···elif····else分支</strong></p> <pre><code class="prism language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
条件<span class="token number">1</span>成立之后执行的代码
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
条件<span class="token number">1</span> 不成立条件<span class="token number">2</span>成立执行的代码
<span class="token punctuation">}</span>
<span class="token keyword">else</span><span class="token punctuation">{</span>
上述条件都不满足 后执行的代码
<span class="token punctuation">}</span>
</code></pre> </li>
</ol>
<h3>12.2、循环结构</h3>
<p><strong>for循环</strong></p>
<pre><code class="prism language-js"><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><</span><span class="token number">101</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>打印数组内所有数据值</strong></p>
<pre><code class="prism language-js">l1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token number">33</span><span class="token punctuation">,</span><span class="token number">44</span><span class="token punctuation">,</span><span class="token number">55</span><span class="token punctuation">,</span><span class="token number">66</span><span class="token punctuation">,</span><span class="token number">77</span><span class="token punctuation">,</span><span class="token number">88</span><span class="token punctuation">,</span><span class="token string">'kk'</span><span class="token punctuation">]</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span> i<span class="token operator"><</span><span class="token function">length</span><span class="token punctuation">(</span>l1<span class="token punctuation">)</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>l1<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>while循环</strong></p>
<pre><code class="prism language-js"><span class="token keyword">while</span><span class="token punctuation">(</span>条件<span class="token punctuation">)</span><span class="token punctuation">{</span>
循环体代码
<span class="token punctuation">}</span>
</code></pre>
<h2>13、函数</h2>
<p><strong>函数语法结构</strong></p>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">函数名</span><span class="token punctuation">(</span><span class="token parameter">形参</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
函数体代码
<span class="token keyword">return</span> 返回值
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>参数个数 不需要一一对应 如果想要限制参数个数需要使用内置 关键字 arguments</strong></p>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length<span class="token operator">===</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'参数个数不足'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>匿名函数</strong></p>
<pre><code class="prism language-js"><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> a<span class="token operator">+</span>b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>箭头函数</strong></p>
<pre><code class="prism language-js"><span class="token keyword">var</span> f <span class="token operator">-</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token constant">V</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> <span class="token function-variable function">f</span> <span class="token operator">=</span> <span class="token parameter">v</span> <span class="token operator">=></span> v<span class="token punctuation">;</span>
</code></pre>
<h2>14、js内置对象</h2>
<p><strong>类似于python中的内置函数名或内置模块</strong><br> <strong>固定语法</strong></p>
<pre><code class="prism language-js"><span class="token keyword">var</span> 变量名 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token function">内置对象名</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h3>14.1、Date日期对象</h3>
<pre><code class="prism language-js"><span class="token keyword">let</span> Dobj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
dobj
Thu Aug <span class="token number">25</span> <span class="token number">2022</span> <span class="token number">20</span><span class="token operator">:</span><span class="token number">38</span><span class="token operator">:</span><span class="token number">11</span> <span class="token constant">GMT</span><span class="token operator">+</span><span class="token number">0800</span> <span class="token punctuation">(</span>中国标准时间<span class="token punctuation">)</span>
dobj<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token string">'2022/8/28 20:38:11'</span>
</code></pre>
<h3>14.2、JSON 序列化对象</h3>
<p><strong>对象转换成JSON格式字符串</strong><br> <code>JSON.stringify</code></p>
<pre><code class="prism language-js"><span class="token keyword">let</span> d1 <span class="token operator">=</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'kk'</span><span class="token punctuation">,</span><span class="token literal-property property">pwd</span><span class="token operator">:</span><span class="token number">123</span><span class="token punctuation">}</span>
<span class="token keyword">let</span> sd1 <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">,</span><span class="token function">stringify</span><span class="token punctuation">(</span>d1<span class="token punctuation">)</span>
</code></pre>
<p><strong>JSON格式字符串 转换为对象</strong><br> <code>JSON.parse</code></p>
<pre><code class="prism language-js"><span class="token keyword">let</span> d2 <span class="token operator">=</span>JSOn <span class="token function">parse</span><span class="token punctuation">(</span>sd1<span class="token punctuation">)</span>
</code></pre>
<h3>14.2、RegExp 正则</h3>
<p><strong>两种定义方式</strong></p>
<pre><code class="prism language-js"><span class="token comment">//方式一:</span>
<span class="token keyword">let</span> reg1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegEXp</span><span class="token punctuation">(</span><span class="token string">"^[a-zA-Z][a-zA-Z0-9][5,11]"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//方式二:</span>
<span class="token keyword">let</span> reg2 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-zA-Z][a-zA-Z0-9][5,11]"</span><span class="token regex-delimiter">/</span></span>
</code></pre>
<p><strong>正则表达式中不能有空格 且不能为空，为空自动匹配<code>undefined</code></strong></p>
<h2>15、BOM</h2>
<p><strong>BOM：浏览器对象模型</strong><br> 通过写js代码可以跟浏览器交互</p>
<p><strong>打开 一个网页窗口</strong></p>
<pre><code class="prism language-js">window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'http://www.baidu.com'</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">,</span><span class="token string">'height=100px,width=100px,left=500px'</span><span class="token punctuation">)</span>
</code></pre>
<p><strong>关闭一个自己创建的页面</strong></p>
<pre><code class="prism language-js">window<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>
<p><strong>客户端绝大部分信息</strong><br> <code>userAgent</code> 作为游览器的标识</p>
<pre><code class="prism language-js">window<span class="token punctuation">.</span>navigtor<span class="token punctuation">.</span>userAgent
</code></pre>
<h3>15.1、history对象</h3>
<p><strong>控制网页前进 或 返回上一页</strong><br> <code>history.forward()</code><br> <code>history.back()</code></p>
<pre><code class="prism language-js"><span class="token comment">//控制网页 前进一页</span>
window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">//控制网页返回上一页</span>
window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>
<h3>15.2、location对象</h3>
<p><strong>查看当前网址 或跳转 至某网址</strong><br> <code>location.href</code></p>
<pre><code class="prism language-js"><span class="token comment">//查看当前网址</span>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href
<span class="token string">'https://fanyi.youdao.com/'</span>
<span class="token comment">//跳转至 某网页</span>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token operator">=</span><span class="token string">'www.baidu,com'</span>
</code></pre>
<p><strong>刷新网页 重新加载</strong><br> <code>location.reload()</code></p>
<pre><code class="prism language-js">window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>
<h3>15.3、弹出框</h3>
<p><strong>确认框</strong><br> <code>confirm()</code><br> <em>当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。</em></p>
<p><strong>警告框</strong><br> <code>alert()</code></p>
<p><strong>提示框</strong><br> 当提示框出现后 用户需要输入值 然后点击确认或取消按钮 才能继续操作<code>prompt</code></p>
<h3>15.4、计时器</h3>
<table>
<thead>
<tr>
<th>关键字</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>setTimeout</code></td>
<td>定时任务</td>
</tr>
<tr>
<td><code>setInterval</code></td>
<td>循环定时任务</td>
</tr>
<tr>
<td><code>clearInterval</code></td>
<td>停止循环定时任务</td>
</tr>
</tbody>
</table>
<h2>16、DOM</h2>
<h3>16.1、查找标签</h3>
<p><strong>根据id 查找 标签</strong><br> <em>结果是标签本身</em></p>
<pre><code class="prism language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span>
<span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"d1"</span><span class="token operator">></span>div<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</code></pre>
<p><strong>根据class 查找标签</strong><br> <em>结果是数组</em></p>
<pre><code class="prism language-js">document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'c1'</span><span class="token punctuation">)</span>
<span class="token function">HTMLCollection</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">[</span>div<span class="token punctuation">.</span>c1<span class="token punctuation">,</span> p<span class="token punctuation">.</span>c1<span class="token punctuation">]</span>
</code></pre>
<p><strong>根据 标签类型 获取标签</strong><br> <em>结果是数组</em></p>
<pre><code class="prism language-js">document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
<span class="token comment">//HTMLCollection(3) [div#d1, div.c1, div, d1: div#d1]</span>
</code></pre>
<blockquote>
<p>**涉及到DOM的操作 的JS代码应该放在文档的body标签 内部的最下方 **</p>
</blockquote>
<p>16.2、操作节点</p>
<p><strong>创建标签对象</strong></p>
<pre><code class="prism language-js"><span class="token keyword">let</span> aEle <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">'a'</span><span class="token punctuation">)</span> <span class="token comment">//创建一个a标签</span>
</code></pre>
<p><strong>给标签添加属性</strong></p>
<pre><code class="prism language-js">aEle<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">'https://www.baidu.com'</span> <span class="token comment">//给a标签添加 href属性</span>
</code></pre>
<p><strong>给标签添加文本</strong></p>
<pre><code class="prism language-js">aEle<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">'前往百度主页'</span> <span class="token comment">//给给 a标签 添加 文本</span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.baidu.com"</span><span class="token operator">></span>前往百度主页<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
</code></pre>
<p><strong>让创建 的标签添加至文档流中（页面上）</strong><br> <em>该方式为动态创建 临时有效</em></p>
<pre><code class="prism language-js">div1Ele<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>aEle<span class="token punctuation">)</span> <span class="token comment">//通过查找到的标签 点 append 添加 创建好的a标签 值末尾</span>
div1Ele<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>aEle<span class="token punctuation">,</span>div1Ele<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">)</span> <span class="token comment">//添加至指定节点的前面</span>
</code></pre>
<h4>16.2、属性操作</h4>
<p><strong>设置标签的自定义属性</strong><br> <code>setAttribute</code></p>
<pre><code class="prism language-js"><span class="token comment">//setAttribute 标签可以定义 默认属性也可以定义自定义属性</span>
img1<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span><span class="token string">'111.png'</span><span class="token punctuation">)</span>
img1<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'aaa'</span><span class="token punctuation">,</span><span class="token string">'kkk'</span><span class="token punctuation">)</span>
</code></pre>
<ul>
<li>通过点的形式定义的 属性 只能是默认属性</li>
</ul>
<h4>16.3、文本操作</h4>
<p><strong>获取标签内所有文本与标签（可以创建子标签）</strong><br> <code>innerHTML</code></p>
<pre><code class="prism language-js">div1Ele<span class="token punctuation">.</span>innerHTML
<span class="token string">'\n div\n <a href="https://www.baidu.com">前往百度主页</a><p>div>p\n <span>div>p>span</span>\n </p>\n <span>div>span</span>\n <p>div>p</p>\n'</span> <span class="token comment">//不同的标签通过撬棍 符分割</span>
<span class="token comment">//创建子标签</span>
div1Ele<span class="token punctuation">.</span>innerHTML<span class="token operator">=</span> <span class="token string">'<h3> 这是innerHTML</h5>'</span>
div1Ele
<span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"d1"</span><span class="token operator">></span><span class="token operator"><</span>h3<span class="token operator">></span> 这是innerHTML<span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</code></pre>
<p><strong>获取标签内文本</strong><br> <code>innerText</code></p>
<pre><code class="prism language-js">div1Ele<span class="token punctuation">.</span>innerText
<span class="token string">'div 前往百度主页\n\ndiv>p div>p>span\n\ndiv>span\n\ndiv>p'</span>
</code></pre>
<h2>17、JS操作扩展</h2>
<h3>17.1、JS获取用户输入</h3>
<p><strong>获取用户输入 选择</strong><br> 通过 标签 点 <code>value</code> 获取属性值</p>
<pre><code class="prism language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value
<span class="token string">'1241414'</span>
</code></pre>
<p><strong>获取用户上传的文件数据</strong><br> 通过 标签 点 <code>file</code> 获取文件 数组 通过[0] 取值 获取文件对象</p>
<pre><code class="prism language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d5'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
File <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'1825659-20191014121946473-388162006.jpg'</span><span class="token punctuation">,</span> <span class="token literal-property property">lastModified</span><span class="token operator">:</span> <span class="token number">1658977320884</span><span class="token punctuation">,</span> <span class="token literal-property property">lastModifiedDate</span><span class="token operator">:</span> Thu Jul <span class="token number">28</span> <span class="token number">2022</span> <span class="token number">11</span><span class="token operator">:</span><span class="token number">02</span><span class="token operator">:</span><span class="token number">00</span> <span class="token constant">GMT</span><span class="token operator">+</span><span class="token number">0800</span> <span class="token punctuation">(</span>中国标准时间<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">webkitRelativePath</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">99607</span><span class="token punctuation">,</span> …<span class="token punctuation">}</span>
</code></pre>
<h3>17.2、JS类属性操作</h3>
<p><strong>获取标签 所有class的属性值</strong><br> <code>classList</code></p>
<pre><code class="prism language-js"><span class="token keyword">let</span> div1Ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'c1'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 存储classname 含有c1的第一个标签</span>
div1Ele<span class="token punctuation">.</span>classList <span class="token comment">//获取该标签 所有类属性值 数组</span>
</code></pre>
<p><strong>添加 标签 class属性值</strong><br> <code>classList.add()</code></p>
<pre><code class="prism language-js">div1Ele<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'c5'</span><span class="token punctuation">)</span>
</code></pre>
<p><strong>判断 标签 class属性值是否存在</strong><br> <code>classList.contains()</code></p>
<pre><code class="prism language-js">div1Ele<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'c5'</span><span class="token punctuation">)</span> <span class="token comment">//返回值为布尔值</span>
<span class="token boolean">true</span>
</code></pre>
<p><strong>删除 标签 classs属性值</strong><br> <code>classList.remove()</code></p>
<pre><code class="prism language-js">div1Ele<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'c3'</span><span class="token punctuation">)</span>
</code></pre>
<p><strong>当该属性值 不存在时 添加 该属性值 存在便删除该属性值</strong></p>
<pre><code class="prism language-js">div1Ele<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'c3'</span><span class="token punctuation">)</span> <span class="token comment">//存在即删除 并返回False</span>
<span class="token boolean">false</span>
<span class="token comment">//不存在 尾部追加 返回True</span>
</code></pre>
<h4>17.3、 JS样式操作</h4>
<p><strong>通过 style关键字 来修改标签样式</strong><br> <code>style</code></p>
<p><strong>改变 标签 背景颜色</strong></p>
<pre><code class="prism language-js">pEle<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'red'</span>
</code></pre>
<h2>18、事件</h2>
<p><strong>事件可以简单理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)</strong></p>
<h3>18.1、绑定事件</h3>
<p><strong>建议使用方式二绑定</strong></p>
<pre><code class="prism language-js"><span class="token comment">// 方式一：通过添加属性绑 执行的函数</span>
<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"button"</span> value<span class="token operator">=</span><span class="token string">"开关"</span> onclick<span class="token operator">=</span><span class="token string">"func1()"</span><span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
<span class="token keyword">function</span> <span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'bong!!'</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 comment">//方式二：通过 标签.属性 绑定执行的函数 可以查找到多个标签 批量绑定</span>
<span class="token operator"><</span>button id<span class="token operator">=</span><span class="token string">"d1"</span><span class="token operator">></span>
双击
<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
<span class="token keyword">let</span> btnEle <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">'d1'</span><span class="token punctuation">)</span>
btnEle<span class="token punctuation">.</span><span class="token function-variable function">ondblclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'peng!!'</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>
</code></pre>
<p><strong>事件中 关键字this</strong><br> <code>this</code> 指代的是当前被操作的标签对象</p>
<pre><code class="prism language-js"><span class="token keyword">let</span> btnEle <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">'d1'</span><span class="token punctuation">)</span>
btnEle<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'peng!!'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>等待文档加载完毕之后再取执行一些代码</strong><br> <code>windowd.conload</code></p>
<h2>19、jQuery 基本使用</h2>
<blockquote>
<p><strong>jQuery() >>> $()</strong></p>
</blockquote>
<h3>19.1、选择器</h3>
<p><strong>id选择器</strong></p>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#d1"</span><span class="token punctuation">)</span>
</code></pre>
<p><strong>标签选择器</strong></p>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"tagName"</span><span class="token punctuation">)</span>
</code></pre>
<p><strong>class选择器</strong></p>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".className"</span><span class="token punctuation">)</span>
</code></pre>
<h3>19.2、基本筛选器</h3>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:first'</span><span class="token punctuation">)</span> <span class="token comment">//第一个</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:last'</span><span class="token punctuation">)</span> <span class="token comment">//最后一个</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:eq(index)'</span><span class="token punctuation">)</span> <span class="token comment">//通过索引 取值</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:even'</span><span class="token punctuation">)</span> <span class="token comment">//匹配所有索引值为偶数的元素 从0开始计数</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:odd'</span><span class="token punctuation">)</span> <span class="token comment">// 匹配所欲索引值为计数得元素，从0 开始</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:gt(index)'</span><span class="token punctuation">)</span> <span class="token comment">//匹配所有大于给定索引值得元素</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:lt(index)'</span><span class="token punctuation">)</span> <span class="token comment">//匹配所有小于给定索引值得元素</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:not(元素选择器)'</span><span class="token punctuation">)</span> <span class="token comment">//筛选掉所欲满足not条件得标签</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:has(元素选择器)'</span><span class="token punctuation">)</span> <span class="token comment">//选取所有包含一个或多个标签在其内得标签（指得是从后代元素找）</span>
</code></pre>
<h3>19.3、表单筛选器</h3>
<p><strong>可以看成是属性选择器优化而来</strong></p>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':checked'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'input:checked'</span><span class="token punctuation">)</span>
</code></pre>
<p>常用 表单筛选器</p>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':text'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':password'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':file'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':radio'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':checkbox'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':submit'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':reset'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':button'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':enabled'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':disabled'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':checked'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':selected'</span><span class="token punctuation">)</span>
</code></pre>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1685827693062467584"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(python,前端,servlet,javascript)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1835511912843014144.htm"
title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a>
<span class="text-muted">范范0825</span>
<a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div>
</li>
<li><a href="/article/1835509897106649088.htm"
title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
<span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
</li>
<li><a href="/article/1835506869838376960.htm"
title="Python数据分析与可视化实战指南" target="_blank">Python数据分析与可视化实战指南</a>
<span class="text-muted">William数据分析</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a>
<div>在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学</div>
</li>
<li><a href="/article/1835505858939809792.htm"
title="python os.environ" target="_blank">python os.environ</a>
<span class="text-muted">江湖偌大</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a>
<div>os.environ['TF_CPP_MIN_LOG_LEVEL']='0'#默认值，输出所有信息os.environ['TF_CPP_MIN_LOG_LEVEL']='1'#屏蔽通知信息（INFO）os.environ['TF_CPP_MIN_LOG_LEVEL']='2'#屏蔽通知信息和警告信息（INFO\WARNING）os.environ['TF_CPP_MIN_LOG_LEVEL']='</div>
</li>
<li><a href="/article/1835505606245576704.htm"
title="Python中os.environ基本介绍及使用方法" target="_blank">Python中os.environ基本介绍及使用方法</a>
<span class="text-muted">鹤冲天Pro</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi</div>
</li>
<li><a href="/article/1835505226933694464.htm"
title="Pyecharts数据可视化大屏：打造沉浸式数据分析体验" target="_blank">Pyecharts数据可视化大屏：打造沉浸式数据分析体验</a>
<span class="text-muted">我的运维人生</span>
<a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4%E5%BC%80%E5%8F%91/1.htm">运维开发</a><a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E5%85%B1%E4%BA%AB/1.htm">技术共享</a>
<div>Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例</div>
</li>
<li><a href="/article/1835504217729626112.htm"
title="Python教程：一文了解使用Python处理XPath" target="_blank">Python教程：一文了解使用Python处理XPath</a>
<span class="text-muted">旦莫</span>
<a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6/1.htm">Python进阶</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代</div>
</li>
<li><a href="/article/1835503965563875328.htm"
title="python os.environ_python os.environ 读取和设置环境变量" target="_blank">python os.environ_python os.environ 读取和设置环境变量</a>
<span class="text-muted">weixin_39605414</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/os.environ/1.htm">os.environ</a>
<div>>>>importos>>>os.environ.keys()['LC_NUMERIC','GOPATH','GOROOT','GOBIN','LESSOPEN','SSH_CLIENT','LOGNAME','USER','HOME','LC_PAPER','PATH','DISPLAY','LANG','TERM','SHELL','J2REDIR','LC_MONETARY','QT_QPA</div>
</li>
<li><a href="/article/1835498925755297792.htm"
title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
<span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
<div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
</li>
<li><a href="/article/1835497792265613312.htm"
title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
<span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
<div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div>
</li>
<li><a href="/article/1835497664922349568.htm"
title="使用Faiss进行高效相似度搜索" target="_blank">使用Faiss进行高效相似度搜索</a>
<span class="text-muted">llzwxh888</span>
<a class="tag" taget="_blank" href="/search/faiss/1.htm">faiss</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>在现代AI应用中，快速和高效的相似度搜索是至关重要的。Faiss（FacebookAISimilaritySearch）是一个专门用于快速相似度搜索和聚类的库，特别适用于高维向量。本文将介绍如何使用Faiss来进行相似度搜索，并结合Python代码演示其基本用法。什么是Faiss？Faiss是一个由FacebookAIResearch团队开发的开源库，主要用于高维向量的相似性搜索和聚类。Faiss</div>
</li>
<li><a href="/article/1835497665853485056.htm"
title="python是什么意思中文-在python中%是什么意思" target="_blank">python是什么意思中文-在python中%是什么意思</a>
<span class="text-muted">编程大乐趣</span>
<div>Python中%有两种：1、数值运算：%代表取模，返回除法的余数。如：>>>7%212、%操作符（字符串格式化，stringformatting），说明如下：%[(name)][flags][width].[precision]typecode(name)为命名flags可以有+，-，''或0。+表示右对齐。-表示左对齐。''为一个空格，表示在正数的左侧填充一个空格，从而与负数对齐。0表示使用0填</div>
</li>
<li><a href="/article/1835496149843275776.htm"
title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
<div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
</li>
<li><a href="/article/1835496148601761792.htm"
title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
</li>
<li><a href="/article/1835495644123459584.htm"
title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</a>
<span class="text-muted">~在杰难逃~</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a>
<div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div>
</li>
<li><a href="/article/1835495517774245888.htm"
title="python八股文面试题分享及解析(1)" target="_blank">python八股文面试题分享及解析(1)</a>
<span class="text-muted">Shawn________</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>#1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变</div>
</li>
<li><a href="/article/1835493753557708800.htm"
title="每日算法&面试题，大厂特训二十八天——第二十天（树）" target="_blank">每日算法&面试题，大厂特训二十八天——第二十天（树）</a>
<span class="text-muted">肥学</span>
<a class="tag" taget="_blank" href="/search/%E2%9A%A1%E7%AE%97%E6%B3%95%E9%A2%98%E2%9A%A1%E9%9D%A2%E8%AF%95%E9%A2%98%E6%AF%8F%E6%97%A5%E7%B2%BE%E8%BF%9B/1.htm">⚡算法题⚡面试题每日精进</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
<div>目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章</div>
</li>
<li><a href="/article/1835493626688401408.htm"
title="Python快速入门 —— 第三节：类与对象" target="_blank">Python快速入门 —— 第三节：类与对象</a>
<span class="text-muted">孤华暗香</span>
<a class="tag" taget="_blank" href="/search/Python%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/1.htm">Python快速入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#</div>
</li>
<li><a href="/article/1835492869062881280.htm"
title="pyecharts——绘制柱形图折线图" target="_blank">pyecharts——绘制柱形图折线图</a>
<span class="text-muted">2224070247</span>
<a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">数据可视化</a>
<div>一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据</div>
</li>
<li><a href="/article/1835492740536823808.htm"
title="node.js学习" target="_blank">node.js学习</a>
<span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
<div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
</li>
<li><a href="/article/1835491859351302144.htm"
title="Python 实现图片裁剪（附代码） | Python工具" target="_blank">Python 实现图片裁剪（附代码） | Python工具</a>
<span class="text-muted">剑客阿良_ALiang</span>
<div>前言本文提供将图片按照自定义尺寸进行裁剪的工具方法，一如既往的实用主义。环境依赖ffmpeg环境安装，可以参考我的另一篇文章：windowsffmpeg安装部署_阿良的博客-CSDN博客本文主要使用到的不是ffmpeg，而是ffprobe也在上面这篇文章中的zip包中。ffmpy安装：pipinstallffmpy-ihttps://pypi.douban.com/simple代码不废话了，上代码</div>
</li>
<li><a href="/article/1835491353451130880.htm"
title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)</a>
<span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法</div>
</li>
<li><a href="/article/1835490974911000576.htm"
title="python os 环境变量" target="_blank">python os 环境变量</a>
<span class="text-muted">CV矿工</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/numpy/1.htm">numpy</a>
<div>环境变量：环境变量是程序和操作系统之间的通信方式。有些字符不宜明文写进代码里，比如数据库密码，个人账户密码，如果写进自己本机的环境变量里，程序用的时候通过os.environ.get（）取出来就行了。os.environ是一个环境变量的字典。环境变量的相关操作importos"""设置/修改环境变量：os.environ[‘环境变量名称’]=‘环境变量值’#其中key和value均为string类</div>
</li>
<li><a href="/article/1835490218845761536.htm"
title="Python爬虫解析工具之xpath使用详解" target="_blank">Python爬虫解析工具之xpath使用详解</a>
<span class="text-muted">eqa11</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门</div>
</li>
<li><a href="/article/1835483915071090688.htm"
title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）</a>
<span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal</div>
</li>
<li><a href="/article/1835483159630802944.htm"
title="nosql数据库技术与应用知识点" target="_blank">nosql数据库技术与应用知识点</a>
<span class="text-muted">皆过客，揽星河</span>
<a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a><a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%9D%9E%E5%85%B3%E7%B3%BB%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">非关系型数据库</a>
<div>Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)</div>
</li>
<li><a href="/article/1835481269690003456.htm"
title="《Python数据分析实战终极指南》" target="_blank">《Python数据分析实战终极指南》</a>
<span class="text-muted">xjt921122</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>对于分析师来说，大家在学习Python数据分析的路上，多多少少都遇到过很多大坑**，有关于技能和思维的**：Excel已经没办法处理现有的数据量了，应该学Python吗？找了一大堆Python和Pandas的资料来学习，为什么自己动手就懵了？跟着比赛类公开数据分析案例练了很久，为什么当自己面对数据需求还是只会数据处理而没有分析思路？学了对比、细分、聚类分析，也会用PEST、波特五力这类分析法，为啥</div>
</li>
<li><a href="/article/1835477362700021760.htm"
title="Python中深拷贝与浅拷贝的区别" target="_blank">Python中深拷贝与浅拷贝的区别</a>
<span class="text-muted">yuxiaoyu.</span>
<div>转自：http://blog.csdn.net/u014745194/article/details/70271868定义：在Python中对象的赋值其实就是对象的引用。当创建一个对象，把它赋值给另一个变量的时候，python并没有拷贝这个对象，只是拷贝了这个对象的引用而已。浅拷贝：拷贝了最外围的对象本身，内部的元素都只是拷贝了一个引用而已。也就是，把对象复制一遍，但是该对象中引用的其他对象我不复</div>
</li>
<li><a href="/article/1835476983614631936.htm"
title="Python开发常用的三方模块如下：" target="_blank">Python开发常用的三方模块如下：</a>
<span class="text-muted">换个网名有点难</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>Python是一门功能强大的编程语言，拥有丰富的第三方库，这些库为开发者提供了极大的便利。以下是100个常用的Python库，涵盖了多个领域：1、NumPy，用于科学计算的基础库。2、Pandas，提供数据结构和数据分析工具。3、Matplotlib，一个绘图库。4、Scikit-learn，机器学习库。5、SciPy，用于数学、科学和工程的库。6、TensorFlow，由Google开发的开源机</div>
</li>
<li><a href="/article/1835473704432267264.htm"
title="Python编译器" target="_blank">Python编译器</a>
<span class="text-muted">鹿鹿~</span>
<a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E8%AF%91%E5%99%A8/1.htm">Python编译器</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>嘿嘿嘿我又来了啊有些小盆友可能不知道Python其实是有编译器的，也就是PyCharm。你们可能会问到这个是干嘛的又不可以吃也不可以穿好像没有什么用，其实你还说对了这个还真的不可以吃也不可以穿，但是它用来干嘛的呢。用来编译你所打出的代码进行运行（可能这里说的有点不对但是只是个人认为）现在我们来说说PyCharm是用来干嘛的。PyCharm是一种PythonIDE，带有一整套可以帮助用户在使用Pyt</div>
</li>
<li><a href="/article/5.htm"
title="[星球大战]阿纳金的背叛" target="_blank">[星球大战]阿纳金的背叛</a>
<span class="text-muted">comsci</span>
<div>
本来杰迪圣殿的长老是不同意让阿纳金接受训练的.........
但是由于政治原因,长老会妥协了...这给邪恶的力量带来了机会
所以......现代的地球联邦接受了这个教训...绝对不让某些年轻人进入学院
</div>
</li>
<li><a href="/article/132.htm"
title="看懂它，你就可以任性的玩耍了！" target="_blank">看懂它，你就可以任性的玩耍了！</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div> javascript作为前端开发的标配技能，如果不掌握好它的三大特点：1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢？如果标配的技能都没有撑握好，怎么可以任性的玩耍呢？怎么验证自己学好了以上三个基本点呢，我找到一段不错的代码，稍加改动，如果能够读懂它，那么你就可以任性了。
function jClass(b</div>
</li>
<li><a href="/article/259.htm"
title="Java常用工具包 Jodd" target="_blank">Java常用工具包 Jodd</a>
<span class="text-muted">Kai_Ge</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jodd/1.htm">jodd</a>
<div>Jodd 是一个开源的 Java 工具集， 包含一些实用的工具类和小型框架。简单，却很强大！ 写道 Jodd = Tools + IoC + MVC + DB + AOP + TX + JSON + HTML < 1.5 Mb
Jodd 被分成众多模块，按需选择，其中
工具类模块有：
jodd-core &nb</div>
</li>
<li><a href="/article/386.htm"
title="SpringMvc下载" target="_blank">SpringMvc下载</a>
<span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
<div>@RequestMapping(value = WebUrlConstant.DOWNLOAD)
public void download(HttpServletRequest request,HttpServletResponse response,String fileName) {
OutputStream os = null;
InputStream is = null;
</div>
</li>
<li><a href="/article/513.htm"
title="Python 标准异常总结" target="_blank">Python 标准异常总结</a>
<span class="text-muted">2002wmj</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>Python标准异常总结
AssertionError 断言语句（assert）失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF（Ctrl+d） FloatingPointError 浮点计算错误 GeneratorExit generator.close()方法被调用的时候 ImportError 导入模块失</div>
</li>
<li><a href="/article/640.htm"
title="SQL函数返回临时表结构的数据用于查询" target="_blank">SQL函数返回临时表结构的数据用于查询</a>
<span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a>
<div>这两天在做一个查询的SQL，这个SQL的一个条件是通过游标实现另外两张表查询出一个多条数据，这些数据都是INT类型，然后用IN条件进行查询，并且查询这两张表需要通过外部传入参数才能查询出所需数据，于是想到了用SQL函数返回值，并且也这样做了，由于是返回多条数据，所以把查询出来的INT类型值都拼接为了字符串，这时就遇到问题了，在查询SQL中因为条件是INT值，SQL函数的CAST和CONVERST都</div>
</li>
<li><a href="/article/767.htm"
title="java 时间格式化 | 比较大小| 时区 个人笔记" target="_blank">java 时间格式化 | 比较大小| 时区 个人笔记</a>
<span class="text-muted">7454103</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/MyEclipse/1.htm">MyEclipse</a>
<div>个人总结！ 不当之处多多包含！
引用 1.0 如何设置 tomcat 的时区：
位置：(catalina.bat---JAVA_OPTS 下面加上)
set JAVA_OPT</div>
</li>
<li><a href="/article/894.htm"
title="时间获取Clander的用法" target="_blank">时间获取Clander的用法</a>
<span class="text-muted">adminjun</span>
<a class="tag" taget="_blank" href="/search/Clander/1.htm">Clander</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4/1.htm">时间</a>
<div>/**
* 得到几天前的时间
* @param d
* @param day
* @return
*/
public static Date getDateBefore(Date d,int day){
Calend</div>
</li>
<li><a href="/article/1021.htm"
title="JVM初探与设置" target="_blank">JVM初探与设置</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>JVM是Java Virtual Machine（Java虚拟机）的缩写，JVM是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域。 JVM屏蔽了与具体操作系统平台相关的信息，使Java程序只需生成在Java虚拟机上运行的目标代码（字节码）,就可以在多种平台</div>
</li>
<li><a href="/article/1148.htm"
title="SQL中ON和WHERE的区别" target="_blank">SQL中ON和WHERE的区别</a>
<span class="text-muted">avords</span>
<div>SQL中ON和WHERE的区别
数据库在通过连接两张或多张表来返回记录时，都会生成一张中间的临时表，然后再将这张临时表返回给用户。 www.2cto.com 在使用left jion时，on和where条件的区别如下： 1、 on条件是在生成临时表时使用的条件，它不管on中的条件是否为真，都会返回左边表中的记录。 </div>
</li>
<li><a href="/article/1275.htm"
title="说说自信" target="_blank">说说自信</a>
<span class="text-muted">houxinyou</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a>
<div>自信的来源分为两种,一种是源于实力,一种源于头脑.实力是一个综合的评定,有自身的能力,能利用的资源等.比如我想去月亮上,要身体素质过硬,还要有飞船等等一系列的东西.这些都属于实力的一部分.而头脑不同,只要你头脑够简单就可以了!同样要上月亮上,你想,我一跳,1米,我多跳几下,跳个几年,应该就到了!什么?你说我会往下掉?你笨呀你!找个东西踩一下不就行了吗?
无论工作还</div>
</li>
<li><a href="/article/1402.htm"
title="WEBLOGIC事务超时设置" target="_blank">WEBLOGIC事务超时设置</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/jta/1.htm">jta</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1%E8%B6%85%E6%97%B6/1.htm">事务超时</a>
<div> 系统中统计数据，由于调用统计过程，执行时间超过了weblogic设置的时间，提示如下错误：
统计数据出错!
原因：The transaction is no longer active - status: 'Rolling Back. [Reason=weblogic.transaction.internal</div>
</li>
<li><a href="/article/1529.htm"
title="两年已过去，再看该如何快速融入新团队" target="_blank">两年已过去，再看该如何快速融入新团队</a>
<span class="text-muted">bingyingao</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a><a class="tag" taget="_blank" href="/search/%E8%9E%8D%E5%85%A5/1.htm">融入</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E5%9B%A2%E9%98%9F/1.htm">新团队</a>
<div>偶得的空闲，翻到了两年前的帖子
该如何快速融入一个新团队，有所感触，就记下来，为下一个两年后的今天做参考。
时隔两年半之后的今天，再来看当初的这个博客，别有一番滋味。而我已经于今年三月份离开了当初所在的团队，加入另外的一个项目组，2011年的这篇博客之后的时光，我很好的融入了那个团队，而直到现在和同事们关系都特别好。大家在短短一年半的时间离一起经历了一</div>
</li>
<li><a href="/article/1656.htm"
title="【Spark七十七】Spark分析Nginx和Apache的access.log" target="_blank">【Spark七十七】Spark分析Nginx和Apache的access.log</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a>
<div>Spark分析Nginx和Apache的access.log，第一个问题是要对Nginx和Apache的access.log文件进行按行解析，按行解析就的方法是正则表达式：
Nginx的access.log解析正则表达式
val PATTERN = """([^ ]*) ([^ ]*) ([^ ]*) (\\[.*\\]) (\&q</div>
</li>
<li><a href="/article/1783.htm"
title="Erlang patch" target="_blank">Erlang patch</a>
<span class="text-muted">bookjovi</span>
<a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a>
<div>Totally five patchs committed to erlang otp, just small patchs.
IMO, erlang really is a interesting programming language, I really like its concurrency feature.
but the functional programming style </div>
</li>
<li><a href="/article/1910.htm"
title="log4j日志路径中加入日期" target="_blank">log4j日志路径中加入日期</a>
<span class="text-muted">bro_feng</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a>
<div>要用log4j使用记录日志，日志路径有每日的日期，文件大小5M新增文件。
实现方式
log4j:
<appender name="serviceLog"
class="org.apache.log4j.RollingFileAppender">
<param name="Encoding" v</div>
</li>
<li><a href="/article/2037.htm"
title="读《研磨设计模式》-代码笔记-桥接模式" target="_blank">读《研磨设计模式》-代码笔记-桥接模式</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
/**
* 个人觉得关于桥接模式的例子，蜡笔和毛笔这个例子是最贴切的：http://www.cnblogs.com/zhenyulu/articles/67016.html
* 笔和颜色是可分离的，蜡笔把两者耦合在一起了：一支蜡笔只有一种</div>
</li>
<li><a href="/article/2164.htm"
title="windows7下SVN和Eclipse插件安装" target="_blank">windows7下SVN和Eclipse插件安装</a>
<span class="text-muted">chenyu19891124</span>
<a class="tag" taget="_blank" href="/search/eclipse%E6%8F%92%E4%BB%B6/1.htm">eclipse插件</a>
<div>今天花了一天时间弄SVN和Eclipse插件的安装，今天弄好了。svn插件和Eclipse整合有两种方式，一种是直接下载插件包，二种是通过Eclipse在线更新。由于之前Eclipse版本和svn插件版本有差别，始终是没装上。最后在网上找到了适合的版本。所用的环境系统：windows7JDK：1.7svn插件包版本：1.8.16Eclipse：3.7.2工具下载地址：Eclipse下在地址：htt</div>
</li>
<li><a href="/article/2291.htm"
title="[转帖]工作流引擎设计思路" target="_blank">[转帖]工作流引擎设计思路</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a>
<div> 作为国内的同行，我非常希望在流程设计方面和大家交流，刚发现篇好文(那么好的文章，现在才发现，可惜)，关于流程设计的一些原理，个人觉得本文站得高，看得远，比俺的文章有深度，转载如下
=================================================================================
自开博以来不断有朋友来探讨工作流引擎该如何</div>
</li>
<li><a href="/article/2418.htm"
title="Linux 查看内存，CPU及硬盘大小的方法" target="_blank">Linux 查看内存，CPU及硬盘大小的方法</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/cpu/1.htm">cpu</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a><a class="tag" taget="_blank" href="/search/%E7%A1%AC%E7%9B%98/1.htm">硬盘</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%B0%8F/1.htm">大小</a>
<div>一、查看CPU信息的命令
[root@R4 ~]# cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep "physical id"
model name : Intel(R) Xeon(R) CPU X5450 @ 3.00GHz
model name : </div>
</li>
<li><a href="/article/2545.htm"
title="linux 踢出在线用户" target="_blank">linux 踢出在线用户</a>
<span class="text-muted">dongwei_6688</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>两个步骤：
1.用w命令找到要踢出的用户，比如下面：
[root@localhost ~]# w
18:16:55 up 39 days, 8:27, 3 users, load average: 0.03, 0.03, 0.00
USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT</div>
</li>
<li><a href="/article/2672.htm"
title="放手吧,就像不曾拥有过一样" target="_blank">放手吧,就像不曾拥有过一样</a>
<span class="text-muted">dcj3sjt126com</span>
<div>内容提要：
静悠悠编著的《放手吧就像不曾拥有过一样》集结“全球华语世界最舒缓心灵”的精华故事，触碰生命最深层次的感动，献给全世界亿万读者。《放手吧就像不曾拥有过一样》的作者衷心地祝愿每一位读者都给自己一个重新出发的理由，将那些令你痛苦的、扛起的、背负的，一并都放下吧！把憔悴的面容换做一种清淡的微笑，把沉重的步伐调节成春天五线谱上的音符，让自己踏着轻快的节奏，在人生的海面上悠然漂荡，享受宁静与</div>
</li>
<li><a href="/article/2799.htm"
title="php二进制安全的含义" target="_blank">php二进制安全的含义</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
<div>PHP里，有string的概念。
string里，每个字符的大小为byte（与PHP相比，Java的每个字符为Character，是UTF8字符，C语言的每个字符可以在编译时选择）。
byte里，有ASCII代码的字符，例如ABC，123，abc，也有一些特殊字符，例如回车，退格之类的。
特殊字符很多是不能显示的。或者说，他们的显示方式没有标准，例如编码65到哪儿都是字母A，编码97到哪儿都是字符</div>
</li>
<li><a href="/article/2926.htm"
title="Linux下禁用T440s，X240的一体化触摸板(touchpad)" target="_blank">Linux下禁用T440s，X240的一体化触摸板(touchpad)</a>
<span class="text-muted">gashero</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ThinkPad/1.htm">ThinkPad</a><a class="tag" taget="_blank" href="/search/%E8%A7%A6%E6%91%B8%E6%9D%BF/1.htm">触摸板</a>
<div>自打1月买了Thinkpad T440s就一直很火大，其中最让人恼火的莫过于触摸板。
Thinkpad的经典就包括用了小红点(TrackPoint)。但是小红点只能定位，还是需要鼠标的左右键的。但是自打T440s等开始启用了一体化触摸板，不再有实体的按键了。问题是要是好用也行。
实际使用中，触摸板一堆问题，比如定位有抖动，以及按键时会有飘逸。这就导致了单击经常就</div>
</li>
<li><a href="/article/3053.htm"
title="graph_dfs" target="_blank">graph_dfs</a>
<span class="text-muted">hcx2013</span>
<a class="tag" taget="_blank" href="/search/Graph/1.htm">Graph</a>
<div>package edu.xidian.graph;
class MyStack {
private final int SIZE = 20;
private int[] st;
private int top;
public MyStack() {
st = new int[SIZE];
top = -1;
}
public void push(i</div>
</li>
<li><a href="/article/3180.htm"
title="Spring4.1新特性——Spring核心部分及其他" target="_blank">Spring4.1新特性——Spring核心部分及其他</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a>
<div>目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T</div>
</li>
<li><a href="/article/3307.htm"
title="配置HiveServer2的安全策略之自定义用户名密码验证" target="_blank">配置HiveServer2的安全策略之自定义用户名密码验证</a>
<span class="text-muted">liyonghui160com</span>
<div>
具体从网上看
http://doc.mapr.com/display/MapR/Using+HiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication
LDAP Authentication using OpenLDAP
Setting </div>
</li>
<li><a href="/article/3434.htm"
title="一位30多的程序员生涯经验总结" target="_blank">一位30多的程序员生涯经验总结</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a><a class="tag" taget="_blank" href="/search/%E5%92%A8%E8%AF%A2/1.htm">咨询</a>
<div>1.客户在接触到产品之后，才会真正明白自己的需求。
这是我在我的第一份工作上面学来的。只有当我们给客户展示产品的时候，他们才会意识到哪些是必须的。给出一个功能性原型设计远远比一张长长的文字表格要好。 2.只要有充足的时间，所有安全防御系统都将失败。
安全防御现如今是全世界都在关注的大课题、大挑战。我们必须时时刻刻积极完善它，因为黑客只要有一次成功，就可以彻底打败你。 3.</div>
</li>
<li><a href="/article/3561.htm"
title="分布式web服务架构的演变" target="_blank">分布式web服务架构的演变</a>
<span class="text-muted">自由的奴隶</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a>
<div>最开始，由于某些想法，于是在互联网上搭建了一个网站，这个时候甚至有可能主机都是租借的，但由于这篇文章我们只关注架构的演变历程，因此就假设这个时候已经是托管了一台主机，并且有一定的带宽了，这个时候由于网站具备了一定的特色，吸引了部分人访问，逐渐你发现系统的压力越来越高，响应速度越来越慢，而这个时候比较明显的是数据库和应用互相影响，应用出问题了，数据库也很容易出现问题，而数据库出问题的时候，应用也容易</div>
</li>
<li><a href="/article/3688.htm"
title="初探Druid连接池之二——慢SQL日志记录" target="_blank">初探Druid连接池之二——慢SQL日志记录</a>
<span class="text-muted">xingsan_zhang</span>
<a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a><a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">连接池</a><a class="tag" taget="_blank" href="/search/druid/1.htm">druid</a><a class="tag" taget="_blank" href="/search/%E6%85%A2SQL/1.htm">慢SQL</a>
<div>由于工作原因，这里先不说连接数据库部分的配置，后面会补上，直接进入慢SQL日志记录。
1.applicationContext.xml中增加如下配置：
<bean abstract="true" id="mysql_database" class="com.alibaba.druid.pool.DruidDataSourc</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</div>
</div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
</body>
</html> |
