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/1835161731219943424.htm" title="linux find命令" target="_blank">linux find命令</a> <span class="text-muted">落雨无风</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>find.-name"*.v"|xargsgrep"altera_mf"#在当前目录查找所有.v文件，并找出altera_mf的行持续更新中------</div> </li> <li><a href="/article/1835159967796129792.htm" title="新零售SaaS架构：客户管理系统的应用架构设计" target="_blank">新零售SaaS架构：客户管理系统的应用架构设计</a> <span class="text-muted">公众号-架构师汤师爷</span> <a class="tag" taget="_blank" href="/search/SaaS%E6%9E%B6%E6%9E%84/1.htm">SaaS架构</a><a class="tag" taget="_blank" href="/search/%E9%9B%B6%E5%94%AE/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/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>客户管理系统的应用架构设计应用层定义了软件系统的应用功能，负责接收用户的请求，协调领域层能力来执行任务，并将结果返回给用户，功能模块包括：客户管理：核心功能模块，负责收集和更新客户信息，包括个人资料、联系方式、消费习惯、会员卡、归属信息（比如销售或顾问）和备注。这个模块是CRM系统的基础，支撑其他模块的运作，提供详细的客户信息，帮助企业更好的理解和服务客户。客户标签：通过对客户进行标签化管理，实现</div> </li> <li><a href="/article/1835157044542402560.htm" title="2022年京东618红包领取时间、玩法攻略汇总" target="_blank">2022年京东618红包领取时间、玩法攻略汇总</a> <span class="text-muted">高省APP珊珊</span> <div>2022京东618红包活动时间是什么时候开始？2022年5月30日12点至2022年6月18日23:59淘宝618密令红包公布密令：【天降红包61666】5.29日20点准时，大额红包不要错过，具体时间同步更新大家好，我是【高省】最大团队创始人珊珊，至于我为何用高省APP领取优惠券呢，当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百</div> </li> <li><a href="/article/1835151179315769344.htm" title="小红书怎么直播（小红书直播条件）" target="_blank">小红书怎么直播（小红书直播条件）</a> <span class="text-muted">配音新手圈</span> <div>小红书直播开通条件：1)身份证实名认证;2)年满18周岁;兼职副业推荐公众号，配音新手圈，声优配音圈，新配音兼职圈，配音就业圈，鼎音副业，有声新手圈，每天更新各种远程工作与在线兼职，职位包括：写手、程序开发、剪辑、设计、翻译、配音、无门槛、插画、翻译、等等。。。每日更新兼职。3)绑定手机号;4)完成创作者认证(需满足实名认证、粉丝数不少于5千、近半年自然阅读量2千以上的原创合规笔记数不小于10篇)</div> </li> <li><a href="/article/1835143079305244672.htm" title="大数据毕业设计hadoop+spark+hive知识图谱租房数据分析可视化大屏租房推荐系统 58同城租房爬虫房源推荐系统房价预测系统计算机毕业设计机器学习深度学习人工智能" target="_blank">大数据毕业设计hadoop+spark+hive知识图谱租房数据分析可视化大屏租房推荐系统 58同城租房爬虫房源推荐系统房价预测系统计算机毕业设计机器学习深度学习人工智能</a> <span class="text-muted">2401_84572577</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>做了那么多年开发，自学了很多门编程语言，我很明白学习资源对于学一门新语言的重要性，这些年也收藏了不少的Python干货，对我来说这些东西确实已经用不到了，但对于准备自学Python的人来说，或许它就是一个宝藏，可以给你省去很多的时间和精力。别在网上瞎学了，我最近也做了一些资源的更新，只要你是我的粉丝，这期福利你都可拿走。我先来介绍一下这些东西怎么用，文末抱走。（1）Python所有方向的学习路线（</div> </li> <li><a href="/article/1835137153030516736.htm" title="报错 | pydantic.v1.error_wrappers.ValidationError ... subclass of BaseModel expected" target="_blank">报错 | pydantic.v1.error_wrappers.ValidationError ... subclass of BaseModel expected</a> <span class="text-muted">程序猿林仔</span> <a class="tag" taget="_blank" href="/search/%E6%8A%A5%E9%94%99/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/langchain/1.htm">langchain</a> <div>文章目录01问题情景02分析问题03阅读源码04解决方案4.1方案1-指定版本安装4.2（通用）方案2-指定v1版本4.3（推荐）方案3-参考源码01问题情景最近在做Langchain的开发，可能是因为我更新了依赖库的版本，在执行下面这部分代码的时候出现了该异常：#出现该异常的代码(仅保留核心逻辑)fromlangchain.output_parsersimportPydanticOutputPa</div> </li> <li><a href="/article/1835133747855454208.htm" title="关于Redis集群同步/持久化/淘汰机制的详解" target="_blank">关于Redis集群同步/持久化/淘汰机制的详解</a> <span class="text-muted">尾巴尖上的阳光</span> <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/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>Redis是非常常用的KV数据库,使用内存以及HashMap进行存储的特点带来了高效的查询.本文将围绕Redis的常见开发使用场景,阐述在Redis集群中各个节点是如何进行数据同步,每个节点如何进行持久化以及在长期使用中如何对数据进行更新和淘汰.如果对Redis有更多的兴趣,可以查看我的技术博客:https://dingyuqi.com下面是Redis在开发过程中常用的几种使用场景.集群Redis</div> </li> <li><a href="/article/1835130849448783872.htm" title="突然不想更新了怎么办？" target="_blank">突然不想更新了怎么办？</a> <span class="text-muted">酒拾叁</span> <div>这个问题也一直困扰着我，现在已经连续日更一百零五天，中间有无数次想放弃，不想更新，因此就会出现应付的情况，譬如随便写个两三百字，往上一丢就完事，爱咋咋地！这期间我很庆幸，没有随着自己的性子，遇到不想更新的时候就不更新，还硬着头皮写完两三百字，虽然这些字没有什么价值，但至少保持着自己一个更新写文的状态。人们常说，千里之堤毁于蚁穴，这个道理运用到日更这件事也是非常适合的。有了一次因为不想日更而断更，就</div> </li> <li><a href="/article/1835123902771195904.htm" title="《android进阶之光》——多线程编程（上）" target="_blank">《android进阶之光》——多线程编程（上）</a> <span class="text-muted">TAING要一直努力</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>今天了解了下多线程编程，知识点如下：进程与线程：进程是什么？线程是什么？进程可以看作是程序的实体，是线程的容器，是受操作系统管理的基本运行单元，例如exe文件就是一个进程。线程是进程运行的一些子任务，是操作系统调度的最小单元，各线程拥有自己的计数器，堆栈，局部变量等，也可以访问线程间共享的内存。线程的状态有哪些？新创建，可运行，等待，超时等待，阻塞，终止怎么创建一个线程？-三种方法第一种，MyTr</div> </li> <li><a href="/article/1835099706020163584.htm" title="微信小程序常用开发框架有哪些？" target="_blank">微信小程序常用开发框架有哪些？</a> <span class="text-muted">+码农快讯+</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E4%BA%AB/1.htm">分享</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/1.htm">小程序开发</a> <div>想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。1：WeUI小程序–使用教程https://weui.io/官方介绍：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大</div> </li> <li><a href="/article/1835094916657672192.htm" title="ansible安全优化篇" target="_blank">ansible安全优化篇</a> <span class="text-muted">happy_king_zi</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">运维自动化</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/ansible/1.htm">ansible</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/devops/1.htm">devops</a> <div>一、安全概况对与一台全新安装的服务器，尤其是直接面向公网的服务器来说：最重要的一项配置就是安全配置。针对非授权连接和截取通信信息等攻击行为，避免攻击手段带来的危害，处理方法有以下方法：使用安全加密的通信方式——使用https加密传输；禁止root用户远程登录并充分利用sudo；移除非必需的软件，只开发需要用到的端口；遵守权限最小化原则；及时更新操作系统和软件——修复旧版本的bug，并使用新版本的最</div> </li> <li><a href="/article/1835087276909096960.htm" title="2020年4月7日践行打卡28/90" target="_blank">2020年4月7日践行打卡28/90</a> <span class="text-muted">涅槃重生的玫瑰</span> <div>2020年4月7日践行打卡28/90【更新打卡】打卡时间：2020年4月7日周二晴6/20度90天连续打卡累计：28/90#宣言：涅槃绽放浴火重生#裂变出来，迎接新一轮曙光一、我的第一个30天目标：每天吃一个青蛙4番茄。加油晓莉（晓莉+33岁）践行打卡28/301.晚睡早起（为了工作需要）：早5：50晚00：002.先吃那只最丑陋的青蛙：今日1只.累积16.今日番茄，4只，累积68只。【】短期学习</div> </li> <li><a href="/article/1835085840603246592.htm" title="【60天备战软考高级系统架构设计师——第十天：软件设计与架构综合练习】" target="_blank">【60天备战软考高级系统架构设计师——第十天：软件设计与架构综合练习】</a> <span class="text-muted">冷风扇666</span> <a class="tag" taget="_blank" href="/search/%E5%A4%87%E6%88%98-%E8%BD%AF%E8%80%83/1.htm">备战-软考</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>经过前十天的学习，我们已经了解了软件工程生命周期模型、需求分析与管理方法，以及软件设计与架构的核心内容。为了巩固这些知识点，今天我们将进行一个综合练习。前十天学习内容回顾第1-3天：软件工程概述学习了软件生命周期模型（如瀑布模型、迭代模型、敏捷模型等）、软件工程原则（如开闭原则、单一职责原则等），以及常用的工程方法。第4-6天：需求分析与管理需求分析与管理是软件开发的关键环节之一。我们掌握了需求获</div> </li> <li><a href="/article/1835082941001199616.htm" title="Mall4j商城实战 - 部署 canal 数据库增量日志解析" target="_blank">Mall4j商城实战 - 部署 canal 数据库增量日志解析</a> <span class="text-muted">yueerba126</span> <a class="tag" taget="_blank" href="/search/Mall4j%E5%95%86%E5%9F%8E%E5%AE%9E%E6%88%98/1.htm">Mall4j商城实战</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Canal简介Canal是基于MySQL数据库增量日志解析的工具，主要用于增量数据的订阅和消费。Canal主要用途基于MySQL数据库增量日志解析详细功能：实时解析MySQL的二进制日志（Binlog）。捕获数据库中的所有增量变更，如插入、更新和删除操作。使用场景：适用于实时监控数据库变化的应用，比如数据复制、数据备份或实时数据分析等。提供增量数据订阅和消费服务</div> </li> <li><a href="/article/1835082840174325760.htm" title="【拖拽】自定义拖拽图标" target="_blank">【拖拽】自定义拖拽图标</a> <span class="text-muted">风露_</span> <div>一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法：voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点：Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed</div> </li> <li><a href="/article/1835075002773368832.htm" title="单节点canal的介绍和搭建（对接mysql和rocketMQ）" target="_blank">单节点canal的介绍和搭建（对接mysql和rocketMQ）</a> <span class="text-muted">汀风</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>单节点canal-server+canal-admin的介绍和搭建（对接mysql和rocketMQ）一、简介1、Canal1、工作原理2、MySQL主从复制实现3、canal架构4、binarylog1、新增binlog2、更新binglog3、增加字段bin-log4、删除字段bin-log5、修改字段bin-log二、使用2.1安装1、本地安装2、docker安装canal-admincan</div> </li> <li><a href="/article/1835065671130640384.htm" title="前端基础面试题·第三篇——JavaScript（其二）" target="_blank">前端基础面试题·第三篇——JavaScript（其二）</a> <span class="text-muted">DT——</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.深浅拷贝1.浅拷贝浅拷贝会创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝就是改引用类型的地址。//常见的浅拷贝1.Object.assign({},obj)//对象浅拷贝assign⽅法可以⽤于处理数组，不过会把数组视为对象，⽐如这⾥会把⽬标数组视为是属性为0、1、2的对象，所以源数组的0、1属性的值覆盖了⽬标对</div> </li> <li><a href="/article/1835057599570079744.htm" title="C语言刷题-day4" target="_blank">C语言刷题-day4</a> <span class="text-muted">从前慢，现在也慢</span> <a class="tag" taget="_blank" href="/search/2023%E5%AF%92%E5%81%87C%E8%AF%AD%E8%A8%80%E5%88%B7%E9%A2%98/1.htm">2023寒假C语言刷题</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、选择题1、以下程序的输出结果为（）#includeinti;voidprt(){for(i=5;i0;min--)if(x%min=0&&y%min=0)returnmin;}A:参数类型不对B:循环变量min初值不对C:判断等于的符号不对D:返回类型不对答案解析：正确答案：ABC1.函数实参是int，形参用char不对，会发生截断丢失数据；2.min在for循环开始时更新为0，不再是两个形参</div> </li> <li><a href="/article/1835056254905577472.htm" title="2019.1.6" target="_blank">2019.1.6</a> <span class="text-muted">root_restart</span> <div>1.新版研学行程公众号推送及页面改动，以后继续尝试无logo版行程单方便转发，附带一篇研学政策解读2.百家号，头条号，搜狐号注册认证及审核，后续每天会在上面更新以往研学活动，增加搜索引擎中山大研学和雨滴教育的关联3.与鹿老师探讨研究方便代理的新宣传模式</div> </li> <li><a href="/article/1835051794393296896.htm" title="pat甲级刷题计划-字符串" target="_blank">pat甲级刷题计划-字符串</a> <span class="text-muted">清尘浊水ll</span> <a class="tag" taget="_blank" href="/search/PTA/1.htm">PTA</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>PAT甲级刷题计划-字符串字符串整理的共19题（持续整理中），后续会整理相应的题号。题目参考自acwing~,争取在8月份前完成更新！目录1.计算a+b2.拼写正确3.签到与签出4.密码5.男孩vs女孩6.字符串减法7.说法方式8.约会(1061)1.计算a+b并以标准格式输出总和----也就是说，从最低位开始每隔三位数加进一个逗号（千位分隔符），如果结果少于四位则不需添加。输入格式共一行，包含两</div> </li> <li><a href="/article/1835048766864977920.htm" title="【H2O2|全栈】关于CSS（3）CSS基础（三）" target="_blank">【H2O2|全栈】关于CSS（3）CSS基础（三）</a> <span class="text-muted">过期的H2O2</span> <a class="tag" taget="_blank" href="/search/%E3%80%90H2O2%E3%80%91CSS%E5%85%A5%E9%97%A8/1.htm">【H2O2】CSS入门</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：</div> </li> <li><a href="/article/1835048372797534208.htm" title="树洞" target="_blank">树洞</a> <span class="text-muted">冰心玉1975</span> <div>天天这么碎碎念，不再更长篇大论也挺好。没有多少人来赞，也不必忙着回赞，工作还比较清闲，忽然有了大把的时间来无聊。以前在那边，每天都有事，更新只是碎片时间。如今这样还真是不适应，感觉自己快要废了，怎么办？期盼领导赶紧安排工作，原来我是劳碌命吗？孔雀鱼的胆子太小了，我放杯子动静大一点，它们都会吓一跳。每天游来游去，瞪着小小的眼睛，也不晓得在想什么？今天终于去二楼刷脸成功，果然是个子太矮，角度不对。跪椅</div> </li> <li><a href="/article/1835047255149735936.htm" title="python工程打包成whl文件" target="_blank">python工程打包成whl文件</a> <span class="text-muted">机灵巢穴_WitNest</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> <div>资料：PackagingPythonProjects—PythonPackagingUserGuide6.Modules—Python3.11.4documentation步骤1.安装打包工具python3-mpipinstallsetuptoolswheeltwine2.更新pip工具python3-mpipinstall--upgradepip3.创建工程结构python_test_packa</div> </li> <li><a href="/article/1835044034159144960.htm" title="戏感大爆发台词，配音温柔的文案长文" target="_blank">戏感大爆发台词，配音温柔的文案长文</a> <span class="text-muted">声优配音圈</span> <div>一、戏感大爆发台词戏剧作品中，戏感大爆发的台词常常令人深受震撼。兼职副业推荐公众号，配音新手圈，声优配音圈，新配音兼职圈，配音就业圈，鼎音副业，有声新手圈，每天更新各种远程工作与在线兼职，职位包括：写手、程序开发、剪辑、设计、翻译、配音、无门槛、插画、翻译、等等。。。每日更新兼职。那些犀利而有力的台词，能够通过真实的表达，将人物内心的情感和冲突完美呈现。这些台词在剧情高潮的时刻，将观众带入紧张激动</div> </li> <li><a href="/article/1835029105490358272.htm" title="在CentOS 7上安装桌面环境可以通过以下步骤完成" target="_blank">在CentOS 7上安装桌面环境可以通过以下步骤完成</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/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>确保您的系统已连接到互联网，并使用root权限登录。运行以下命令以更新系统软件包：yumupdate安装桌面环境的软件包组。CentOS7提供了几个桌面环境选择，包括GNOME、KDE、Xfce等。选择其中一个环境进行安装。例如，要安装GNOME桌面环境，运行以下命令：yumgroupinstall"GNOMEDesktop"如果要安装KDE桌面环境，将命令中的"GNOMEDesktop"替换为"</div> </li> <li><a href="/article/1835021417503092736.htm" title="Unity中的FixedUpdate、Update、LateUpdate的区别及游戏帧更新" target="_blank">Unity中的FixedUpdate、Update、LateUpdate的区别及游戏帧更新</a> <span class="text-muted">永恒星</span> <a class="tag" taget="_blank" href="/search/Unity/1.htm">Unity</a><a class="tag" taget="_blank" href="/search/FixedUpdate/1.htm">FixedUpdate</a><a class="tag" taget="_blank" href="/search/Update/1.htm">Update</a><a class="tag" taget="_blank" href="/search/LateUpdate/1.htm">LateUpdate</a> <div>【基本了解】三者执行顺序：FixedUpdate——>Update——>LateUpdate三者作用：FixedUpdate固定帧更新，一般用作物理更新;Update一般用作游戏逻辑更新;LateUpdate一般用作相机更新【深入了解】帧率的概念帧率是什么呢？一秒内画面更新的次数。游戏常用的有30fps，60fps。我们知道，帧率低游戏会卡顿，具体解释下就是，每秒内看到的画面更新次数变少，少于一个</div> </li> <li><a href="/article/1835017629618761728.htm" title="MTK Camera2 预览图成像质量差（马赛克）" target="_blank">MTK Camera2 预览图成像质量差（马赛克）</a> <span class="text-muted">AQUARICES</span> <a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>MTK推送来的原生Camera2应用拍照之后生成的预览图（Thumbnail）居然是马赛克！！但如果点击预览图之后再退出，就又是正常的。Camera2对于更新预览图的操作位于：vendor/mediatek/proprietary/packages/apps/Camera2/host/src/com/mediatek/camera/ui/ThumbnailViewManager.java这个函数对</div> </li> <li><a href="/article/1835011581000380416.htm" title="2024Mysql And Redis基础与进阶操作系列（8）作者——LJS[含MySQL 创建、修改、跟新、重命名、删除视图等具体详步骤；注意点及常见报错问题所对应的解决方法]" target="_blank">2024Mysql And Redis基础与进阶操作系列（8）作者——LJS[含MySQL 创建、修改、跟新、重命名、删除视图等具体详步骤；注意点及常见报错问题所对应的解决方法]</a> <span class="text-muted">肾透侧视攻城狮</span> <a class="tag" taget="_blank" href="/search/MYSQL/1.htm">MYSQL</a><a class="tag" taget="_blank" href="/search/REDIS/1.htm">REDIS</a><a class="tag" taget="_blank" href="/search/Advance/1.htm">Advance</a><a class="tag" taget="_blank" href="/search/operation/1.htm">operation</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</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/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/adb/1.htm">adb</a> <div>目录1MySQL视图1.概念2.作用3.特点4.具体如何操作实现MYSQL视图4.1创建视图语法示例查看表和视图查看视图的结构查看视图属性信息（比如：显示数据表的存储引擎、版本、数据行数和数据大小等）查看视图的详细定义信息4.2修改视图简介格式举例4.3更新视图简介下述结构中不可更新的视图补充说明举例更新视图视图包含聚合函数不可更新视图包含distinct不可更新视图包含goupby、having</div> </li> <li><a href="/article/1835010194589970432.htm" title="java 什么是多态性_Java多态性理解" target="_blank">java 什么是多态性_Java多态性理解</a> <span class="text-muted">职路施语</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BB%80%E4%B9%88%E6%98%AF%E5%A4%9A%E6%80%81%E6%80%A7/1.htm">什么是多态性</a> <div>什么是多态面向对象的三大特性：封装、继承、多态。从一定角度来看，封装和继承几乎都是为多态而准备的。这是我们最后一个概念，也是最重要的知识点。多态的定义：指允许不同类的对象对同一消息做出响应。即同一消息可以根据发送对象的不同而采用多种不同的行为方式。(发送消息就是函数调用)实现多态的技术称为：动态绑定(dynamicbinding)，是指在执行期间判断所引用对象的实际类型，根据其实际的类型调用其相应</div> </li> <li><a href="/article/1834998971337109504.htm" title="python离线安装一个第三方库" target="_blank">python离线安装一个第三方库</a> <span class="text-muted">Lhj0616</span> <a class="tag" taget="_blank" href="/search/python%E7%9B%B8%E5%85%B3/1.htm">python相关</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93/1.htm">第三方库</a> <div>文章目录实例步骤下载`xlwt`库将文件转移到目标机器在目标机器上安装`xlwt`验证安装总结步骤可能的问题解决方法检查库的兼容性使用`pip`下载适配特定Python版本的库创建虚拟环境创建虚拟环境（Python3.6）创建虚拟环境（Python3.11）检查和验证库的安装下载多个版本的`.whl`文件总结更新：下载的第三方库有依赖库解决方案实例想离线安装一个第三方库xlwt，python版本分</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>