TeresaL JL

初识HTML,CSS

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字，图片，视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体，颜色变化，或为标题加入背景图片，边框等。所有这些用来改变内容外观的东西称之为表现。

3. J avaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用的的JavaScript来实现的。

（一）HTML介绍（超文本标记语言）

标题：
标题
段落标签：
文字
图片：img标签，
标签之间可以嵌套，顺序要保持一致，比如

......
HTML标签不区分大小写，一般小写
结构：：指根标签，所有的标签都要在中

... ：定义文档头部，所有头部元素的容器

... ：之间是网页主要内容，如

等

网页标题信息</ title>，出现在浏览器的标题栏中.title 标签要在<head> </ head>之间。</li> <li>代码注释：<！ - 注释文字 - ></li> </ol> （二）标签（第一部分） <ol> <li><body>标签，内容主体 <body> </ body> （成对）</li> <li>标签，段落 （成对）</li> <li><HX>标签，标题级别 <H1> <H2> <H3> <H4> <H5> <H6>。<H1>最高级别 （X为1-6）</li> </ol> 4. ，强调语气，：斜体; ：粗体（成对） 5. 标签，文字设置 单独样式 文本 （成对） 6. <q>标签，短文本引用<q>引用文本</ q> （成对） 7. <blockquote>标签，长文本引用<blockquote>长文本引用</ blockquote>去除双引号 （成对） 8. 标签，分行显示文本 空标签，只写开始。最后一句文本内容后面不需要加 9. 空格 标签 注意加上分号 10. <hr>标签，用于分隔的横线<hr /> 空标签，只写开始。默认样式：线条粗，颜色为灰色 11. <address>标签，联系地址信息，或者定义一个地址，比如（电子邮件地址，签名，文档的作者身份）<地址>联系地址信息</ address> （成对） 12. <code>标签，加入一行代码<code>代码语言</ code> （成对） 13. <pre>标签，加入大段代码<pre>语言代码段</ pre> （成对） 预格式化文本，被包含在预元素中的文本通常会保留空格和换行符。 （三）标签（第二部分） <ol> <li><ul>标签，添加信息列表; ul-li标签，没有前后顺序的信息列表。（成对）</li> </ol> <UL> <LI>信息</ LI> <LI>信息</ LI> ...... </ UL> <ol> <li><ol>标签，制作有序列表; ol-li标签，有前后顺序。 （成对） </li> </ol> <OL> <LI>信息</ LI> <LI>信息</ LI> ...... </OL> <OL>在网页中显示的默认样式一般为：每项<LI>前都自带一个序号，序号默认从1开始。 <ol> <li><div>标签，把一些独立的逻辑部分划分出来，相当于一个容器。 （成对） </li> </ol> <DIV> ... </ DIV> <ol> <li>给<div>命名，用id属性 <div id =“版块名称”> ... </ div> </li> <li><表>标签，网页上的表格;创建表格的4个元素：表，TBODY，TR，TH，TD </li> </ol> （成对） <ul> <li><table> ... </ table>：整个表格以<table>标记开始，</ table>标记结束。 </li> <li><tbody> ... </ tbody>：加上<thead> <tbody> <tfooter>这些表格结构，可以优先显示。（通俗理解表可以按结构一块块的显示，不用等整个表格加载完后显示。）</li> <li><tr> ... </ tr>：表格的一行，所以有几对tr表格就有几行。</li> <li><TD> ... </ TD>：表格的一个单元格，一行中包含几对<TD> ... </ TD>，说明一行中就有几列。</li> <li><TH> ... </次>：表格的头部的一个单元格，表格表头。</li> <li>表格中列的个数，取决于一行中数据单元格的个数。</li> </ul> A. table表格在没有添加css样式之前，在浏览器中显示是没有表格线的 B. 表头，也就是个中标签的字幕：默认为粗体并且居中显示 6.css样式，为表格加入边框 <style type =“text / css”> 表TR TD，第{边界：1px的固体＃000;} 粗细为1像素个的黑色边框 </样式> 7. <caption>标签，为表格添加标题和摘要 （摘要的内容不会在浏览器显示出来） <table summary =“表格简介文本”> 标题：表格上方（描述表格内容） <tr> <caption>标题文本</caption> <TR> <TD> ... </ TD> <TD> ... </ TD> ... </ TR> ... </ TABLE> （四）标签（第三部分） <ol> <li><A>标签，链接到另一个页面，实现超链接;</li> </ol> <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 例如：<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a> 上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。 title标题属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。 <A>标签在默认情况下，的链接|网页的英文在当前浏览器窗口显示中打开。 2. 在新建浏览器窗口打开链接。 <a href="目标网址" target="_blank">click here!</a> 3. 使用mailto在网页中链接Email地址，<a>标签还有一个作用是可以链接Email地址 注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。 <a href=“mailto:邮件地址?cc=邮件地址&bcc=邮件地址&subject=主题&body=邮件内容”>发送</a> 4. <IMG>标签，为网页插入图片 <img src =“图片地址”alt =“下载失败时的替换文本”title =“提示文本”> <ul> <li>SRC：标识图像的位置;</li> <li>ALT：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本;</li> <li>标题：提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）;</li> <li>图像可以是GIF，PNG，JPEG格式的图像文件。</li> </ul> （五）表单标签 <ol> <li>HTML表单（形式），与用户进行交互，把浏览者输入的数据传送到服务器端。</li> </ol> <form method =“传送方式”action =“服务器文件”> <ul> <li><form>：<form>标签是成对出现的，以<form>开始，以</ form>结束。</li> <li>action：浏览者输入的数据被传送到的地方，比如一个PHP页面（save.php）。</li> <li>方法：数据传送的方式（get / post）。</li> </ul> 所有表单控件（文本框，文本域，按钮，单选框，复选框等）都必须放在<form> </ form>标签之间 2.文本输入框，密码输入框 <FORM> <input type =“text / password”name =“名称”value =“文本”/> </ FORM> <ul> <li>type：</li> </ul> 当type= “text” 时，输入框为文本输入框; 当type =“password”时，输入框为密码输入框。 <ul> <li>name：为文本框命名，以备后台程序ASP，PHP使用。</li> <li>value：为文本输入框设置默认值。（一般起到提示作用）</li> </ul> 例如： <form> 姓名： <input type =“text”name =“myName”> 密码： <input type =“password”name =“pass”> </ FORM> 3.文本域，支持多行文本输入 <textarea rows =“行数”cols =“列数”>文本</ textarea> （成对） <ul> <li>cols：多行输入域的列数。</li> <li>rows：多行输入域的行数。</li> <li>在<textarea>的</ textarea>的标签之间可以输入默认值。</li> </ul> 4.使用单选框，复选框，让用户选择 <input type="radio/checkbox" value="值" name="名称" checked="checked"/> <ul> <li>type:</li> </ul> 当 type="radio" 时，控件为单选框 当 type="checkbox" 时，控件为复选框 <ul> <li>value：提交数据到服务器的值（后台程序PHP使用）</li> <li>name：为控件命名，以备后台程序 ASP、PHP 使用</li> <li>checked：当设置 checked="checked" 时，该选项被默认选中</li> </ul> 同一组的单选按钮，name 取值一定要一致 5.使用下拉列表框，节省空间 <ul> <li>value<a href="http://img.e-com-net.com/image/info8/4dd1583370ee43febe76ac58479034af.jpg" target="_blank"><img alt="初识HTML,CSS_第1张图片" class="has" height="165" src="http://img.e-com-net.com/image/info8/4dd1583370ee43febe76ac58479034af.jpg" width="503" style="border:1px solid black;"></a></li> </ul> <ul> <li>选select=“selected”：</li> </ul> 设置selected= “selected”属性，该则就选项对话被默认选中。 6.使用下拉列表框进行多选，在<选select>标签中设置multiple= “multiple”属性，就可以实现多选功能 <select mutiple =“mutiple”> 进行多选时，Ctrl +单击，选择多个选项 7.使用提交按钮，提交数据 <input type =“submit”value =“提交”> <ul> <li>type：只有当type值设置为submit时，按钮才有提交作用</li> <li>value：按钮上显示的文字</li> </ul> 例如： <form method =“post”action =“save.php”> <label for =“myName”>姓名：</ label> <input type =“text”value =“”name =“myName”/> <input type =“submit”value =“提交”name =“submitBtn”/> </ FORM> 8.使用重置按钮，重置表单信息 <input type =“reset”value =“重置”> 9.<label>标签，在标签标签内点击文本，就会触发此控件。 <ul> <li>type：只有当type设置为reset时，才有按钮重置作用 </li> <li>value：按钮上显示的文字</li> </ul> <label for =“控件id名称”> 注意：标签的属性中的值应当与相关控件的id属性值一定要相同。 （六）CSS，为网页添加样式（Cascading Style Sheets） <ol> <li>p {</li> </ol> font-size：12px; color:red font-weight：bold; } 2. 优势，把要设置的文本用 括起来，写入代码 span{ color:red } 3. 代码语法，CSS由样式选择符组成，而声明又由属性和值组成 <a href="http://img.e-com-net.com/image/info8/aa4553e078c244e7b46d511ceb154d17.jpg" target="_blank"><img alt="初识HTML,CSS_第2张图片" class="has" height="117" src="http://img.e-com-net.com/image/info8/aa4553e078c244e7b46d511ceb154d17.jpg" width="303" style="border:1px solid black;"></a> p{font-size:12px;color:red;} 或 p{ font-size:12px; color:red; } 4.CSS注释代码 / 注释语句 / （七）CSS样式基本知识 1. 内联式 CSS样式，直接写在现有的HTML标签中 内联式：css样式表就是把css代码直接写在现有的HTML标签中，如：这里文字是红色。 要写在风格= “” 双引号中，多条的话中间用分号隔开，如： 这里文字是红色。 2. 嵌入式 CSS样式，写在当前的文件中 嵌入式的CSS样式，就是可以把CSS样式代码写在 <style type =“text / css”> </ style>标签之间，如： <style type =“text / css”> span{ color:red; } </style> 3. 外部式的CSS样式，写在单独的一个文件中 外部式：把CSS代码写一个单独的外部文件中，以的CSS为扩展名，在<HEAD>内（不是在<style>标签内）使用的<link>标签将CSS样式文件链接到HTML文件内 <link href =“base.css”rel =“stylesheet”type =“text / css”/> <ul> <li>css样式文件名称以有意义的英文字母命名，如main.css。</li> <li>rel =“stylesheet”type =“text / css”是固定写法不可修改。</li> <li><link>标签位置一般写在<HEAD>标签之内。</li> </ul> 4.优先级：内联式>嵌入式>外部式 嵌入式>外部式，有一个前提：嵌入式css样式的位置一定在外部式的后面，如<link href =“style.css”...>代码在<style type =“text / css”>。 .. </style>代码的前面（实际开发中也是这么写的） （八）CSS选择器 1.选择器：每一条的CSS样式声明（定义）由两部分组成 选择器{ 样式， } 2.标签选择器; HTML代码中的标签 p{font-size:12px;line-height:1.6em;} 为p标签设置12px的字号，行间距设置1.6em的样式。 3.类选择器 。类选器名称{CSS样式代码;} 注意： <ul> <li>英文圆点开头</li> <li>其中类选器名称可以任意起名（但不要起中文）</li> </ul> 使用方法： 第一步：使用合适的标签把要修饰的内容标记起来，如下： 胆小如鼠 第二步：使用class= “类选择器名称”为标签设置一个类，如下： 胆小如鼠 第三步：设置类选器的CSS样式，如下： .stress{color:red;}/类前面要加入一个英文圆点/ 4.ID选择器 5.类和ID选择器的区别 <ul> <li>为标签设置ID = “ID名称”，而不是class= “类名称”。</li> <li>ID选择符的前面是井号（＃）号，而不是英文圆点（.）</li> </ul> 相同点：可以应用于任何元素; 不同点： 6.子选择器：大于符号（>），用于选择指定标签元素的第一代子元素。 <ul> <li>ID选择器只能在文档中使用一次，仅一次</li> <li>可以使用类选择器词列表方法为一个元素同时设置多个样式。（不能使用ID词列表）</li> </ul> .food> li {border：1px solid red;} 7. 包含（后代）选择器，包含选择器，即加入空格，用于选择指定标签元素下的后辈元素。 .first span {color：red;} 子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“ > ”进行选择。 8. 通用选择器：使用一个（）号指定，它的作用是匹配的html中所有标签元素，功能最强大 {color:red;} 9.伪类选择符：允许给HTML不存在的标签（标签的某种状态）设置样式，比如说我们给HTML一个中标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color:red;} 为标签鼠标滑过的状态设置字体颜色变红。 10. 分组选择符：为HTML中多个标签元素设置同一个样式（，） h1，span {color：red;} 相当于 h1{color:red;} span{color:red;} （九）CSS的继承，层叠和特殊性 <ol> <li>继承：允许样式不仅应用于某个特定的HTML标签元素，而且应用于其后代。</li> </ol> p{color:red;} <三年级时，我还是一个胆小如鼠的小女孩。 border：1px solid red;不具有继承性 2. 特殊性：浏览器是根据权值来判断使用哪种CSS样式的，权值高的就使用哪种CSS样式。 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 p {color：red;} / 权值为1 / p span {color：green;} / 权值为1 + 1 = 2 / .warning {color：white;} / 权值为10 / p span.warning {color：purple;} / 权值为1 + 1 + 10 = 12 / #footer .note p {color：yellow;} / 权值为100 + 10 + 1 = 111 / 继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。 3. 层叠：在HTML文件中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS的样式前后顺序来决定，处于求最后面的CSS样式会被应用。 内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）。 4.. 重要性：!important p{color:red!important;} p{color:green;} 三年级时，我还是一个胆小如鼠的小女孩。 这时p段落中的文本会显示的red红色 注意：!important要写在分号的前面 （十）CSS格式化排版 <ol> <li>文字排版 - 字体</li> </ol> body{font-family:"宋体";} 一般字体：微软雅黑，如body {font-family：“Microsoft Yahei”;}或body {font-family：“微软雅黑”;} 2. 文字排版 - 字号，颜色 body{font-size:12px;color:#666} 3. 文字排版 - 粗体 p span {font-weight：bold;}粗体 4. 文字排版 - 斜体 p a{font-style:italic;} 5. 文字排版 - 下划线 p a{text-decoration:underline;} 6. 文字排版 - 删除线 .oldPrice{text-decoration:line-through;} 7. 段落排版 - 缩进 p {text-indent：2em;} 2em的意思就是文字的2倍大小。 8. 段落排版 - 行间距（行高）line-height p{line-height:1.5em;} 9. 段落排版 - 中文字间距，字母间距 <ul> <li> letter-spacing（设置字母与字母之间的间距）</li> <li>word-spacing （设置英文单词之间的间距）</li> </ul> 文本对齐（中心，左，右） 10. 段落排版--对齐 text-align （center，left，right） <h3 style="margin-left:0pt;">（十一）CSS盒模型</h3> 1.元素分类 HTML中的标签元素大体被分为三种不同的类型：块状元素，内联元素（又叫行内元素）和 内联块状元素 <ul> <li>常用的块状元素有：</li> </ul> <div>，，<h1> ... <h6>，<ol>，<ul>，<dl>，<table>，<address>，<blockquote>，<form> <ul> <li>常用的内联元素有：</li> </ul> <a>、、 、、、、<label>、<q>、<var>、<cite>、<code> <ul> <li>常用的内联块状元素有：<img>，<input></li> </ul> <ol> <li>元素分类- 块级元素</li> </ol> 在html中<div>，，<h1>，<form>，<ul>和<li>就是块级元素。 display：block，将元素显示为块级元素 a {display：block;}，将元素显示为块级元素。将内联元素a转换为块状元素，从而使元素具有块状元素特点。 块级元素特点： 3. 元素分类- 内联元素 <ul> <li>每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）</li> <li>元素的高度，宽度，行高以及顶和底边距都可设置。</li> <li>元素宽度在不设置的情况下，是它本身父容器的100％（和父元素的宽度一致），除非设定一个宽度。</li> </ul> 在html中，，<a>，<label>， 和就是典型的内联元素（行内元素）（inline）元素。 display:inline，将元素设置为内联元素 div{ display:inline; } ...... <div>我要变成内联元素</div> 将块状元素div转换为内联元素，从而使div元素具有内联元素特点。 内联元素特点： 4. 元素分类- 内联块状元素 <ul> <li>和其他元素都在一行上;</li> <li>元素的高度，宽度及顶部和底部边距不可设置;</li> <li>元素的宽度就是它包含的文字或图片的宽度，不可改变。</li> </ul> 内联块状元素（inline-block）：同时具备内联元素，块状元素的特点 display:inline-block，将元素设置为内联块状元素。 （CSS2.1新增），<IMG>，<input>标签就是这种内联块状标签。 inline-block元素特点： 5. 盒模型 - 边框（一） <ul> <li>和其他元素都在一行上;</li> <li>元素的高度，宽度，行高以及顶和底边距都可设置。</li> </ul> 模型盒子的边框就是围绕关系着内容及补白的线，条这线你可以设置它的粗细，样式和 颜色（边框三个属性）。 div{ border:2px solid red; } 或 div{ border-width:2px; border-style:solid; border-color:red; } 为div来设置边框粗细为2px，样式为实心的，颜色为红色的边框 注意： <ul> <li>border-style（边框样式）常见样式有：</li> </ul> dashed（虚线）| dotted（点线）| solid（实线）。 <ul> <li>border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。</li> <li>border-width（边框宽度）中的宽度也可以设置为：</li> </ul> thin | medium | thick（但不是很常用），最常还是用像素（px）。 6. 盒模型 - 边框（二） div {border-bottom：1px solid red;} 为p标签单独设置下边框，而其它三边都不设置边框样式 7. 盒模型 - 宽度和高度 <ul> <li>border-top:1px solid red;</li> <li>border-right:1px solid red; </li> <li>border-left:1px solid red;</li> </ul> css内定义的宽（width）和高（height），指的是填充以里的内容范围。 元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 <a href="http://img.e-com-net.com/image/info8/7e11f5aad2aa4dcd882237418b9dd6ab.jpg" target="_blank"><img alt="初识HTML,CSS_第3张图片" class="has" src="http://img.e-com-net.com/image/info8/7e11f5aad2aa4dcd882237418b9dd6ab.jpg" width="557" height="259" style="border:1px solid black;"></a> css代码 div{ width:200px; padding:20px; border:1px solid red; margin:10px; } html代码 <body> <div>文本内容</div> </body> <a href="http://img.e-com-net.com/image/info8/9afaea4312034df985b474133e5e7528.png" target="_blank"><img alt="初识HTML,CSS_第4张图片" class="has" src="http://img.e-com-net.com/image/info8/9afaea4312034df985b474133e5e7528.png" width="430" height="350" style="border:1px solid black;"></a> 元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px 8. 盒模型 - 填充 元素内容与边框之间是可以设置距离的，称之为“ 填充 ”。填充也可分为上，右，下，左（顺时针） div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; } 9. 盒模型 - 边界 <ul> <li>div{padding:10px;} ---上、右、下、左的填充都为10px;</li> <li>div{padding:10px 20px;}---上下填充一样为10px，左右一样为20px</li> </ul> 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。 div{margin:20px 10px 15px 30px;} 或 div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px; } <ul> <li>div{ margin:10px;}---上右下左的边界都为10px；</li> <li>div{ margin:10px 20px;}---上下边界一样为10px，左右一样为20px</li> </ul> padding和margin的区别，padding在边框里，margin在边框外。 <h3> </h3> <h3>（十二）CSS布局模型</h3> 1.css布局模型 在网页中，元素有三种布局模型： <ol> <li>流动模型（Flow）</li> <li>浮动模型 (Float)</li> <li>层模型（Layer）</li> </ol> 2. 流动模型 流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 特征： <ol> <li>块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。</li> <li>在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）</li> </ol> 3. 浮动模型 设置元素浮动，让两个块状元素并排显示。任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动 div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div> div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;} ---两个元素一左一右实现一行 4. 层模型 三种形式： 5. 绝对定位 <ul> <li>绝对定位（position：absolute）</li> <li>相对定位（position：relative）</li> <li>固定定位（position：fixed）</li> </ul> position：absolute（表示绝对定位） 将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div> 可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 6. 相对定位 position:relative（表示相对定位） 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div> 实现相对于以前位置向下移动50px，向右移动100px; 偏移前的位置保留不动： <body> <div id="div1"></div>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置 </body> 7. 层模型--固定定位 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。它不会随浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。 与background-attachment:fixed;属性功能相同。 #div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 .... 以上代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。 8. Relative与Absolute组合使用 1）参照定位的元素必须是相对定位元素的前辈元素： <pre class="has"><code class="language-html"><div id="box1"> <div id="box2">相对参照元素进行定位</div> </div></code></pre> box1是box2的父元素（父元素当然也是前辈元素了）。 2）参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3）定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } box2可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。 <h3> </h3> <h3>（十三）CSS代码缩写，占用更少的带宽</h3> 1. 盒模型代码简写 margin:10px 15px 12px 14px;/上设置为10px、右设置为15px、下设置为12px、左设置为14px/ 1）如果top、right、bottom、left的值相同，则margin:10px 10px 10px 10px; 可缩写为---margin:10px; 2）如果top和bottom值相同、left和 right的值相同，则 margin:10px 20px 10px 20px; 可缩写为---margin:10px 20px; 3）如果left和right的值相同，则 margin:10px 20px 30px 20px; 可缩写为---margin:10px 20px 30px; 注意：padding、border的缩写方法和margin是一致的。 2. 颜色值缩写 当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。 比如，p{color:#000000;} 可缩写为--p{color: #000;} ， p{color: #336699;} 可缩写为---p{color: #369;} 3. 字体缩写 body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; } 注意： 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。 一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用： body{ font:12px/1.5em "宋体",sans-serif; } <h3> </h3> <h3>（十四）单位和值</h3> 1. 颜色值 字体颜色（color）、背景颜色（background-color）、边框颜色（border） 1）英文命令颜色 ---- p{color:red;} 2）RGB颜色：由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如： p{color:rgb(20%,33%,25%);} 3）十六进制颜色 原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff p{color:#00ffff;} 2. 长度值 目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。 1）、像素 像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。 2）、em 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码： p{font-size:12px;text-indent:2em;} 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。 下面注意一个特殊情况： 但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码： html: 以这个例子为例。 css: p{font-size:14px} span{font-size:0.8em;} 结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。 3）、百分比 p{font-size:12px;line-height:130%} 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。 <h3> </h3> <h3>（十五） css样式设置小技巧</h3> 1.水平居中设置-行内元素 分两种情况：行内元素 跟 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码： html代码： <body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body> css代码： <style> .txtCenter{ text-align:center; } </style> 2. 水平居中设置-定宽块状元素 当被设置元素为 块状元素 时，用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。 定宽块状元素：块状元素的宽度width为固定值。 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。如设置 div 这个块状元素水平居中： html代码： <body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body> css代码： <style> div{ border:1px solid red;/为了显示居中效果明显为 div 设置了边框/ width:200px;/定宽/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto / } </style> 也可以写成： margin-left:auto; margin-right:auto; 注意：元素的“上下 margin” 是可以随意设置的。 3. 水平居中总结-不定宽块状元素方法（一） 不定宽块状元素：块状元素的宽度width不固定。 不定宽度的块状元素有三种方法居中 1）加入 table 标签 2）设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置 3) 设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的 加入 table 标签 利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。 第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。 如下： html代码： <div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div> css代码： <style> table{ border:1px solid; margin:0 auto; } </style> 4. 水平居中总结-不定宽块状元素方法（二） 改变元素的display类型为行内元素，利用其属性直接设置。 第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。如: html代码： <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css代码： <style> .container{ text-align:center; } / margin:0;padding:0（消除文本与div边框之间的间隙）/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } / margin-right:8px（设置li文本之间的间隔）/ .container li{ margin-right:8px; display:inline; } </style> 优势: 不用增加无语义标签 缺点：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。 5. 水平居中总结-不定宽块状元素方法（三） 设置浮动和相对定位来实现。 方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。 理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。 代码如下： <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css代码： <style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style> 6. 垂直居中-父元素高度确定的单行文本 分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。 line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。 这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。 如下代码： <div class="container"> hi,imooc! </div> css代码： <style> .container{ height:100px; line-height:100px; background:#999; } </style> 7. 垂直居中-父元素高度确定的多行文本（方法一） 父元素高度确定的多行文本、图片等的竖直居中的方法有两种： 方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。 css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子： html代码： <body> <table><tbody><tr><td class="wrap"> <div> 看我是否可以居中。 </div> </td></tr></tbody></table> </body> css代码： table td{height:500px;background:#ccc} 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。 8. 垂直居中-父元素高度确定的多行文本（方法二） 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。 html代码： <div class="container"> <div> 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 </div> </div> css代码： <style> .container{ height:300px; background:#ccc; display:table-cell;/IE8以上及Chrome、Firefox/ vertical-align:middle;/IE8以上及Chrome、Firefox/ } </style> 好处：不用添加多余的无意义的标签 缺点：不兼容 IE6、7，而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。 9. 隐性改变display类型 为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一： 1.职位：绝对 2. float：left或float：right 简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以显示：inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，御姐默认宽度不占满父元素。 如下面的代码，标签是行内元素，设置它的宽度是没有效果的，但是设置为position：absolute以后，就可以了。 <div class =“container”> <a href="#" title="">进入课程请单击这里</a> </ div> CSS代码 <style> .container a { position：absolute; 宽度：200像素; 背景：#CCC; } </ style> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1572531030718496768"></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/1835512809883004928.htm" title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a> Tracy的小书斋 <div>本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便</div> </li> <li><a href="/article/1835510025561403392.htm" title="《投行人生》读书笔记" target="_blank">《投行人生》读书笔记</a> 小蘑菇的树洞 <div>《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <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/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <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/1835507248395284480.htm" title="【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a> 广龙宇 <a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分</div> </li> <li><a href="/article/1835505858444881920.htm" title="git常用命令笔记" target="_blank">git常用命令笔记</a> 咩酱-小羊 <a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"youremail@example.com"基本操作克隆远程仓库gitclone查看</div> </li> <li><a href="/article/1835502282603589632.htm" title="509. 斐波那契数(每日一题)" target="_blank">509. 斐波那契数(每日一题)</a> lzyprime <div>lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+</div> </li> <li><a href="/article/1835500750684385280.htm" title="拥有断舍离的心态，过精简生活--《断舍离》读书笔记" target="_blank">拥有断舍离的心态，过精简生活--《断舍离》读书笔记</a> 爱吃丸子的小樱桃 <div>不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <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> STU学生网页设计 <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> 柚子_b4b4 <div>高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <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> 二挡起步 <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/1835495770502033408.htm" title="Day17笔记-高阶函数" target="_blank">Day17笔记-高阶函数</a> ~在杰难逃~ <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab</div> </li> <li><a href="/article/1835495644123459584.htm" title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</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/%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/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <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> 小猿L <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> 墨染丶eye <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/1835484293607026688.htm" title="【Git】常见命令(仅笔记)" target="_blank">【Git】常见命令(仅笔记)</a> 好想有猫猫 <a class="tag" taget="_blank" href="/search/Git/1.htm">Git</a><a class="tag" taget="_blank" href="/search/Linux%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">Linux学习笔记</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"123123@qq.c</div> </li> <li><a href="/article/1835469862235893760.htm" title="为什么你总是对下属不满意?" target="_blank">为什么你总是对下属不满意?</a> ZhaoWu1050 <div>【ZhaoWu的听课笔记】大多数公司，都存在两种问题。我创业四年，更是体会深切。这两种问题就是：老板经常不满意下属的表现；下属总是不知道老板想要什么；虽然这两种问题普遍存在，其实解决方法并不复杂。这节课，我们再聊聊第一个问题：为什么老板经常不满意下属表现?其实，这背后也是一条管理常识。管理学家德鲁克先生早就说过：管理者的任务，不是去改变人。来自《卓有成效的管理者》只是大多数老板和我一样，都是一边</div> </li> <li><a href="/article/1835469859710922752.htm" title="母亲节如何做小红书营销" target="_blank">母亲节如何做小红书营销</a> 美橙传媒 <div>小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品</div> </li> <li><a href="/article/1835466664725016576.htm" title="读书笔记|《遇见孩子，遇见更好的自己》5" target="_blank">读书笔记|《遇见孩子，遇见更好的自己》5</a> 抹茶社长 <div>为人父母意味着放弃自己的过去，不要对以往没有实现的心愿耿耿于怀，只有这样，孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立，唯有这样，孩子才会成为孩子，父母才会成其为父母。有耐心的人生往往更幸福，给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备，教会孩子控制情绪。了解自己的底线，说到底线，有一点很重要，父母之所以发脾气，真正的原因往往在于他们自己，</div> </li> <li><a href="/article/1835463622344667136.htm" title="基于Python给出的PDF文档转Markdown文档的方法" target="_blank">基于Python给出的PDF文档转Markdown文档的方法</a> 程序媛了了 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>注：网上有很多将Markdown文档转为PDF文档的方法，但是却很少有将PDF文档转为Markdown文档的方法。就算有，比如某些网站声称可以将PDF文档转为Markdown文档，尝试过，不太符合自己的要求，而且无法保证文档没有泄露风险。于是本人为了解决这个问题，借助GPT（能使用GPT镜像或者有条件直接使用GPT的，反正能调用GPT接口就行）生成Python代码来完成这个功能。笔记、代码难免存在</div> </li> <li><a href="/article/1835460528621842432.htm" title="语文主题教学学习笔记之87" target="_blank">语文主题教学学习笔记之87</a> 东哥杂谈 <div>“语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细</div> </li> <li><a href="/article/1835451142843232256.htm" title="Armv8.3 体系结构扩展--原文版" target="_blank">Armv8.3 体系结构扩展--原文版</a> 代码改变世界ctw <a class="tag" taget="_blank" href="/search/ARM-TEE-Android/1.htm">ARM-TEE-Android</a><a class="tag" taget="_blank" href="/search/armv8/1.htm">armv8</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%E6%9E%B6%E6%9E%84/1.htm">arm架构</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E6%9E%B6%E6%9E%84/1.htm">安全架构</a><a class="tag" taget="_blank" href="/search/%E8%8A%AF%E7%89%87/1.htm">芯片</a><a class="tag" taget="_blank" href="/search/Trustzone/1.htm">Trustzone</a><a class="tag" taget="_blank" href="/search/Secureboot/1.htm">Secureboot</a> <div>快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835446687758381056.htm" title="阅读《认知觉醒》读书笔记" target="_blank">阅读《认知觉醒》读书笔记</a> 就看看书 <div>本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑</div> </li> <li><a href="/article/1835441611320946688.htm" title="阅读笔记：阅读方法中的逻辑和转念" target="_blank">阅读笔记：阅读方法中的逻辑和转念</a> 施吉涛 <div>聊聊一些阅读的方法论吧，别人家的读书方法刚开始想写，然后就不知道写什么了，因为作者写的非常的“精致”我有一种乡巴佬进城的感觉，看到精美的摆盘，精致的食材不知道该如何下口也就是《阅读的方法》，我们姑且来试一下强劲的大脑篇，第一节：逻辑通俗的来讲，也就是表达的排列和顺序，再进一步就是因果关系和关联实际上书已经看了大概一遍，但直到打算写一下笔记的时候，才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/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> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：秒杀系统应该考虑的问题二：秒杀系统的设计和技术方案三：</div> </li> <li><a href="/article/107.htm" title="web报表工具FineReport常见的数据集报错错误代码和解释" target="_blank">web报表工具FineReport常见的数据集报错错误代码和解释</a> 老A不折腾 <a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a><a class="tag" taget="_blank" href="/search/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B7%A5%E5%85%B7/1.htm">可视化工具</a> <div>在使用finereport制作报表，若预览发生错误，很多朋友便手忙脚乱不知所措了，其实没什么，只要看懂报错代码和含义，可以很快的排除错误，这里我就分享一下finereport的数据集报错错误代码和解释，如果有说的不准确的地方，也请各位小伙伴纠正一下。 NS-war-remote=错误代码\:1117 压缩部署不支持远程设计 NS_LayerReport_MultiDs=错误代码</div> </li> <li><a href="/article/234.htm" title="Java的WeakReference与WeakHashMap" target="_blank">Java的WeakReference与WeakHashMap</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%B1%E5%BC%95%E7%94%A8/1.htm">弱引用</a> <div>首先看看 WeakReference wiki 上 Weak reference 的一个例子： public class ReferenceTest { public static void main(String[] args) throws InterruptedException { WeakReference r = new Wea</div> </li> <li><a href="/article/361.htm" title="Linux——（hostname）主机名与ip的映射" target="_blank">Linux——（hostname）主机名与ip的映射</a> eksliang <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/hostname/1.htm">hostname</a> <div>一、什么是主机名无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。但IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的；主机名是用于什么的呢？答：在一个局域网中，每台机器都有一个主</div> </li> <li><a href="/article/488.htm" title="oracle 常用技巧" target="_blank">oracle 常用技巧</a> 18289753290 <div>oracle常用技巧 ①复制表结构和数据 create table temp_clientloginUser as select distinct userid from tbusrtloginlog ②仅复制数据如果表结构一样 insert into mytable select &nb</div> </li> <li><a href="/article/615.htm" title="使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException" target="_blank">使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException</a> 酷的飞上天空 <a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a> <div>有一个线上环境使用的是c3p0数据库，为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现 com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou</div> </li> <li><a href="/article/742.htm" title="IT系统分析师如何学习大数据" target="_blank">IT系统分析师如何学习大数据</a> 蓝儿唯美 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢？学习大数据的最佳方法就是先从了解信息系统是如何工作着手，尤其是数据库和基础设施。同样在开始前还需要了解大数据工具，如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能</div> </li> <li><a href="/article/869.htm" title="spring学习——简介" target="_blank">spring学习——简介</a> a-john <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring是一个开源框架，是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发，从简单性，可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security 为了降低Java开发的复杂性，</div> </li> <li><a href="/article/996.htm" title="自定义颜色的xml文件" target="_blank">自定义颜色的xml文件</a> aijuans <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div><?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &</div> </li> <li><a href="/article/1123.htm" title="运营到底是做什么的？" target="_blank">运营到底是做什么的？</a> aoyouzi <a class="tag" taget="_blank" href="/search/%E8%BF%90%E8%90%A5%E5%88%B0%E5%BA%95%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F/1.htm">运营到底是做什么的？</a> <div>文章来源：夏叔叔（微信号：woshixiashushu），欢迎大家关注！很久没有动笔写点东西，近些日子，由于爱狗团产品上线，不断面试，经常会被问道一个问题。问：爱狗团的运营主要做什么？答：带着用户一起嗨。为什么是带着用户玩起来呢？究竟什么是运营？运营到底是做什么的？那么，我们先来回答一个更简单的问题——互联网公司对运营考核什么？以爱狗团为例，绝大部分的移动互联网公司，对运营部门的考核分为三块——用</div> </li> <li><a href="/article/1250.htm" title="js面向对象类和对象" target="_blank">js面向对象类和对象</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1/1.htm">函数创建类和对象</a> <div>接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下 ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似下面介绍一些js的类和对象的创建的技术一:类和对</div> </li> <li><a href="/article/1377.htm" title="web.xml之资源管理对象配置 resource-env-ref" target="_blank">web.xml之资源管理对象配置 resource-env-ref</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>resource-env-ref元素来指定对管理对象的servlet引用的声明，该对象与servlet环境中的资源相关联 <resource-env-ref> <resource-env-ref-name>资源名</resource-env-ref-name> <resource-env-ref-type>查找资源时返回的资源类</div> </li> <li><a href="/article/1504.htm" title="Create a composite component with a custom namespace" target="_blank">Create a composite component with a custom namespace</a> sunjing <div>https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace When you developed a composite component the namespace you would be seeing would </div> </li> <li><a href="/article/1631.htm" title="【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter" target="_blank">【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter</a> bit1129 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div> 一、复本集为什么要加入Arbiter这个角色回答这个问题，要从复本集的存活条件和Aribter服务器的特性两方面来说。什么是Artiber？ An arbiter does not have a copy of data set and cannot become a primary. Replica sets may have arbiters to add a </div> </li> <li><a href="/article/1758.htm" title="Javascript开发笔记" target="_blank">Javascript开发笔记</a> 白糖_ <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> 获取iframe内的元素通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素，这种写法在IE、safari、chrome下都是通过的，唯独在fireforx下不通过。其实jquery的contents方法提供了对if</div> </li> <li><a href="/article/1885.htm" title="Web浏览器Chrome打开一段时间后，运行alert无效" target="_blank">Web浏览器Chrome打开一段时间后，运行alert无效</a> bozch <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/chorme/1.htm">chorme</a><a class="tag" taget="_blank" href="/search/alert/1.htm">alert</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E6%95%88/1.htm">无效</a> <div>今天在开发的时候，突然间发现alert在chrome浏览器就没法弹出了，很是怪异。试了试其他浏览器，发现都是没有问题的。开始想以为是chorme浏览器有啥机制导致的，就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。这样开发的结果，如果客户在使用的时候没有提示，那会带来致命的体验。哎，没啥办法了就关闭浏览器重启。结果就好了，这也太怪异了。难道是cho</div> </li> <li><a href="/article/2012.htm" title="编程之美-高效地安排会议图着色问题贪心算法" target="_blank">编程之美-高效地安排会议图着色问题贪心算法</a> bylijinnan <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.ArrayList; import java.util.Collections; import java.util.List; import java.util.Random; public class GraphColoringProblem { /**编程之美高效地安排会议图着色问题贪心算法 * 假设要用很多个教室对一组</div> </li> <li><a href="/article/2139.htm" title="机器学习相关概念和开发工具" target="_blank">机器学习相关概念和开发工具</a> chenbowen00 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>基本概念：机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。它是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域，它主要使用归纳、综合而不是演绎。开发工具 M</div> </li> <li><a href="/article/2266.htm" title="[宇宙经济学]关于在太空建立永久定居点的可能性" target="_blank">[宇宙经济学]关于在太空建立永久定居点的可能性</a> comsci <a class="tag" taget="_blank" href="/search/%E7%BB%8F%E6%B5%8E/1.htm">经济</a> <div> 大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........ 所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点</div> </li> <li><a href="/article/2393.htm" title="oracle 11g database control 证书错误" target="_blank">oracle 11g database control 证书错误</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E8%AF%81%E4%B9%A6%E9%94%99%E8%AF%AF/1.htm">证书错误</a><a class="tag" taget="_blank" href="/search/oracle+11G+%E5%AE%89%E8%A3%85/1.htm">oracle 11G 安装</a> <div>oracle 11g database control 证书错误 win7 安装完oracle11后打开 Database control 后，会打开em管理页面，提示证书错误，点“继续浏览此网站”，还是会继续停留在证书错误页面解决办法：是 KB2661254 这个更新补丁引起的，它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告：</div> </li> <li><a href="/article/2520.htm" title="Java I/O之用FilenameFilter实现根据文件扩展名删除文件" target="_blank">Java I/O之用FilenameFilter实现根据文件扩展名删除文件</a> 游其是你 <a class="tag" taget="_blank" href="/search/FilenameFilter/1.htm">FilenameFilter</a> <div>在Java中，你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。在这个例子中，我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </div> </li> <li><a href="/article/2647.htm" title="C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例" target="_blank">C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a> <div># include <stdio.h> int main(void) { int a[5] = {1, 2, 3, 4, 5}; //a 是数组的名字 5是表示数组元素的个数，并且这五个元素分别用a[0], a[1]...a[4] int i; for (i=0; i<5; ++i) printf("%d\n",</div> </li> <li><a href="/article/2774.htm" title="PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。就是唯一且不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引" target="_blank">PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。就是唯一且不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/primary/1.htm">primary</a> <div>PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。就是唯一且不能为空。INDEX 索引，普通的UNIQUE 唯一索引。不允许有重复。FULLTEXT 是全文索引，用于在一篇文章中，检索文本信息的。举个例子来说，比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段：会员编号 INT会员姓名 </div> </li> <li><a href="/article/2901.htm" title="java集合辅助类 Collections、Arrays" target="_blank">java集合辅助类 Collections、Arrays</a> shuizhaosi888 <a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a><a class="tag" taget="_blank" href="/search/Arrays/1.htm">Arrays</a><a class="tag" taget="_blank" href="/search/HashCode/1.htm">HashCode</a> <div> Arrays、Collections 1 ）数组集合之间转换 public static <T> List<T> asList(T... a) { return new ArrayList<>(a); } a）Arrays.asL</div> </li> <li><a href="/article/3028.htm" title="Spring Security（10）——退出登录logout" target="_blank">Spring Security（10）——退出登录logout</a> 234390216 <a class="tag" taget="_blank" href="/search/logout/1.htm">logout</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95/1.htm">退出登录</a><a class="tag" taget="_blank" href="/search/logout-url/1.htm">logout-url</a><a class="tag" taget="_blank" href="/search/LogoutFilter/1.htm">LogoutFilter</a> <div> 要实现退出登录的功能我们需要在http元素下定义logout元素，这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的，此时我们默认退出登录的URL为“/j_spring_secu</div> </li> <li><a href="/article/3155.htm" title="透过源码学前端之 Backbone 三 Model" target="_blank">透过源码学前端之 Backbone 三 Model</a> 逐行分析JS源代码 <a class="tag" taget="_blank" href="/search/backbone/1.htm">backbone</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/1.htm">源码分析</a><a class="tag" taget="_blank" href="/search/js%E5%AD%A6%E4%B9%A0/1.htm">js学习</a> <div>Backbone 分析第三部分 Model 概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里，但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件，如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。 </div> </li> <li><a href="/article/3282.htm" title="SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter" target="_blank">SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter</a> 乒乓狂魔 <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter，然后对一些HttpMessageConverter进行具体介绍。 HttpMessageConverter接口介绍： public interface HttpMessageConverter<T> { /** * Indicate</div> </li> <li><a href="/article/3409.htm" title="分布式基础知识和算法理论" target="_blank">分布式基础知识和算法理论</a> bluky999 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%87%B4%E6%80%A7%E5%93%88%E5%B8%8C/1.htm">一致性哈希</a><a class="tag" taget="_blank" href="/search/paxos/1.htm">paxos</a> <div> 分布式基础知识和算法理论 BY NODEXY@2014.8.12 本文永久链接：http://nodex.iteye.com/blog/2103218 在大数据的背景下，不管是做存储，做搜索，做数据分析，或者做产品或服务本身，面向互联网和移动互联网用户，已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍，在完善自我知识体系的同</div> </li> <li><a href="/article/3536.htm" title="Android Studio的.gitignore以及gitignore无效的解决" target="_blank">Android Studio的.gitignore以及gitignore无效的解决</a> bell0901 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/gitignore/1.htm">gitignore</a> <div>　　github上.gitignore模板合集，里面有各种.gitignore ： https://github.com/github/gitignore 　　自己用的Android Studio下项目的.gitignore文件，对github上的android.gitignore添加了　　　　　　# OSX files　　　　　　//mac os下　　　　　　.DS_Store </div> </li> <li><a href="/article/3663.htm" title="成为高级程序员的10个步骤" target="_blank">成为高级程序员的10个步骤</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>What 软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。 Why 得到更多的报酬！因为你的薪水会随着你水平的提高而增加提升你的职业生涯。成为了高级软件工程师之后，就可以朝着架构师、团队负责人、CTO 等职位前进历经更大的挑战。随着你的成长，各种影响力也会提高。 </div> </li> <li><a href="/article/3790.htm" title="mongdb在linux下的安装" target="_blank">mongdb在linux下的安装</a> xtuhcy <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、查询linux版本号： lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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>