arima

HTML+CSS 前端基础知识点（更新）

第一章

什么是HTML文件？

类似于txt、word文本记录文件
需要使用浏览器打开
展示文字和其他信息
使用标签实现对信息展示方式的加工

什么是HTML？

超文本标记语言：HyperText Markup Language
超文本：指页面内可以包含图片、视频、音频、程序等非文字元素
标记语言：实现信息的格式改变

HTML、CSS、JavaScript 之间的关系

HTML：组织内容和结构（布局）
CSS：对现有内容进行美化（样式）
JS：响应用户的交互（交互）

第二章 HTML概述

HTML标准的网页结构

 ------ 描述网页文档类型
 ------ 网页顶级元素，即根元素
     ------ 网页头元信息，用户不可见部分，描述建站时间作者等内容
    
     ------ 网页的身体，用户可见部分
        我的第一个标题
        我的第一个段落

HTML 元素

元素：由开始标签与结束标签包裹的部分 ..
元素格式：
```
<标签 属性="值">
```
标签类型

双标签：有头尾的标签 1234
单标签：只有头没有尾或
属性：属性为HTML元素提供附加信息，属性总是以名称/值对的形式出现。
注释：使用 `` 可在HTML插入注释，也可作为条件注释或程序识别标签

头部元素

 -----  给搜索引擎识别的部分
  ----- 网页文档描述
 标签名 ----- 浏览器标签页头名、收藏夹标题、搜索引擎结果标题
  --- 引用外部CSS
  ----- 页面上的所有链接规定默认地址或默认目标
  ----- 用于定义客户端脚本
  ----- 定义级联样式表，规定在浏览器中如何呈现HTML文档
  ----- 引入嵌入样式表

meta标签：用来提供有关页面的元信息说明、关键字、作者、语言字符集charset；其属性包括name属性和http-equiv属性。（content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的）
- name属性：用于描述网页，语法格式是
  name的参数：Keywords(关键字) robots(机器人向导) description(网站内容描述) author(作者)
  - http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，语法格式是
    http-equivd的参数：Expires(到期时间) Pragma(缓存允许) Refresh(自动刷新并指向新页面) Set-Cookie(cookie设定) Window-target(强制独立页面显示) content-Type(设定页面使用的字符集)
link 标签：定义文档与外部资源的关系，如引用外部CSS
- rel=stylesheet的作用：rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的,而此次Stylesheet定义的是一个外部加载的样式表
- type="text/css"的作用：告诉浏览器，这段标签内包含的内容是css或text；如果不定义的话，有些CSS效果会被浏览器解释得不一样

元素的两种类型

块级元素 block-level：一个“层”“容器”或“盒子”，将所要的东西打包在内，分小节方便自己查看（完整独占一行宽度），比如
- 内联元素 inline：包裹标记或隔离一段中的某些内容，一个文本容器，方便后续CSS美化，使其产生视觉上的变化（不会一新行开始，只占自身所需宽度大小），无法设置宽和高，比如
Style 样式

为元素增加指定style属性，一般把style样式写在head头部文件处以方便修改，有三种方法插入样式：

引入样式表（推荐）嵌入样式表（一般）内联样式表（不推荐）

里的样式代码可以放到css里，运行效果相同

HTML 框架

框架：将浏览器划分成不同的部分，每部分加载不同的页面，实现同一浏览器中加载多个页面的效果

（放于body或head之外）

左右框尺寸cols 上下框尺寸rows 边框粗细border 显示边框控制frameborder 边框间距framespacing 拖动控制noresize

（放于frameset之中）

框架名name 框架页面来源src 拖动条显示控制scrolling 拖动控制noresize

frame通过src链接指定本地html文件或指定网站来加载页面

内联框架：在网页内固定一个区域显示另一个网页

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档

很难打印整张页面

