</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/1950233451282100224.htm"
title="python 读excel每行替换_Python脚本操作Excel实现批量替换功能" target="_blank">python 读excel每行替换_Python脚本操作Excel实现批量替换功能</a>
<span class="text-muted">weixin_39646695</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%AF%BBexcel%E6%AF%8F%E8%A1%8C%E6%9B%BF%E6%8D%A2/1.htm">读excel每行替换</a>
<div>Python脚本操作Excel实现批量替换功能大家好，给大家分享下如何使用Python脚本操作Excel实现批量替换。使用的工具Openpyxl，一个处理excel的python库，处理excel，其实针对的就是WorkBook，Sheet，Cell这三个最根本的元素~明确需求原始excel如下我们的目标是把下面excel工作表的sheet1表页A列的内容“替换我吧”批量替换为B列的“我用来替换的</div>
</li>
<li><a href="/article/1950232820773351424.htm"
title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a>
<span class="text-muted">good2know</span>
<div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div>
</li>
<li><a href="/article/1950232190038110208.htm"
title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a>
<span class="text-muted">universe_01</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div>
</li>
<li><a href="/article/1950230804957294592.htm"
title="SpringMVC执行流程（原理），通俗易懂" target="_blank">SpringMVC执行流程（原理），通俗易懂</a>
<span class="text-muted">国服冰</span>
<a class="tag" taget="_blank" href="/search/SpringMVC/1.htm">SpringMVC</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
<div>SpringMVC执行流程（原理），通俗易懂一、图解SpringMVC流程二、进一步理解Springmvc的执行流程1、导入依赖2、建立展示的视图3、web.xml4、spring配置文件springmvc-servlet5、Controller6、tomcat配置7、访问的url8、视图页面一、图解SpringMVC流程图为SpringMVC的一个较完整的流程图，实线表示SpringMVC框架提</div>
</li>
<li><a href="/article/1950228031524106240.htm"
title="Spring进阶 - SpringMVC实现原理之DispatcherServlet处理请求的过程" target="_blank">Spring进阶 - SpringMVC实现原理之DispatcherServlet处理请求的过程</a>
<span class="text-muted">倾听铃的声</span>
<a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a>
<div>前文我们有了IOC的源码基础以及SpringMVC的基础，我们便可以进一步深入理解SpringMVC主要实现原理，包含DispatcherServlet的初始化过程和DispatcherServlet处理请求的过程的源码解析。本文是第二篇：DispatcherServlet处理请求的过程的源码解析。@pdaiSpring进阶-SpringMVC实现原理之DispatcherServlet处理请求的</div>
</li>
<li><a href="/article/1950208107430866944.htm"
title="python笔记14介绍几个魔法方法" target="_blank">python笔记14介绍几个魔法方法</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>
<div>python笔记14介绍几个魔法方法先声明一下各位大佬，这是我的笔记。如有错误，恳请指正。另外，感谢您的观看，谢谢啦！(1).__doc__输出对应的函数，类的说明文档print(print.__doc__)print(value,...,sep='',end='\n',file=sys.stdout,flush=False)Printsthevaluestoastream,ortosys.std</div>
</li>
<li><a href="/article/1950207854388506624.htm"
title="深入理解 Tomcat Wrapper 原理" target="_blank">深入理解 Tomcat Wrapper 原理</a>
<span class="text-muted">北漂老男人</span>
<a class="tag" taget="_blank" href="/search/Tomcat/1.htm">Tomcat</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>深入理解TomcatWrapper原理一、引言在Tomcat的分层容器架构中，Wrapper作为最底层的容器，专门负责管理单个Servlet的生命周期及请求分发。每一个Servlet（包括JSP、Filter等）都对应一个Wrapper。Wrapper是Servlet规范与Tomcat容器实现之间的桥梁，直接关系到请求的分发效率、Servlet的加载与重用、安全隔离等。本文将系统剖析Wrapper</div>
</li>
<li><a href="/article/1950204954295726080.htm"
title="Anaconda 和 Miniconda：功能详解与选择建议" target="_blank">Anaconda 和 Miniconda：功能详解与选择建议</a>
<span class="text-muted">古月฿</span>
<a class="tag" taget="_blank" href="/search/python%E5%85%A5%E9%97%A8/1.htm">python入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a>
<div>Anaconda和Miniconda详细介绍一、Anaconda的详细介绍1.什么是Anaconda？Anaconda是一个开源的包管理和环境管理工具，在数据科学、机器学习以及科学计算领域发挥着关键作用。它以Python和R语言为基础，为用户精心准备了大量预装库和工具，极大地缩短了搭建数据科学环境的时间。对于那些想要快速开展数据分析、模型训练等工作的人员来说，Anaconda就像是一个一站式的“数</div>
</li>
<li><a href="/article/1950204701714739200.htm"
title="环境搭建 | Python + Anaconda / Miniconda + PyCharm 的安装、配置与使用" target="_blank">环境搭建 | Python + Anaconda / Miniconda + PyCharm 的安装、配置与使用</a>
<span class="text-muted"></span>
<div>本文将分别介绍Python、Anaconda/Miniconda、PyCharm的安装、配置与使用，详细介绍Python环境搭建的全过程，涵盖Python、Pip、PythonLauncher、Anaconda、Miniconda、Pycharm等内容，以官方文档为参照，使用经验为补充，内容全面而详实。由于图片太多，就先贴一个无图简化版吧，详情请查看Python+Anaconda/Minicond</div>
</li>
<li><a href="/article/1950202938265759744.htm"
title="你竟然还在用克隆删除？Conda最新版rename命令全攻略！" target="_blank">你竟然还在用克隆删除？Conda最新版rename命令全攻略！</a>
<span class="text-muted">曦紫沐</span>
<a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/1.htm">Python基础知识</a><a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E7%8E%AF%E5%A2%83%E7%AE%A1%E7%90%86/1.htm">虚拟环境管理</a>
<div>文章摘要Conda虚拟环境管理终于迎来革命性升级！本文揭秘Conda4.9+版本新增的rename黑科技，彻底告别传统“克隆+删除”的繁琐操作。从命令解析到实战案例，手把手教你如何安全高效地重命名Python虚拟环境，附带版本检测、环境迁移、故障排查等进阶技巧，助你提升开发效率10倍！一、颠覆认知：Conda居然自带重命名功能？很多开发者仍停留在“Conda无法直接重命名环境”的认知阶段，实际上自</div>
</li>
<li><a href="/article/1950202054706262016.htm"
title="centos7安装配置 Anaconda3" target="_blank">centos7安装配置 Anaconda3</a>
<span class="text-muted"></span>
<div>Anaconda是一个用于科学计算的Python发行版,Anaconda于Python，相当于centos于linux。下载[root@testsrc]#mwgethttps://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-5.2.0-Linux-x86_64.shBegintodownload:Anaconda3-5.2.0-L</div>
</li>
<li><a href="/article/1950202054219722752.htm"
title="Pandas：数据科学的超级瑞士军刀" target="_blank">Pandas：数据科学的超级瑞士军刀</a>
<span class="text-muted">科技林总</span>
<a class="tag" taget="_blank" href="/search/DeepSeek%E5%AD%A6AI/1.htm">DeepSeek学AI</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>**——从零基础到高效分析的进化指南**###**一、Pandas诞生：数据革命的救世主****2010年前的数据分析噩梦**：```python#传统Python处理表格数据data=[]forrowincsv_file:ifrow[3]>100androw[2]=="China":data.append(float(row[5])#代码冗长易错！```**核心痛点**：-Excel处理百万行崩</div>
</li>
<li><a href="/article/1950195876991397888.htm"
title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a>
<span class="text-muted">TIM老师</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a>
<div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div>
</li>
<li><a href="/article/1950194742100815872.htm"
title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a>
<span class="text-muted"></span>
<div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div>
</li>
<li><a href="/article/1950194363237724160.htm"
title="用 Python 开发小游戏：零基础也能做出《贪吃蛇》" target="_blank">用 Python 开发小游戏：零基础也能做出《贪吃蛇》</a>
<span class="text-muted"></span>
<div>本文专为零基础学习者打造，详细介绍如何用Python开发经典小游戏《贪吃蛇》。无需复杂编程知识，从环境搭建到代码编写、功能实现，逐步讲解核心逻辑与操作。涵盖Pygame库的基础运用、游戏界面设计、蛇的移动与食物生成规则等，让新手能按步骤完成开发，同时融入SEO优化要点，帮助读者轻松入门Python游戏开发，体验从0到1做出游戏的乐趣。一、为什么选择用Python开发《贪吃蛇》对于零基础学习者来说，</div>
</li>
<li><a href="/article/1950193733681082368.htm"
title="基于Python的AI健康助手：开发与部署全攻略" target="_blank">基于Python的AI健康助手：开发与部署全攻略</a>
<span class="text-muted">AI算力网络与通信</span>
<a class="tag" taget="_blank" href="/search/AI%E7%AE%97%E5%8A%9B%E7%BD%91%E7%BB%9C%E4%B8%8E%E9%80%9A%E4%BF%A1%E5%8E%9F%E7%90%86/1.htm">AI算力网络与通信原理</a><a class="tag" taget="_blank" href="/search/AI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E5%A4%A7%E6%95%B0%E6%8D%AE%E6%9E%B6%E6%9E%84/1.htm">AI人工智能大数据架构</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>基于Python的AI健康助手：开发与部署全攻略关键词：Python、AI健康助手、机器学习、自然语言处理、Flask、部署、健康管理摘要：本文将详细介绍如何使用Python开发一个AI健康助手，从需求分析、技术选型到核心功能实现，再到最终部署上线的完整过程。我们将使用自然语言处理技术理解用户健康咨询，通过机器学习模型提供个性化建议，并展示如何用Flask框架构建Web应用接口。文章包含大量实际代</div>
</li>
<li><a href="/article/1950192849786040320.htm"
title="AI人工智能中的数据挖掘：提升智能决策能力" target="_blank">AI人工智能中的数据挖掘：提升智能决策能力</a>
<span class="text-muted"></span>
<div>AI人工智能中的数据挖掘：提升智能决策能力关键词：数据挖掘、人工智能、机器学习、智能决策、数据分析、特征工程、模型优化摘要：本文深入探讨了数据挖掘在人工智能领域中的核心作用，重点分析了如何通过数据挖掘技术提升智能决策能力。文章从基础概念出发，详细介绍了数据挖掘的关键算法、数学模型和实际应用场景，并通过Python代码示例展示了数据挖掘的全流程。最后，文章展望了数据挖掘技术的未来发展趋势和面临的挑战</div>
</li>
<li><a href="/article/1950192217708621824.htm"
title="lesson20：Python函数的标注" target="_blank">lesson20：Python函数的标注</a>
<span class="text-muted">你的电影很有趣</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录引言：为什么函数标注是现代Python开发的必备技能一、函数标注的基础语法1.1参数与返回值标注1.2支持的标注类型1.3Python3.9+的重大改进：标准集合泛型二、高级标注技巧与最佳实践2.1复杂参数结构标注2.2函数类型与回调标注2.3变量注解与类型别名三、静态类型检查工具应用3.1mypy：最流行的类型检查器3.2Pyright与IDE集成3.3运行时类型验证四、函数标注的工程价值与</div>
</li>
<li><a href="/article/1950191208873652224.htm"
title="vue element 封装表单" target="_blank">vue element 封装表单</a>
<span class="text-muted">影子信息</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div>
</li>
<li><a href="/article/1950191165710069760.htm"
title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a>
<span class="text-muted">浪子神剑</span>
<div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div>
</li>
<li><a href="/article/1950190325960077312.htm"
title="Jupyter Notebook：数据科学的“瑞士军刀”" target="_blank">Jupyter Notebook：数据科学的“瑞士军刀”</a>
<span class="text-muted">a小胡哦</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80/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/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
<div>在数据科学的世界里，JupyterNotebook是一个不可或缺的工具，它就像是数据科学家手中的“瑞士军刀”，功能强大且灵活多变。今天，就让我们一起深入了解这个神奇的工具。一、JupyterNotebook是什么？JupyterNotebook是一个开源的Web应用程序，它允许你创建和共享包含实时代码、方程、可视化和解释性文本的文档。它支持多种编程语言，其中Python是最常用的语言之一。Jupy</div>
</li>
<li><a href="/article/1950187554129113088.htm"
title="Django学习笔记（一）" target="_blank">Django学习笔记（一）</a>
<span class="text-muted"></span>
<div>学习视频为：pythondjangoweb框架开发入门全套视频教程一、安装pipinstalldjango==****检查是否安装成功django.get_version()二、django新建项目操作1、新建一个项目django-adminstartprojectproject_name2、新建APPcdproject_namedjango-adminstartappApp注：一个project</div>
</li>
<li><a href="/article/1950185789447008256.htm"
title="Python 程序设计讲义（26）：字符串的用法——字符的编码" target="_blank">Python 程序设计讲义（26）：字符串的用法——字符的编码</a>
<span class="text-muted">睿思达DBA_WGX</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E8%AE%B2%E4%B9%89/1.htm">讲义</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>Python程序设计讲义（26）：字符串的用法——字符的编码目录Python程序设计讲义（26）：字符串的用法——字符的编码一、字符的编码二、`ASCII`编码三、`Unicode`编码四、使用`ord()`函数查询一个字符对应的`Unicode`编码五、使用`chr()`函数查询一个`Unicode`编码对应的字符六、`Python`字符串的特征一、字符的编码计算机默认只能处理二进制数，而不能处</div>
</li>
<li><a href="/article/1950183898780594176.htm"
title="【Python】pypinyin-汉字拼音转换工具" target="_blank">【Python】pypinyin-汉字拼音转换工具</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/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a>
<div>文章目录1.主要功能2.安装3.常用API3.1拼音风格3.2核心API3.2.1pypinyin.pinyin()3.2.2pypinyin.lazy_pinyin()3.2.3pypinyin.load_single_dict()3.2.4pypinyin.load_phrases_dict()3.2.5pypinyin.slug()3.3注册新的拼音风格4.基本用法4.1库导入4.2基本汉字</div>
</li>
<li><a href="/article/1950183268448006144.htm"
title="python编程第十四课：数据可视化" target="_blank">python编程第十四课：数据可视化</a>
<span class="text-muted">小小源助手</span>
<a class="tag" taget="_blank" href="/search/Python%E4%BB%A3%E7%A0%81%E5%AE%9E%E4%BE%8B/1.htm">Python代码实例</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>Python数据可视化：让数据“开口说话”在当今数据爆炸的时代，数据可视化已成为探索数据规律、传达数据信息的关键技术。Python凭借其丰富的第三方库，为数据可视化提供了强大而灵活的解决方案。本文将带你深入了解Matplotlib库的基础绘图、Seaborn库的高级可视化以及交互式可视化工具Plotly，帮助你通过图表清晰地展示数据背后的故事。一、Matplotlib库基础绘图Matplotlib</div>
</li>
<li><a href="/article/1950180118999658496.htm"
title="Python数据可视化：用代码绘制数据背后的故事" target="_blank">Python数据可视化：用代码绘制数据背后的故事</a>
<span class="text-muted">AAEllisonPang</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>引言：当数据会说话在数据爆炸的时代，可视化是解锁数据价值的金钥匙。Python凭借其丰富的可视化生态库，已成为数据科学家的首选工具。本文将带您从基础到高级，探索如何用Python将冰冷数字转化为引人入胜的视觉叙事。一、基础篇：二维可视化的艺术表达1.1Matplotlib：可视化领域的瑞士军刀importmatplotlib.pyplotaspltimportnumpyasnpx=np.linsp</div>
</li>
<li><a href="/article/1950179614320029696.htm"
title="python学习笔记（汇总）" target="_blank">python学习笔记（汇总）</a>
<span class="text-muted">朕的剑还未配妥</span>
<a class="tag" taget="_blank" href="/search/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%95%B4%E7%90%86/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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>文章目录一.基础知识二.python中的数据类型三.运算符四.程序的控制结构五.列表六.字典七.元组八.集合九.字符串十.函数十一.解决bug一.基础知识print函数字符串要加引号，数字可不加引号，如print(123.4)print('小谢')print("洛天依")还可输入表达式，如print(1+3)如果使用三引号，print打印的内容可不在同一行print("line1line2line</div>
</li>
<li><a href="/article/1950178477592342528.htm"
title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a>
<span class="text-muted"></span>
<div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div>
</li>
<li><a href="/article/1950175199089455104.htm"
title="PDF转Markdown - Python 实现方案与代码" target="_blank">PDF转Markdown - Python 实现方案与代码</a>
<span class="text-muted">Eiceblue</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/PDF/1.htm">PDF</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</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/vscode/1.htm">vscode</a>
<div>PDF作为广泛使用的文档格式，转换为轻量级标记语言Markdown后，可无缝集成到技术文档、博客平台和版本控制系统中，提高内容的可编辑性和可访问性。本文将详细介绍如何使用国产Spire.PDFforPython库将PDF文档转换为Markdown格式。技术优势：精准保留原始文档结构（段落/列表/表格）完整提取文本和图像内容无需Adobe依赖的纯Python实现支持Linux/Windows/mac</div>
</li>
<li><a href="/article/1950174441992417280.htm"
title="使用Python和Gradio构建实时数据可视化工具" target="_blank">使用Python和Gradio构建实时数据可视化工具</a>
<span class="text-muted">PythonAI编程架构实战家</span>
<a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>使用Python和Gradio构建实时数据可视化工具关键词：Python、Gradio、数据可视化、实时数据、Web应用、交互式界面、数据科学摘要：本文将详细介绍如何使用Python和Gradio框架构建一个实时数据可视化工具。我们将从基础概念开始，逐步深入到核心算法实现，包括数据处理、可视化技术以及Gradio的交互式界面设计。通过实际项目案例，读者将学习如何创建一个功能完整、响应迅速的实时数据</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> |
