认识HTML标签、CSS样式、盒模型

HTML标签

HTML代码注释 < !--注释文字 -->
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

标签 属性
根标签
头标签
</td> <td>在标签之间的文字内容是网页的标题信息</td> </tr> <tr> <td><script></td> <td>填写javascript相关代码<script src="/static/js/abc.js"></script></td> </tr> <tr> <td><style></td> <td>填写css相关代码</td> </tr> <tr> <td><link></td> <td>标签将css样式文件链接到HTML文件内<link href="base.css" rel="stylesheet" type="text/css" /></td> </tr> <tr> <td><meta></td> <td>meta标签被称为可视区域meta标签,<meta name=”viewport” content=”” /></td> </tr> <tr> <td><body></td> <td>内容标签</td> </tr> <tr> <td><h1></td> <td>标题标签(因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:<h1>腾讯网</h1>)</td> </tr> <tr> <td><p></td> <td>段落标签</td> </tr> <tr> <td><em></td> <td>在浏览器中<em> 默认用斜体表示</td> </tr> <tr> <td><strong></td> <td><strong> 用粗体表示</td> </tr> <tr> <td><span></span></td> <td>作用就是为了设置单独的样式用的</td> </tr> <tr> <td><q></q></td> <td><q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。</td> </tr> <tr> <td><blockquote></td> <td>作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。浏览器对<blockquote>标签的解析是缩进样式。</td> </tr> <tr> <td><br /></td> <td>需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。与以前我们学过的标签不一样,<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img /></td> </tr> <tr> <td> </td> <td>为你的网页中添加一些空格</td> </tr> <tr> <td><hr /></td> <td>添加水平横线,<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。</td> </tr> <tr> <td><address></td> <td>可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份,在浏览器上显示的样式为斜体;</td> </tr> <tr> <td><code></td> <td>当代码为一行代码时,你就可以使用<code>标签了.注:如果是多行代码,可以使用<pre>标签。</td> </tr> <tr> <td><pre></td> <td>为你的网页加入大段代码</td> </tr> <tr> <td><a></td> <td><a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>; 1.只要为文本加入a标签后,文字的颜色就会自动变为蓝色;2.标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开则使用<a href="目标网址" target="_blank">click here!</a>;3.<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件,如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔;<a href=mailto:yy@163.com&cc=xiaoming@16c.com&bcc=xiaoyu@163.com&subject=主题&body=邮件内容>对此影评有何感想,发送邮件给我</a>、cc:抄送,bcc:密文抄送;</td> </tr> <tr> <td><img></td> <td>标签来插入图片<img src = "myimage.gif" alt = "My Image" title = "My Image" />1、src:标识图像的位置;2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);4、图像可以是GIF,PNG,JPEG格式的图像文件。</td> </tr> <tr> <td><ul><li>我的第一个列表信息</li></ul></td> <td>新闻信息列表,ul-li是没有前后顺序的信息列表。</td> </tr> <tr> <td><ol><li>我的第一个列表信息。</li><li>我的第一个列表信息。</li></ol></td> <td>标签来制作有序列表来展示。</td> </tr> <tr> <td><div></td> <td>在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。<div id="版块名称">…</div>增加id属性;</td> </tr> <tr> <td><table></td> <td>创建表格的四个元素:table、tbody、tr、th、td;1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。5、<th>…</th>:表格的头部的一个单元格,表格表头。6、表格中列的个数,取决于一行中数据单元格的个数。总结:1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的;2、表头,也就是th标签中的文本默认为粗体并且居中显示。。。。<style type="text/css">table tr td,th{border:1px solid #000;}</style>为它添加边框。。。<table summary="表格简介文本">摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。。。。<caption>标题文本</caption>用以描述表格内容,标题的显示位置:表格上方。</td> </tr> <tr> <td><form></td> <td><form method="传送方式" action="服务器文件">1、type:当type="text"时,输入框为文本输入框;当type="password"时, 输入框为密码输入框。2、name:为文本框命名,以备后台程序ASP 、PHP使用。3、value:为文本输入框设置默认值。(一般起到提示作用)</td> </tr> <tr> <td><label for="male"></td> <td><label for="控件id名称">,注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。</td> </tr> </tbody> </table> <p>target 常见的4个值<br> 1、-blank 在新窗口中打开;<br> 2、-self 在当前窗口打开(默认值);<br> 3、-parent 在父窗口打开;<br> 4、-top 在当前浏览器中打开,且框架会消失。</p> <pre><code><form> <label for="username">用户名:</label> <input type="text" name="username" id="username" value="" /> <label for="pass">密码:</label> <input type="password" name="pass" id="pass" value="" /> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /> <textarea rows="行数" cols="列数">在这里输入内容,支持多行文本展示</textarea> <input type="radio/checkbox" value="值" name="名称" checked="checked"/> <label>男</label><input type="radio" value="1" name="gender" /> <label>女</label><input type="radio" value="2" name="gender" /> <label>跑步</label><input type="checkbox" value="1" name="checkbox1" /> <label>打球</label><input type="checkbox" value="2" name="checkbox2" /> <label>登山</label><input type="checkbox" value="3" name="checkbox3" /> 注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。 <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> </form> <form action="save.php" method="post" > <label>爱好:</label> <select multiple="multiple"> <option value="看书">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> </form> 注意:下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击) </code></pre> <h1>CSS样式</h1> <h3>CSS的基本知识</h3> <p>1、CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。<br> css 样式由选择符和声明组成,而声明又由属性和值组成如:</p> <pre><code>p{ font-size:12px; color:red; } </code></pre> <p>2、就像在Html的注释一样,在CSS中也有注释语句:用/<em>注释语句</em>/来标明(Html中使用 < !--注释语句-->)</p> <h3>CSS的三种样式</h3> <p>*三种样式<br> 1、内联式css样式,直接写在现有的HTML标签中:<br> <code><p style="color:red;font-size:12px">这里文字是红色。</p></code><br> 2、嵌入式css样式,写在当前的文件中,嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。如下代码:</p> <pre><code><style type="text/css"> span{ color:red; } </style> </code></pre> <p>3、外部式css样式,写在单独的一个文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:<br> <code><link href="base.css" rel="stylesheet" type="text/css" /></code><br> 注意:<br> 1.css样式文件名称以有意义的英文字母命名,如 main.css。<br> 2.rel="stylesheet" type="text/css" 是固定写法不可修改。<br> 3.<link>标签位置一般写在<head>标签之内。</p> <ul> <li>优先级:内联式 > 嵌入式 > 外部式</li> <li>但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。</li> <li>总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下;</li> <li>下面是权值的规则:<br> 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:</li> </ul> <pre><code>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*/ </code></pre> <p>注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。</p> <ul> <li>其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。</li> <li>注意:!important要写在分号的前面 <code>p{color:red!important;}</code><br> 注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。</li> </ul> <h3>CSS选择器</h3> <ul> <li>标签选择器<br> 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码:<br> <code>p{font-size:12px;line-height:1.6em;}</code> </li> <li>类选择器<br> .类选器名称{css样式代码;};<br> 类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。</li> <li>ID选择器<br> ID选择符的前面是井号(#)号,而不是英文圆点(.)。<br> ID选择器只能在文档中使用一次.</li> </ul> <pre><code>#setGreen{ color:green; } </code></pre> <ul> <li>子选择器<br> 子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:<br> <code>.food>li{border:1px solid red;}</code> </li> <li>包含(后代)选择器<br> 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:<br> <code>.first span{color:red;}</code><br> 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。</li> <li>全局选择器<br> 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:<br> <code>* {color:red;}</code><br> 字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)</li> <li>伪类选择符<br> 更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:<br> <code>a:hover{color:red;}</code><br> 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。<br> 如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)</li> <li>分组选择器<br> 当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:<br> <code>h1,span{color:red;}</code> </li> </ul> <h3>CSS属性</h3> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>color</td> <td>red</td> <td>设置颜色</td> </tr> <tr> <td>font-size</td> <td>12px</td> <td>设置字体大小</td> </tr> <tr> <td>font-weight</td> <td>bold</td> <td>设置字体样式粗体</td> </tr> <tr> <td>font-family</td> <td>Microsoft Yahei</td> <td>设置字体种类</td> </tr> <tr> <td>font-variant</td> <td>small-caps</td> <td>把段落设置为小型大写字母字体</td> </tr> <tr> <td>font-style</td> <td>italic</td> <td>设置字体斜体</td> </tr> <tr> <td>text-decoration</td> <td>underline</td> <td>设置下划线</td> </tr> <tr> <td>text-decoration</td> <td>line-through</td> <td>设置删除线</td> </tr> <tr> <td>text-decoration</td> <td>none</td> <td>给a标签去除下划线</td> </tr> <tr> <td>text-indent</td> <td>2em</td> <td>段落排版--缩进</td> </tr> <tr> <td>text-align</td> <td>center</td> <td>被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的</td> </tr> <tr> <td>vertical-align</td> <td>middle</td> <td>用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用</td> </tr> <tr> <td>line-height</td> <td>1.5em</td> <td>段落排版--行间距(行高)</td> </tr> <tr> <td>word-spacing</td> <td>50px</td> <td>单词间距设置</td> </tr> <tr> <td>letter-spacing</td> <td>50px</td> <td>设置文字间隔或者字母间隔</td> </tr> <tr> <td>background-color</td> <td>yellow</td> <td>设置背景颜色</td> </tr> <tr> <td>display</td> <td>block inline inline-block table-cell</td> <td>显示为块级元素 行内元素 内联块元素 设置为表格单元显示</td> </tr> <tr> <td>visibility</td> <td>hidden visible</td> <td>display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素</td> </tr> <tr> <td>border</td> <td>1px solid red</td> <td>设置它的粗细、样式和颜色(边框三个属性);dashed(虚线)dotted(点线)solid(实线)</td> </tr> <tr> <td>padding</td> <td>20px 10px 15px 30px</td> <td>填充也可分为上、右、下、左(顺时针)</td> </tr> <tr> <td>margin</td> <td>20px 10px 15px 30px</td> <td>边界也是可分为上、右、下、左</td> </tr> <tr> <td>border-bottom</td> <td>1px solid red</td> <td>只为一个方向的边框设置样式</td> </tr> <tr> <td>width</td> <td>200px</td> <td>设置宽度</td> </tr> <tr> <td>height</td> <td>200px</td> <td>设置高度</td> </tr> <tr> <td>box-sizing</td> <td>border-box</td> <td>设置边框、内边框和内容的宽度和高度</td> </tr> <tr> <td>box-sizing</td> <td>content-box</td> <td>给内容设置的 width 和 height(默认属性)</td> </tr> <tr> <td>list-style</td> <td>none</td> <td>去除每个li 前面的点 用 li {list-style: none;}</td> </tr> <tr> <td>border-radius</td> <td>25px</td> <td>把一个盒子四角变弧度</td> </tr> <tr> <td>cursor</td> <td>pointer</td> <td>鼠标移入时变成手状标志</td> </tr> <tr> <td>trstransition</td> <td>width 1s</td> <td>鼠标移入时宽度出现时间是1秒</td> </tr> <tr> <td>opacity</td> <td>0或1</td> <td>规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。</td> </tr> <tr> <td>z-index</td> <td>-1</td> <td>z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值</td> </tr> </tbody> </table> <h3>元素的分类</h3> <ul> <li>常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form><br> 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)<br> 2.元素的高度、宽度、行高以及顶和底边距都可设置。<br> 3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。</li> <li>常用的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code><br> 1、和其他元素都在一行上;<br> 2、元素的高度、宽度及顶部和底部边距不可设置;<br> 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。</li> <li>常用的内联块状元素有:<img>、<input><br> 1、和其他元素都在一行上;<br> 2、元素的高度、宽度、行高以及顶和底边距都可设置。<br> (两个元素之前有缝隙存在,如果后面跟块级元素,则块级元素会换行显示)</li> </ul> <h1>盒模型</h1> <h3>盒模型</h3> <p>盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。<br> 因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。<br> [图片上传失败...(image-5e35bf-1550823356858)]</p> <h3>CSS布局模型</h3> <ul> <li>弹性布局(Flex)<br> Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex 布局链接:</li> </ul> <pre><code>.box{ display: flex; } </code></pre> <ul> <li>CSS Grid 网格布局教程链接 </li> </ul> <p>网格布局(Grid)是最强大的 CSS 布局方案。<br> 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。</p> <ul> <li>流动模型(Flow)<br> 流动布局模型具有2个比较典型的特征:<br> 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。<br> 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)</li> <li>浮动模型 (Float)<br> 块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。<br> 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。</li> </ul> <pre><code>div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div> </code></pre> <p>可以设置 width 和 height 属性也可以在一行显示,元素之前没有缝隙存在并且会脱离图层,如果后面跟块级元素,则块级元素不会换行显示。</p> <ul> <li>层模型(Layer)</li> </ul> <p>0、默认定位(position:static);<br> 块级元素独占一行,行内元素默认排列在一行,也就是说每个元素执行各自的默认属性;<br> 1、绝对定位(position: absolute)<br>  绝对定位是特殊的相对定位;<br>  绝对定位是相对它最近的 已定位(position 不能是默认的 static) 的父级元素进行定位的;<br>  如果它的父级元素都没有定位,那它就相对于浏览器首个窗口进行定位的(浏览器有滚动条,往下拉不算首个窗口);<br> 2、相对定位(position: relative)<br> 相对本身位置进行位移<br> 如:<br> right: 20px 在原来的位置往左移动 20 px;<br> top: 20px 在原来的位置往下移动 20 px;<br> left:20px 在原来的位置往右移动 20 px;<br> bottom: 20px; 在原来的位置往上移动 20 px;</p> <blockquote> <p>注意:本来向右移动现在是向左移动,本来想上移动现在是向下移动</p> </blockquote> <p>3、固定定位(position: fixed)<br> 根据浏览器显示进行定位的,即使窗口有垂直滚动条,也是显示能看到窗口就那么大。</p> <h3>CSS样式设计小技巧</h3> <p>1、水平居中设置-行内元素 text-align:center<br> 2、水平居中设置-定宽块状元素:<br> 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。</p> <pre><code>div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </code></pre> <p>3、水平居中总结-不定宽块状元素方法(一)<br> 加入 [table]标签;<br> 为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。<br> 4、水平居中总结-不定宽块状元素方法(二)<br> 设置 [display: inline] 方法:与第一种类似,显示类型设为行内元素,进行不定宽元素的属性设置;<br> 这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。<br> 第二种方法:改变块级元素的 display 为 inline 类型(设置为 [行内元素],然后使用 <code>text-align:center</code> 来实现居中效果。<br> 5、水平居中总结-不定宽块状元素方法(三)<br> 设置 [position:relative]和 left:50%利用相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的;<br> 方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。<br> 6、垂直居中-父元素高度确定的单行文本<br> <strong>父元素高度确定的单行文本</strong>的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。<br> line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。<br> 这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。<br> 7、垂直居中-父元素高度确定的多行文本(方法一)<br> css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。<br> 8、垂直居中-父元素高度确定的多行文本(方法二)<br> display:table-cell;/<em>IE8以上及Chrome、Firefox</em>/<br> vertical-align:middle;/<em>IE8以上及Chrome、Firefox</em>/<br> 9、隐性改变display类型<br> 有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:</p> <ol> <li>position : absolute</li> <li>float : left 或 float:right<br> 简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。<br> 如下面的代码,小伙伴们都知道 a 标签是 行内元素 ,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了</li> </ol> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1648589991107919872"></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/1943963776244051968.htm" title="入门html这篇文章就够了" target="_blank">入门html这篇文章就够了</a> <span class="text-muted">ξ流ぁ星ぷ132</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签,预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签:HTML5中的语义标签:特殊字符img标签a标签第一种用法:超链接第二种用法:锚点video标签表格标签:form标签input标签selec</div> </li> <li><a href="/article/1943849057109733376.htm" title="资深开发者挖掘创作潜能指南" target="_blank">资深开发者挖掘创作潜能指南</a> <span class="text-muted"></span> <div>太棒了!码龄超过4年的开发者们,你们早已不是编程新手,而是积累了宝贵经验、踩过无数坑、解决过复杂问题的宝藏创作者!是时候将这些无形的资产转化为有影响力的内容,点亮他人也成就自己了。挖掘创作潜能、展现写作才华,可以从以下几个维度入手:一、重新认识你的“创作金矿”-找到你的独特价值深度复盘你的技术旅程:“踩坑”与“填坑”史:哪些Bug让你彻夜难眠?哪些架构设计让你拍案叫绝或后悔不已?哪些性能优化带来了</div> </li> <li><a href="/article/1943832156052713472.htm" title="配置Nginx实现静态资源访问" target="_blank">配置Nginx实现静态资源访问</a> <span class="text-muted">Gappsong874</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</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%BF%90%E7%BB%B4%E5%BC%80%E5%8F%91/1.htm">运维开发</a> <div>Nginx是一款高性能的HTTP和反向代理服务器,常用于处理静态资源请求。通过合理配置,可以显著提升静态资源的访问速度和服务器性能。以下内容将详细介绍如何配置Nginx以实现静态资源的高效访问。基本静态资源配置静态资源通常包括HTML文件、CSS样式表、JavaScript脚本、图片、视频等。Nginx通过简单的配置即可处理这些请求。在Nginx的配置文件中,通常位于/etc/nginx/ngin</div> </li> <li><a href="/article/1943827993189216256.htm" title="JQ+vue实现图片拼接(无限套娃版)" target="_blank">JQ+vue实现图片拼接(无限套娃版)</a> <span class="text-muted">小周同学:</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>css样式/*css初始化*/*{margin:0;padding:0;}/*去掉li的小圆点*/li{list-style:none;}/*去掉a的下划线*/a{text-decoration:none;}/*搜索框去除边框*/input,button,select{border:0;/*设置背景颜色为透明*/background-color:transparent;/*去掉外轮廓*/outli</div> </li> <li><a href="/article/1943716673357934592.htm" title="揭秘华为欧拉:不只是操作系统,更是云时代的技能认证体系" target="_blank">揭秘华为欧拉:不只是操作系统,更是云时代的技能认证体系</a> <span class="text-muted"></span> <div>揭秘华为欧拉:不只是操作系统,更是云时代的技能认证体系作为一名深耕IT培训领域的博主,今天带大家客观认识“华为欧拉”——这个在云计算领域频频出现的名词。一、华为欧拉究竟是什么?严格来说,“华为欧拉”核心包含两部分1.openEuler操作系统:一个由华为支持的企业级开源Linux操作系统发行版,专为云计算、云原生平台等场景设计优化。2.华为openEuler认证体系(HCIA/HCIP/HCIE-</div> </li> <li><a href="/article/1943665752414416896.htm" title="Hcia知识汇总" target="_blank">Hcia知识汇总</a> <span class="text-muted">小鱼快快游</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>一.什么是HCIAHCIA—华为体系下的初级网络工程师二.网络的概念网络就是利用传输介质将世界不同位置的计算机连接在一起,就形成了一张网----可以实现信息传递和资源共享。三.网络基础计算机——电脑:处理电流信号--数字信号,实现电信号到数学信号的转换。1.应用层:抽象语言,电脑不认识,会转换成编码,软件是加到应用层的2.表示层:将编码转成二进制,所以表示层之下都是二进制应用层,表示层都是将各种类</div> </li> <li><a href="/article/1943658059666616320.htm" title="Golang 数据类型有哪些?" target="_blank">Golang 数据类型有哪些?</a> <span class="text-muted"></span> <div>一个完整的项目需要更复杂的逻辑,不是简单的“Hello世界”可相比的。这些逻辑通过变量、常量、类型、函数方法、接口、结构体组成,这节课我就将带你认识它们,让你的Go语言程序变得更加生动。内置类型值类型boolint(32or64),int8,int16,int32,int64uint(32or64),uint8(byte),uint16,uint32,uint64float32,float64st</div> </li> <li><a href="/article/1943579016061579264.htm" title="《软件工程实务》学习心得" target="_blank">《软件工程实务》学习心得</a> <span class="text-muted"></span> <div>一、课程学习背景本学期学习《软件工程实务》课程时,我怀着对软件开发系统化流程的好奇心开始学习。此前虽接触过编程和简单项目开发,但对需求分析、团队协作、版本控制等环节缺乏规范认知。通过这么多天的理论学习、案例分析及团队项目实践,我对软件工程的全生命周期管理有了深刻理解,并认识到工程化思维对软件开发的重要性。二、知识体系与技能提升1.软件工程方法论的重构认知开发模式对比系统学习了瀑布模型、敏捷开发(S</div> </li> <li><a href="/article/1943444119258984448.htm" title="构建“酒馆“主题网页:HTML基础教程" target="_blank">构建“酒馆“主题网页:HTML基础教程</a> <span class="text-muted">Bobby陈兴博</span> <div>本文还有配套的精品资源,点击获取简介:HTML是网页制作的基础,用于构建和设计网页内容。本文介绍了如何使用HTML标签和结构创建一个具有酒馆主题的网页,包括设置页面标题、布局、菜单、互动表单及图片展示。通过学习HTML元素的使用,可以掌握创建具有吸引力的在线体验的技术。1.HTML基础和页面结构在互联网的世界中,HTML(HyperTextMarkupLanguage)是构建网页的基石。它是超文本</div> </li> <li><a href="/article/1943388658618920960.htm" title="用XDR的思路保护API安全" target="_blank">用XDR的思路保护API安全</a> <span class="text-muted">Akamai中国</span> <a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/Akamai/1.htm">Akamai</a> <div>云计算飞速发展的今天,越来越多应用程序已经转为选择云原生架构,这就少不了Serverless、微服务、API等技术的协助。但同时也有越来越多的企业认识到,一定程度的“API安全”在整体安全与合规态势中发挥着至关重要的作用。然而,对很多企业来说,可能并不太明确API安全技术投资在其更广泛安全栈中的位置。两个关键问题随着时间推移,许多安全孤岛已经逐步发展,开始包含更统一的扩展检测和响应(XDR,Ext</div> </li> <li><a href="/article/1943217850944647168.htm" title="【CSS】文本超过行数显示“展开”、“收起”" target="_blank">【CSS】文本超过行数显示“展开”、“收起”</a> <span class="text-muted">扶我起来还能学_</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>使用css样式控制文本超过行数显示“展开”、“收起”css代码如下:.container{width:800px;position:relative;padding-bottom:20px;}.content{overflow:hidden;line-height:1;/*最多展示几行就(n*line-height)em,*/height:3em;background:yellow;}.more{</div> </li> <li><a href="/article/1943071999479836672.htm" title="实现顶部固定与平滑滑动二级菜单的网页导航设计" target="_blank">实现顶部固定与平滑滑动二级菜单的网页导航设计</a> <span class="text-muted"></span> <div>本文还有配套的精品资源,点击获取简介:现代网页设计中,高效的导航菜单对用户体验至关重要。本设计涵盖固定在顶部的导航栏和二级菜单项的平滑滑动效果。通过CSS实现导航栏的固定定位,而JavaScript则负责二级菜单的平滑过渡动画。包含的文件如HTML结构、JavaScript交互逻辑、CSS样式和可能的图像资源,共同构建了这种流行的导航菜单布局。1.顶部固定、二级栏目之间相互滑动的导航菜单在现代网页</div> </li> <li><a href="/article/1943042248493035520.htm" title="Typecho博客搭建教程 - 保姆级" target="_blank">Typecho博客搭建教程 - 保姆级</a> <span class="text-muted"></span> <div>很多人都想要一个属于自己的一个小博客,但是,好不容易有了一台服务器,又不懂操作,然后一些懂的人和你讲但是你又听不懂,人家也懒得叫你,这时候你往往会陷入迷茫和困境那么,我在这里就简单的教一下萌新如何初步的去了解一些建站小知识,并且搭建一个属于自己的小博客当然大佬就勿喷,我是简单化的去讲,比较的易于理解声明:本次教程基于雨云-新一代云服务器提供商进行编写SSH认识SSH按照某知的说法,就是网络中创建安</div> </li> <li><a href="/article/1943035066229780480.htm" title="深度学习核心知识简介和模型调参" target="_blank">深度学习核心知识简介和模型调参</a> <span class="text-muted">研术工坊</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0%E7%9F%A5%E8%AF%86%E5%92%8C%E6%8A%80%E5%B7%A7/1.htm">深度学习知识和技巧</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>深度学习模型调优就像调制一道复杂的菜肴,需要掌握多种"调料"的用法。本文将为您详解这些关键"调料",帮助您烹饪出高性能的模型。###核心参数及其影响####1️⃣Loss(损失函数)**基本介绍**:衡量模型预测与真实值差距的指标,是模型优化的指南针。**生活类比**:想象你在教小孩认识动物:-**完美情况**:小孩看到猫说"猫",看到狗说"狗"→Loss=0-**有错误**:小孩看到猫说"狗"→</div> </li> <li><a href="/article/1942983636076785664.htm" title="Html+Css+JavaScript+Vue+Axios入门" target="_blank">Html+Css+JavaScript+Vue+Axios入门</a> <span class="text-muted">chen_ever</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>一.HTMLHTML(HyperTextMarkupLanguage)是构建网页的基础语言,用于定义网页的结构和内容。以下介绍HTML的基本概念和用法。页面标题这是一级标题这是一个段落。声明文档类型为HTML5。标签是文档的根元素。包含元信息,如标题和CSS链接。包含可见的页面内容。常用HTML标签到:标题标签,数字越小级别越高。:段落标签。链接文本:超链接标签。:图像标签。和:无序列表。和:有序</div> </li> <li><a href="/article/1942973178737389568.htm" title="MySQL 表的内外连接" target="_blank">MySQL 表的内外连接</a> <span class="text-muted">Two_brushes.</span> <a class="tag" taget="_blank" href="/search/MySQL/1.htm">MySQL</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>在上一篇博客中我们在认识笛卡尔积的时候已经接触过连接的,下面我们来进行系统学习连接,连接分为两大类,分别是内连接和外连接。内连接内连接的本质就是将两个表进行匹配连接,保留所有在两个表中都存在匹配记录的行,可以进行类比成先对两个表进行求笛卡尔积,在通过连接条件(A.id=B.id)筛选出符合条件的结果。如果某条记录在某个表中找不到对应的记录,它将不会在进行出现在最终的结果中。select字段from</div> </li> <li><a href="/article/1942932589186707456.htm" title="深度学习之迁移学习" target="_blank">深度学习之迁移学习</a> <span class="text-muted">路溪非溪</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%BF%81%E7%A7%BB%E5%AD%A6%E4%B9%A0/1.htm">迁移学习</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>认识迁移学习迁移学习(TransferLearning)是机器学习中的一种重要技术,其核心思想是将在一个任务上学习到的知识(模型参数、特征表示等),迁移应用到另一个相关但不同的任务中,从而提升新任务的学习效率和性能,尤其是在新任务数据有限的情况下。一、迁移学习的核心动机传统机器学习通常要求为每个新任务收集大量标注数据并从头训练模型,但现实中面临以下挑战:数据稀缺:例如医疗影像分析(罕见疾病样本少)</div> </li> <li><a href="/article/1942824561707905024.htm" title="软件测试-修正判定条件覆盖(MCDC)的一些认识" target="_blank">软件测试-修正判定条件覆盖(MCDC)的一些认识</a> <span class="text-muted">鲸 Blue</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>修正判定条件覆盖(ModifiedCondition/DecisionCoverage即MC/DC)通过参照上图,我们首先从宏观的角度上理解MCDC在软件测试中的分支。软件测试软件工程开发中中必不可少且非常重要的一部分,软件测试从是否执行代码来看可分为两种测试方法:静态测试和动态测试.静态测试是指不用执行程序的测试,它主要采取方案——代码走查、技术评审、代码审查的方法对软件产品进行测试,通俗来说就</div> </li> <li><a href="/article/1942780176651841536.htm" title="Flow 数据流学习-冷流和热流" target="_blank">Flow 数据流学习-冷流和热流</a> <span class="text-muted">qq_39844788</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>文章参考的Kotlin学习笔记(五)——Flow数据流学习实践指北(一)-掘金Kotlin系列之认识一下Flow-掘金冷流(ColdFlow):在数据被使用方订阅后,即调用collect方法之后,提供方才开始执行发送数据流的代码,通常是调用emit方法。即不消费,不生产,多次消费才会多次生产。使用方和提供方是一对一的关系。热流(HotFlow):无论有无使用方,提供方都可以执行发送数据流的操作,提</div> </li> <li><a href="/article/1942719155430027264.htm" title="八、提升服务高可用性" target="_blank">八、提升服务高可用性</a> <span class="text-muted">退役小学生呀</span> <a class="tag" taget="_blank" href="/search/K8s%E4%BC%81%E4%B8%9A%E7%BA%A7%E6%B7%B1%E5%BA%A6%E7%A0%94%E4%BF%AE/1.htm">K8s企业级深度研修</a><a class="tag" taget="_blank" href="/search/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a><a class="tag" taget="_blank" href="/search/k8s/1.htm">k8s</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>八、提升服务高可用性文章目录八、提升服务高可用性1、什么是亲和力Affinity2、认识拓扑域和拓扑键3、拓扑域划分4、K8s亲和力实战4.1同一个应用必须部署在不同的宿主机4.2同一个应用尽量部署在不同的宿主机4.3同一个应用分布在不同的机房4.4应用尽量和缓存服务部署在同一个可用域4.5计算服务必须部署至高性能机器4.6计算服务尽量部署至高性能机器4.7应用尽量不部署至低性能机器4.8应用均匀</div> </li> <li><a href="/article/1942571675434414080.htm" title="Git安装避坑指南:新手村通关秘籍" target="_blank">Git安装避坑指南:新手村通关秘籍</a> <span class="text-muted"></span> <div>Git安装避坑指南:新手村通关秘籍刚学编程那会儿,Git安装差点让我砸键盘。满心欢喜打开官网下载,结果卡在配置上,命令行死活不认识git命令。看着教程里别人行云流水的操作,自己对着报错信息干瞪眼——这感觉,经历过的人都懂。今天这份避坑指南,就是帮你跳过这些“新手坑”,稳稳装好Git!第一坑:官网迷路,下载错版本坑点描述:直接在搜索引擎搜“Git下载”,排在前面的广告链接可能是“高速下载器”或第三方</div> </li> <li><a href="/article/1942448896575860736.htm" title="软件测试的概念" target="_blank">软件测试的概念</a> <span class="text-muted"></span> <div>目录1.认识测试2.软件测试的工作内容3.什么是需求4.开发模型5.常见的开发模型5.1.瀑布模型5.2.螺旋模型5.3.增量模型5.4.迭代模型5.5.敏捷模型5.5.1.敏捷模型的常见方法6.测试模型6.1.v模型6.2.W模型(双V模型)7.软件测试的生命周期软件测试在生命周期各阶段的应用8.BUG8.1.BUG分类(按严重性)8.2.BUG的生命周期1.认识测试软件测试是软件开发过程中的关</div> </li> <li><a href="/article/1942414109790236672.htm" title="【Linux | 网络】网络编程套接字" target="_blank">【Linux | 网络】网络编程套接字</a> <span class="text-muted">是阿建吖!</span> <a class="tag" taget="_blank" href="/search/%E3%80%90Linux%E3%80%91/1.htm">【Linux】</a><a class="tag" taget="_blank" href="/search/%E3%80%90%E7%BD%91%E7%BB%9C%E3%80%91/1.htm">【网络】</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>目录一、预备知识1.1理解IP地址1.2认识端口号1.3理解网络套接字1.4理解"端口号"和"进程ID"1.5认识TCP协议与UDP协议1.6网络字节序二、socket编程接口2.1socket常见API2.1.1socket函数2.1.2bind函数2.1.3listen函数2.1.4accept函数2.1.5connect函数2.2主机字节序和网络字节序的转换的函数2.2.1htonl函数2.</div> </li> <li><a href="/article/1942413227157680128.htm" title="Linux·网络入门基础知识" target="_blank">Linux·网络入门基础知识</a> <span class="text-muted">迅~</span> <a class="tag" taget="_blank" href="/search/Linux%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B/1.htm">Linux应用编程</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>目录网络的位置计算机网络背景网络发展认识“协议”网络协议初始协议分层编辑OSI七层模型编辑TCP/IP五层(或四层)模型网络传输基本流程编辑同局域网的两台主机通信跨网络的两台主机通信网络中的地址管理认识IP地址认识MAC地址网络的位置我们通常在手机或者电脑上使用的APP,比如抖音、快手、淘宝等,这些APP都是在应用层的。用户在应用层的各种请求最终会下达给操作系统,操作系统内除了进程管理、文件管理、</div> </li> <li><a href="/article/1942330748233117696.htm" title="Python实现布林带策略完整代码" target="_blank">Python实现布林带策略完整代码</a> <span class="text-muted">程序化交易助手</span> <a class="tag" taget="_blank" href="/search/%E9%87%8F%E5%8C%96%E8%BD%AF%E4%BB%B6/1.htm">量化软件</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%8C%96%E4%BA%A4%E6%98%93/1.htm">程序化交易</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E9%87%8F%E5%8C%96%E7%82%92%E8%82%A1/1.htm">量化炒股</a><a class="tag" taget="_blank" href="/search/PTrade/1.htm">PTrade</a><a class="tag" taget="_blank" href="/search/QMT/1.htm">QMT</a><a class="tag" taget="_blank" href="/search/%E9%87%8F%E5%8C%96%E4%BA%A4%E6%98%93/1.htm">量化交易</a><a class="tag" taget="_blank" href="/search/%E9%87%8F%E5%8C%96%E8%BD%AF%E4%BB%B6/1.htm">量化软件</a><a class="tag" taget="_blank" href="/search/deepseek/1.htm">deepseek</a> <div>Python实现布林带策略完整代码布林带是个啥玩意儿?我见过太多新手一上来就问"布林带能不能赚钱",这问题就跟问"菜刀能不能切菜"一样。布林带就是个工具,关键看你怎么用。简单来说,它就是在均线上下画两条通道线,股价大部分时间都在这个通道里晃悠。记得去年有个客户,拿着布林带当圣杯,结果亏得妈都不认识。后来我给他看了我的Python策略代码,这哥们才明白原来工具要配合仓位管理和止损。现在他账户已经翻倍</div> </li> <li><a href="/article/1942324438917771264.htm" title="前端开发常见问题(从布局到性能优化)" target="_blank">前端开发常见问题(从布局到性能优化)</a> <span class="text-muted">白仑色</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%B3%BB%E5%88%97/1.htm">前端系列</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</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/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/1.htm">响应式布局</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F/1.htm">跨域</a> <div>前端开发作为连接用户与产品的重要桥梁,涉及HTML、CSS和JavaScript的综合运用。但在实际开发过程中,开发者常常会遇到各种“坑”,比如页面布局异常、跨域请求失败、性能瓶颈、浏览器兼容性差等问题。本文将围绕前端开发中常见的十大问题展开讲解:页面布局相关问题(盒模型、浮动、Flex布局)CSS样式冲突与继承JavaScript异步处理(Promise、async/await)跨域问题及解决方</div> </li> <li><a href="/article/1942197210590539776.htm" title="爬虫的笔记整理" target="_blank">爬虫的笔记整理</a> <span class="text-muted">咸鱼时日翻身</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>网络爬虫首先要认识http和https协议在浏览器中发送一个http请求:1.输入一个URL地址之后,向http服务器发送请求,主要分为GET和POST两种方法2.输入URL之后,发送一个request请求,这时候服务器把response文件对象发送回浏览器3.浏览器中解析返回的HTML,其中引用了许多的其他文件,images,css文件,JS文件等,再次法中request去获取这些内容4.所有的</div> </li> <li><a href="/article/1942180319239139328.htm" title="【优秀文章】7月优秀文章推荐" target="_blank">【优秀文章】7月优秀文章推荐</a> <span class="text-muted"></span> <div>优秀文章智能自主运动体与人工智能技术——环境感知、SLAM定位、路径规划、运动控制、多智能体协同作者:fpga和matlabC++之红黑树认识与实现作者:zzh_zao【手把手带你刷好题】–C语言基础编程题(十)作者:草莓熊Lotso飞算JavaAI:从“码农”到“代码指挥官”的终极进化论作者:可涵不会debug前端网页开发学习(HTML+CSS+JS)有这一篇就够!作者:一颗小谷粒</div> </li> <li><a href="/article/1942070386887815168.htm" title="解锁数据结构“黑科技”:查表法的奇幻冒险" target="_blank">解锁数据结构“黑科技”:查表法的奇幻冒险</a> <span class="text-muted">大雨淅淅</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录一、数据结构的“神秘地图”:认识查表法二、揭开查表法的神秘面纱(一)构建查找表(二)在表中进行查找三、实际案例大揭秘(一)案例一:简单数值查找(二)案例二:复杂关系查找四、查表法的优势与局限(一)优势尽显(二)局限剖析五、与其他查找方法的巅峰对决(一)与顺序查找的较量(二)与折半查找的比拼六、查表法的应用领域大赏(一)嵌入式系统中的“得力助手”(二)数据处理中的“高效利器”七、总结与展望一、数</div> </li> <li><a href="/article/1942007090620985344.htm" title="K8s系列之:Kubernetes 的 RBAC (Role-Based Access Control)" target="_blank">K8s系列之:Kubernetes 的 RBAC (Role-Based Access Control)</a> <span class="text-muted">快乐骑行^_^</span> <a class="tag" taget="_blank" href="/search/Ansible/1.htm">Ansible</a><a class="tag" taget="_blank" href="/search/Docker/1.htm">Docker</a><a class="tag" taget="_blank" href="/search/K8S/1.htm">K8S</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93/1.htm">服务器相关知识总结</a><a class="tag" taget="_blank" href="/search/K8s%E7%B3%BB%E5%88%97/1.htm">K8s系列</a><a class="tag" taget="_blank" href="/search/Kubernetes/1.htm">Kubernetes</a><a class="tag" taget="_blank" href="/search/RBAC/1.htm">RBAC</a><a class="tag" taget="_blank" href="/search/Role-Based/1.htm">Role-Based</a><a class="tag" taget="_blank" href="/search/Access/1.htm">Access</a><a class="tag" taget="_blank" href="/search/Control/1.htm">Control</a> <div>K8s系列之:Kubernetes的RBACRole-BasedAccessControl认识RBACRBAC的关键概念RoleClusterRoleRoleBindingClusterRoleBindingRBAC的工作机制RBAC配置过程RBAC示例场景RBAC的优点总结认识RBACRBAC(基于角色的访问控制)是Kubernetes中的一种权限管理机制,用于控制用户或服务账户对Kuberne</div> </li> <li><a href="/article/17.htm" title="分享100个最新免费的高匿HTTP代理IP" target="_blank">分享100个最新免费的高匿HTTP代理IP</a> <span class="text-muted">mcj8089</span> <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86IP/1.htm">代理IP</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">代理服务器</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E4%BB%A3%E7%90%86/1.htm">匿名代理</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9%E4%BB%A3%E7%90%86IP/1.htm">免费代理IP</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E6%96%B0%E4%BB%A3%E7%90%86IP/1.htm">最新代理IP</a> <div>  推荐两个代理IP网站:   1. 全网代理IP:http://proxy.goubanjia.com/   2. 敲代码免费IP:http://ip.qiaodm.com/     120.198.243.130:80,中国/广东省 58.251.78.71:8088,中国/广东省 183.207.228.22:83,中国/</div> </li> <li><a href="/article/144.htm" title="mysql高级特性之数据分区" target="_blank">mysql高级特性之数据分区</a> <span class="text-muted">annan211</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%8C%BA/1.htm">分区</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> mysql高级特性 1 以存储引擎的角度分析,分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。 2 分区的原理 分区表由多个相关的底层表实现,这些底层表也是由句柄对象表示,所以我们可以直接访问各个分区。存储引擎管理分区的各个底层 表和管理普通表一样(所有底层表都必须使用相同的存储引擎),分区表的索引只是</div> </li> <li><a href="/article/271.htm" title="JS采用正则表达式简单获取URL地址栏参数" target="_blank">JS采用正则表达式简单获取URL地址栏参数</a> <span class="text-muted">chiangfai</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9D%80%E6%A0%8F%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96/1.htm">地址栏参数获取</a> <div>GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null</div> </li> <li><a href="/article/398.htm" title="怎样将数据表拷贝到powerdesigner (本地数据库表)" target="_blank">怎样将数据表拷贝到powerdesigner (本地数据库表)</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/powerDesigner/1.htm">powerDesigner</a> <div>================================================== 1、打开PowerDesigner12,在菜单中按照如下方式进行操作 file->Reverse Engineer->DataBase 点击后,弹出 New Physical Data Model 的对话框 2、在General选项卡中 Model name:模板名字,自</div> </li> <li><a href="/article/525.htm" title="logbackのhelloworld" target="_blank">logbackのhelloworld</a> <span class="text-muted">飞翔的马甲</span> <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a><a class="tag" taget="_blank" href="/search/logback/1.htm">logback</a> <div>一、概述 1.日志是啥? 当我是个逗比的时候我是这么理解的:log.debug()代替了system.out.print(); 当我项目工作时,以为是一堆得.log文件。 这两天项目发布新版本,比较轻松,决定好好地研究下日志以及logback。 传送门1:日志的作用与方法: http://www.infoq.com/cn/articles/why-and-how-log 上面的作</div> </li> <li><a href="/article/652.htm" title="新浪微博爬虫模拟登陆" target="_blank">新浪微博爬虫模拟登陆</a> <span class="text-muted">随意而生</span> <a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A/1.htm">新浪微博</a> <div>转载自:http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235     近来由于毕设需要,重新修改了新浪微博爬虫废了不少劲,希望下边的总结能够帮助后来的同学们。      现行版的模拟登陆与以前相比,最大的改动在于cookie获取时候的模拟url的请求</div> </li> <li><a href="/article/779.htm" title="synchronized" target="_blank">synchronized</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/thread/1.htm">thread</a> <div>    Java语言的关键字,可用来给对象和方法或者代码块加锁,当它锁定一个方法或者一个代码块的时候,同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时,一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而,当一个线程访问object的一个加锁代码块时,另一个线程仍然</div> </li> <li><a href="/article/906.htm" title="maven 简单实用教程" target="_blank">maven 简单实用教程</a> <span class="text-muted">AdyZhang</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>1. Maven介绍  1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9,注意maven2和maven1有很大区别,阅读第三方文档时需要区分版本。 1.2. Maven资源 见官方网站;The 5 minute test,官方简易入门文档;Getting Started Tutorial,官方入门文档;Build Coo</div> </li> <li><a href="/article/1033.htm" title="Android 通过 intent传值获得null" target="_blank">Android 通过 intent传值获得null</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>我在通过intent 获得传递兑现过的时候报错,空指针,我是getMap方法进行传值,代码如下 1 2 3 4 5 6 7 8 9 public void getMap(View view){            Intent i =</div> </li> <li><a href="/article/1160.htm" title="apache 做代理 报如下错误:The proxy server received an invalid response from an upstream" target="_blank">apache 做代理 报如下错误:The proxy server received an invalid response from an upstream</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/response/1.htm">response</a> <div>网站配置是apache+tomcat,tomcat没有报错,apache报错是: The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr</div> </li> <li><a href="/article/1287.htm" title="Tomcat6 内存和线程配置" target="_blank">Tomcat6 内存和线程配置</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/tomcat6/1.htm">tomcat6</a> <div>1、修改启动时内存参数、并指定JVM时区 (在windows server 2008 下时间少了8个小时) 在Tomcat上运行j2ee项目代码时,经常会出现内存溢出的情况,解决办法是在系统参数中增加系统参数:  window下, 在catalina.bat最前面 set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5</div> </li> <li><a href="/article/1414.htm" title="Karam与TDD" target="_blank">Karam与TDD</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/Karam/1.htm">Karam</a><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a> <div>一.TDD         测试驱动开发(Test-Driven Development,TDD)是一种敏捷(AGILE)开发方法论,它把开发流程倒转了过来,在进行代码实现之前,首先保证编写测试用例,从而用测试来驱动开发(而不是把测试作为一项验证工具来使用)。         TDD的原则很简单: a.只有当某个</div> </li> <li><a href="/article/1541.htm" title="[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States" target="_blank">[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div> public enum States { CONNECTING, //Zookeeper服务器不可用,客户端处于尝试链接状态 ASSOCIATING, //??? CONNECTED, //链接建立,可以与Zookeeper服务器正常通信 CONNECTEDREADONLY, //处于只读状态的链接状态,只读模式可以在</div> </li> <li><a href="/article/1668.htm" title="【Scala十四】Scala核心八:闭包" target="_blank">【Scala十四】Scala核心八:闭包</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x</div> </li> <li><a href="/article/1795.htm" title="android发送json并解析返回json" target="_blank">android发送json并解析返回json</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>package com.http.test; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import </div> </li> <li><a href="/article/1922.htm" title="一份IT实习生的总结" target="_blank">一份IT实习生的总结</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/php%E8%B5%84%E6%96%99/1.htm">php资料</a><a class="tag" taget="_blank" href="/search/php%E6%95%99%E7%A8%8B/1.htm">php教程</a><a class="tag" taget="_blank" href="/search/php%E5%9F%B9%E8%AE%AD/1.htm">php培训</a><a class="tag" taget="_blank" href="/search/php%E8%A7%86%E9%A2%91/1.htm">php视频</a> <div>今天突然发现在不知不觉中自己已经实习了 3 个月了,现在可能不算是真正意义上的实习吧,因为现在自己才大三,在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是,我完全想不到在这 3 个月里我到底学到了什么,这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把,让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来</div> </li> <li><a href="/article/2049.htm" title="据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1,3,9。。。3^N。 将重物放到天平左侧,问在两边如何添加砝码" target="_blank">据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1,3,9。。。3^N。 将重物放到天平左侧,问在两边如何添加砝码</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ScalesBalance { /** * 题目: * 给出一个重物重量为X,另外提供的小砝码重量分别为1,3,9。。。3^N。 (假设N无限大,但一种重量的砝码只有一个) * 将重物放到天平左侧,问在两边如何添加砝码使两边平衡 * * 分析: * 三进制 * 我们约定括号表示里面的数是三进制,例如 47=(1202</div> </li> <li><a href="/article/2176.htm" title="dom4j最常用最简单的方法" target="_blank">dom4j最常用最简单的方法</a> <span class="text-muted">chiangfai</span> <a class="tag" taget="_blank" href="/search/dom4j/1.htm">dom4j</a> <div>要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要</div> </li> <li><a href="/article/2303.htm" title="简单HBase笔记" target="_blank">简单HBase笔记</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div> 一、Client-side write buffer 客户端缓存请求 描述:可以缓存客户端的请求,以此来减少RPC的次数,但是缓存只是被存在一个ArrayList中,所以多线程访问时不安全的。 可以使用getWriteBuffer()方法来取得客户端缓存中的数据。 默认关闭。 二、Scan的Caching 描述: next( )方法请求一行就要使用一次RPC,即使</div> </li> <li><a href="/article/2430.htm" title="mysqldump导出时出现when doing LOCK TABLES" target="_blank">mysqldump导出时出现when doing LOCK TABLES</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysqdump/1.htm">mysqdump</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E6%95%B0%E6%8D%AE/1.htm">导数据</a> <div>  执行 mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql  导出表时,会报 mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 解决</div> </li> <li><a href="/article/2557.htm" title="CSS渲染原理" target="_blank">CSS渲染原理</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>  从事Web前端开发的人都与CSS打交道很多,有的人也许不知道css是怎么去工作的,写出来的css浏览器是怎么样去解析的呢?当这个成为我们提高css水平的一个瓶颈时,是否应该多了解一下呢?          一、浏览器的发展与CSS           </div> </li> <li><a href="/article/2684.htm" title="《阿甘正传》台词" target="_blank">《阿甘正传》台词</a> <span class="text-muted">dcj3sjt126com</span> <div>Part Ⅰ: 《阿甘正传》Forrest Gump经典中英文对白 Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol</div> </li> <li><a href="/article/2811.htm" title="Java处理JSON" target="_blank">Java处理JSON</a> <span class="text-muted">dyy_gusi</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>Json在数据传输中很好用,原因是JSON 比 XML 更小、更快,更易解析。 在Java程序中,如何使用处理JSON,现在有很多工具可以处理,比较流行常用的是google的gson和alibaba的fastjson,具体使用如下: 1、读取json然后处理 class ReadJSON { public static void main(String[] args) </div> </li> <li><a href="/article/2938.htm" title="win7下nginx和php的配置" target="_blank">win7下nginx和php的配置</a> <span class="text-muted">geeksun</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>1.  安装包准备 nginx :  从nginx.org下载nginx-1.8.0.zip php: 从php.net下载php-5.6.10-Win32-VC11-x64.zip, php是免安装文件。 RunHiddenConsole: 用于隐藏命令行窗口   2. 配置 # java用8080端口做应用服务器,nginx反向代理到这个端口即可 p</div> </li> <li><a href="/article/3065.htm" title="基于2.8版本redis配置文件中文解释" target="_blank">基于2.8版本redis配置文件中文解释</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>转载自: http://wangwei007.blog.51cto.com/68019/1548167        在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文</div> </li> <li><a href="/article/3192.htm" title="第五章 常用Lua开发库3-模板渲染" target="_blank">第五章 常用Lua开发库3-模板渲染</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a> <div>动态web网页开发是Web开发中一个常见的场景,比如像京东商品详情页,其页面逻辑是非常复杂的,需要使用模板技术来实现。而Lua中也有许多模板引擎,如目前我在使用的lua-resty-template,可以渲染很复杂的页面,借助LuaJIT其性能也是可以接受的。   如果学习过JavaEE中的servlet和JSP的话,应该知道JSP模板最终会被翻译成Servlet来执行;而lua-r</div> </li> <li><a href="/article/3319.htm" title="JZSearch大数据搜索引擎" target="_blank">JZSearch大数据搜索引擎</a> <span class="text-muted">颠覆者</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>系统简介: 大数据的特点有四个层面:第一,数据体量巨大。从TB级别,跃升到PB级别;第二,数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三,价值密度低。以视频为例,连续不间断监控过程中,可能有用的数据仅仅有一两秒。第四,处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume,Variety,Value,Velocity。大数据搜索引</div> </li> <li><a href="/article/3446.htm" title="10招让你成为杰出的Java程序员" target="_blank">10招让你成为杰出的Java程序员</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a> <div>如果你是一个热衷于技术的  Java 程序员, 那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。    1. 拥有扎实的基础和深刻理解 OO 原则   对于 Java 程序员,深刻理解 Object Oriented Programming(面向对象编程)这一概念是必须的。没有 OOPS 的坚实基础,就领会不了像 Java 这些面向对象编程语言</div> </li> <li><a href="/article/3573.htm" title="tomcat之oracle连接池配置" target="_blank">tomcat之oracle连接池配置</a> <span class="text-muted">小网客</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>tomcat版本7.0 配置oracle连接池方式: 修改tomcat的server.xml配置文件: <GlobalNamingResources> <Resource name="utermdatasource" auth="Container" type="javax.sql.DataSou</div> </li> <li><a href="/article/3700.htm" title="Oracle 分页算法汇总" target="_blank">Oracle 分页算法汇总</a> <span class="text-muted">vipbooks</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>    这是我找到的一些关于Oracle分页的算法,大家那里还有没有其他好的算法没?我们大家一起分享一下! -- Oracle 分页算法一 select * from ( select page.*,rownum rn from (select * from help) page -- 20 = (currentPag</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>