</code> 在HTML5中已被弃用</li> </ul> </blockquote> <h2>补充知识</h2> <ul> <li> <code>Lorem</code> 一个乱数假文生成器，尽管该短语毫无意义，但它却历史悠久。用以测试所用字体的粗细、设计及其他重要特点。</li> </ul> <h1>第三章 HTML样式</h1> <h2>基本样式</h2> <ul> <li> <p>标题 <code><h1..></h1></code> <code><h1 ~ h6></code></p> <blockquote> <p>h1 align=<code>"center"</code>/<code>"left"</code>/<code>"right"</code>/<code>"justify"</code></p> </blockquote> </li> <li> <p>段落 <code><p..></p></code></p> <blockquote> <p>p <code>align</code>=<code>"center"</code>/<code>"left"</code>/<code>"right"</code>/<code>"justify"</code></p> </blockquote> </li> <li><p>换行 <code><br></code> <code><br /></code> <code><nobr>不拆行</nobr></code></p></li> <li> <p>水平线 <code><hr></code> <code><hr /></code></p> <blockquote> <p>hr <code>size</code> <code>width</code> <code>color</code> <code>align</code> <code>noshade="noshade"</code></p> </blockquote> </li> <li><p>规定文字属性 <del><font..></font></del><br> <code>color</code> <code>face</code> <code>size</code></p></li> <li><p>特殊符号（字符实体Entities）<br> <code>空格  </code> <code>< <</code> <code>> ></code> <code>& &</code> <code>¥ ¥</code> <code>× ×</code></p></li> <li> <p>主体 <code><body></body></code></p> <blockquote> <p>body <del>alink</del> <del>background</del> <del>bgcolor</del> <del>link</del> <del>text</del> <del>vlink</del> （不推荐对其直接使用样式）</p> </blockquote> </li> <li> <p>总文档 <code><html></html></code></p> <blockquote> <p>html <code>xmlns</code> <code>manifest</code></p> </blockquote> </li> </ul> <h2>高级样式</h2> <ul> <li> <p>超链接 <code><a href="url"></a></code></p> <p><code>打开方式target</code> <code>锚点名称name</code> <code>类型type</code> <code>媒介media</code> <code>下载download</code> <code>字符集charset</code> <code>坐标coords</code> <code>链接语言hreflang</code> <code>关系rel</code> <code>被关系rev</code> <code>发送邮件mailto</code> <code>形状shape</code></p> <p>通过锚<code>name</code>定位跳转到本页面的某个段落位置（相当于书签）：</p> <pre><code><a href="#C1">第六章</a> ---- （点此） ... <a name="C1">第六章</a> ---- （跳到此） <p>本章讲解的内容是...</p> </code></pre> </li> <li><p>图片 <code><img scr="url"></code><br> <code>图片路径src</code> <code>替换文本alt</code> <code>对齐方式align</code> <code>宽度width</code> <code>高度height</code> <code>边框粗细border</code> <code>水平间距hspace</code> <code>垂直间距vspace</code> <code>服务器端图像位置映射ismap</code> <code>客户器端图像可点映射usemap</code> <code>图像长文档描述longdesc</code> <code>配合<map><area></map>实现图片映射</code></p></li> <li> <p>表格 <code><table></table></code></p> <ul> <li> <p>属性：</p> <p><code>背景色bgcolor</code> <code>width</code> <code>边框粗细border</code> <code>bordercolorlight</code> <code>bordercolordark</code> <code>格间距cellspacing</code> <code>格边距cellpadding</code> <code>summary</code> <code>rules</code> <code>围绕边框frame</code> <code>背景图background</code> <code>列组合colgroup</code></p> </li> <li> <p>表格结构</p> <p><code>行块<tr></tr></code> <code>单元块<td></td></code> <code>表头块<th></th></code> <code>表格标题<caption></caption></code> <code>列属性<col></col></code> <code>页眉<thead></thead></code> <code>主体<tbody></tbody></code> <code>页脚<tfoot></tfoot></code> <code>合并跨行rowspan</code> <code>对齐align</code></p> </li> </ul> <pre><code><table border="2"> <tr> /* tr=row th=head td=date */ <th>一班</th> <th>二班</th> <th>三班</th> </tr> <tr> <td>200</td> <td>300</td> <td>100</td> </tr> <tr> <td>亚军</td> <td>冠军</td> <td>季军</td> </tr> </table> </code></pre> <p>显示如下：</p> <table> <thead> <tr> <th style="text-align:center">一班</th> <th style="text-align:center">二班</th> <th style="text-align:center">三班</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">200</td> <td style="text-align:center">300</td> <td style="text-align:center">100</td> </tr> <tr> <td style="text-align:center">亚军</td> <td style="text-align:center">冠军</td> <td style="text-align:center">季军</td> </tr> </tbody> </table> </li> <li> <p>列表</p> <ul> <li> <p>无序列表</p> <p>tpye=<code>实心方块square</code>/<code>实心圆disc</code>/<code>空心圆circle</code></p> <pre><code><ul tpye=""> <li>..</li> <li>..</li> </ul> </code></pre> </li> <li> <p>有序列表</p> <p><code>tpye="A/a/1/I/i"</code> <code>起始值start</code> <code>降序reversed</code></p> <pre><code><ol tpye="A" start="3"> <li>..</li> <li>..</li> </ol> </code></pre> </li> <li> <p>特殊列表</p> <pre><code><dl> /* dl=definition-list dt=title dd=description */ <dt>中国城市</dt> <dd>北京</dd><dd>上海</dd><dd>广州</dd> <dt>美国城市</dt> <dd>洛杉矶</dd><dd>纽约</dd><dd>华盛顿</dd> </dl> </code></pre> </li> </ul> </li> <li> <p>表单 <code><form..></form></code></p> <pre><code><form action="接受表单内容的服务器地址" method="获取方式" enctype="编码方式" target="打开方式"> 【账号】用户：<input type="text"> 密码：<input type="password"> 【复选框】你喜欢的水果有？苹果<input type="checkbox"> 雪梨<input type="checkbox" checked(默认选中)> 香蕉<input type="checkbox"> 【单选框】（选项男和女放于sex组中才能从中选择）你的性别是？男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 【按钮】 <input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> <button type="button">第二种实现按钮的方式</button> 【隐藏域】 <input type="hidden" value="此信息会隐藏发送出去" name="hid"> 【下拉列表】请选择你常用的网站？ <select class="" name="区域组" multiple(加上此属性即可多选)> <option>百度</option> <option>谷歌</option> <option>腾讯</option> <option seleced>默认选择项</option> </select> 【文本域】（可放于form之外） <textarea rows="8" cols="80" name="gerenxinxi">请在此填写个人信息 </textarea> </form> </code></pre> <blockquote> <p>获取方式：method="get"（将数据附在链接上发送）/ "post"（直接将数据附在表单主体中发送）</p> </blockquote> <blockquote> <p>input的属性：</p> <pre><code><input type="text" name="定义控件名" value="默认写入文字" placeholder="预期提示信息" size="输入框长度" maxlength="最大可输入字数"> </code></pre> </blockquote> <blockquote> <p>button的作用：当<code><button></code>标签放到了<code><form></code>标签中（如username与password并存时）会触发提交功能，或者让JS给予反馈作用（如弹出展开内容），能放置文本或图像，单独存在时无实际作用。</p> </blockquote> </li> </ul> <h2>文本格式化</h2> <ul> <li> <p>文字修饰</p> <p><code><b>加粗</b></code> <code><i>斜体</i></code> <code><u>下划线</u></code> <code><s>删除线</s></code> <code><em>强调</em></code> <code><sup>上标</sup></code> <code><sub>下标</sub></code> <code><del>删除线</del></code> <code><ins>插入</ins></code> <code><small>缩小</small></code> <code><strong>加重强调</strong></code> <code><big>扩大</big></code></p> </li> <li> <p>计算机输出标签</p> <p><code><code>代码</code></code> <code><samp>代码样本</samp></code> <code><kbd>键盘码</kbd></code> <code><var>变量</var></code> <del><tt>等宽</tt></del></p> <ul> <li><p>预格式保留文本布局标记 <code><pre></pre></code><br> 可以保留文本里的源代码，保持原有格式，如用于显示散文段落或者计算机程序语言</p></li> <li> <p>代码标记<code><code></code></code></p> <p>用于突出某一小段代码，与pre区别是code是行内元素，pre是块级元素。</p> </li> </ul> </li> <li> <p>引用标签</p> <ul> <li> <p>地址标签 <code><address></address></code></p> <p>定义文档或文章的作者/拥有者的联系信息，文本会呈现为斜体。</p> </li> <li> <p>缩写标签 <code><abbr></code></p> <p>专门为显示显示英文缩写准备的标签，当鼠标指在缩写文字上面时就会显示其全拼；原缩写标签<code><acronym></code>在html5中已被舍弃。</p> <pre><code>This is a <abbr title="HyperText Markup Language">HTML</abbr>. </code></pre> </li> <li> <p>文字方向标签 <code><bdo></code></p> <p>带有<code>dir="ltl"(从左往右)/"rtl"(从右往左)</code>属性，会改变输出方向，镜面显示，如<code>Here</code>变成<code>ereH</code></p> </li> <li> <p>块引用</p> <p>长引用 <code><blockquote></code>：使文本上下添加换行，左侧添加缩进</p> <p>短引用 <code><q></code>：被包裹的文本会添加双引号</p> </li> <li><p>定义特殊术语 <code><dfn>定义</dfn></code></p></li> <li><p>著作标题 <code><cite>引文</cite></code></p></li> </ul> </li> </ul> <blockquote> <p>物理字体与逻辑字体的区别：</p> <p>我们知道字体有大小、颜色、斜、粗、下划线等等属性，称这些为字体的风格。这种风格分为指定字体“样式”的物理风格（如粗、斜、下划线）和指定文本“作用”的逻辑风格（如示例文字、缩小文字）；就像去餐馆吃饭，点菜的时候，A告诉炒菜的师傅“炒得多一点”，这是物理风格，直接指定样式；B告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定作用；逻辑风格是W3C组织推荐使用的。</p> </blockquote> <h1>第四章 CSS样式</h1> <ul> <li><p>CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。</p></li> <li> <p>CSS语法：<code>选择器名{属性名:属性值;}</code></p> <p>（图已挂）</p> </li> <li><p>CSS选择器：为了简化代码，使html元素快速改变样式，故把代码写到css里，无需存写在html中，通过link标签在头文件中引入映射文件</p></li> <li><p>引入CSS的方法：<code>嵌入式</code> <code>内联式</code> <code>外联式</code></p></li> </ul> <h2>选择器</h2> <ul> <li> <p><code>.class</code> 或 <code>#id</code>：类选择器 ID选择器</p> <pre><code class="css">html中： <span id="three">333</span> <span class="three">333</span> css中： #three{color:green;} .three{color:green;} </code></pre> <pre><code class="css">html中： <div class="box">盒子</div> css中： .box{ color:blue; font-size:15px; } </code></pre> <pre><code class="css">html中： <div class="pink font20">盒子1</div> <div class="font20">盒子2</div> css中： .pink{ color:pink; } .font20{ font-size:20px; } </code></pre> <p>两种方法效果都一样，区别不大，只是命名规则上，id独一无二，常用以定义布局名，class用以定义散件的类名；</p> </li> <li><p><code>*</code> ：所有的都改变</p></li> <li><p><code>elem,elem</code>：分组多选，使用逗号可选择多个元素统一更改</p></li> <li><p><code>[attribute]</code>：属性选择器，对拥有指定属性及属性值的元素来更改</p></li> <li> <p><code>x contextual</code>：派生选择器，对指定元素的上下文检索并选择下一元素更改样式</p> <ul> <li> <code>elem elem</code>：后代选择器，可选择父元素下的所有层级的某个子元素更改</li> <li> <code>elem>elem</code>：子元素选择器，只对其直接子级元素进行更改，范围变小且对孙元素无效</li> <li> <code>elem+elem</code>：相邻兄弟选择器，只对所属父层级之下的同辈级进行改变</li> </ul> </li> <li> <p><code>elem:pse-class</code>：伪类选择器，用于向某些选择器添加特殊的效果</p> <ul> <li> <code>a:hover</code>：悬停选择器，当鼠标悬停在所指内容上时样式改变</li> <li> <code>a:active</code>：点击选择器，点击访问时链接所改变的样式</li> <li> <code>a:link</code>：未访问选择器，未点击访问时链接默认样式</li> <li> <code>a:visited</code>：已访问选择器，已点击访问过链接样式</li> <li> <code>x:focus</code>：焦点锁定，目标被选中后（获得焦点）锁定一个样式</li> <li> <code>x:first-child</code>：第一子元素选择器</li> <li> <code>x:lang</code>：向带有指定lang属性的元素添加样式</li> </ul> </li> <li> <p><code>elem:pse-elem</code> ：伪元素选择器，用于向某些选择器设置特殊效果</p> <ul> <li> <code>x:first-line</code>：首行选择器，用于向指定元素的首行文本设置特殊样式</li> <li> <code>x:first-letter</code>：首字母选择器，向指定元素的文本首个字母设置特殊样式</li> <li> <code>x:before</code>：可以在元素的内容前面插入新内容</li> <li> <code>x:after</code>：可以在元素的内容之后插入新内容</li> </ul> </li> </ul> <h2>CSS 优先级和权重</h2> <ul> <li>全局优先级：id＞class＞html</li> <li>css的优先级：最新最底下的部分会优先使用并覆盖之前的部分，即服从后者</li> <li>html的优先级：link＜style标签＜style属性，即<code>内＞外</code>（越靠近越优先）</li> <li>link映射css文件的优先级：同样服从后者</li> <li>明确程度优先级：所属关系越明确，即子集越所多，优先级会更高</li> <li> <code>!important</code>：特权最高级的破坏规则者，无视其他优先级，最优先更改，慎用</li> <li>继承：父标签定义的样式会继承给子子孙孙</li> </ul> <h2>CSS 基本属性</h2> <ul> <li> <p>字体属性 <code>font</code></p> <ul> <li> <p>字体大小 <code>font-size</code></p> <blockquote> <p>font-size:<code>1em</code>/<code>40px</code>/<code>100%</code>/<code>smaller</code>/<code>larger</code>/<code>inherit</code>;</p> <p>未设定字体的默认大小是 16 像素，推荐使用em</p> </blockquote> </li> <li> <p>字体系列 <code>font-family</code></p> <blockquote> <p>font-family:<code>Microsoft YaHei</code>/<code>微软雅黑,serif,'New York'</code>;</p> <p>可单独规定也可按排序存在字体的优先级，如没微软雅黑，则会显示serif字体，引号表示字体名中带有空格使用要包含起来</p> </blockquote> </li> <li> <p>字体粗细 <code>font-weight</code></p> <blockquote> <p>font-weight:<code>normal</code>/<code>bold</code>/<code>bolder</code>/<code>lighter</code>/<code>100~900</code>;</p> </blockquote> </li> <li> <p>字体风格 <code>font-style</code></p> <blockquote> <p>font-style:<code>normal</code>/<code>italic</code>/<code>oblique</code>/<code>inherit</code>;</p> </blockquote> </li> <li> <p>大写字母样式文本 <code>font-variant</code></p> <blockquote> <p>font-variant:<code>normal</code>/<code>small-caps</code>/<code>inherit</code>;</p> </blockquote> </li> </ul> </li> <li> <p>背景属性 <code>background</code></p> <ul> <li> <p>背景颜色 <code>background-color</code></p> <blockquote> <p>background-color:<code>red</code>/<code>#f60</code>/<code>rgb(255,0,0)</code>;</p> </blockquote> </li> <li> <p>背景图片 <code>background-image</code></p> <blockquote> <p>background-image:<code>url(bg.jpg)</code>;</p> </blockquote> </li> <li> <p>背景图片重复方式 <code>background-repeat</code></p> <blockquote> <p>background-repeat:<code>repeat</code>/<code>repeat-x</code>/<code>repeat-y</code>/<code>no-repeat</code>;</p> </blockquote> </li> <li> <p>背景定位 <code>background-position</code></p> <blockquote> <p>background-position:<code>center</code>/<code>left top</code>/<code>20px 80px</code>/<code>66% 33%</code>;</p> <p>// 通过规定x与y的横纵位置来定位背景</p> </blockquote> </li> <li> <p>背景固定 <code>background-attachment</code></p> <blockquote> <p>background-attachment:<code>fixed</code>/<code>scroll</code>;</p> <p>// 固定背景图像，使其不随页面其余部分的滚动而移动</p> </blockquote> </li> <li> <p>合并简写方式</p> <blockquote> <p>background:<code>#ff6600 url(bg.jpg) no-repeat fixed 20px 80px</code>;</p> </blockquote> </li> </ul> </li> <li> <p>文本属性</p> <ul> <li> <p>水平对齐方式 <code>text-align</code>（盒子里的内容水平对齐，而不是让盒子进行对齐）</p> <blockquote> <p>text-align：<code>left</code>/<code>center</code>/<code>right</code>/<code>justify</code>;</p> </blockquote> </li> <li> <p>首行缩进 <code>text-indent</code></p> <blockquote> <p>text-indent:<code>40px</code>/<code>inherit</code>;</p> </blockquote> </li> <li> <p>字符大小写转换 <code>text-transform</code></p> <blockquote> <p>text-transform:<code>none</code>/<code>uppercase</code>/<code>lowercase</code>/<code>capitalize</code>;</p> </blockquote> </li> <li> <p>首行缩进 <code>text-indent</code></p> <blockquote> <p>text-indent:<code>5em</code>/<code>-5em</code>/<code>20%</code>;</p> </blockquote> </li> <li> <p>文本下划线装饰 <code>text-decoration</code></p> <blockquote> <p>text-decoration:<code>none</code>/<code>underline</code>/<code>overline</code>/<code>line-through</code>/<code>blink</code>;</p> </blockquote> </li> <li> <p>文本颜色属性 <code>color</code></p> <blockquote> <p>color:<code>green</code>/<code>#ff6600</code>/<code>#f60</code>/<code>rgb(255,0,0)</code>/<code>rgba(255,0,0,0.6)</code>;</p> <p>// 颜色名十六进制简写 rgb值 rgba透明值</p> </blockquote> </li> <li> <p>文本行高 <code>line-height</code></p> <blockquote> <p>line-height:<code>20px</code>/<code>50%</code>;</p> </blockquote> </li> <li> <p>字符间距</p> <blockquote> <p>letter-spacing:<code>normal</code>/<code>10px</code>/<code>-8px</code>/<code>inherit</code>;</p> <p>word-spacing:<code>30px</code>/<code>-0.5em</code>;</p> <p>一个是字母间隔（letter），另一个是单字/单词间隔（word），作用不同</p> </blockquote> </li> <li> <p>文本书写方向 <code>direction</code></p> <blockquote> <p>direction:<code>ltr</code>/<code>rtl</code>;</p> </blockquote> </li> <li> <p>空白符处理 <code>white-space</code></p> <blockquote> <p>white-space:<code>pre</code>/<code>nowrap</code>/<code>pre-wrap</code>/<code>pre-line</code>;</p> </blockquote> </li> </ul> </li> <li> <p>列表属性 <code>list</code></p> <ul> <li>标记类型 <code>list-style-type</code> </li> <li>标记位置 <code>list-style-position</code> </li> <li>图片标记 <code>list-style-image</code> </li> <li>标记简写方式 <code>list-style</code> </li> </ul> </li> <li> <p>表格属性</p> <ul> <li> <p>表标题位置 <code>caption-side</code></p> <blockquote> <p>caption-side:<code>bottom</code>/<code>top</code>;</p> </blockquote> </li> <li> <p>空表格隐藏 <code>empty-cells</code></p> <p>empty-cells:<code>hide</code>/<code>show</code>;</p> </li> <li> <p>表格布局宽度算法 <code>table-layout</code></p> <blockquote> <p>table-layout:<code>fixed</code>/<code>automatic</code>;</p> <p>控制表格是否随表格中内容的增加而扩张</p> </blockquote> </li> </ul> </li> </ul> <h1>第五章盒子模型</h1> <ul> <li>CSS盒模型（box model）本质上是一个封装周围的HTML元素的盒子，它包括边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。</li> </ul> <h2>盒模型基本属性</h2> <p>内边距、边框和外边距都是可选的，默认值是零</p> <ul> <li> <p>内边距 <code>padding</code></p> <ul> <li><p>可用值 <code>10px</code> <code>0.25em</code> <code>2ex</code> <code>20%</code>，但不接受负值</p></li> <li> <p>单边内边距属性</p> <p><code>padding-top</code> <code>padding-right</code> <code>padding-bottom</code> <code>padding-left</code></p> </li> <li><p>内边距的百分比数值是相对于其父元素的width宽度来计算的</p></li> </ul> </li> <li> <p>外边距 <code>margin</code></p> <ul> <li><p>接受任何长度单位、百分数值与负值</p></li> <li> <p>单边外边距属性</p> <p><code>margin-top</code> <code>margin-right</code> <code>margin-bottom</code> <code>margin-left</code></p> <p>另外，<code>margin-left:20px;</code> 等效于<code>margin:auto auto auto 20px;</code></p> </li> </ul> </li> </ul> <pre><code>！注意！！！块元素的垂直外边距会发生合并，合并后会取最大值，详看相关文档！ </code></pre> <p> <strong>※ 外边距合并说明</strong></p> <ul> <li> <p>边框 <code>border</code></p> <ul> <li> <p>边框风格 <code>border-style</code></p> <blockquote> <p>border-style:<code>none</code>/<code>solid</code>/<code>dashed</code>/<code>dotted</code>/<code>double</code>/<code>outset</code>;</p> </blockquote> <blockquote> <p>单边边框 <code>border-top-style</code> <code>border-right-style</code> <code>border-bottom-style</code> <code>border-left-style</code></p> </blockquote> </li> <li> <p>边框宽度 <code>border-width</code></p> <blockquote> <p>border-width:<code>10px</code>/<code>thin</code>/<code>medium</code>/<code>thick</code>;</p> </blockquote> <blockquote> <p>单边边框宽度 <code>border-top-width</code> <code>border-right-width</code> <code>border-bottom-width</code> <code>border-left-width</code></p> </blockquote> <blockquote> <p>无边框：把样式设成<code>border-style:none;</code>，即可取消边框显示</p> </blockquote> </li> <li> <p>边框颜色 <code>border-color</code></p> <blockquote> <p>border-color:<code>red</code>;</p> </blockquote> <blockquote> <p>单边边框颜色 <code>border-top-color</code> <code>border-right-color</code> <code>border-bottom-color</code> <code>border-left-color</code></p> </blockquote> <blockquote> <p>默认边框颜色为元素本身的前景色；若未声明边框颜色，它将与元素的文本颜色相同，若无文本则会继承父元素的文本颜色</p> </blockquote> <blockquote> <p>设置一个透明且占宽度的边框 <code>border-color:transparent;</code></p> </blockquote> </li> <li> <p>边框合并 <code>border-collapse</code></p> <blockquote> <p>border-collapse:collapse;</p> </blockquote> </li> <li> <p>边框轮廓 <code>outline</code></p> <blockquote> <p><code>outline</code> <code>outline-color</code> <code>outline-style</code> <code>outline-width</code></p> </blockquote> </li> </ul> </li> </ul> <h2>盒模型定位</h2> <ul> <li> <p>布局属性</p> <ul> <li> <p>定位方式 position</p> <p><code>开启相对定位relative</code> <code>根据父元素（绝对）定位absolute</code> <code>根据窗口固定定位fixed</code> <code>没有定位static</code> <code>继承inherit</code></p> </li> <li><p>离页面顶点距离 left right top bottom</p></li> <li> <p>层覆盖先后顺序（优先级）</p> <p>z-index:<code>0</code> <code>1</code></p> </li> <li> <p>显示属性 display（可以内联块级转换）</p> <p><code>层不显示且不占位none</code> <code>块级显示block</code> <code>内联显示inline</code> <code>具有宽高的行内块元素inline-block</code></p> </li> <li> <p>显示效果visibility</p> <p><code>可见visible</code> <code>隐藏并占位hidden</code></p> </li> <li> <p>溢出处理 overflow（子元素大小超过父元素的大小）</p> <p><code>溢出可见visible</code> <code>溢出隐藏hidden</code> <code>强制滚动scroll</code> <code>溢出自动按需滚动auto</code></p> </li> <li> <p>浮动属性 float</p> <p><code>left</code> <code>right</code></p> </li> <li> <p>清除浮动 clear</p> <p><code>none</code> <code>left</code> <code>right</code> <code>清除影响最大的浮动both</code></p> </li> <li> <p>透明度<code>opacity:0~1;</code> 使元素背景透明</p> <p>不支持IE8即以下浏览器，可使用<code>filter:alpha(opacity=0~100);</code>属性代替</p> <p>支持IE6，但IE Tester软件中无法测试（bug)</p> </li> </ul> </li> <li> <p>说明：</p> <ul> <li>不同的浏览器对外边距（margin）有不同的默认值，故为适应不同浏览器，开始可使用<code>*{margin:0;}</code>来消除浏览器默认的外边距</li> <li>所有元素都是矩形</li> </ul> </li> <li><p>box-sizing：限制边框的大小，不会使因内容的宽和高更改而改变<br> 一般写box之前会添加一个<code>*{box-sizing:border-box;}</code>来先限定填写内容的位置大小，方便之后的更改，原始默认的<code>content-box</code>会覆盖掉，此时边框就不会随内容宽和高的增加而往外扩张</p></li> <li><p>normalize.css：初始化元素样式的css文件，解决不同浏览器兼容问题的规范标准，统一规则。</p></li> <li><p>max-width：定义一个最大宽度，只要设备超过这个极限都按此极限显示。</p></li> <li><p>边距重叠：在网页中垂直方向的相邻外边距会发生重叠，即相邻垂直外边距会取最大值而不是取和；且子元素的外边距也会传递给相邻的父元素</p></li> <li><p>内联元素的盒模型：不能设置width和height，可以设置内边距和边框，但垂直方向的内边距和边框不会影响页面布局，即会悬在上方；同时只支持水平外边距</p></li> </ul> <h2>浮动 float</h2> <ul> <li><p>文档流Normal flow：默认的一种排列方式（从上到下从左到右）即最底层的板块</p></li> <li><p>脱离文档流：脱离之后，将不再在文档流中占据空间，而是处于浮动状态</p></li> <li> <p>float 浮动的特点：</p> <ul> <li><p>使盒子块悬空起来，脱离文档流，不排队</p></li> <li><p>原空间被后面的元素占用（相当于自行另起一个图层悬浮），即其他元素向上移</p></li> <li><p>当其他元素也跟随前者浮动时，其将会跟着前者排队（左浮排在后，右浮排在前）</p></li> <li><p>若浮动元素前者是一个未浮动元素（本身为块元素），则其不会超过前者</p></li> <li><p>全部浮动，可实现横向排列</p></li> <li><p>块元素浮动后宽度和高度都被内容撑开；内联元素浮动后自身会变成块元素</p></li> <li><p>浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，故有时可通过浮动来设置环绕图片效果</p></li> </ul> </li> </ul> <h2>解决高度坍塌问题</h2> <p>在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高则父元素就多高；当子元素浮动脱离文档流后，此时会导致子元素无法撑起父元素的高度，父元素会坍塌失去高度，即底层没有了内容；跟着父元素之后的所有元素都会向上移动，将导致页面混乱，所有在开发中一定要避免出现高度坍塌的问题。</p> <p>对于上诉问题，我们有两种解决方案：</p> <ol> <li>可以将父元素高度写死，但写死后父元素将不能自动适应子元素，故此方法不推荐</li> <li>开启BFC（对IE6无效）</li> <li>设置zoom（IE6专用）</li> <li>清除浮动</li> </ol> <h3>开启BFC</h3> <blockquote> <p>根据W3C标准，在页面中的元素都隐含一个默认关闭的属性叫BFC（Block Formatting Context），当开启BFC以后，元素将会具有如下的特性：</p> <ol> <li>父元素的垂直外边距不会和子元素重叠</li> <li>开启BFC的元素不会被浮动元素所覆盖</li> <li>开启BFC的元素可以包含浮动的子元素</li> </ol> </blockquote> <blockquote> <p><strong>如何开启元素的BFC</strong>：（无法直接开启，只能间接开启）</p> <ol> <li>设置元素浮动（可以撑开，但是会失去宽度，且后元素会前移）</li> <li>设置元素绝对定位（问题同上）</li> <li>设置元素为inline-block（可以撑开，会失去宽度，但后元素不会前移）</li> <li>将元素的overflow设置为一个非visible的值，如<code>overflow:hidden;</code>（副作用最小，推荐）</li> </ol> </blockquote> <blockquote> <p>IE6中没有BFC，但具有另一个隐含属性<code>hasLayout</code>，该属性的作用和BFC类似，开启方式很多，但副作用最小的方式是添加 <code>zoom:1;</code>（即放大倍数）</p> </blockquote> <h3>清除浮动</h3> <p>由于受到<code>盒子A</code>浮动的影响，<code>盒子B</code>整体会向上移动，此时我们希望清除掉<code>盒子A</code>浮动对后元素产生的影响，故要使用<code>clear</code>属性，当清除浮动影响后，元素会回到<code>盒子A</code>浮动之前的位置。</p> <blockquote> <p>清除浮动对后面元素方法与影响：</p> <ul> <li><p>在浮动元素之后的div元素的样式中添加<code>clear:both;</code>（上边距设置会显示无效）</p></li> <li><p>在浮动元素后面添加一个空的div元素，设置样式为<code>clear:both;</code>（但添加无意义结构会过于累赘）</p></li> <li> <p>通过after伪类向元素的最后添加一个空白块元素，然后清除浮动，既可解决margin-top和父元素失去高度的问题，又不会添加多余div（推荐使用）</p> <pre><code>.boxA:after{ content:""; display:block; clear:both; } </code></pre> <blockquote> <p>但由于IE6不支持after伪类，在后添加一个<code>.boxA{zoom:1;}</code>即可解决问题</p> </blockquote> </li> </ul> </blockquote> <h2>清除浮动的方法</h2> <p>其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。</p> <p>在CSS中，clear属性用于清除浮动，其基本语法格式如下：</p> <pre><code>选择器{clear:属性值;} </code></pre> <table> <thead> <tr> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>left</td> <td>不允许左侧有浮动元素（清除左侧浮动的影响）</td> </tr> <tr> <td>right</td> <td>不允许右侧有浮动元素（清除右侧浮动的影响）</td> </tr> <tr> <td>both</td> <td>同时清除左右两侧浮动的影响</td> </tr> </tbody> </table> <h3>额外标签法</h3> <pre><code class="html">是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。 </code></pre> <p>优点：通俗易懂，书写方便</p> <p>缺点：添加许多无意义的标签，结构化较差。我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。</p> <h3>父级添加overflow属性方法</h3> <p>可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）</p> <pre><code class="css">可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。 </code></pre> <p>优点：代码简洁</p> <p>缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。</p> <h3>使用after伪元素清除浮动</h3> <p><strong>:after 方式为空元素的升级版，好处是不用单独加标签了</strong></p> <p>使用方法：</p> <pre><code class="css">.clearfix:after { /* 普通浏览器用 */ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; } /* IE6/7专用 */ /* 由于IE6/7不支持:after伪类，需要使用zoom:1触发hasLayout */ /* “*”只能被IE浏览器特定识别 */ </code></pre> <p>优点：符合闭合浮动思想结构语义化正确</p> <p>缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。</p> <p>注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。</p> <h3>使用before和after双伪元素清除浮动</h3> <p>使用方法：</p> <pre><code class="css">.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } </code></pre> <p>优点：代码更简洁</p> <p>缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。</p> <h2>定位</h2> <p>即将元素摆放到页面的指定任意位置</p> <ul> <li> <p><code>position:relative;</code> 相对定位</p> <ul> <li>开启相对定位：相对于元素在文档流中原来位置进行定位</li> <li>若不设置偏移量，元素则不会发生变化</li> <li>当开启元素定位（即非static值）时，可通过<code>left</code> <code>right</code> <code>top</code> <code>bottom</code>四个属性来设置元素的偏移量，一般只需要两个偏移量即可进行定位</li> <li>相对定位元素并不会脱离文档流，依然占用原位置，只是<strong><em>灵魂出窍</em></strong>了</li> <li>相对定位会使元素提升一个层级，会覆盖住文档流上的内容</li> <li>相对定位不会改变元素本身性质，块依然是块，内联还是内联</li> </ul> </li> <li> <p><code>position:absolute;</code> 绝对定位</p> <ul> <li>开启绝对定位，会使元素脱离文档流</li> <li>若不设置偏移量，元素则不会发生变化</li> <li>绝对定位相对于离它最近的祖先元素进行定位的，若所有的祖先元素都未开启定位，则叫相对于浏览器窗口进行定位（一般情况，开启元素绝对定位时都会同时开启父元素的相对定位）</li> <li>绝对对定位也会使元素提升一个层级</li> <li>绝对对定位会改变元素本身性质，内联会变成块，块元素的宽和高默认都被内容撑开</li> </ul> </li> <li> <p><code>position:fixed;</code> 固定定位</p> <ul> <li>固定定位是一种特殊的绝对定位，大部分特点和绝对定位相同</li> <li>不同点： <ul> <li>永远相对于浏览器窗口进行定位</li> <li>会固定显示在浏览器窗口某个位置，不会随滚动条滚动</li> <li>IE6不支持固定定位</li> </ul> </li> </ul> </li> <li> <p><code>z-index:1/2/3;</code>元素层级</p> <ul> <li>若元素全都开启了定位，则从结构上，最靠下的元素会盖住上面的元素</li> <li>此时可通过z-index设置来提高层级数，越高越优先显示</li> <li>只有开启定位的元素才能使用z-index，即对static无效</li> <li>父元素的层级再高，也不会盖住子元素</li> </ul> </li> </ul> <h2>盒模型特殊属性</h2> <ul> <li> <p>使div内文字居中</p> <p>.nav{<br> text-align: center;/<em>div内文字水平居中</em>/<br> line-height: 高度;/<em>div内文字垂直居中</em>/<br> }</p> </li> </ul> <h1>第六章 Flex布局</h1> <ul> <li><p>弹性盒子（Flexible Box）：用来为盒装模型提供最大的灵活性，任一容器都可以指定为Flex布局。</p></li> <li> <p>flex布局：在父级标题下使用<code>.box{display:flex;}</code>或者 <code>.box{display: inline-flex;}</code></p> <p>注意，设为Flex布局以后，子元素（项目）的float、clear和vertical-align属性将失效。</p> </li> <li><p>flex容器（flex container）：即采用Flex布局的元素。它的所有子元素自动成为容器成员，称为Flex项目（flex item）</p></li> </ul> <h2>容器属性（整体）</h2> <ul> <li> <p>flex-direction：决定主轴的方向，即项目的排列方向</p> <p><code>row</code>/<code>row-reverse</code>/<code>column</code>/<code>column-reverse</code></p> </li> <li> <p>flex-wrap：决定对应的换行方式</p> <p><code>nowrap</code>/<code>wrap</code>/<code>wrap-reverse</code></p> </li> <li><p>flex-flow：flex-direction与flex-wrap的合并简写形式</p></li> <li> <p>justify-content：定义项目在主轴上的水平对齐方式</p> <p><code>flex-start</code>/<code>flex-end</code>/<code>center</code>/<code>space-between</code>/<code>space-around</code></p> </li> <li> <p>align-items：定义项目对应项目垂直对齐方式</p> <p><code>flex-start</code>/<code>flex-end</code>/<code>center</code>/<code>baseline</code>/<code>stretch</code></p> </li> <li> <p>align-content：定义多根轴线的对齐方式</p> <p><code>flex-start</code>/<code>flex-end</code>/<code>center</code>/<code>stretch</code>/<code>space-between</code>/<code>space-around</code></p> </li> </ul> <h2>项目属性（单独）</h2> <ul> <li><p>order：定义项目的排列顺序，即为单个项目定序号，序号越小越排前，默认值为0</p></li> <li><p>flex-grow：定义项目的相对放大比例，即占据容器比例，默认值为0</p></li> <li><p>flex-shrink：定义项目的相对缩小比例，默认值为1</p></li> <li><p>flex-basis：定义在分配多余空间前，项目占句的主轴空间</p></li> <li><p>flex：<code>flex-grow</code>、<code>flex-shrink</code>与<code>flex-basis</code>的合并简写形式</p></li> <li> <p>align-self：允许单个项目有与其他项目不一样的对齐方式，即某项目的垂直对齐方式（可覆盖align-items属性）</p> <p><code>auto</code>/<code>flex-start</code>/<code>flex-end</code>/<code>center</code>/<code>baseline</code>/<code>stretch</code></p> </li> </ul> <h1>第七章响应式布局</h1> <h2>什么是响应式 Web 设计？</h2> <ul> <li>RWD 指的是响应式 Web 设计（Responsive Web Design）</li> <li>RWD 能够以可变尺寸传递网页</li> <li>RWD 对于平板和移动设备是必需的</li> </ul> <pre><code><meta name="viewport" content="width=device, initial-scale=1.0">  <link rel="stylesheet" href="common.css"> <link media="(orientation:landscape)and(min-width:500px)" rel="stylesheet" href="desktop.css"> 当手机横向landscape或纵向portrait和屏幕小于 <link media="max-width:500px"rel="stylesheet" href="mobile.css"> </code></pre> <p>媒体查询 Media query</p> <h2>使用 Bootstrap</h2> <p>另一个创建响应式设计的方法，是使用现成的 CSS 框架。</p> <p>Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。</p> <p>Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机</p> <h1>第八章 HTML5</h1> <h2>HTML5 新增元素</h2> <ul> <li> <p>新增语义布局结构</p> <p><code>页眉<header></code> <code>导航<nav></code> <code>内容节<section></code> <code>侧边栏<aside></code> <code>页脚<footer></code> <code>地址<address></code> <code>时间<time></code> <code>文章<article></code> <code>细节<details></code> <code>细节标题<summary></code> <code>独立内容流<figure></code> <code>独立内容标题<figcaption></code> <code>主内容<main></code> <code>带记号文本<mark></code></p> <blockquote> <p><code>内容节<section></code>：通常由标题及其内容组成，不推荐没有标题内容使用，非普通容器，当容器需要直接定义样式或脚本行为时，直接用div即可，不要与article元素混淆，section模块更加独立；另外，也可以使用<code>div布局</code>或者<code>table表格布局</code></p> </blockquote> <blockquote> <p><code>时间<time></code>：显示时间模块，内部通常存在一个datetime属性表示显示时间的格式另一个pubdate属性可以定义发布日期</p> </blockquote> <blockquote> <p><code>标题组<hgroup></code> ：当存在子标题（二级标题）时，将h1与h2放于hgroup中，方便管理</p> </blockquote> </li> <li> <p>新增其他元素</p> <p><code>视频流video</code> <code>音频流audio</code> <code>画布canvas</code> <code>embed</code> <code>progress</code> <code>meter</code> <code>time</code> <code>ruby</code> <code>rt</code> <code>rp</code> <code>wbr</code> <code>command</code> <code>datalist</code> <code>datagrid</code> <code>keygen</code> <code>output</code> <code>source</code> <code>menu</code></p> </li> <li> <p>新增input元素的类型</p> <p><code>email</code> <code>url</code> <code>number</code> <code>range</code> <code>Date Pickers</code></p> </li> <li> <p>新增全局属性</p> <p><code>内容可编辑contentEditable</code> <code>全局可编辑designMode</code> <code>隐藏内容hidden</code> <code>拼写检测spellcheck</code> <code>TAB跳转焦点顺序tabindex</code></p> </li> </ul> <h2>HTML5相对于HTML4的语法改变</h2> <ul> <li><p>DOCTYPE声明简化</p></li> <li><p>指定字符编码代码简化</p></li> <li> <p>HTML5的布尔值</p> <pre><code><input type="checkbox" checked> <input type="checkbox" checked=""> <input type="checkbox" checked="checked"> ------ 前三个可表示“true”真值 <input type="checkbox"> ------ 默认不填则表示"false"假值 </code></pre> </li> <li><p>可省略引号</p></li> </ul> <h2>HTML5 新标签</h2> <ul> <li> <p>语义标签</p> <pre><code class="html"><header>头部/页眉</header> <nav>导航栏</nav> <footer>底部/页脚</footer> <article>文章</article> <section>内容节/区域</section>  <aside>侧边栏</aside> </code></pre> </li> <li> <p>datalist 自动补全选项列表（配合<input>元素使用）</p> <pre><code class="html"><input type="text" value="请输入明星" list="star"/> <datalist id="star"> <option value="刘德华">刘德华</option> <option value="刘若英">刘若英</option> <option value="刘晓庆">刘晓庆</option> <option value="戚薇">戚薇</option> <option value="戚继光">戚继光</option> </datalist> <!说明：当输入框里写入一个“刘”/“戚”字时，会自动弹出预设好的值让你选择> </code></pre> </li> <li> <p>fieldset 将表单内的相关元素包裹成块</p> <pre><code class="HTML"><fieldset> <legend>用户登录</legend> 用户名: <input type="text"><br /> 密　码: <input type="password"> </fieldset> </code></pre> </li> </ul> <ul> <li>新增 input type 属性</li> </ul> <pre><code class="html"><input type="xxxx"> email 输入邮箱格式的文本 tel 输入手机号码格式的文本 url 输入网址格式的文本 number 输入数字格式 search 定义用于搜索的文本字段 range 定义一个自由拖动滑块 time/date/month/week 输入相关时间格式的文本（可点选控件） color 定义拾色器 file 定义一个上传按钮（供本地文件上传） </code></pre> <ul> <li>新增 input 其他属性</li> </ul> <pre><code>placeholder 输入框内提示信息（点中时文字消失） <input type="text" placeholder="请输入用户名"> autofocus 网页加载到此页面时，点中焦点自动选中此输入框 <input type="text" autofocus> multiple 上传文件可多选 <input type="file" multiple> autocomplete 填写并提交后，当再次加载此页面，会自动弹出填写过的信息 <input type="text" autocomplete="off"> on/off 控制开关 required 必填项 <input type="text" required> </code></pre> <ul> <li> <p>其他新增语义布局结构</p> <pre><code class="html"><address> 地址 <time> 时间 <details> 细节 <summary> 细节标题 <figure> 独立内容流块 <figcaption> 独立内容标题 <main> 主内容 <mark> 带记号文本 <hgroup> 标题组（通常将h1与h2放于hgroup中方便管理） </code></pre> </li> </ul> <h2>多媒体标签</h2> <ul> <li>embed：嵌入一个多媒体插件（如优酷/土豆/爱奇艺的播放界面）</li> </ul> <ul> <li> <p>audio 音频流</p> <pre><code class="html">以隐藏播放控件的方式播放背景音乐 <audio src="music.mp3"></audio> 使用播放控件方式插入音乐 <audio xxxxxx> control显示控件 autoplay自动播放 loop循环播放 <source src="music.mp3"> <source src="music.ogg"> 当浏览器不支持mp3解码，则选择ogg文件您的浏览器不支持HTML音频播放功能不支持提示信息 </audio> </code></pre> </li> <li> <p>video 视频流</p> <pre><code>使用与audio相同 <video></video> 新增 width height 调节播放控件宽和高 </code></pre> </li> <li> <p>其他多媒体类型</p> <p><code>canvas 画布</code> <code>progress</code> <code>meter</code> <code>time</code> <code>ruby</code> <code>rt</code> <code>rp</code> <code>wbr</code> <code>command</code> <code>datalist</code> <code>datagrid</code> <code>keygen</code> <code>output</code> <code>source</code> <code>menu</code></p> </li> </ul> <h2>CSS3 新增选择器</h2> <pre><code class="html"><p>微软的Internet Explorer(IE)是当今最流行的因特网浏览器。它发布于1995年，并于1998年在使用人数上超过了Netscape。Firefox是由Mozilla发展而来的新式浏览器。</p> <ul> <li class="test">我是第一个</li> <li class="two123">我是第二个</li> <li class="twotabc">我是第三个</li> <li class="abcfour">我是第四个</li> <li class="ggg-four">我是第五个</li> <li class="bug">我是第六个</li> <li class="bug_ee">我是第七个</li> <li class="hhbug">我是第八个</li> <li class="bug345">我是第九个</li> <li class="test">我是第十个</li> </ul> </code></pre> <h3>结构伪类选择器</h3> <pre><code class="css">ul li:first-child {/* 选择第一个li */} ul li:last-child {/* 选择最后一个li */} ul li:nth-child(6) {/* 括号内填6，故选择第六个li */} ul li:nth-child(2n) {/* 括号内填2n，选择偶数li */} ul li:nth-child(2n+1) {/* 括号内填2n+1，选择奇数li */} /*（注：n=0,1,2,3,4……）*/ </code></pre> <h3>属性选择器</h3> <pre><code class="css">ul li[class=test] {/* 选择类名全称为test的li（第一个和第十个）*/} ul li[class$=four]{/* 选择类名结尾为four的li（第四个和第五个）*/} ul li[class^=two]{/* 选择类名开头为two的li（第二个和第三个）*/} ul li[class*=bug]{/* 选择类名中带有bug字符的li（第六、七、八、九个）*/} </code></pre> <h3>伪元素选择器</h3> <pre><code class="css">p::first-letter{/* 选择元素内第一个字母或字（选择“微”字）*/} p::first-line{/* 选择元素的第一行（以浏览器显示的第一行为准）*/} p::selection{/* 被鼠标高亮选中的字段 */} /* selection只能使用 color/background/cursor/outline 这4个属性*/ p::befor {content:"开始";}　/* 在p元素内部内容前插入新内容*/ p::after {content:"结束";} /* 在p元素内部内容后插入新内容*/ /* content 是必要的属性,被插入的块默认是行内元素，*/ /* 改动之后：「开始微软的Inter... ...新式浏览器。结束」 */ </code></pre> <blockquote> <p>常见用途：伪元素是一个可以直接插入元素的选择器</p> <pre><code class="css">div { /* 普通div盒子 */ width：200px; height：30px; border：1px solid #ccc; font-family:"icomoon"; position:relative; } div:：before{ /* 使用末尾伪类选择器 */ content:"\ea51"; /* 这里直接在css中插入字体图标(图标v) */ position:absolute; right：10px; top：5px; </code></pre> </blockquote> <h2>CSS3 盒模型</h2> <p>在老版本中，当一个盒子给定了width和height，若要加上padding值，盒子内容就会被撑开，即盒子实际大小与原给定的宽与高不相符。CSS3中，如果限定了 <code>box-sizing: border-box</code> ，padding值将不再影响原始给定的宽与高。</p> <pre><code>box-sizing: content-box /* 默认旧标准内撑模式，大小=w+h+p+b */ box-sizing: border-box /* 变为盒模型内减模式，内容不会撑开盒子 */ </code></pre> <h2>过渡</h2> <p>从一个状态渐渐的平滑过渡到另外一个状态</p> <ul> <li>transition 简写，统一设置四个过渡属性</li> <li>transition-property 规定应用过渡的 CSS 属性的名称</li> <li>transition-duration 定义过渡效果所需时间（单位为<code>s</code>，默认为 0s）</li> <li>transition-timing-function 规定过渡效果的时间曲线（默认为 "ease"）</li> <li>transition-delay 规定过渡效果何时开始（默认为 0s，表示立马开始）</li> </ul> <pre><code class="css">【语法格式】transition: 属性名所需时间运动曲线开始时间; div { width: 200px; height: 100px; background-color: pink; transition: width 0.6s ease 0s, height 0.3s ease-in 1s; /* transtion 要放在div里而不是hover里 */ /* 如果有多组属性变化，需用逗号隔开 */ } div:hover { /* 鼠标经过盒子，宽变600 高变300 */ width: 600px; height: 300px; } transition: all 0.6s; /* 所有属性都要变化，用all即可，同时后两个属性可以省略 */ </code></pre> <blockquote> <p>【过渡函数】</p> </blockquote> <h2>2D变形</h2> <ul> <li>translate(x, y) 移动</li> </ul> <pre><code class="css">translate(50px,50px); /* 将文字或图像在水平和垂直方向分别移动50像素(x、y可为负值) */ translateX(x); /* 单独设置X轴移动 */ translateY(y); /* 单独设置Y轴移动 */ /* 【应用】可取代定位或浮动 */ </code></pre> <pre><code class="CSS">/* 【应用】让定位的盒子水平居中，取代margin:0 auto; */ .box { width: 500px; height: 400px; background: pink; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* 移动到自身的一半位置 */ } </code></pre> <ul> <li>transform: scale(x, y) 缩放</li> </ul> <pre><code class="css">transform:scale(0.8,1); /* 使元素在水平方向上缩小20%，垂直方向不改变 */ /* 取值范围0.01~0.09，默认值为1，若设为2即为放大2倍 */ transform:scaleX(x); /* 单独设置水平缩放 */ transform:scaleY(y); /* 单独设置垂直缩放 */ </code></pre> <ul> <li>transform:rotate(deg) 旋转</li> <li>transform-origin(x, y) 调整变形原点</li> </ul> <pre><code class="css">/* rotate 取值是度数，单位为deg，取负值表示逆时针旋转 */ /* 旋转原点也可用px像素值精确位置 */ transform-origin: left top;/* 改变元素旋转原点为左上角 */ transform: rotate(45deg); /* 再进行顺时针45度旋转 */ </code></pre> <ul> <li>transform:skew(deg,deg) 倾斜</li> </ul> <pre><code class="css">transform:skew(30deg,0deg); /* 水平方向倾斜30度，处置方向保持不变 */ /* 取值可为负值，第二个参数可不写（默认为0）*/ </code></pre> <h2>3D变形</h2> <ul> <li>transform:rotateX(deg) x轴旋转</li> <li>transform:rotateY(deg) y轴旋转</li> <li>transform:rotateZ(deg) z轴旋转</li> </ul> <pre><code class="css">img { transition:all 0.5s ease 0s; } img:hover { /* 鼠标放于图片上时，进行X/Y/Z旋转 */ transform:rotateX(180deg); transform:rotateY(180deg); transform:rotateZ(180deg); /* 合并写法 */ transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg); } </code></pre> <ul> <li> <p>translateZ(z) Z轴移动</p> <blockquote> <p>直观表现形式为大小的变化，实质是XY平面相对于视点的远近变化（这里参照于perspective属性），比如设置了perspective为200px，那么translateZ(z)的值越接近200，即离得越近，看上去就越大，超过200就看不到了，因为相当于跑到后脑勺去了，正常情况下，是看不到自己的后脑勺的</p> </blockquote> </li> <li><p>translate3d(x,y,z)</p></li> <li><p>backface-visibility 设置当元素不面向屏幕时是否可见</p></li> <li><p>perspective 透视</p></li> </ul> <h2>动画</h2> <pre><code class="css">【语法】animation:动画名称花费时间运动曲线开始时间播放次数是否反方向; @keyframes 动画名称 { /* 动画关键帧设置 */ from{ ... } /* 开始位置变化情况 */ to{ ... } /* 结束位置变化情况 */ } /* 也可以用百分数来设置变换帧为 0%{} 50%{} 100%{} */ /* 【几个属性值说明】 */ animation-iteration-count:infinite; /* 无限循环播放，无单位*/ animation-direction:alternate; /* 动画轮流反向播放 */ animation-play-state:paused; /* 暂停动画 */ </code></pre> <h2>浏览器前缀</h2> <table> <thead> <tr> <th>浏览器前缀</th> <th>浏览器</th> </tr> </thead> <tbody> <tr> <td>-webkit-</td> <td>Google Chrome, Safari, Android Browser</td> </tr> <tr> <td>-moz-</td> <td>Firefox</td> </tr> <tr> <td>-o-</td> <td>Opera</td> </tr> <tr> <td>-ms-</td> <td>Internet Explorer, Edge</td> </tr> <tr> <td>-khtml-</td> <td>Konqueror</td> </tr> </tbody> </table> <h2>flex 伸缩布局</h2> <ul> <li>设置flex布局</li> </ul> <pre><code class="css">在父级元素添加 display: flex; [注意]设为Flex布局后，子元素的 float、clear、vertical-align 属性将失效。 </code></pre> <ul> <li> <p>父元素属性（容器）</p> <ul> <li>flex-direction 主轴排列方向</li> <li>flex-wrap 换行方式</li> <li>justify-content 水平对齐方式</li> <li>align-items 垂直对齐方式</li> <li>align-content 多根轴线对齐方式</li> </ul> </li> <li> <p>子元素属性（项目）</p> <ul> <li>order 排列顺序（序号越小越排前，默认值为0）</li> <li>align-self 允许单独与其他项目不同的对齐方式（可覆盖align-items属性）</li> <li>flex-grow 相对放大比例（即占据容器比例，默认值为0）</li> <li>flex-shrink 相对缩小比例（默认值为1）</li> <li>flex-basis （定义在分配多余空间前，项目占据的主轴空间）</li> </ul> <pre><code class="css">flex：flex-grow flex-shrink flex-basis; /* 合并简写 */ /* 一般只设 flex: x; 表示自己占据整体的x份 */ </code></pre> </li> </ul> <h2>优雅降级和渐进增强</h2> <ul> <li> <p>渐进增强 progressive enhancement</p> <p>针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。</p> </li> <li> <p>优雅降级 graceful degradation</p> <p>一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</p> </li> <li><p>区别：渐进增强是向上兼容，优雅降级是向下兼容</p></li> <li><p>建议：现在互联网发展很快，连微软公司都抛弃了ie浏览器，转而支持edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。</p></li> </ul> <h2>BFC</h2> <ul> <li><p>Block formatting context：块级格式化上下文</p></li> <li><p>W3C 规范： display属性为block、list-item、table的元素，会产生BFC</p></li> <li> <p>触发BFC</p> <ul> <li>position 为 absolute / fixed</li> <li>display 为 inline-block / table-cell / table-caption / flex / inline-flex</li> <li>float 不为 none</li> <li>overflow 不为 visible</li> </ul> </li> <li> <p>BFC元素所具有的特性</p> <ol> <li>在BFC中，盒子从顶端开始垂直地一个接一个地排列；</li> <li>盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠</li> <li>在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）；</li> <li>BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；</li> <li>计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。</li> </ol> </li> <li> <p>BFC的主要用途</p> <ul> <li> <p>清除元素内部浮动</p> <pre><code class="css">把父元素设为BFC即可清理子元素浮动。最常见用法： 1.在父元素上设置 overflow: hidden; 2.对于IE6，加上 zoom:1; </code></pre> </li> <li> <p>解决外边距合并问题</p> <pre><code>盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠，那么创建不属于同一个BFC，就不会发生margin重叠。 </code></pre> </li> <li> <p>制作右侧自适应的盒子问题</p> <pre><code>普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。 </code></pre> </li> </ul> </li> <li> <p>总结</p> <blockquote> <p>BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之也如此。包括浮动和外边距合并等。因此，有了此特性，布局时就不会出现意外情况。</p> </blockquote> </li> </ul> <h2>HTML5 新增API</h2> <h5>网络状态</h5> <ul> <li><p>旧方法：通过window.navigator.onLine来检测</p></li> <li> <p>H5方法：通过window.onLine来检测，用户当前的网络状况，返回一个布尔值</p> <ul> <li>window.online 用户网络连接时被调用</li> <li>window.offline 用户网络断开时被调用</li> </ul> </li> </ul> <h5>全屏方法</h5> <blockquote> <p>HTML5规范允许用户自定义网页上任一元素全屏显示。</p> </blockquote> <ul> <li>requestFullScreen() 开启全屏显示</li> <li>cancelFullScreen() 关闭全屏显示</li> <li>fullScreen() 检测当前是否处于全屏返回布尔值</li> <li>:full-screen 全屏伪类选择器 css中使用</li> </ul> <pre><code class="js">// 以上方法均存在兼容性处理，不同浏览器需要添加前缀如 webkitRequestFullScreen() //webkit内核浏览器 mozRequestFullScreen() //Gecko内核浏览器 oRequestFullScreen() //Opera浏览器 msRequestFullscreen() //微软浏览器 's'需要小写 </code></pre> <h5>文件读取</h5> <blockquote> <p>把上传的文件中内容显示到页面，或上传完毕图片显示缩略图到页面上</p> </blockquote> <pre><code class="js">// 1.上传文件借助于文件域读取文件 var file = document.querySelector("input"); var div = document.querySelector("div"); var img = document.querySelector("img"); file.onchange = function () { //onchange 当发生改变时 console.log(file); // 等同于console.log(this) console.log(this.files); // 返回上传文件的数组集合 // 2.选择文件读取文件里的内容 //fileReader对象：HTML5新增内建对象可读取本地文件内容 var reader = new FileReader(); //初始化一个对象 //readAsText()方法读取文件中的文本内容 //readAsDataURL()方法把图片转变成一大串字符代码可通过url引用 reader.readAsText(this.files[0]); //括号中选择指定对象 reader.readAsDataURL(this.files[0]); // 注意：当此文件内容读取完毕后，会自动把内容存放到result属性里 // 3. 把读取内容显示到页面中 // 使用onload 当加载完毕后 reader.onload = function () { div.innerHTML = this.result; //文本读取 img.src = this.result; //图片显示 } } </code></pre> <h5>地理定位</h5> <blockquote> <p>在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)</p> </blockquote> <pre><code class="html"><p id="demo">点击这个按钮，获得您的坐标：</p> <button onclick="getLocation()">试一下</button> <script> var x = document.getElementById("demo"); // 当点击按钮后触发此函数 function getLocation() { // 判断当前设备是否支持地理定位 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); // 如果支持就获得当前地理位置调用getCurrentPosition方法 // showPosition 调用成功调用函数显示当前位置 // showError 调用失败调用函数 } else { // 如果设备不支持返回提示 x.innerHTML = "Geolocation is not supported by this browser."; } } // 调用成功函数返回当前位置的经纬度 function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + // 获得当前的纬度 "<br />Longitude: " + position.coords.longitude; // 获得当前的经度 } // 调用失败 function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: // 用户无法定位的要求 x.innerHTML = "User denied the request for Geolocation."; break; case error.POSITION_UNAVAILABLE: // 位置信息不可用 x.innerHTML = "Location information is unavailable."; break; case error.TIMEOUT: // 获取用户位置的请求超时 x.innerHTML = "The request to get user location timed out."; break; case error.UNKNOWN_ERROR: // 发生了一个不明错误 x.innerHTML = "An unknown error occurred."; break; } } </script> </code></pre> <p>http://lbsyun.baidu.com/ 百度地图api</p> <h5>拖拽和释放</h5> <ul> <li> <p>任何元素都可设置元素为可拖放</p> <ul> <li>设置方法：为标签元素要设置属性<code>draggable=true</code> </li> <li>注意：链接和图片默认是可拖动的，不需要 draggable 属性</li> </ul> </li> <li> <p><strong>被拖动源对象可触发事件</strong></p> <ul> <li>ondragstart：源对象开始被拖动</li> <li>ondrag：源对象被拖动过程中（无论鼠标是否动作，不断执行）</li> <li>ondragend：源对象被拖动结束</li> </ul> </li> <li> <p><strong>拖动源对象进入到目标对象上方可触发事件</strong></p> <ul> <li><p>ondragenter：目标对象被源对象拖动着进入</p></li> <li><p>ondragover：目标对象被源对象拖动着悬停在上方（不断执行）</p></li> <li><p>ondragleave：源对象拖动着离开了目标对象</p></li> <li> <p>ondrop：源对象拖动着在目标对象上方释放/松手</p> <blockquote> <p>ondrop事件默认被阻止，若想触发，需要在ondragover事件里阻止默认行为，两种方法</p> <ul> <li><code>return false;</code></li> <li><code>e.preventDefault()</code></li> </ul> </blockquote> </li> </ul> </li> </ul> <h5>Web存储</h5> <ul> <li> <p>数据存储类型</p> <ul> <li>cookie</li> <li>sessionStorage</li> <li>localStorage</li> <li>WebSQL</li> <li>IndexDB</li> </ul> </li> <li> <p>特性</p> <ol> <li>设置、读取方便，页面刷新不会丢失数据</li> <li>容量较大，sessionStorage约5M、localStorage约20M</li> <li>只能存储字符串，可以将对象JSON.stringify() 编码后存储</li> </ol> </li> <li> <p>window.sessionStorage</p> <ul> <li>生命周期为关闭浏览器窗口</li> <li>在同一个窗口（页面）下数据可以共享</li> </ul> </li> <li> <p>window.localStorage</p> <ul> <li>永久生效，除非手动删除关闭页面也会存在</li> <li>可以多窗口（页面）共享（同一浏览器可以共享）</li> </ul> </li> <li> <p>方法</p> <ul> <li>setItem(key, value) 设置存储内容</li> <li>getItem(key) 读取存储内容</li> <li>removeItem(key) 删除键值为key的存储内容</li> <li>clear() 清空所有存储内容</li> </ul> </li> </ul> <h5>应用缓存</h5> <blockquote> <p>在HTML5中可以构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件</p> </blockquote> <ul> <li>优势 <ol> <li>可配置需要缓存的资源</li> <li>网络无连接应用仍可用</li> <li>本地读取缓存资源，提升访问速度，增强用户体验</li> <li>减少请求，缓解服务器负担</li> </ol> </li> </ul> <h3>7.2 缓存清单</h3> <blockquote> <p>创建了一个后缀名为xxx.appcache的文件，然后在需要使用应用缓存在html页面开头添加属性<code>manifest="xxx.appcache"</code>，路径要保证正确。</p> </blockquote> <pre><code class="appcache">CACHE MANIFEST # 第一行必须规定这样写 # 为注释 CACHE: # 此部分写需要缓存的资源 (如css image js等) ./images/img1.jpg ./images/img2.jpg ./images/img3.jpg ./images/img4.jpg NETWORK: # 此部分要写指定需要有网络才可访问的在线资源，无网络不访问(可使用通配符) ./images/img1.jpg ./images/img2.jpg FALLBACK: # 此部分为备用资源当访问不到某个资源时，自动由另一个资源替换 ./images/img4.jpg ./images/img5.jpg </code></pre> <ul> <li>其它 <ol> <li> <code>CACHE:</code> 可省略，这种情况下将需要缓存的资源写在CACHE MANIFEST</li> <li>可指定多个<code>CACHE:</code> <code>NETWORK:</code> <code>FALLBACK:</code> 无顺序限制</li> <li>只有当xxx.appcache文件内容发生改变时，或手动清除缓存后，才会重新缓存</li> <li>chrome可通过chrome://appcache-internals/工具和离线模式来调试管理应用缓存</li> </ol> </li> </ul> </article> </div> </div> </div>  <div id="SOHUCS" sid="1684336332433862656"></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">  <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>  <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>  <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">你可能感兴趣的:(HTML+CSS 前端基础知识点（更新）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509643619692544.htm" title="如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update" target="_blank">如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update</a> <span class="text-muted">iBaoxing</span> <a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对</div> </li> <li><a href="/article/1835505606245576704.htm" title="Python中os.environ基本介绍及使用方法" target="_blank">Python中os.environ基本介绍及使用方法</a> <span class="text-muted">鹤冲天Pro</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495644123459584.htm" title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</a> <span class="text-muted">~在杰难逃~</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div> </li> <li><a href="/article/1835495170972413952.htm" title="git - Webhook让部署自动化" target="_blank">git - Webhook让部署自动化</a> <span class="text-muted">大猪大猪</span> <div>我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时</div> </li> <li><a href="/article/1835492372952215552.htm" title="阶段总结反思" target="_blank">阶段总结反思</a> <span class="text-muted">轻争</span> <div>马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥</div> </li> <li><a href="/article/1835489588169240576.htm" title="ARM驱动学习之5 LEDS驱动" target="_blank">ARM驱动学习之5 LEDS驱动</a> <span class="text-muted">JT灬新一</span> <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/C/1.htm">C</a><a class="tag" taget="_blank" href="/search/%E5%BA%95%E5%B1%82/1.htm">底层</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</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%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a> <div>ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三</div> </li> <li><a href="/article/1835489460372992000.htm" title="【PG】常见数据库、表属性设置" target="_blank">【PG】常见数据库、表属性设置</a> <span class="text-muted">江无羡</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>PG的常见属性配置方法数据库复制、备份相关表的复制标识单表操作批量表操作链接数据库复制、备份相关表的复制标识单表操作通过ALTER语句单独更改一张表的复制标识。ALTERTABLE[tablename]REPLICAIDENTITYFULL;批量表操作通过代码块的方式，对某个schema中的所有表一起更新其复制标识。SELECTtablename,CASErelreplidentWHEN'd'TH</div> </li> <li><a href="/article/1835488955101966336.htm" title="C++菜鸟教程 - 从入门到精通第二节" target="_blank">C++菜鸟教程 - 从入门到精通第二节</a> <span class="text-muted">DreamByte</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>一.上节课的补充(数据类型)1.前言继上节课,我们主要讲解了输入,输出和运算符,我们现在来补充一下数据类型的知识上节课遗漏了这个知识点,非常的抱歉顺便说一下,博主要上高中了,更新会慢,2-4周更新一次对了,正好赶上中秋节,小编跟大家说一句:中秋节快乐!2.int类型上节课,我们其实只用了int类型int类型,是整数类型,它们存贮的是整数,不能存小数(浮点数)定义变量的方式很简单inta;//定义一</div> </li> <li><a href="/article/1835483474883080192.htm" title="学习“论语”-第59天" target="_blank">学习“论语”-第59天</a> <span class="text-muted">春峰轩</span> <div>12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯</div> </li> <li><a href="/article/1835483159630802944.htm" title="nosql数据库技术与应用知识点" target="_blank">nosql数据库技术与应用知识点</a> <span class="text-muted">皆过客，揽星河</span> <a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a><a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%9D%9E%E5%85%B3%E7%B3%BB%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">非关系型数据库</a> <div>Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)</div> </li> <li><a href="/article/1835480675738808320.htm" title="目前哪里有卖高仿包包，推荐十个渠道已更新" target="_blank">目前哪里有卖高仿包包，推荐十个渠道已更新</a> <span class="text-muted">富腕表之家</span> <div>1、工厂购买，推荐微信:【76929666】目前买的人最多的渠道。2、某宝购买，价格较高，质量没有保障。3、拼夕夕，价格是便宜，但是质量不敢想象。4、专柜购买，数量较少，经常断货，价格也太高不好接受。5、批发市场购买，可遇不可求，一般生活在批发市场附近的，根本不用考虑在哪里买高仿包包分几个级别？在当今的包类市场中，广州作为一个知名的货源地，已经成为高仿包行业的一个重要标志。随着市场的需求增加，高仿</div> </li> <li><a href="/article/1835474315991150592.htm" title="2021-07-31" target="_blank">2021-07-31</a> <span class="text-muted">比峰</span> <div>七月的最后一天，过了今天，就是八月，心脏在颤抖……昨天两点半才睡，一直在以两倍的语速的听之前的课程，虽然隔得时间不长，但是很多知识点已经忘了差不多了，为了让自己能够掌握的稍微全面一点，还是磨刀不误砍柴工的比较好。正因为晚上睡得晚，今天一上午的状态都不好，也可能因为上午都是待在家里，所以多数时间自己是在补觉。既然太累，那就睡觉吧，总比浪费时间的好。下午到咖啡馆做题，一道差错更正一下子让自己的实力暴露</div> </li> <li><a href="/article/1835471059135066112.htm" title="你可能遗漏的一些C#/.NET/.NET Core知识点" target="_blank">你可能遗漏的一些C#/.NET/.NET Core知识点</a> <span class="text-muted">追逐时光者</span> <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/.NET/1.htm">.NET</a><a class="tag" taget="_blank" href="/search/DotNetGuide%E7%BC%96%E7%A8%8B%E6%8C%87%E5%8D%97/1.htm">DotNetGuide编程指南</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/.netcore/1.htm">.netcore</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D</div> </li> <li><a href="/article/1835464242648674304.htm" title="【韩玲】领读小组2月21日打卡文集合" target="_blank">【韩玲】领读小组2月21日打卡文集合</a> <span class="text-muted">9ce517ee104c</span> <div>【输出者】健芳【打卡素材】对财富说是Day50【作者】［澳］奥南朵【标题】让努力看得见【字数】7931建立新信念做事情失败的原因都由我们自己无意识的旧有的信念去掌控着。故步自封，没让自己去更新迭代自己的信念。建立新的信念，相信自己的财富会越来越多。2改掉坏习惯以前的懒床、刷手机、煲剧、这些都是封锁自己思想的坏习惯，以为这样就可以让自己过得充实。其实真的不是，而是带给自己一种伤害，阻碍自己努力上进的</div> </li> <li><a href="/article/1835463117237219328.htm" title="2024.9.14 Python，差分法解决区间加法，消除游戏，压缩字符串" target="_blank">2024.9.14 Python，差分法解决区间加法，消除游戏，压缩字符串</a> <span class="text-muted">RaidenQ</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/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/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8A%9B%E6%89%A3/1.htm">力扣</a> <div>1.区间加法假设你有一个长度为n的数组，初始情况下所有的数字均为0，你将会被给出k个更新的操作。其中，每个操作会被表示为一个三元组：[startIndex,endIndex,inc]，你需要将子数组A[startIndex…endIndex]（包括startIndex和endIndex）增加inc。请你返回k次操作后的数组。示例:输入:length=5,updates=[[1,3,2],[2,4,</div> </li> <li><a href="/article/1835462192720343040.htm" title="可以赚钱的app，你们都在用哪些？" target="_blank">可以赚钱的app，你们都在用哪些？</a> <span class="text-muted">配音新手圈</span> <div>1.七猫免费小说2.有柿3.番茄小说兼职副业推荐公众号，配音新手圈，声优配音圈，新配音兼职圈，配音就业圈，鼎音副业，有声新手圈，每天更新各种远程工作与在线兼职，职位包括：写手、程序开发、剪辑、设计、翻译、配音、无门槛、插画、翻译、等等。。。每日更新兼职。4.速读免费小说5.得间免费小说6.快手7.快手极速8.抖音火山版（可提0.2，可能我懒赚的慢，但真不推荐）9.拼多多10.淘宝11.点淘12.美</div> </li> <li><a href="/article/1835450511071997952.htm" title="android 更改窗口的层次,浮窗开发之窗口层级" target="_blank">android 更改窗口的层次,浮窗开发之窗口层级</a> <span class="text-muted">Ms.Bu</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%9B%B4%E6%94%B9%E7%AA%97%E5%8F%A3%E7%9A%84%E5%B1%82%E6%AC%A1/1.htm">更改窗口的层次</a> <div>最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何</div> </li> <li><a href="/article/1835447859219099648.htm" title="06选课支付模块之基于消息队列发送支付通知消息" target="_blank">06选课支付模块之基于消息队列发送支付通知消息</a> <span class="text-muted">echo 云清</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E6%88%90%E5%9C%A8%E7%BA%BF/1.htm">学成在线</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/rabbitmq/1.htm">rabbitmq</a><a class="tag" taget="_blank" href="/search/%E6%B6%88%E6%81%AF%E9%98%9F%E5%88%97/1.htm">消息队列</a><a class="tag" taget="_blank" href="/search/%E6%94%AF%E4%BB%98%E9%80%9A%E7%9F%A5/1.htm">支付通知</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E6%88%90%E5%9C%A8%E7%BA%BF/1.htm">学成在线</a> <div>消息队列发送支付通知消息需求分析订单服务作为通用服务，在订单支付成功后需要将支付结果异步通知给其他对接的微服务，微服务收到支付结果根据订单的类型去更新自己的业务数据技术方案使用消息队列进行异步通知需要保证消息的可靠性即生产端将消息成功通知到服务端：消息发送到交换机-->由交换机发送到队列-->消费者监听队列，收到消息进行处理，参考文章02-使用Docker安装RabbitMQ-CSDN博客生产者确</div> </li> <li><a href="/article/1835446687758381056.htm" title="阅读《认知觉醒》读书笔记" target="_blank">阅读《认知觉醒》读书笔记</a> <span class="text-muted">就看看书</span> <div>本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑</div> </li> <li><a href="/article/1835444959478640640.htm" title="2021 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级C++语言试题（第三大题：完善程序代码）" target="_blank">2021 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级C++语言试题（第三大题：完善程序代码）</a> <span class="text-muted">mmz1207</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/csp/1.htm">csp</a> <div>最近有一段时间没更新了，在准备CSP考试，请大家见谅。（1）有n个人围成一个圈，依次标号0到n-1。从0号开始，依次0，1，0，1...交替报数，报到一的人离开，直至圈中剩最后一个人。求最后剩下的人的编号。#includeusingnamespacestd;intf[1000010];intmain(){intn;cin>>n;inti=0,cnt=0,p=0;while(cnt#includeu</div> </li> <li><a href="/article/1835443569968640000.htm" title="Spring MVC 全面指南：从入门到精通的详细解析" target="_blank">Spring MVC 全面指南：从入门到精通的详细解析</a> <span class="text-muted">一杯梅子酱</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%E5%AD%A6%E4%B9%A0/1.htm">技术栈学习</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><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri</div> </li> <li><a href="/article/1835434126874865664.htm" title="ubuntu安装wordpress" target="_blank">ubuntu安装wordpress</a> <span class="text-muted">lissettecarlr</span> <div>1安装nginx网上安装方式很多，这就就直接用apt-get了apt-getinstallnginx不用启动啥，然后直接在浏览器里面输入IP:80就能看到nginx的主页了。如果修改了一些配置可以使用下列命令重启一下systemctlrestartnginx.service2安装mysql输入安装前也可以更新一下软件源，在安装过程中将会让你输入数据库的密码。sudoapt-getinstallmy</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835420501065953280.htm" title="华为云分布式缓存服务DCS 8月新特性发布" target="_blank">华为云分布式缓存服务DCS 8月新特性发布</a> <span class="text-muted">华为云PaaS服务小智</span> <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA%E4%BA%91/1.htm">华为云</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>分布式缓存服务（DistributedCacheService，简称DCS）是华为云提供的一款兼容Redis的高速内存数据处理引擎，为您提供即开即用、安全可靠、弹性扩容、便捷管理的在线分布式缓存能力，满足用户高并发及数据快速访问的业务诉求。此次为大家带来DCS8月的特性更新内容，一起来看看吧！</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835414702142877696.htm" title="Python编程 - 函数进阶" target="_blank">Python编程 - 函数进阶</a> <span class="text-muted">易辰君</span> <a class="tag" taget="_blank" href="/search/Python%E6%A0%B8%E5%BF%83%E7%BC%96%E7%A8%8B/1.htm">Python核心编程</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录前言一、函数参数的高级用法（一）缺省参数（二）命名参数（三）不定长参数二、拆包（一）函数返回值拆包（二）通过星号拆包（三）总结三、匿名函数（一）函数定义（二）使用匿名函数四、递归函数（一）简介（二）基本结构（三）简单示例（四）优缺点总结前言上篇文章主要了解了函数基础，如何定义函数，函数种类以及局部变量和全局变量的差异等，接下来就讲解python函数较为进阶的知识点，若有任何想法欢迎一起沟通讨论</div> </li> <li><a href="/article/1835412178648264704.htm" title="[实践应用] 深度学习之优化器" target="_blank">[实践应用] 深度学习之优化器</a> <span class="text-muted">YuanDaima2048</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8/1.htm">工具使用</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%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><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BC%98%E5%8C%96%E5%99%A8/1.htm">优化器</a> <div>文章总览：YuanDaiMa2048博客文章总览深度学习之优化器1.随机梯度下降（SGD）2.动量优化（Momentum）3.自适应梯度（Adagrad）4.自适应矩估计（Adam）5.RMSprop总结其他介绍在深度学习中，优化器用于更新模型的参数，以最小化损失函数。常见的优化函数有很多种，下面是几种主流的优化器及其特点、原理和PyTorch实现：1.随机梯度下降（SGD）原理:随机梯度下降通过</div> </li> <li><a href="/article/1835410605725544448.htm" title="淘宝618每年活动是啥?今年618淘宝什么活动?" target="_blank">淘宝618每年活动是啥?今年618淘宝什么活动?</a> <span class="text-muted">高省APP珊珊</span> <div>淘宝618密令红包公布密令：【天降红包61666】5.29日20点准时，大额红包不要错过，具体时间同步更新今年的618活动周期和往年差不多，从5月29日开始到6月18日结束，持续20多天，今年的活动热度比往年都要高，而且玩法也更多更新颖，今天小编就给大家讲解一下淘宝天猫618有哪些玩法，基本涵盖了所有的玩法，绝对是最全面的，618活动看这一篇就够了！大家好，我是【高省】最大团队创始人珊珊，至于我为</div> </li> <li><a href="/article/87.htm" title="面向对象面向过程" target="_blank">面向对象面向过程</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>面向对象：把要完成的一件事，通过对象间的协作实现。面向过程：把要完成的一件事，通过循序依次调用各个模块实现。我把大象装进冰箱这件事为例，用面向对象和面向过程实现，都是用java代码完成。 1、面向对象 package bigDemo.ObjectOriented; /** * 大象类 * * @Description * @author FuJian</div> </li> <li><a href="/article/214.htm" title="Java Hotspot: Remove the Permanent Generation" target="_blank">Java Hotspot: Remove the Permanent Generation</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>  openjdk上关于hotspot将移除永久带的描述非常详细，http://openjdk.java.net/jeps/122   JEP 122: Remove the Permanent Generation Author Jon Masamitsu Organization Oracle Created 2010/8/15 Updated 2011/</div> </li> <li><a href="/article/341.htm" title="正则表达式向前查找向后查找,环绕或零宽断言" target="_blank">正则表达式向前查找向后查找,环绕或零宽断言</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>向前查找和向后查找 1. 向前查找：根据要匹配的字符序列后面存在一个特定的字符序列(肯定式向前查找)或不存在一个特定的序列(否定式向前查找)来决定是否匹配。.NET将向前查找称之为零宽度向前查找断言。     对于向前查找，出现在指定项之后的字符序列不会被正则表达式引擎返回。 2. 向后查找：一个要匹配的字符序列前面有或者没有指定的</div> </li> <li><a href="/article/468.htm" title="BaseDao" target="_blank">BaseDao</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/seda/1.htm">seda</a> <div> import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.PreparedStatement; import java.sql.ResultSet; public class BaseDao { public Conn</div> </li> <li><a href="/article/595.htm" title="Ant标签详解--Java命令" target="_blank">Ant标签详解--Java命令</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/Java%E5%91%BD%E4%BB%A4/1.htm">Java命令</a> <div>        这一篇主要介绍与java相关标签的使用         终于开始重头戏了，Java部分是我们关注的重点也是项目中用处最多的部分。           1</div> </li> <li><a href="/article/722.htm" title="[简单]代码片段_电梯数字排列" target="_blank">[简单]代码片段_电梯数字排列</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a> <div>       今天看电梯数字排列是9 18 26这样呈倒N排列的,写了个类似的打印例子，如下:       import java.util.Arrays; public class 电梯数字排列_S3_Test { public static void main(S</div> </li> <li><a href="/article/849.htm" title="Hessian原理" target="_blank">Hessian原理</a> <span class="text-muted">云端月影</span> <a class="tag" taget="_blank" href="/search/hessian%E5%8E%9F%E7%90%86/1.htm">hessian原理</a> <div>Hessian 原理分析一．      远程通讯协议的基本原理网络通信需要做的就是将流从一台计算机传输到另外一台计算机，基于传输协议和网络 IO 来实现，其中传输协议比较出名的有 http 、 tcp 、 udp 等等， http 、 tcp 、 udp 都是在基于 Socket 概念上为某类应用场景而扩展出的传输协</div> </li> <li><a href="/article/976.htm" title="区分Activity的四种加载模式----以及Intent的setFlags" target="_blank">区分Activity的四种加载模式----以及Intent的setFlags</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>  在多Activity开发中，有可能是自己应用之间的Activity跳转，或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例，而不是产生大量重复的Activity。这需要为Activity配置特定的加载模式，而不是使用默认的加载模式。加载模式分类及在哪里配置 Activity有四种加载模式： standard singleTop</div> </li> <li><a href="/article/1103.htm" title="hibernate几个核心API及其查询分析" target="_blank">hibernate几个核心API及其查询分析</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a> <div>(一)  org.hibernate.cfg.Configuration类         读取配置文件并创建唯一的SessionFactory对象.(一般,程序初始化hibernate时创建.)         Configuration co</div> </li> <li><a href="/article/1230.htm" title="PL/SQL的流程控制" target="_blank">PL/SQL的流程控制</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/PL%2FSQL%E7%BC%96%E7%A8%8B/1.htm">PL/SQL编程</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF%E6%8E%A7%E5%88%B6/1.htm">循环控制</a> <div>PL/SQL也是一门高级语言,所以流程控制是必须要有的,oracle数据库的pl/sql比sqlserver数据库要难,很多pl/sql中有的sqlserver里面没有   流程控制; 分支语句 if 条件 then 结果 else 结果 end if ; 条件语句 case when 条件 then 结果; 循环语句 loop </div> </li> <li><a href="/article/1357.htm" title="强大的Mockito测试框架" target="_blank">强大的Mockito测试框架</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.自动生成Mock类        在需要Mock的属性上标记@Mock注解，然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.initMocks(this);生成Mock类即可。二.自动注入Mock类到被测试类  &nbs</div> </li> <li><a href="/article/1484.htm" title="精通Oracle10编程SQL(11)开发子程序" target="_blank">精通Oracle10编程SQL(11)开发子程序</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发子程序 */ --子程序目是指被命名的PL/SQL块，这种块可以带有参数，可以在不同应用程序中多次调用 --PL/SQL有两种类型的子程序：过程和函数 --开发过程 --建立过程：不带任何参数 CREATE OR REPLACE PROCEDURE out_time IS BEGIN DBMS_OUTPUT.put_line(systimestamp); E</div> </li> <li><a href="/article/1611.htm" title="【EhCache一】EhCache版Hello World" target="_blank">【EhCache一】EhCache版Hello World</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a> <div>本篇是EhCache系列的第一篇，总体介绍使用EhCache缓存进行CRUD的API的基本使用，更细节的内容包括EhCache源代码和设计、实现原理在接下来的文章中进行介绍   环境准备 1.新建Maven项目   2.添加EhCache的Maven依赖 <dependency> <groupId>ne</div> </li> <li><a href="/article/1738.htm" title="学习EJB3基础知识笔记" target="_blank">学习EJB3基础知识笔记</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/ejb/1.htm">ejb</a> <div>最近项目进入系统测试阶段，全赖袁大虾领导有力，保持一周零bug记录，这也让自己腾出不少时间补充知识。花了两天时间把“传智播客EJB3.0”看完了，EJB基本的知识也有些了解，在这记录下EJB的部分知识，以供自己以后复习使用。   EJB是sun的服务器端组件模型，最大的用处是部署分布式应用程序。EJB (Enterprise JavaBean)是J2EE的一部分，定义了一个用于开发基</div> </li> <li><a href="/article/1865.htm" title="angular.bootstrap" target="_blank">angular.bootstrap</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular%E4%B8%AD%E6%96%87api/1.htm">angular中文api</a> <div>angular.bootstrap 描述：     手动初始化angular。     这个函数会自动检测创建的module有没有被加载多次，如果有则会在浏览器的控制台打出警告日志，并且不会再次加载。这样可以避免在程序运行过程中许多奇怪的问题发生。   使用方法：     angular .</div> </li> <li><a href="/article/1992.htm" title="java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数" target="_blank">java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class SearchInShiftedArray { /** * 题目：给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数。 * 请在这个特殊数组中找出给定的整数。 * 解答： * 其实就是“旋转数组”。旋转数组的最小元素见http://bylijinnan.iteye.com/bl</div> </li> <li><a href="/article/2119.htm" title="天使还是魔鬼？都是我们制造" target="_blank">天使还是魔鬼？都是我们制造</a> <span class="text-muted">ducklsl</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a><a class="tag" taget="_blank" href="/search/%E6%95%99%E8%82%B2/1.htm">教育</a><a class="tag" taget="_blank" href="/search/%E6%83%85%E6%84%9F/1.htm">情感</a> <div>----------------------------剧透请原谅，有兴趣的朋友可以自己看看电影，互相讨论哦！！！     从厦门回来的动车上，无意中瞟到了书中推荐的几部关于儿童的电影。当然，这几部电影可能会另大家失望，并不是类似小鬼当家的电影，而是关于“坏小孩”的电影！     自己挑了两部先看了看，但是发现看完之后，心里久久不能平</div> </li> <li><a href="/article/2246.htm" title="[机器智能与生物]研究生物智能的问题" target="_blank">[机器智能与生物]研究生物智能的问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a> <div>       我想,人的神经网络和苍蝇的神经网络,并没有本质的区别...就是大规模拓扑系统和中小规模拓扑分析的区别....       但是,如果去研究活体人类的神经网络和脑系统,可能会受到一些法律和道德方面的限制,而且研究结果也不一定可靠,那么希望从事生物神经网络研究的朋友,不如把</div> </li> <li><a href="/article/2373.htm" title="获取Android Device的信息" target="_blank">获取Android Device的信息</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div> String phoneInfo = "PRODUCT: " + android.os.Build.PRODUCT; phoneInfo += ", CPU_ABI: " + android.os.Build.CPU_ABI; phoneInfo += ", TAGS: " + android.os.Build.TAGS; ph</div> </li> <li><a href="/article/2500.htm" title="最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现" target="_blank">最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8C%B9%E9%85%8D/1.htm">字符串匹配</a> <div>原文：http://www.javacodegeeks.com/2013/11/java-implementation-of-optimal-string-alignment.html------------------------------------------------------------------------------------------------------------</div> </li> <li><a href="/article/2627.htm" title="小学5年级英语单词背诵第一课" target="_blank">小学5年级英语单词背诵第一课</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>long 长的 show 给...看，出示 mouth 口，嘴 write 写   use 用，使用 take 拿，带来 hand 手 clever 聪明的   often 经常 wash 洗 slow 慢的 house 房子   water 水 clean 清洁的 supper 晚餐 out 在外   face 脸，</div> </li> <li><a href="/article/2754.htm" title="macvim的使用实战" target="_blank">macvim的使用实战</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>macvim用的是mac里面的vim, 只不过是一个GUI的APP, 相当于一个壳   1. 下载macvim https://code.google.com/p/macvim/   2. 了解macvim :h               vim的使用帮助信息 :h macvim  </div> </li> <li><a href="/article/2881.htm" title="java二分法查找" target="_blank">java二分法查找</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/java%E4%BA%8C%E5%88%86%E6%B3%95%E6%9F%A5%E6%89%BE/1.htm">java二分法查找</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%B3%95/1.htm">二分法</a><a class="tag" taget="_blank" href="/search/java%E4%BA%8C%E5%88%86%E6%B3%95/1.htm">java二分法</a> <div>java二分法查找 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 11:40:03 星期二 http:/</div> </li> <li><a href="/article/3008.htm" title="Spring Cache注解+Memcached" target="_blank">Spring Cache注解+Memcached</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>Spring3.1 Cache注解  依赖jar包：  <dependency> <groupId>com.google.code.simple-spring-memcached</groupId> <artifactId>simple-s</div> </li> <li><a href="/article/3135.htm" title="apache commons io包快速入门" target="_blank">apache commons io包快速入门</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/apache+commons/1.htm">apache commons</a> <div>原文参考 http://www.javacodegeeks.com/2014/10/apache-commons-io-tutorial.html   Apache Commons IO 包绝对是好东西，地址在http://commons.apache.org/proper/commons-io/，下面用例子分别介绍：   1）  工具类   2</div> </li> <li><a href="/article/3262.htm" title="如何学习编程" target="_blank">如何学习编程</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>首先,我想说一下学习思想.学编程其实跟网络游戏有着类似的效果.开始的时候,你会对那些代码,函数等产生很大的兴趣,尤其是刚接触编程的人,刚学习第一种语言的人.可是,当你一步步深入的时候,你会发现你没有了以前那种斗志.就好象你在玩韩国泡菜网游似的,玩到一定程度,每天就是练级练级,完全是一个想冲到高级别的意志力在支持着你.而学编程就更难了,学了两个月后,总是觉得你好象全都学会了,却又什么都做不了,又没有</div> </li> <li><a href="/article/3389.htm" title="架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy" target="_blank">架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/Spring3/1.htm">Spring3</a> <div>1.前言。    如题。 2.描述。    @DependsOn用于强制初始化其他Bean。可以修饰Bean类或方法，使用该Annotation时可以指定一个字符串数组作为参数，每个数组元素对应于一个强制初始化的Bean。 @DependsOn({"steelAxe","abc"}) @Comp</div> </li> <li><a href="/article/3516.htm" title="Spring4+quartz2的配置和代码方式调度" target="_blank">Spring4+quartz2的配置和代码方式调度</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a><a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a><a class="tag" taget="_blank" href="/search/quartz2.x/1.htm">quartz2.x</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1/1.htm">定时任务</a> <div>前言：这些天简直被quartz虐哭。。因为quartz 2.x版本相比quartz1.x版本的API改动太多，所以，只好自己去查阅底层API……   quartz定时任务必须搞清楚几个概念： JobDetail——处理类 Trigger——触发器，指定触发时间，必须要有JobDetail属性，即触发对象 Scheduler——调度器，组织处理类和触发器，配置方式一般只需指定触发</div> </li> <li><a href="/article/3643.htm" title="Hibernate入门" target="_blank">Hibernate入门</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>  前言   使用面向对象的语言和关系型的数据库，开发起来很繁琐，费时。由于现在流行的数据库都不面向对象。Hibernate 是一个Java的ORM（Object/Relational Mapping）解决方案。   Hibernte不仅关心把Java对象对应到数据库的表中，而且提供了请求和检索的方法。简化了手工进行JDBC操作的流程。   如</div> </li> <li><a href="/article/3770.htm" title="Math类" target="_blank">Math类</a> <span class="text-muted">xiaoxing598</span> <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>一、Java中的数字（Math）类是final类，不可继承。 1、常数 PI：double圆周率 E：double自然对数 2、截取（注意方法的返回类型） double ceil(double d) 返回不小于d的最小整数 double floor(double d) 返回不大于d的整最大数 int round(float f) 返回四舍五入后的整数 long round</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.  </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>