HTML和CSS基础入门笔记
周末下雨，正好整理了下笔记，分享给大家~~~，新手小白可以闲暇时参考参考。
前端概述
-
软件开发流程
网页设计师根据需求设计网页 -> 前端工程师将设计做成静态网页 -> 后台工程师将静态网页修改为动态网页
-
W3C标准(网页结构分为三部分)
结构(HTML)：HTML用于描述页面的结构
表现(CSS)：CSS用于控制页面中元素的样式
行为(JavaScript)：JavaScript用于响应用户操作
HTML
HTML（Hypertext Markup Language）超文本标记语言
HTML使用标签的的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
一个最基本的HTML页面：网页标题<title> </head> <body> <h1>网页正文</h1> </body> </html></code></pre> </blockquote> <p><strong>标 签</strong></p> <blockquote> <ul> <li> HTML中的标记指的就是标签。</li> <li> HTML使用标记标签来描述网页。</li> </ul> </blockquote> <p> <strong>结 构</strong></p> <blockquote> <p> <标签名>标签内容</标签名><br> <标签名 /></p> </blockquote> <p><strong>元 素</strong> </p> <blockquote> <p> 一个完整的标签，我们称为元素，例如</p> <pre class="has"><code class="language-html"><h1>一级标题</h1></code></pre> <p>上边的h1我们就称为元素</p> <pre class="has"><code class="language-html"><p>我是一个<em>段落</em></p></code></pre> <p>p也是一个元素，em是p的子元素，p是em的父元素。<br> - body也是一个元素。<br> - body是p和em的祖先元素。<br> - p和em是body的后代元素。</p> <pre class="has"><code class="language-html"><body> <p><em>内容</em></p> </body></code></pre> </blockquote> <p><strong> 属 性</strong></p> <blockquote> <p>可以为HTML标签设置属性。<br> • 通过属性为HTML元素提供附加信息。<br> • 属性需要设置在开始标签或自结束标签中。<br> • 属性总是以名称/值对的形式出现。<br> • 比如：name=“value”<br> • 有些属性可以是任意值，有些则必须是指定值。</p> <pre class="has"><code class="language-html"><h1 title="我是一个标题">标题</h1> <img src="" alt="" /></code></pre> <p>常 见 属 性<br> • id<br> – id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。<br> • class<br> – class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组， 可以出现相同的class属性，可以为一个元素指定多个class。<br> • title<br> – title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。</p> <p> 注 释<br> • HTML注释中的内容不会在网页中显示。<br> • 格式:<br> <!-- 注释内容 --><br> • 合理的使用注释可以帮助开发人员理解网页的代码。<br> • 注释不能嵌套！</p> </blockquote> <h2 id="%C2%A0%20%C2%A0%20%C2%A0HTML%E7%9A%84%E5%8F%91%E5%B1%95"><strong> <span style="color:#e579b6;"> </span></strong><span style="color:#e579b6;">HTML的发展</span></h2> <blockquote> <p>• 1999年12月：HTML4.01（W3C推荐）<br> • 2000年底：XHTML1.0（W3C推荐）<br> • 2014年10月：HTML5（W3C推荐）</p> </blockquote> <blockquote> <p><strong>文档声明（doctype）我们一般使用h5版本的</strong></p> <pre class="has"><code class="language-html"><!DOCTYPE html></code></pre> <p>告诉浏览器我们网页的版本（html5）</p> <p><br><strong>乱码-字符集</strong><br> 常见字符集UTF-8、GB2312、ASLII、ISO8859-1、GBK</p> </blockquote> <h2 id="%C2%A0%20%C2%A0%3Cmeta%3E"> <span style="color:#e579b6;"> <meta></span></h2> <blockquote> <p><strong>作 用</strong><br> – <meta> 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。<br> – <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。</p> </blockquote> <blockquote> <p><strong>meta的用法</strong><br> • 设置页面的字符集<br> – <meta charset="utf-8"><br> • 设置网页的描述<br> – <meta name="description" content=""><br> • 设置网页的关键字<br> – <meta name="keywords" content=""><br> • 请求的重定向<br> – <meta http-equiv="refresh" content="5;url=地址"/></p> </blockquote> <h2 id="%C2%A0%20%C2%A0%20%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE"> <span style="color:#e579b6;">常用标签</span></h2> <blockquote> <p><html> 用于告诉浏览器这个文档中包含的信息是用HTML编写的。<br> <head> 用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。<br> <title> title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。</p> <p><br> 用 法<br> – 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签。<br> – 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。</p> <p><br> <body>用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。<br> <h1>~<h6><br> – h1~h6都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1~h6重要性越来越低。<br> – 标题标签相当于正文的标题，通常认为重要性仅次于页面的title。<br> – 一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。<br> – 一个页面中只会使用一个h1标签。<br> <p>表示网页中的一个段落。<br> – 一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。<br> <br />表示一个换行标签，使用br标签可以使br标签后的内容另起一行。<br> <hr />标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。<br> <img />标签是图片标签，可以用来向页面中引入一张外部的图片。<br> 属性： – src指向一个外部的图片的路径。<br> – alt图片的描述<br> <a>标签是超链接标签，通过a标签，可以快速跳转到其他页面。<br> 属性： – href指向一个链接地址<br> – target设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口。</p> </blockquote> <h2 id="%C2%A0%20%C2%A0%20%E5%AE%9E%E4%BD%93%EF%BC%88%E8%BD%AC%E4%B9%89%E5%AD%97%E7%AC%A6%EF%BC%89"> <span style="color:#e579b6;"> 实体（转义字符）</span></h2> <blockquote> <p>• 小于号< – < • 大于号> – ><br> • 空格 – • 和符号& – &<br> • 版权© – © • 引号” – "<br> • 注册商标® – ® • 商标™ – ™</p> </blockquote> <h2 id="CSS%20(Cascading%20Style%20Sheets)%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8"><span style="color:#ffbb66;">CSS (Cascading Style Sheets)层叠样式表</span></h2> <hr> <blockquote> <p>基本语法<br> – 选择器 {样式名:样式值；样式名:样式值 ; }</p> <pre class="has"><code class="language-css"> p {color:red ; font-size:12px;}</code></pre> <p>行内样式(不推荐使用)</p> <pre class="has"><code class="language-html"><p style="color: red;font-size: 30px"></p></code></pre> <p>内部样式表</p> <pre class="has"><code class="language-html"><style> p{color:red; font-size: 30px;} </style></code></pre> <p>外部样式表</p> <pre class="has"><code class="language-html"><link rel="stylesheet" type="text/css" href="style.css"></code></pre> </blockquote> <h3 id="%C2%A0%20%C2%A0CSS%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88selector%EF%BC%89"> <span style="color:#e579b6;">CSS选择器（selector）</span></h3> <blockquote> <p>1. 元素选择器 p{}<br> 2 . 类选择器 .className{}<br> 3. id选择器 #id{} id属性是不能重复的<br> 4. 通配符选择器 *{}<br> 5. 复合选择器 div.box{}会选中页面中具有box1这个class的div元素<br> 6. 群组选择器 p,.hello,#box{}则会同时选中页面中p元素，class为hello的元素，id为box的元素<br> 7. 后代选择器 p strong{}会选中页面中所有的p元素内的strong元素。<br> 8. 子选择器 div > .class{}</p> </blockquote> <h3 id="%E6%A0%87%E7%AD%BE%E4%B9%8B%E9%97%B4%E7%9A%84%E5%85%B3%E7%B3%BB"><span style="color:#e579b6;">标签之间的关系</span></h3> <blockquote> <p>• 祖先元素<br> – 直接或间接包含后代元素的元素。<br> • 后代元素<br> – 直接或间接被祖先元素包含的元素。<br> • 父元素<br> – 直接包含子元素的元素。<br> • 子元素<br> – 直接被父元素包含的元素。<br> • 兄弟元素<br> – 拥有相同父元素的元素。</p> </blockquote> <blockquote> <p><strong>伪类和伪元素</strong></p> <ul> <li> 比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。</li> </ul> <p> - 给链接定义样式<br> 有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。</p> <ul> <li>正常链接</li> </ul> <p> – a:link</p> <ul> <li> 访问过的链接</li> </ul> <p> – a:visited（只能定义字体颜色）</p> <ul> <li>鼠标滑过的链接</li> </ul> <p> – a:hover</p> <ul> <li>正在点击的链接</li> </ul> <p> – a:active</p> <p><br><strong>其 它</strong></p> <ul> <li> 获取焦点</li> </ul> <p> – :focus</p> <ul> <li>指定元素前</li> </ul> <p> – :before</p> <ul> <li>指定元素后</li> </ul> <p> – :after</p> <ul> <li>选中的元素</li> </ul> <p> – ::selection</p> </blockquote> <blockquote> <p><strong> 属性选择器</strong><br> [属性名]<br> [属性名="属性值"]<br> [属性名~="属性值"]<br> [属性名|="属性值"]<br> [属性名^="属性值"]<br> [属性名$="属性值"]<br> [属性名*="属性值"]</p> </blockquote> <blockquote> <p><strong>子元素选择器</strong><br> 语法：父元素 > 子元素{}<br> 例如body > h1将选择body子标签中的所有h1标签。<br> • :first-child<br> – 选择第一个子标签<br> • :last-child<br> – 选择最后一个子标签<br> • :nth-child<br> – 选择指定位置的子元素<br> • :first-of-type<br> • :last-of-type<br> • :nth-of-type<br> – 选择指定类型的子元素</p> <p><br> 语法:<br> – 查找后边一个兄弟元素<br> • 兄弟元素 + 兄弟元素{}<br> – 查找后边所有的兄弟元素<br> • 兄弟元素 ~ 兄弟元素{}</p> <p>否定伪类<br> 语法:<br> :not(选择器){}<br> • 比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。</p> </blockquote> <blockquote> <p><strong>权重</strong><br> #权重的计算<br> 不同的选择器有不同的权重值：<br> – 内联样式：权重是 1000<br> – id选择器：权重是 100<br> – 类、属性、伪类选择器：权重是 10<br> – 元素选择器：权重是 1<br> – 通配符：权重是 0<br> • 计算权重需要将一个样式的全部选择器相加</p> </blockquote> <blockquote> <p><strong>文本标签和样式</strong><br> <em>##<em>和<strong></em><br> • em标签用于表示一段内容中的着重点。<br> • strong标签用于表示一个内容的重要性。<br> • 这两个标签可以单独使用，也可以一起使用。 </p> <pre class="has"><code class="language-html"> <p> <strong>警告：任何情况下不要接近僵尸。</strong> 他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！ </p></code></pre> <p> • 通常em显示为斜体，而strong显示为粗体。</p> <p><br><em>##<i>和<b></em><br> • i标签会使文字变成斜体。<br> • b标签会使文字变成粗体。<br> • 这两个标签和em和strong类似，但是这两个标签没有语义。<br> • 所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签。</p> <p><br><em>##<small></em><br> • small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。<br> • 浏览器在显示small标签时会显示一个比父元素小的字号。</p> <pre class="has"><code class="language-html"><p><small>©2016 Della工作室. 保留所有权利.</small></p></code></pre> <p><em>##<cite></em><br> • 使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。</p> <pre class="has"><code class="language-html"><p> <cite>《七龙珠》</cite>讲的是召唤神龙的故事。 </p></code></pre> <p><em>##<blockquote>和<q></em><br> • blockquote和q表示标记引用的文本。<br> • blockquote用于长引用，q用于短引用。<br> • 在两个标签中还可以使用cite属性来表示引用的地址。</p> <pre class="has"><code class="language-html">孟子曾经说过：<blockquote>天将降大任于是人也...</blockquote>他说的真对啊！ <p>孔子曾经说过：<q>学而时习之不亦说乎</q></p></code></pre> <p><em>##<sup>和<sub></em><br> • sup和sub用于定义上标和下标。<br> • 上标主要用于表示类似于10 3 中的3。<br> • 下标则用于表示类似余H 2 O中的2。<br><em>##<ins>和<del></em><br> • ins表示插入的内容，显示时通常会加上下划线。<br> • del表示删除的内容，显示时通常会加上删除线。<br><em>##<code>和<pre></em><br> • 如果你的内容包含代码示例或文件名，就可以使用code元素。<br> • pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码。</p> <pre class="has"><code class="language-html"><pre> <code> function fun(){ alert("hello"); } </code> </pre></code></pre> </blockquote> <blockquote> <p> <strong> 有序列表</strong><br> • 使用ol和li来创建一个有序列表。</p> <pre class="has"><code class="language-html"><ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol></code></pre> <p><strong>无序列表</strong><br> • 使用ul和li来创建一个无序列表。</p> <pre class="has"><code class="language-html"><ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol></code></pre> <p><strong>定义列表</strong><br> • 使用dl、dd、dt来创建一个定义列表。</p> <pre class="has"><code class="language-html"><dl> <dt>定义项1</dt> <dd>定义描述1</dd> <dt>定义项2</dt> <dd>定义描述2</dd> <dt>定义项3</dt> <dd>定义描述3</dd> </dl></code></pre> </blockquote> <blockquote> <p><strong>文本格式化</strong></p> <ul> <li> px</li> </ul> <p> – 如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。</p> <ul> <li>百分比</li> </ul> <p> – 也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。</p> <ul> <li> em</li> </ul> <p> – em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。</p> <p><strong>颜色</strong><br> RGB(0,255,0) 和 RGBA(0,255,0,0.5)<br><strong>文字大小</strong><br> font-size<br><strong>字体</strong></p> <ol> <li>p{font-family:Arial}</li> <li>通过font-family可以同时指定多个字体。</li> </ol> <pre class="has"><code class="language-css">p{font-family:Arial , Helvetica , sans-serif}</code></pre> <p>这里面 sans-serif 并不是指的具体某一个字体。而是一类字体。<br><strong>字体分类</strong></p> <ul> <li>serif（衬线字体）</li> <li> sans-serif（非衬线字体）</li> <li>monospace （等宽字体）</li> <li>cursive （草书字体）</li> <li> fantasy （虚幻字体）</li> </ul> <p> 以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。</p> <p><strong>斜体和粗体</strong></p> <ul> <li> font-style用来指定文本的斜体。</li> </ul> <p> – 指定斜体：font-style:italic<br> – 指定非斜体：font-style:normal</p> <ul> <li> font-weight用来指定文本的粗体。</li> </ul> <p> – 指定粗体：font-weight:bold<br> – 指定非粗体：font-weight:normal</p> <p> </p> <ul> <li><strong>小型大写字母</strong></li> <li> •font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。</li> </ul> <p> – font-variant:small-caps</p> <ul> <li> 字体属性的简写</li> </ul> <p> • font可以一次性同时设置多个字体的样式。<br> • 语法：<br> – font:加粗 斜体 小型大写 大小/行高 字体<br> • 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。</p> <p><br><strong>行间距</strong><br> • line-height用于设置行高，行高越大则行间距越大。<br> • 行间距 = line-height – font-size</p> <p><br><strong>大写化</strong><br> • text-transform样式用于将元素中的字母全都变成大小。<br> – 大写：text-transform:uppercase<br> – 小写：text-tansform:lowercase<br> – 首字母大写：text-transform:capitalize<br> – 正常：text-transform:none</p> <p><br><strong>文本的修饰</strong><br> • text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。<br> • 可选值：<br> – underline<br> – overline<br> – line-through<br> – none</p> <p><br><strong>字母间距和单词间距</strong><br> • letter-spacing用来设置字符之间的间距。<br> • word-spacing用来设置单词之间的间距。<br> • 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。</p> <p><br><strong>对齐文本</strong><br> • text-align用于设置文本的对齐方式。<br> • 可选值：<br> – left：左对齐<br> – right：右对齐<br> – justify：两边对齐<br> – center：居中对齐<br><strong>首行缩进</strong><br> • text-indent用来设置首行缩进。<br> • 该样式需要指定一个长度，并且只对第一行生效。<br><br><br><strong>盒子模型</strong><br> • 一个盒子我们会分成四个部分：<br> – 内容区(content)<br> – 内边距(padding)<br> – 边框(border)</p> <p>– 外边距(margin)</p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/906efbe84f7d451d9f24527b9501e5c5.jpg" target="_blank"><img alt="HTML和CSS基础入门笔记_第1张图片" class="has" src="http://img.e-com-net.com/image/info8/906efbe84f7d451d9f24527b9501e5c5.jpg" width="618" height="414" style="border:1px solid black;"></a></p> <blockquote> <p><strong>内容区</strong></p> <ul> <li>• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。</li> <li>• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。</li> <li>• 通过width和height两个属性可以设置内容区的大小。</li> <li>• width和height属性只适用于块元素。</li> </ul> <p><strong>内边距</strong></p> <ul> <li>• 顾名思义，内边距指的就是元素内容区与边框以内的空间。</li> <li>• 默认情况下width和height不包含padding的大小。</li> <li>• 使用padding属性来设置元素的内边距。</li> <li>• 例如：</li> </ul> <pre class="has"><code class="language-css">padding:10px 20px 30px 40px</code></pre> <p> • padding:10px 20px 30px;<br> – 分别指定上、左右、下四个方向的内边距<br> • padding:10px 20px;<br> – 分别指定上下、左右四个方向的内边距<br> • padding:10px;<br> – 同时指定上左右下四个方向的内边距<br> • 同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。<br><strong>边框</strong></p> <ul> <li>• 可以在元素周围创建边框，边框是元素可见框的最外部。</li> <li>• 可以使用border属性来设置盒子的边框：</li> </ul> <p> – border:1px red solid;<br> – 上边的样式分别指定了边框的宽度、颜色和样式。</p> <ul> <li>• 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。</li> <li>• 和padding一样，默认width和height并包括边框的宽度。</li> </ul> <p><strong>边框的样式</strong></p> <ul> <li>• 边框可以设置多种样式：</li> </ul> <p> – none（没有边框）<br> – dotted（点线）<br> – dashed（虚线）<br> – solid（实线）<br> – double（双线）<br> – groove（槽线）<br> – ridge（脊线）<br> – inset（凹边）<br> – outset（凸边）<br><strong>外边距</strong></p> <ul> <li>* 外边距是元素边框与周围元素相距的空间。</li> <li>* 使用margin属性可以设置外边距。</li> <li>* 用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。</li> <li>* 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。</li> </ul> </blockquote> <blockquote> <p><strong>display</strong></p> <ul> <li>* 我们不能为行内元素设置width、height、margin-top和margin-bottom。</li> <li>* 我们可以通过修改display来修改元素的性质。</li> <li>* 可选值：</li> </ul> <p> – block：设置元素为块元素<br> – inline：设置元素为行内元素<br> – inline-block：设置元素为行内块元素<br> – none：隐藏元素（元素将在页面中完全消失）<br><strong>visibility</strong><br> • visibility属性主要用于元素是否可见。<br> • 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。<br> * 可选值：<br> – visible：可见的<br> – hidden：隐藏的<br><strong>overflow</strong></p> <ul> <li>* 当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。</li> <li>* 可以通过overflow来控制内容溢出的情况。</li> <li>* 可选值：</li> </ul> <p> – visible：默认值<br> – scroll：添加滚动条<br> – auto：根据需要添加滚动条<br> – hidden：隐藏超出盒子的内容<br> </p> </blockquote> <p><strong>文档流</strong></p> <blockquote> <ul> <li>* 文档流指的是文档中可现实的对象在排列时所占用的位置。</li> <li>* 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。</li> <li>* 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。</li> <li>* 这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。</li> </ul> <p> </p> </blockquote> <p><strong>浮动</strong></p> <blockquote> <ul> <li>* 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。</li> <li>* 浮动使用float属性。</li> <li>* 可选值：</li> </ul> <p> – none：不浮动<br> – left：向左浮动<br> – right：向右浮动</p> <ul> <li>* 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。</li> <li>* 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。</li> <li>* 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。</li> <li>* 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。</li> <li>* 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。</li> <li>* 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。</li> <li>* 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素。</li> </ul> </blockquote> <p><strong>清除浮动</strong></p> <blockquote> <ul> <li>* clear属性可以用于清除元素周围的浮动对元素的影响。</li> <li>* 也就是元素不会因为上方出现了浮动元素而改变位置。</li> <li>* 可选值：</li> </ul> <p> – left：忽略左侧浮动<br> – right：忽略右侧浮动<br> – both：忽略全部浮动<br> – none：不忽略浮动，默认值</p> </blockquote> <p><strong>定位</strong></p> <blockquote> <ul> <li>* position属性可以控制Web浏览器如何以及在何处显示特定的元素。</li> <li>* 可以使用position属性把一个元素放置到网页中的任何位置。</li> <li>* 可选值：</li> </ul> <p> – static<br> – relative<br> – absolute<br> – fixed</p> </blockquote> <p><strong>相对定位</strong></p> <blockquote> <ul> <li>* 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此响。</li> <li>* 当将position属性设置为relative时，则开启了元素的相对定位。</li> <li>* 当开启了相对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。</li> </ul> <p><em><strong>相对定位的特点</strong></em></p> <ul> <li>* 如果不设置元素的偏移量，元素位置不会发生改变。</li> <li>* 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。</li> <li>* 相对定位不会改变元素原来的特性。</li> <li>* 相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。</li> </ul> </blockquote> <p><strong>绝对定位</strong></p> <blockquote> <ul> <li>* 绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。</li> <li>* 当将position属性设置为absolute时，则开启了元素的绝对定位。</li> <li>* 当开启了绝对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。</li> </ul> <p><strong>绝对定位的特点</strong></p> <ul> <li>* 绝对定位会使元素完全脱离文本流。</li> <li>* 绝对定位的块元素的宽度会被其内容撑开。</li> <li>* 绝对定位会使行内元素变成块元素。</li> <li>* 一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。</li> </ul> </blockquote> <p><strong>固定定位</strong></p> <blockquote> <ul> <li>* 固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。</li> <li>* 当将position属性设置为fixed时，则开启了元素的固定定位。</li> <li>* 当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。</li> <li>* 固定定位的其他特性和绝对定位类似</li> </ul> </blockquote> <p><strong>z-index</strong></p> <blockquote> <ul> <li>* 当元素开启定位以后就可以设置z-index这个属性。</li> <li>* 这个属性可以提升定位元素所在的层级。</li> <li>* z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层。</li> </ul> </blockquote> <p><strong>清除浮动</strong></p> <pre class="has"><code class="language-css">/* * 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动， * 这样做和添加一个div的原理一样，可以达到一个相同的效果， * 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用 */ .clearfix:after{ /*添加一个内容*/ content: ""; /*转换为一个块元素*/ display: block; /*清除两侧的浮动*/ clear: both; } /* * 在IE6中不支持after伪类, * 所以在IE6中还需要使用hasLayout来处理 */ .clearfix{ zoom*:1; }</code></pre> <p><strong>设置元素背景</strong></p> <blockquote> <p><strong>background-color</strong></p> <ul> <li>* 用该属性用来为元素设置背景颜色。</li> <li>* 需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。</li> <li>* 如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。</li> </ul> <p><strong>background-image</strong></p> <ul> <li>* background-image可以为元素指定背景图片。</li> <li>* 和background-color类似，这不过这里使用的是一个图片作为背景。</li> <li>* 需要一个url地址作为参数，url地址需要指向一个外部图片的路径</li> <li>* 例如：</li> </ul> <p> </p> <pre class="has"><code class="language-css">background-image: url(1.jpg)</code></pre> <p><strong>backgr-repeat</strong></p> <ul> <li>* background-repeat用于控制背景图片的重复方式。</li> <li>* 如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。</li> <li>* 可选值：</li> </ul> <p> – repeat：默认值，图片左右上下平铺<br> – no-repeat：只显示图片一次，不会平铺<br> – repeat-x：沿x轴水平平铺一张图片<br> – repeat-y：沿y轴水平平铺一张图片<br><strong>background-position</strong></p> <ul> <li>* background-position用来精确控制背景图片在元素中的位置。</li> <li>* 可以通过三种方式来确定图片在水平方向和垂直方向的起点。</li> </ul> <p> – 关键字：top right bottom left center<br> – 百分比<br> – 数值<br><strong>background-attachment</strong></p> <ul> <li>* background-attachment用来设置背景图片是否随页面滚动。</li> <li>* 可选值：</li> </ul> <p> – scroll：随页面滚动<br> – fixed：不随页面滚动<br><strong>CSS Sprite</strong></p> <ul> <li>* CSS Sprites是一种网页图片应用处理方式。</li> <li>* 通过这种方式我们可以将网页中的零星图片集中放到一张大图上。</li> <li>* 这样一来，一次请求便可以同时加载多张图片，大大提高了图片的加载效率。</li> </ul> </blockquote> <p><strong>表格的基本设置</strong></p> <blockquote> <p><strong>table、tr、th、td</strong></p> <ul> <li>• 使用table标签创建一个表格。</li> <li>• tr表示表格中的一行。</li> <li>• tr中可以编写一个或多个th或td。</li> <li>• th表示表头。</li> <li>• td表示表格中的一个单元格</li> </ul> <p><strong>caption、thead、tbody、tfoot</strong></p> <ul> <li>• caption表示表格的标题。</li> <li>• thead表示表格的头部。</li> <li>• tbody表示表格的主体。</li> <li>• tfoot表示表格的底部。</li> </ul> <p><strong>合并单元格</strong></p> <ul> <li>• 合并单元格指将两个或两个以上的单元格合并为一个单元格。</li> <li>• 合并单元格可以通过在th或td中设置属性来完成。</li> <li>• 横向合并</li> </ul> <p> – colspan</p> <ul> <li> • 纵向合并</li> </ul> <p> – rowspan</p> <p><strong>表格的样式</strong></p> <ul> <li>之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的离。</li> <li>• text-align：设置文本的水平对齐。</li> <li>• vertical-align：设置文本的垂直对齐。</li> </ul> <p> – 可选值：top、baseline、middle、bottom</p> <ul> <li>border-spacing：边框间距</li> <li> border-collapse：合并边框</li> </ul> <p> – collapse：合并边框<br> – separate：不合并边框</p> </blockquote> <p><strong>表单</strong></p> <blockquote> <ul> <li> 现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息表。这</li> </ul> <p>些都是表单的一种</p> <ul> <li> 网页中的表单是用来向服务器提交信息的，</li> <li>我们最常用到的表单就是baidu的搜索框</li> </ul> <p> * 表单可以将用户填写的信息提交的服务器<br> 例如：</p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/dec224f4991142a1b3107ac1a31a2522.jpg" target="_blank"><img alt="HTML和CSS基础入门笔记_第2张图片" class="has" src="http://img.e-com-net.com/image/info8/dec224f4991142a1b3107ac1a31a2522.jpg" width="650" height="238" style="border:1px solid black;"></a></p> <blockquote> <p><strong>* 表单项</strong><br> 文本框</p> <pre class="has"><code class="language-html"><input type="text" name="name"></code></pre> <p> 密码框</p> <pre class="has"><code class="language-html"><input type="password" name="pwd"></code></pre> <p>多选框</p> <pre class="has"><code class="language-html"><input type="checkbox" name="sports"></code></pre> <p>单选框</p> <pre class="has"><code class="language-html"><input type="radio" name="gender"></code></pre> <p>提交按钮</p> <pre class="has"><code class="language-html"><input type="submit" value=" 提交 "> 下拉列表 <select> <option>北京</option> </select></code></pre> <p> </p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/e7d086b12d784e4e9d59854c2e64e410.jpg" target="_blank"><img alt="HTML和CSS基础入门笔记_第3张图片" class="has" src="http://img.e-com-net.com/image/info8/e7d086b12d784e4e9d59854c2e64e410.jpg" width="325" height="501" style="border:1px solid black;"></a></p> <blockquote> <p><strong>input</strong></p> <ul> <li>• input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态。</li> <li>• type属性可选值：</li> </ul> <p> – text：文本框<br> – password：密码框<br> – submit：提交按钮<br> – radio：单选按钮<br> – checkbox：多选框<br> – reset ：重置按钮<br><strong>select、option</strong></p> <ul> <li>• select用于创建一个下拉列表。</li> <li>• option表示下拉列表中的列表项。</li> <li>• optgroup用于为列表项分组。</li> </ul> <p><strong>textarea</strong></p> <ul> <li>• textarea用来创建一个文本域，实际效果和文本框类似，只是可以输入多行数据。</li> <li>• 可用属性：</li> </ul> <p> – cols：文本域的列数<br> – rows：文本域的行数<br><strong>fieldset、legend、label</strong></p> <ul> <li>• fieldset用来为表单项进行分组。</li> <li>• legend用于指定每组的名字。</li> <li>• label标签用来为表单项定义描述文字。</li> </ul> </blockquote> <p> </p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1174724905594314752"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(学习随笔,基础干货,html/css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <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/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835504217729626112.htm" title="Python教程：一文了解使用Python处理XPath" target="_blank">Python教程：一文了解使用Python处理XPath</a> <span class="text-muted">旦莫</span> <a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6/1.htm">Python进阶</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835498219489030144.htm" title="高端密码学院笔记285" target="_blank">高端密码学院笔记285</a> <span class="text-muted">柚子_b4b4</span> <div>高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要</div> </li> <li><a href="/article/1835497710975807488.htm" title="从0到500+，我是如何利用自媒体赚钱？" target="_blank">从0到500+，我是如何利用自媒体赚钱？</a> <span class="text-muted">一列脚印</span> <div>运营公众号半个多月，从零基础的小白到现在慢慢懂了一些运营的知识。做好公众号是很不容易的，要做很多事情；排版、码字、引流…通通需要自己解决，业余时间全都花费在这上面涨这么多粉丝是真的不容易，对比知乎大佬来说，我们这种没资源，没人脉，还没钱的小透明来说，想要一个月涨粉上万，怕是今天没睡醒（不过你有的方法，算我piapia打脸）至少我是清醒的，自己慢慢努力，实现我的万粉目标！大家快来围观、支持我吧！孩子</div> </li> <li><a href="/article/1835497074049773568.htm" title="数组去重" target="_blank">数组去重</a> <span class="text-muted">好奇的猫猫猫</span> <div>整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法</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/1835493651992637440.htm" title="大伟说成语之唉声叹气" target="_blank">大伟说成语之唉声叹气</a> <span class="text-muted">求索大伟</span> <div>＊大伟说成语＊【唉声叹气】叹气：因心里不痛快或不如意而吐出长气，发出声音。因为痛苦、憋闷或感伤而发出叹息的声音。【大伟说】情绪外露，非人类所特有，动物亦有情绪，悲哀和欢乐所表示的情绪亦是不一样的，会嗷嗷大叫也会低吟痛哭。不同的是，人类的情绪更复杂，更多样，更丰富。唉声叹气，可以说是最基础的情绪，因为无奈而举足无措，不知该如何如何化解，只有独自一人慢慢承受，长吁短叹不知如何是好，其实是无能无力的表现</div> </li> <li><a href="/article/1835493626688401408.htm" title="Python快速入门 —— 第三节：类与对象" target="_blank">Python快速入门 —— 第三节：类与对象</a> <span class="text-muted">孤华暗香</span> <a class="tag" taget="_blank" href="/search/Python%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/1.htm">Python快速入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#</div> </li> <li><a href="/article/1835493374514262016.htm" title="MongoDB Oplog 窗口" target="_blank">MongoDB Oplog 窗口</a> <span class="text-muted">喝醉酒的小白</span> <a class="tag" taget="_blank" href="/search/MongoDB/1.htm">MongoDB</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835491101276991488.htm" title="数据仓库——维度表一致性" target="_blank">数据仓库——维度表一致性</a> <span class="text-muted">墨染丶eye</span> <a class="tag" taget="_blank" href="/search/%E8%83%8C%E8%AF%B5/1.htm">背诵</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a> <div>数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计</div> </li> <li><a href="/article/1835490471032483840.htm" title="高级 ECharts 技巧：自定义图表主题与样式" target="_blank">高级 ECharts 技巧：自定义图表主题与样式</a> <span class="text-muted">SnowMan1993</span> <a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.</div> </li> <li><a href="/article/1835490218409553920.htm" title="01-Git初识" target="_blank">01-Git初识</a> <span class="text-muted">Meereen</span> <a class="tag" taget="_blank" href="/search/Git/1.htm">Git</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name</div> </li> <li><a href="/article/1835489587498151936.htm" title="ARM驱动学习之基础小知识" target="_blank">ARM驱动学习之基础小知识</a> <span class="text-muted">JT灬新一</span> <a class="tag" taget="_blank" href="/search/ARM/1.htm">ARM</a><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/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> <div>ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板</div> </li> <li><a href="/article/1835489208152715264.htm" title="Rust基础知识" target="_blank">Rust基础知识</a> <span class="text-muted">GRKF15</span> <a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>1.Rust语言简介1.1基础语法变量声明：let关键字用于声明变量，可以指定或不指定类型，如leta=10;和letmutc=30i32;。函数定义：使用fn关键字定义函数，并指定参数类型及返回类型，如fnadd(i:i32,j:i32)->i32{i+j}。控制流：包括if、else等，控制语句后需要使用;来结束语句。1.2数据类型整数类型：i8、i16、i32、i64、i128，以及无符号的</div> </li> <li><a href="/article/1835484420023349248.htm" title="18、架构-可观测性之聚合度量" target="_blank">18、架构-可观测性之聚合度量</a> <span class="text-muted">大树~~</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>聚合度量聚合度量是指对系统运行时产生的各种指标数据进行收集、聚合和分析，以了解系统的健康状况和性能表现。聚合度量是可观测性的关键组成部分，通过对度量数据的分析，可以及时发现系统中的异常和瓶颈。以下是对聚合度量各个方面的详细解析，并结合具体的数据案例和技术支撑。指标收集收集系统运行时产生的各种指标数据是聚合度量的基础。常见的指标包括CPU使用率、内存使用率、请求处理时间、请求数、错误率等。以下是指标</div> </li> <li><a href="/article/1835476983614631936.htm" title="Python开发常用的三方模块如下：" target="_blank">Python开发常用的三方模块如下：</a> <span class="text-muted">换个网名有点难</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Python是一门功能强大的编程语言，拥有丰富的第三方库，这些库为开发者提供了极大的便利。以下是100个常用的Python库，涵盖了多个领域：1、NumPy，用于科学计算的基础库。2、Pandas，提供数据结构和数据分析工具。3、Matplotlib，一个绘图库。4、Scikit-learn，机器学习库。5、SciPy，用于数学、科学和工程的库。6、TensorFlow，由Google开发的开源机</div> </li> <li><a href="/article/1835476350190841856.htm" title="ExpRe[25] bash外的其它shell：zsh和fish" target="_blank">ExpRe[25] bash外的其它shell：zsh和fish</a> <span class="text-muted">tritone</span> <a class="tag" taget="_blank" href="/search/ExpRe/1.htm">ExpRe</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>文章目录zsh基础配置实用特性插件`autojump`语法高亮自动补全fish优点缺点时效性本篇撰写时间为2021.12.15，由于计算机技术日新月异，博客中所有内容都有时效和版本限制，具体做法不一定总行得通，链接可能改动失效，各种软件的用法可能有修改。但是其中透露的思想往往是值得学习的。本篇前置：ExpRe[10]Ubuntu[2]准备神秘软件、备份恢复软件https://www.cnblogs</div> </li> <li><a href="/article/1835473957185220608.htm" title="网络编程基础" target="_blank">网络编程基础</a> <span class="text-muted">记得开心一点啊</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>目录♫什么是网络编程♫Socket套接字♪什么是Socket套接字♪数据报套接字♪流套接字♫数据报套接字通信模型♪数据报套接字通讯模型♪DatagramSocket♪DatagramPacket♪实现UDP的服务端代码♪实现UDP的客户端代码♫流套接字通信模型♪流套接字通讯模型♪ServerSocket♪Socket♪实现TCP的服务端代码♪实现TCP的客户端代码♫什么是网络编程网络编程，指网络上</div> </li> <li><a href="/article/1835469859710922752.htm" title="母亲节如何做小红书营销" target="_blank">母亲节如何做小红书营销</a> <span class="text-muted">美橙传媒</span> <div>小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品</div> </li> <li><a href="/article/1835466923974946816.htm" title="2021-01-24" target="_blank">2021-01-24</a> <span class="text-muted">9ce517ee104c</span> <div>【打卡素材】《香帅金融学讲义》【标题】公司治理：怎样同床异梦地过下去【日期】2021.1.24【字数】公司本质上是一连串的合约关系。降低合同执行中的各种摩擦是公司正常有效运行的基础。协同各方的利益、制衡各方的权力是关键。为解决利益冲突问题、协同各方利益，进行权力制衡的机制设计就是公司治理机制。001什么是公司治理治理是管理的基础，治理机制越好，权、责、利就越清晰，管理的目标也就会更容易实现。002</div> </li> <li><a href="/article/1835465261096988672.htm" title="如何在心上用功？" target="_blank">如何在心上用功？</a> <span class="text-muted">余超林AIA财富管家</span> <div>思考：如何在心上用功？学习心得：心-道-德-事的理解心-道-德-事这四部曲，本质上就是一个人的思维智慧的四个层面：事是最底层，这是所有人在这个社会谋求生存的基础，一个人能够把事情彻底做好，保质保量的完成，才会有真正的结果，但是这个层面要获得真正成功很困难，因为会做事的人很多，最终会出现恶性竞争；德是第三层，如果说整个社会做事的竞争激烈程度为100%，那么上升到德上的竞争激烈程度降低为80%，德是一</div> </li> <li><a href="/article/1835462485629562880.htm" title="白骑士的Java教学基础篇 2.5 控制流语句" target="_blank">白骑士的Java教学基础篇 2.5 控制流语句</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/%E6%95%99%E5%AD%A6/1.htm">教学</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘</div> </li> <li><a href="/article/110.htm" title="强大的销售团队背后 竟然是大数据分析的身影" target="_blank">强大的销售团队背后 竟然是大数据分析的身影</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>Mark Roberge是HubSpot的首席财务官，在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。 大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面，以重组弱点，增强优势。 Mark Roberge是美国HubSpot公司的首席财务官，HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析 </div> </li> <li><a href="/article/237.htm" title="Haproxy+Keepalived高可用双机单活" target="_blank">Haproxy+Keepalived高可用双机单活</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a><a class="tag" taget="_blank" href="/search/keepalived/1.htm">keepalived</a><a class="tag" taget="_blank" href="/search/haproxy/1.htm">haproxy</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%8F%AF%E7%94%A8/1.htm">高可用</a> <div>我们的应用MyApp不支持集群，但要求双机单活（两台机器：master和slave）： 1.正常情况下，只有master启动MyApp并提供服务 2.当master发生故障时，slave自动启动本机的MyApp，同时虚拟IP漂移至slave，保持对外提供服务的IP和端口不变 F5据说也能满足上面的需求，但F5的通常用法都是双机双活，单活的话还没研究过 服务器资源 10.7</div> </li> <li><a href="/article/364.htm" title="eclipse编辑器中文乱码问题解决" target="_blank">eclipse编辑器中文乱码问题解决</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/eclipse%E4%B9%B1%E7%A0%81/1.htm">eclipse乱码</a> <div>使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题，Eclipse提供了灵活的设置文件编码格式的选项，我们可以通过设置编码 格式解决乱码问题。在Eclipse可以从几个层面设置编码格式：Workspace、Project、Content Type、File 本文以Eclipse 3.3（英文）为例加以说明： 1. 设置Workspace的编码格式： Windows-&g</div> </li> <li><a href="/article/491.htm" title="基础篇--resources资源" target="_blank">基础篇--resources资源</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>最近一直在做java开发，偶尔敲点android代码，突然发现有些基础给忘记了，今天用半天时间温顾一下resources的资源。 String.xml 字符串资源 涉及国际化问题 http://www.2cto.com/kf/201302/190394.html string-array</div> </li> <li><a href="/article/618.htm" title="接上篇补上window平台自动上传证书文件的批处理问卷" target="_blank">接上篇补上window平台自动上传证书文件的批处理问卷</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div> @echo off : host=服务器证书域名或ip，需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称 set host=localhost set ou=localhost set o=localhost set password=123456 set validity=3650 set salias=s</div> </li> <li><a href="/article/745.htm" title="企业物联网大潮涌动：如何做好准备？" target="_blank">企业物联网大潮涌动：如何做好准备？</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A/1.htm">企业</a> <div>物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。 尽管物联网（IoT）还很新，企业架构师现在也应该为一个连接更加紧密的未来做好计划，而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域，而是哪些地方物联网没有在企业推进，” Gartner研究总监Mike Walker说。 Gartner预测到2020年物联网设备安装量将达260亿，这些设备在全</div> </li> <li><a href="/article/872.htm" title="spring学习——数据库（mybatis持久化框架配置）" target="_blank">spring学习——数据库（mybatis持久化框架配置）</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>Spring提供了一组数据访问框架，集成了多种数据访问技术。无论是JDBC，iBATIS(mybatis)还是Hibernate，Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。 mybatis是一种Spring持久化框架，要使用mybatis，就要做好相应的配置： 1，配置数据源。有很多数据源可以选择，如：DBCP，JDBC，aliba</div> </li> <li><a href="/article/999.htm" title="Java静态代理、动态代理实例" target="_blank">Java静态代理、动态代理实例</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Java%E9%9D%99%E6%80%81%E4%BB%A3%E7%90%86/1.htm">Java静态代理</a> <div> 采用Java代理模式，代理类通过调用委托类对象的方法，来提供特定的服务。委托类需要实现一个业务接口，代理类返回委托类的实例接口对象。 按照代理类的创建时期，可以分为：静态代理和动态代理。 所谓静态代理： 指程序员创建好代理类，编译时直接生成代理类的字节码文件。 所谓动态代理： 在程序运行时，通过反射机制动态生成代理类。 一、静态代理类实例： 1、Serivce.ja</div> </li> <li><a href="/article/1126.htm" title="Struts1与Struts2的12点区别" target="_blank">Struts1与Struts2的12点区别</a> <span class="text-muted">asia007</span> <a class="tag" taget="_blank" href="/search/Struts1%E4%B8%8EStruts2/1.htm">Struts1与Struts2</a> <div>1) 在Action实现类方面的对比：Struts 1要求Action类继承一个抽象基类；Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口，也可以实现其他接口，使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的，只有一个包含execute方法的P</div> </li> <li><a href="/article/1253.htm" title="初学者要多看看帮助文档 不要用js来写Jquery的代码" target="_blank">初学者要多看看帮助文档 不要用js来写Jquery的代码</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>解析json数据的时候需要将解析的数据写到文本框中, 出现了用js来写Jquery代码的问题; 1, JQuery的赋值 有问题 代码如下: data.username 表示的是: 网易 $("#use</div> </li> <li><a href="/article/1380.htm" title="经理怎么和员工搞好关系和信任" target="_blank">经理怎么和员工搞好关系和信任</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E5%9B%A2%E9%98%9F/1.htm">团队</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/%E7%AE%A1%E7%90%86/1.htm">管理</a> <div> 产品经理应该有坚实的专业基础，这里的基础包括产品方向和产品策略的把握，包括设计，也包括对技术的理解和见识，对运营和市场的敏感，以及良好的沟通和协作能力。换言之，既然是产品经理，整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂，如何让人信服？如何让自己懂？就是不断学习，不仅仅从书本中，更从平时和各种角色的沟通</div> </li> <li><a href="/article/1507.htm" title="如何为rich:tree不同类型节点设置右键菜单" target="_blank">如何为rich:tree不同类型节点设置右键菜单</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/contextMenu/1.htm">contextMenu</a><a class="tag" taget="_blank" href="/search/tree/1.htm">tree</a><a class="tag" taget="_blank" href="/search/Richfaces/1.htm">Richfaces</a> <div>组合使用target和targetSelector就可以啦，如下： <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}" selectionChangeListener=&qu</div> </li> <li><a href="/article/1634.htm" title="【Redis二】Redis2.8.17搭建主从复制环境" target="_blank">【Redis二】Redis2.8.17搭建主从复制环境</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>开始使用Redis2.8.17 Redis第一篇在Redis2.4.5上搭建主从复制环境，对它的主从复制的工作机制，真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的，Redis到了2.4.5这个版本，主从复制还做成那样，Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果，这次在Unbuntu上用官方支持的版本。 Ubuntu上安装Red</div> </li> <li><a href="/article/1761.htm" title="JSONObject转换JSON--将Date转换为指定格式" target="_blank">JSONObject转换JSON--将Date转换为指定格式</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/JSONObject/1.htm">JSONObject</a> <div>项目中，经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串，而JavaBean的属性有时候会有java.util.Date这个类型的时间对象，这时JSONObject默认会将Date属性转换成这样的格式： {"nanos":0,"time":-27076233600000,</div> </li> <li><a href="/article/1888.htm" title="JavaScript语言精粹读书笔记" target="_blank">JavaScript语言精粹读书笔记</a> <span class="text-muted">braveCS</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>【经典用法】： //①定义新方法 Function .prototype.method=function(name, func){ this.prototype[name]=func; return this; } //②给Object增加一个create方法，这个方法创建一个使用原对</div> </li> <li><a href="/article/2015.htm" title="编程之美-找符合条件的整数 用字符串来表示大整数避免溢出" target="_blank">编程之美-找符合条件的整数 用字符串来表示大整数避免溢出</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.LinkedList; public class FindInteger { /** * 编程之美 找符合条件的整数 用字符串来表示大整数避免溢出 * 题目：任意给定一个正整数N，求一个最小的正整数M(M>1)，使得N*M的十进制表示形式里只含有1和0 * * 假设当前正在搜索由0，1组成的K位十进制数</div> </li> <li><a href="/article/2142.htm" title="读书笔记" target="_blank">读书笔记</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>1、Struts访问资源 2、把静态参数传递给一个动作 3、<result>type属性 4、s:iterator、s:if c:forEach 5、StringBuilder和StringBuffer 6、spring配置拦截器 1、访问资源 (1)通过ServletActionContext对象和实现ServletContextAware,ServletReque</div> </li> <li><a href="/article/2269.htm" title="[通讯与电力]光网城市建设的一些问题" target="_blank">[通讯与电力]光网城市建设的一些问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a> <div> 信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系 我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........ </div> </li> <li><a href="/article/2396.htm" title="oracle 空间RESUMABLE" target="_blank">oracle 空间RESUMABLE</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E7%A9%BA%E9%97%B4%E4%B8%8D%E8%B6%B3/1.htm">空间不足</a><a class="tag" taget="_blank" href="/search/RESUMABLE/1.htm">RESUMABLE</a><a class="tag" taget="_blank" href="/search/%E9%94%99%E8%AF%AF%E6%8C%82%E8%B5%B7/1.htm">错误挂起</a> <div>空间RESUMABLE操作 转 Oracle从9i开始引入这个功能，当出现空间不足等相关的错误时，Oracle可以不是马上返回错误信息，并回滚当前的操作，而是将操作挂起，直到挂起时间超过RESUMABLE TIMEOUT，或者空间不足的错误被解决。 这一篇简单介绍空间RESUMABLE的例子。 第一次碰到这个特性是在一次安装9i数据库的过程中，在利用D</div> </li> <li><a href="/article/2523.htm" title="重构第一次写的线程池" target="_blank">重构第一次写的线程池</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0+python/1.htm">线程池 python</a> <div>最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类. 1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法 #!/usr/bin/env python # -*- coding:utf8 -*- </div> </li> <li><a href="/article/2650.htm" title="C语言学习六指针" target="_blank">C语言学习六指针</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>初识指针，简单示例程序： /* 指针就是地址，地址就是指针 地址就是内存单元的编号 指针变量是存放地址的变量 指针和指针变量是两个不同的概念 但是要注意： 通常我们叙述时会把指针变量简称为指针，实际它们含义并不一样 */ # include <stdio.h> int main(void) { int * p; // p是变量的名字， int * </div> </li> <li><a href="/article/2777.htm" title="yii2 beforeSave afterSave beforeDelete" target="_blank">yii2 beforeSave afterSave beforeDelete</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/delete/1.htm">delete</a> <div>public function afterSave($insert, $changedAttributes) { parent::afterSave($insert, $changedAttributes); if($insert) { //这里是新增数据 } else { //这里是更新数据 } } </div> </li> <li><a href="/article/2904.htm" title="timertask" target="_blank">timertask</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/timertask/1.htm">timertask</a> <div>java.util.Timer timer = new java.util.Timer(true); // true 说明这个timer以daemon方式运行（优先级低， // 程序结束timer也自动结束），注意，javax.swing // 包中也有一个Timer类，如果import中用到swing包， // 要注意名字的冲突。 TimerTask task = new</div> </li> <li><a href="/article/3031.htm" title="Spring Security（13）——session管理" target="_blank">Spring Security（13）——session管理</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E6%94%BB%E5%87%BB%E4%BF%9D%E6%8A%A4/1.htm">攻击保护</a><a class="tag" taget="_blank" href="/search/%E8%B6%85%E6%97%B6/1.htm">超时</a> <div>session管理 目录 1.1 检测session超时 1.2 concurrency-control 1.3 session 固定攻击保护 </div> </li> <li><a href="/article/3158.htm" title="公司项目NODEJS实践0.3[ mongo / session ...]" target="_blank">公司项目NODEJS实践0.3[ mongo / session ...]</a> <span class="text-muted">逐行分析JS源代码</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div> http://www.upopen.cn 一、前言 书接上回，我们搭建了WEB服务端路由、模板等功能，完成了register 通过ajax与后端的通信，今天主要完成数据与mongodb的存取，实现注册 / 登录 /</div> </li> <li><a href="/article/3285.htm" title="pojo.vo.po.domain区别" target="_blank">pojo.vo.po.domain区别</a> <span class="text-muted">LiaoJuncai</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/javabean/1.htm">javabean</a><a class="tag" taget="_blank" href="/search/domain/1.htm">domain</a> <div> POJO = "Plain Old Java Object"，是MartinFowler等发明的一个术语，用来表示普通的Java对象，不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色，也不实现任何特殊的Java框架的接口如，EJB， JDBC等等。 即POJO是一个简单的普通的Java对象，它包含业务逻辑</div> </li> <li><a href="/article/3412.htm" title="Windows Error Code" target="_blank">Windows Error Code</a> <span class="text-muted">OhMyCC</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足, 无法处理此命令. 9 存储控制块地址无效. 10 环境错误. 11 试图加载格式错误的程序. 12 访问码无效. 13 数据无效. 14 存储器不足, 无法完成此操作. 15 系</div> </li> <li><a href="/article/3539.htm" title="在storm集群环境下发布Topology" target="_blank">在storm集群环境下发布Topology</a> <span class="text-muted">roadrunners</span> <a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/storm/1.htm">storm</a><a class="tag" taget="_blank" href="/search/topology/1.htm">topology</a><a class="tag" taget="_blank" href="/search/spout/1.htm">spout</a><a class="tag" taget="_blank" href="/search/bolt/1.htm">bolt</a> <div>storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中，通过storm的管理命令来发布和管理集群中的topology。 1、打包 打包插件是使用maven提供的maven-shade-plugin，详细见maven-shade-plugin。 <plugin> <groupId>org.apache.maven.</div> </li> <li><a href="/article/3666.htm" title="为什么不允许代码里出现“魔数”" target="_blank">为什么不允许代码里出现“魔数”</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> 在一个新项目中，我最先做的事情之一，就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范，以及避免通过静态代码分析就能够检测到的bug。 迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告，除了-1、0、1和2。 很多开发者在这个检查方面都有问题，这可以从结果</div> </li> <li><a href="/article/3793.htm" title="zoj 3511 Cake Robbery(线段树)" target="_blank">zoj 3511 Cake Robbery(线段树)</a> <span class="text-muted">阿尔萨斯</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%AE%B5%E6%A0%91/1.htm">线段树</a> <div> 题目链接：zoj 3511 Cake Robbery 题目大意：就是有一个N边形的蛋糕，切M刀，从中挑选一块边数最多的，保证没有两条边重叠。 解题思路：有多少个顶点即为有多少条边，所以直接按照切刀切掉点的个数排序，然后用线段树维护剩下的还有哪些点。 #include <cstdio> #include <cstring> #include <vector&</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>