</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/1892463022924951552.htm"
title="利用Beautiful Soup和Pandas进行网页数据抓取与清洗处理实战" target="_blank">利用Beautiful Soup和Pandas进行网页数据抓取与清洗处理实战</a>
<span class="text-muted">傻啦嘿哟</span>
<a class="tag" taget="_blank" href="/search/pandas/1.htm">pandas</a>
<div>目录一、准备工作二、抓取网页数据三、数据清洗四、数据处理五、保存数据六、完整代码示例七、总结在数据分析和机器学习的项目中，数据的获取、清洗和处理是非常关键的步骤。今天，我们将通过一个实战案例，演示如何利用Python中的BeautifulSoup库进行网页数据抓取，并使用Pandas库进行数据清洗和处理。这个案例不仅适合初学者，也能帮助有一定经验的朋友快速掌握这两个强大的工具。一、准备工作在开始之</div>
</li>
<li><a href="/article/1892462009589493760.htm"
title="python做一个注册界面_python如何做一个登录注册界面" target="_blank">python做一个注册界面_python如何做一个登录注册界面</a>
<span class="text-muted">weixin_39824033</span>
<a class="tag" taget="_blank" href="/search/python%E5%81%9A%E4%B8%80%E4%B8%AA%E6%B3%A8%E5%86%8C%E7%95%8C%E9%9D%A2/1.htm">python做一个注册界面</a>
<div>python做一个登录注册界面的方法：首先初始化一个window界面，并使用画布实现欢迎的logo；然后用代码实现登录和注册按钮；接着并进行登录判断代码；最后完成注册界面即可。【相关学习推荐：python视频教程】python做一个登录注册界面的方法：一、登录界面1、首先初始化一个window界面window=tk.Tk()window.title('WelcometoMofanPython')w</div>
</li>
<li><a href="/article/1892462009975369728.htm"
title="python读取zip包内文件_Python模块学习：zipfile zip文件操作" target="_blank">python读取zip包内文件_Python模块学习：zipfile zip文件操作</a>
<span class="text-muted">weixin_40001634</span>
<a class="tag" taget="_blank" href="/search/python%E8%AF%BB%E5%8F%96zip%E5%8C%85%E5%86%85%E6%96%87%E4%BB%B6/1.htm">python读取zip包内文件</a>
<div>最近在写一个网络客户端下载程序，用于下载服务器上的数据。有些数据(如文本，office文档)如果直接传输的话，将会增加通信的数据量，使下载时间变长。服务器在传输这些数据之前先对其进行压缩，客户端接收到数据之后进行解压，这样可以减小网通传输数据的通信量，缩短下载的时间，从而增加客户体验。以前用C#做类似应用程序的时候，我会用SharpZipLib这个开源组件，现在用Python做类似的工作，只要使用</div>
</li>
<li><a href="/article/1892461756756848640.htm"
title="python制作登陆窗口_python登陆界面" target="_blank">python制作登陆窗口_python登陆界面</a>
<span class="text-muted">weixin_39758494</span>
<a class="tag" taget="_blank" href="/search/python%E5%88%B6%E4%BD%9C%E7%99%BB%E9%99%86%E7%AA%97%E5%8F%A3/1.htm">python制作登陆窗口</a>
<div>广告关闭腾讯云11.11云上盛惠，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！print(账号密码错误！请重试。)returnfalsebutton(master,text=登陆,width=10,command=test).grid(row=3,column=0,sticky=w,padx=10,pady=5)button(master,text=退出,wid</div>
</li>
<li><a href="/article/1892461377310748672.htm"
title="如何使用零配置的Sphinx生成Python文档？" target="_blank">如何使用零配置的Sphinx生成Python文档？</a>
<span class="text-muted">潮易</span>
<a class="tag" taget="_blank" href="/search/sphinx/1.htm">sphinx</a><a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%96%87%E6%A3%80%E7%B4%A2/1.htm">全文检索</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a>
<div>如何使用零配置的Sphinx生成Python文档？在Python编程中，编写文档是非常重要的。一个好的文档可以帮助其他开发者理解和使用你的代码。Sphinx是一个用于生成Python项目的文档的静态网页生成器，它支持多种文档格式，包括ReStructuredText和Markdown。以下是使用零配置的方式来使用Sphinx生成Python文档的详细步骤：1.首先，确保你已经安装了Sphinx。打</div>
</li>
<li><a href="/article/1892461378300604416.htm"
title="如何订阅&q；/扫描&q；主题、修改消息并发布到新主题？" target="_blank">如何订阅&q；/扫描&q；主题、修改消息并发布到新主题？</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>如何订阅&q；/扫描&q；主题、修改消息并发布到新主题？这个问题涉及到Python编程中的MQTT（MessageQueuingTelemetryTransport）库的使用，该库允许我们创建客户端订阅和发布消息到MQTT服务器。以下是一个简单的步骤：1.安装MQTT库：可以使用pip安装`paho-mqtt`库。```pythonpipinstallpaho-mqtt```2.创建一个MQTT客</div>
</li>
<li><a href="/article/1892458724304416768.htm"
title="Python-tkinter自制登录界面（含注册）" target="_blank">Python-tkinter自制登录界面（含注册）</a>
<span class="text-muted">GCHEK</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>简单的用户登录、注册界面importtkinterastkimporttimeimportsubprocessimportsysimportosimporttkinter.messageboxwindow=tk.Tk()window.title('GCHEK')window.geometry('400x300')#设置储存用户信息的容器，这里用的txt。ifnotos.path.exists('U</div>
</li>
<li><a href="/article/1892456456029007872.htm"
title="Python爬虫requests(详细)" target="_blank">Python爬虫requests(详细)</a>
<span class="text-muted">dme.</span>
<a class="tag" taget="_blank" href="/search/Python%E7%88%AC%E8%99%AB%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/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/python/1.htm">python</a>
<div>本文来学爬虫使用requests模块的常见操作。1.URL参数无论是在发送GET/POST请求时，网址URL都可能会携带参数，例如：http://www.5xclass.cn?age=19&name=dengres=requests.get(url="https://www.5xclass.cn?age=19&name=deng")res=requests.get(url="https://www</div>
</li>
<li><a href="/article/1892449144090456064.htm"
title="使用python计算等比数列求和的方法" target="_blank">使用python计算等比数列求和的方法</a>
<span class="text-muted">HAMYHF</span>
<a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a>
<div>在python中，计算Sum=m+mm+mmm+mmmm+.....+mmmmm.....,输入两个数m,n。m的位数累加到n的值，列出算式并计算出结果：#为了打印出算式，并计算出结果，将m,mm这些放入到列表中#定义列表中的m初始值为0,用Ele来代表m,mm....Ele=0#定义总和为0Sum=0#定义一个空列表List=[]#输入两个值n=int(input("inputadigit：")</div>
</li>
<li><a href="/article/1892449143461310464.htm"
title="Python+Playwright常用元素定位方法" target="_blank">Python+Playwright常用元素定位方法</a>
<span class="text-muted">HAMYHF</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a>
<div>CSSselector选择器在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：标签选择器(element):直接使用HTML元素名称来定位，例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title]会选择所有包含title属性的元素。选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[typ</div>
</li>
<li><a href="/article/1892446997915430912.htm"
title="Python中的 redis keyspace 通知_python 操作redis psubscribe(‘__keyspace@0__ ‘)" target="_blank">Python中的 redis keyspace 通知_python 操作redis psubscribe(‘__keyspace@0__ ‘)</a>
<span class="text-muted">2301_82243733</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>最后Python崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习Python门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS等更加高级的领域。Python可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的Pytho</div>
</li>
<li><a href="/article/1892446242273816576.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/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数据分析与可视化在数据驱动的商业世界中，数据分析和可视化成为了理解复杂数据集、做出明智决策的关键工具。Python，作为一种功能强大且易于学习的编程语言，提供了丰富的库和框架，使得数据分析和可视化变得简单高效。本文将探讨Python在数据分析和可视化中的应用，包括数据预处理、分析、以及如何通过可视化工具将数据洞察转化为可操作的策略。1.数据分析的重要性数据分析是提取数据中有用信息的过程</div>
</li>
<li><a href="/article/1892446115870076928.htm"
title="JavaScript网页设计案例：打造交互式个人简历网站" target="_blank">JavaScript网页设计案例：打造交互式个人简历网站</a>
<span class="text-muted">程序媛小果</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/ecmascript/1.htm">ecmascript</a>
<div>在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和</div>
</li>
<li><a href="/article/1892446114204938240.htm"
title="ECMAScript与JavaScript：探索两者之间的联系与区别" target="_blank">ECMAScript与JavaScript：探索两者之间的联系与区别</a>
<span class="text-muted">程序媛小果</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在Web开发的早期，JavaScript成为了客户端脚本语言的代名词，而随着时间的推移，JavaScript已经发展成为一个功能强大的语言，它的影响力远远超出了浏览器的范畴。在这场语言演进的过程中，ECMAScript扮演了一个关键角色。本文将深入探讨ECMAScript与JavaScript之间的关系，以及它们之间的主要区别。1.什么是ECMAScript？ECMAScript是由欧洲计算机制造</div>
</li>
<li><a href="/article/1892444469572202496.htm"
title="【Python 学习 / 7】模块与文件操作" target="_blank">【Python 学习 / 7】模块与文件操作</a>
<span class="text-muted">卜及中</span>
<a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80/1.htm">Python基础</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>文章目录前言一、导入模块1.导入整个模块2.导入模块中的特定函数3.给模块或函数起别名二、常用模块1.`math`模块2.`random`模块3.`os`模块4.`sys`模块三、文件处理1.打开文件2.读取文件3.写入文件4.关闭文件5.使用`with`语句管理文件四、日期时间1.`datetime`模块获取当前日期和时间创建日期和时间对象格式化日期和时间解析字符串为日期对象2.`time`模块</div>
</li>
<li><a href="/article/1892436647568535552.htm"
title="经销商管理系统架构设计方案（附 Java版本和Python版本源代码详解）" target="_blank">经销商管理系统架构设计方案（附 Java版本和Python版本源代码详解）</a>
<span class="text-muted">AI天才研究院</span>
<a class="tag" taget="_blank" href="/search/DeepSeek/1.htm">DeepSeek</a><a class="tag" taget="_blank" href="/search/R1/1.htm">R1</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AEAI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大数据AI人工智能大模型</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E4%BC%81%E4%B8%9A%E7%BA%A7%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">AI大模型企业级应用开发实战</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%BA%94%E7%94%A8%E5%85%A5%E9%97%A8%E5%AE%9E%E6%88%98%E4%B8%8E%E8%BF%9B%E9%98%B6/1.htm">AI大模型应用入门实战与进阶</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E7%A7%91%E5%AD%A6/1.htm">计算科学</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E8%AE%A1%E7%AE%97/1.htm">神经计算</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%9E%8B%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">大型语言模型</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/AGI/1.htm">AGI</a><a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a><a class="tag" taget="_blank" href="/search/Agent/1.htm">Agent</a><a class="tag" taget="_blank" href="/search/RPA/1.htm">RPA</a>
<div>经销商管理系统架构设计方案（Java实现源代码详解）关键词：经销商管理系统，Java，SpringBoot，MyBatis，MySQL，架构设计，源代码1.背景介绍随着市场竞争的日益激烈，企业对经销商的管理越来越重视。传统的经销商管理方式效率低下，信息滞后，难以适应现代企业的发展需求。为了提高经销商管理效率，降低运营成本，越来越多的企业开始采用信息化的手段来管理经销商，而经销商管理系统应运而生。经</div>
</li>
<li><a href="/article/1892434756121980928.htm"
title="Python:数据从Excel表格链接到Word文档 更新Excel即可自动更新Word" target="_blank">Python:数据从Excel表格链接到Word文档 更新Excel即可自动更新Word</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/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a>
<div>要使用Python来创建或更新一个Word文档，并将数据从Excel表格链接到Word文档中，你可以使用python-docx库来操作Word文档和openpyxl或pandas库来读取Excel文件。不过，需要注意的是，python-docx库并不支持将外部文件链接到Word文档的功能。你可以在Word文档中插入Excel数据的快照，但它们不会自动更新。如果你想要在Word文档中插入Excel数</div>
</li>
<li><a href="/article/1892433617058066432.htm"
title="使用Odoo Shell卸载模块" target="_blank">使用Odoo Shell卸载模块</a>
<span class="text-muted">odoo中国</span>
<a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a><a class="tag" taget="_blank" href="/search/erp/1.htm">erp</a>
<div>使用OdooShell卸载模块我们在Odoo使用过程中，因为模块安装错误或者前端错误等导致odoo无法通过界面登录，这时候你可以使用OdooShell来卸载模块。OdooShell是一个交互式Pythonshell，允许你直接与Odoo数据库和模型进行交互。以下是使用OdooShell卸载模块的详细步骤：步骤1：启动OdooShell要启动OdooShell，你需要在终端中运行以下命令。确保你已经</div>
</li>
<li><a href="/article/1892432858061008896.htm"
title="NumPy的基本使用" target="_blank">NumPy的基本使用</a>
<span class="text-muted">Mo思</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%AD%A6%E4%B9%A0/1.htm">编程学习</a><a class="tag" taget="_blank" href="/search/numpy/1.htm">numpy</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/pip/1.htm">pip</a>
<div>在Python的数据科学与数值计算领域，NumPy无疑是一颗耀眼的明星。作为Python中用于科学计算的基础库，NumPy提供了高效的多维数组对象以及处理这些数组的各种工具。本文将带您深入了解NumPy的基本使用，感受它的强大魅力。一、安装与导入在使用NumPy之前，首先要确保它已经安装在您的Python环境中。如果您使用的是Anaconda发行版，NumPy通常已经预装。若未安装，可以使用如下命</div>
</li>
<li><a href="/article/1892428190115229696.htm"
title="FOKS-TROT: 一个高效、易用的全功能开源知识图谱生成工具" target="_blank">FOKS-TROT: 一个高效、易用的全功能开源知识图谱生成工具</a>
<span class="text-muted">柳旖岭</span>
<div>FOKS-TROT:一个高效、易用的全功能开源知识图谱生成工具项目简介FOKS-TROT是一个基于Python的全功能开源知识图谱生成工具，旨在帮助研究人员和开发者快速构建具有丰富信息的知识图谱。该项目由hkx3upper在GitCode上开发并维护。通过FOKS-TROT，您可以轻松地将各种数据源（如文本文件、数据库、API）转换为结构化的知识图谱，并对其进行可视化分析和机器学习任务。此外，该工</div>
</li>
<li><a href="/article/1892427427712397312.htm"
title="python实现word文档合并 v2.0" target="_blank">python实现word文档合并 v2.0</a>
<span class="text-muted">task138</span>
<a class="tag" taget="_blank" href="/search/python%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">python自动化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/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>
<div>目录前言要求运行效果脚本下载链接前言之前发表了一个小工具，python用于合并word文档以完成特定的工作任务，现在领导给出了新需求，适当的调整了一下word文档的合并情况。同时，各位同事反馈说，环境部署太难了，脚本的使用成本比较高，难度大，所以我这次把脚本打包成一个EXE可执行文件，直接双击即可使用。要求由于脚本的具体逻辑发生了变化，因此，exe文件的同级目录下，一定要存在一个txt文件，否则无</div>
</li>
<li><a href="/article/1892426166254497792.htm"
title="基于 Spring Boot 的社区居民健康管理系统部署说明书" target="_blank">基于 Spring Boot 的社区居民健康管理系统部署说明书</a>
<span class="text-muted">小星袁</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E5%8E%9F%E6%96%87/1.htm">毕业设计原文</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架，前端页面的设计主要依托Vue框架来构建，实现丰富且交互性强的用户界面，后台管理功能则采用SpringBoot框架与MySQL数</div>
</li>
<li><a href="/article/1892421248793767936.htm"
title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽安全-黑客4148</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a>
<div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div>
</li>
<li><a href="/article/1892421249762652160.htm"
title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽安全-黑客4148</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a>
<div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div>
</li>
<li><a href="/article/1892419989684678656.htm"
title="基于python深度学习遥感影像地物分类与目标识别、分割实践技术应用" target="_blank">基于python深度学习遥感影像地物分类与目标识别、分割实践技术应用</a>
<span class="text-muted">xiao5kou4chang6kai4</span>
<a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E9%81%A5%E6%84%9F/1.htm">遥感</a><a class="tag" taget="_blank" href="/search/%E5%8B%98%E6%B5%8B/1.htm">勘测</a><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><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%B1%BB/1.htm">分类</a>
<div>专题一：深度学习发展与机器学习深度学习的历史发展过程机器学习，深度学习等任务的基本处理流程梯度下降算法讲解不同初始化，学习率对梯度下降算法的实例分析从机器学习到深度学习算法专题二深度卷积网络、卷积神经网络、卷积运算的基本原理池化操作，全连接层，以及分类器的作用BP反向传播算法的理解一个简单CNN模型代码理解特征图，卷积核可视化分析专题三TensorFlow与keras介绍与入门TensorFlow</div>
</li>
<li><a href="/article/1892419231077691392.htm"
title="python 快速实现链接转 word 文档" target="_blank">python 快速实现链接转 word 文档</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/word/1.htm">word</a>
<div>python快速实现链接转word文档演示代码展示最后演示代码展示fromnewspaperimportArticlefromdocximportDocumentfromdocx.sharedimportPt,RGBColorfromdocx.enum.styleimportWD_STYLE_TYPEfromdocx.oxml.nsimportqn#tkinterGUIimporttkintera</div>
</li>
<li><a href="/article/1892415698903298048.htm"
title="Python入门笔记" target="_blank">Python入门笔记</a>
<span class="text-muted">「已注销」</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">计算机</a>
<div>文章目录第0周课程导学第1周Python基本语法元素保留字数据类型语句与函数输入函数第2周Python基本图形绘制turtle库绝对坐标海龟坐标turtle角度坐标体系RGB色彩体系画笔控制函数运动控制函数方向控制函数循环语句第3周基本数据类型整型浮点数科学计数法复数类型数值运算操作符二元操作符有对应的增强赋值操作符数值运算函数字符串类型的表示字符串切片字符串类型及操作字符串类型格式化time库时</div>
</li>
<li><a href="/article/1892415446636883968.htm"
title="null和undefined的区别" target="_blank">null和undefined的区别</a>
<span class="text-muted">编程星空</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>null和undefined是JavaScript中两个特殊的值，它们都表示“无”或“空”，但在语义和使用场景上有明显区别。以下是它们的详细对比：1.定义undefined表示变量已声明但未赋值，或函数没有返回值时的默认返回值。是JavaScript引擎默认赋予的初始值。类型为undefined。null表示一个空对象指针，通常用于显式表示“无”或“空”。是开发者主动赋值的值。类型为object（</div>
</li>
<li><a href="/article/1892413304811352064.htm"
title="dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)" target="_blank">dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)</a>
<span class="text-muted">weixin_39979245</span>
<a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80/1.htm">html语言</a>
<div>Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978</div>
</li>
<li><a href="/article/1892412800781840384.htm"
title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a>
<span class="text-muted">律保阁-Michael</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a>
<div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</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> |
