认识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/1946900078711074816.htm" title="秉持初心,一往无前" target="_blank">秉持初心,一往无前</a> <span class="text-muted">nanshan</span> <div>白岩松说过:在三十岁之前,要努力为自己的人生做加法。不断地朝着自己的一个个目标前进,你会发现,自己原来已经有所向前迈进。曾经的我很不自信,甚至自卑,以至于相对的也会很自傲,爱逞强。后来,我才渐渐意识到,对自己的正确而清醒的认识才是最重要的。只有真正的认识自己,才有可能去真正的爱自己,才有能力去爱其他的人。首先梳理今日的工作与学习:1.上午学习视频(戴维老师的化学实验),收发试卷,整理教育学笔记。中</div> </li> <li><a href="/article/1946883548808015872.htm" title="谈恋爱吗?倾家荡产的那种" target="_blank">谈恋爱吗?倾家荡产的那种</a> <span class="text-muted">林柯说历史</span> <div>年过30的李婧一直被父母催婚,不得已,她在一家著名婚恋网站注册了会员,很快认识了一名优质男,互相打招呼以后就加了微信,优质男叫陈东,从事外贸,是个小老板,再翻朋友圈,各种到处飞,旅游,健身,西装革履,气质沉稳帅气,李婧心动了。三年前,李婧和大学男友的五年感情经过不断的吵架分手、分手和好再分手的心力交瘁,终于划上了句号,情感失意的李婧,从此寄情于工作,面对感情则心有戚戚。对比前男友的不成熟,陈东格外</div> </li> <li><a href="/article/1946882278592409600.htm" title="4.2教学勇气《现实是群体共享的》" target="_blank">4.2教学勇气《现实是群体共享的》</a> <span class="text-muted">N3049解革</span> <div>今天阅读第四章认知于共同体中—为伟大事物的魅力所凝聚《现实是群体共享的》现实是共同联系的关系网,我们只有存在于这种共同联系中才能认识现实。真正的共同体是拥抱所有事物所依赖的生存巨网又拥抱那些恰好对我们认知是有益无害的事实,我们寻求的共同体就是能够担任认知、教学和学习的教育使命的管理模式。</div> </li> <li><a href="/article/1946875414513250304.htm" title="软件测试理论基础、质量保证常见面试题" target="_blank">软件测试理论基础、质量保证常见面试题</a> <span class="text-muted">程序员阿沐</span> <div>全面掌握软件测试理论基础、文档编写,测试流程1.测试分为哪几个阶段?⒉谈谈你之前测试的项目流程,在每个阶段的输出有哪些?3.谈谈敏捷模式的认识?4.linux常见查看日志命令有哪些?5.线上质量BUG频频爆发怎么办?6.如何分析一个bug是前端还是后端的问题?这些问题你一定要能够很全面的表述出来。比如说我现在是面试官,我第一个肯定不会去问你哪些代码的问题,也不会问你自动化、测试开发的问题。第一个查</div> </li> <li><a href="/article/1946875158912364544.htm" title="“知识”、“学识”、“见识”华罗庚" target="_blank">“知识”、“学识”、“见识”华罗庚</a> <span class="text-muted">穷人就要多旅行</span> <div>人们认识事物有一个由感性认识到理性认识的过程,学习和从事科学研究,也有一个由“知’到“识”的过程。我们平常所说的“知识”、“学识”、“见识”这几个概念,其实都包含了两面的意思,反映了认识事物的两个阶段。“知识”是先知而后识,“学识”是先学而后识,“见识”是先见而后识。知了,学了,见了,这还不够,还要有个提高过程,即识的过程。因为我们要认识事物的本质,达到灵活运用,变为自己的东西,就必须知而识之,学</div> </li> <li><a href="/article/1946872743303639040.htm" title="《语文课程目标分析框架的破与立》读书笔记" target="_blank">《语文课程目标分析框架的破与立》读书笔记</a> <span class="text-muted">苔花如米筱</span> <div>《语文科课程论基础》的第三章中王教授认为语文课程与教学目标的“工具性”与“人文性”不该分裂开来,而是互相包含、互相叠加的层叠蕴涵关系。修订后的课程标准坚持原实验稿也提出来的关于语文课程基本性质的认识,坚持语文课程的工具性和人文性的统一。“课改”以来有人在强调人文性的时候,不恰当地“将孩子和洗澡水一起泼掉”。“孩子”即语文本体。这样做又陷入了片面性,必然造成工具性与人文性两败俱伤。工具性是语文课程的</div> </li> <li><a href="/article/1946871081704943616.htm" title="学习信心比学习成绩更重要" target="_blank">学习信心比学习成绩更重要</a> <span class="text-muted">A臧老师</span> <div>这几天公立学校的期中考试成绩已经陆续出来了。有的孩子考试成绩比较优异,也有些孩子考试成绩不太理想。甚至有的孩子考了倒数第一。针对这些考试成绩不太理想的孩子,父母应该用什么态度来对待?孩子由于非常心思单纯,经验缺乏,往往不了解自己,也不“认识”自己。父母的指责和打骂只会给他带来新的麻烦和困难,带来更多的困扰和障碍,对于提高学习成绩是极不利的。孩子考倒数第一并不可怕,最可怕的是父母的打骂,以及孩子“停</div> </li> <li><a href="/article/1946864844351270912.htm" title="蒙田:与人交往时,最重要的品质是沉默与谦虚" target="_blank">蒙田:与人交往时,最重要的品质是沉默与谦虚</a> <span class="text-muted">国际艺术大观</span> <div>沉默与谦虚是交谈中非常有用的品质与人交往方面,我经常注意到这个缺陷:我们不去认识别人,而一心标榜自己;不思努力获取新知识,而是兜售自己的货色。沉默与谦虚是交谈中非常有用的品质。当这个孩子得到知识后,要教导他谦虚谨慎,有人在他面前说话不中听,听到不要怒形于色。因为抨击一切不合自己心意的东西,这是极不礼貌的讨厌行为。让他乐于自我改正,不要自己不愿做的事都怪别人,不要跟大众的习俗背道而驰。他要观察每个人</div> </li> <li><a href="/article/1946846331783933952.htm" title="【Linux】权限详解 权限本质、权限属性、su、sudo提权、chmod\chown\chgrp、文件类别" target="_blank">【Linux】权限详解 权限本质、权限属性、su、sudo提权、chmod\chown\chgrp、文件类别</a> <span class="text-muted"></span> <div>文章目录一、权限的认识二、linux的权限本质三、linux的用户su指令sudo提权四、linux角色五、文件权限属性六、修改权限的指令操作chmod指令(权限只会验证一次)chown/chgrp指令修改文件权限的八进制方案七、文件类别详解一、权限的认识什么是权限?生活中处处都有权限,本质就是你要做一件事能还是不能的问题,有权限就能做,没权限就算你想做也不能做为什么linux要有权限?首先lin</div> </li> <li><a href="/article/1946843090899759104.htm" title="一个女孩的反思" target="_blank">一个女孩的反思</a> <span class="text-muted">可可儿妈</span> <div>前两天听一个女孩子讲她休学五年以来的心路历程。这原本是一个学业优秀的孩子,但妈妈从小一直以她为先,这个孩子很有自己主见的同时,一贯以来也我行我素,突然有一天受到别人的影响,认为读书无用。这个孩子毫不犹豫的就从学校里面出来了。整整五年时间,这个孩子经历了不断的尝试,也不断的碰壁。最后碰到一个老师,在老师的引领下,认识到自己的问题,然后她做了一个分享。分享的第一点就是,由于妈妈的溺爱,她的自理能力非常</div> </li> <li><a href="/article/1946842445174075392.htm" title="男人,成熟自己,成熟人生,成熟感情" target="_blank">男人,成熟自己,成熟人生,成熟感情</a> <span class="text-muted">一路东风走长天</span> <div>《男人,成熟自己,成熟人生,成熟感情》成熟的男人是对待感情任自己舒展、世事运作有自己的程序、对待友谊有自己成熟的处理方式方法、对待家庭内外事务合情合理能得到事务中人的首肯。成熟的男人清晰地认识自己的能量又能够清晰地认识别人的能量。成熟的男人克己复礼,克己成人,克己为人,克己为国,克己为家,正是有了这些清晰的界限,成熟的男人有所为有所不为。成熟的男人严己宽人,在社会上有自己清晰的定位,既不媚人也不骄</div> </li> <li><a href="/article/1946841551510499328.htm" title="青梅竹马有点甜(六)" target="_blank">青梅竹马有点甜(六)</a> <span class="text-muted">长安雪</span> <div>“你好。”我若无其事,满脸无辜,作失忆状。他是谁?不认识,第一次见啊。“第一次见面,幸会幸会。”手上的西瓜汁黏黏的,就这么伸出手我也不在乎。对于我的知情不报,他深表感谢。牛皮糖似的粘着我。“我说了不是因为你。你能不能不要自作多情。”我不屑理他。“我跟你不熟。别老跟着我。还有,我们不同级。”当他一而再再而三的尾随我,我双手叉腰。“但是我们顺路啊。”一句话堵的我哑口无言。我哥几次三番旁敲侧击,他软硬不</div> </li> <li><a href="/article/1946839394681942016.htm" title="python3——print使用" target="_blank">python3——print使用</a> <span class="text-muted">weixin_30404405</span> <div>print的初步认识:对于科班出身的或有相关经验的人来说,学习python是相当有趣的事,因为可以做日常任务,比如自动备份你的MP3;可以做网站,如YouTube就是Python写的;可以做网络游戏的后台,很多在线游戏的后台都是Python开发的;可以爬数据,得到你想要的内容。总之就是能干很多很多事啦。而对于非科班的我来说,学习python是非常辛苦的,从一行行print打印,到一个个关键字,从思</div> </li> <li><a href="/article/1946835292879122432.htm" title="请借我一个树洞" target="_blank">请借我一个树洞</a> <span class="text-muted">陆逆风</span> <div>这里没有一个熟悉认识的人,真好。随心所欲地想怎么撒野怎么写都可以。想写东西的时候,通常不是感觉最快乐的时候。也是,人很高兴什么都很痛快的时候,光顾着高兴去了,那会应该难得想到坐下来写写东西。写字需要气氛。忧愁,孤独,郁闷,这些情绪自带气氛,都是适合写字的。所以,我常常要么不写,要么写起来满篇光怪陆离,停不下来。可是如果你读到我这时候写下的字,并不代表你便认识了现实中的我。我的情绪如此不稳定,变化如</div> </li> <li><a href="/article/1946834728023814144.htm" title="一文讲透HTML语义化标签" target="_blank">一文讲透HTML语义化标签</a> <span class="text-muted"></span> <div>文章目录语义化标签概述HTML标签及其含义常见HTML5语义化标签语义化标签对搜索引擎(SEO)的影响提升搜索引擎排名增强可访问性改善用户体验语义化标签案例各标签作用说明语义化标签概述HTML语义化是指使用恰当的标签来准确表达内容的结构和含义,使网页不仅对人类开发者可读,也能被搜索引擎、辅助技术等更好地理解和处理。例如,用表示页眉,表示独立内容区块,提升页面可访问性和SEO效果。HTML标签及其含</div> </li> <li><a href="/article/1946832602639953920.htm" title="可爱的女孩儿" target="_blank">可爱的女孩儿</a> <span class="text-muted">哥舒</span> <div>楼上的一家住着个小女孩,也就十一二岁的样子,长得眉清目秀,乖巧伶俐。我天天匆匆忙忙地上班下班,对楼上楼下以及左右的邻居也不大认识,因此也没有注意到她。有一天,我从车棚里推出自行车准备上班,女孩儿背着书包蹦蹦跳跳地从楼上下来了,看到我,就打了声招呼:“叔,你上班吗?”我挺意外,连忙回答:“是啊。你上学呀?”她挺爽快地应声:“是。”我对她笑了笑,推车走了。走出好久,我才慢慢体会到这种意外的感动,心里暖</div> </li> <li><a href="/article/1946824070150549504.htm" title="一年级的娃数学" target="_blank">一年级的娃数学</a> <span class="text-muted">mspeer</span> <div>娃昨天拿回家的试卷。错的都会,会的都错。订正,我说我要模拟考试现场。“准备好了吗”,“嗯”,娃坐的端端正正。1.一共有()束气球。2.从左边数起,第一束有()个气球…………第()和第()加起来是XX3.从右边数起,…………过程中我不断提醒要准备要准备(我迫切希望,前面数过的球,她能在气球旁边标个气球数量,但是她没有)。后面,我语速变快,娃渐渐力不从心,跟不上节奏。她于是说,考试时也是不认识字,跟不</div> </li> <li><a href="/article/1946822418643349504.htm" title="2021-11-01 严正纪律 规范工作" target="_blank">2021-11-01 严正纪律 规范工作</a> <span class="text-muted">锦山阁</span> <div>严正纪律规范工作——甘井子区海北路小学2021-2022学年度第二学期后勤处第二次工作会议学校后勤工作一直是学校的重要工作之一,在学校中占有重要地位,其工作量大而繁琐。2021年11月1日,为了进一步提高认识,转变观念,总结经验与不足,安排部署今后的工作,甘井子区海北路小学在会议室召开了本学期第二次工作会议。一、严正纪律规范工作参加会议的领导有李信德校长,学校安全负责人邵天洋主任。李信德校长针对门</div> </li> <li><a href="/article/1946821653245784064.htm" title="我花钱,你受益,免费干货送给想学写作的你!" target="_blank">我花钱,你受益,免费干货送给想学写作的你!</a> <span class="text-muted">俪璇</span> <div>有幸通过朋友介绍认识新媒体写作教练弗兰克,并参加了他的499元的写作特训营。时间:14天任务:根据每日主题(其间穿插四次老师的视频指导课程),连续14天作业,每篇666+,并在公号或朋友圈发布。福利:完成任务返现300元。我真是乘兴而来,满载而归!14天的听课+动手,不仅让我学会了写作技巧,而且学会了用写作的思维去工作,学习和生活。每天利用刷微信,聊QQ,骑车,甚至上厕所的时间构思、码字,每天的任</div> </li> <li><a href="/article/1946818962192920576.htm" title="对《元日》的教学回忆" target="_blank">对《元日》的教学回忆</a> <span class="text-muted">2ce049e6470f</span> <div>在上这个单元时,首先要让学生弄清楚这句话,“传统文化,是中国人的根。"让学生认识作为一个中国应该知道自己是中国人,我们有那些传统节日。这是学生就会议论纷纷,并且说出自最喜欢的节日。这时老师在引导学生看一看别人是怎样描写这些传统节日的,让我们一起来穿越时空来到宋朝时代,欣赏一下王安石是怎样来写过年的。这时出示课题一一《元日》,可以板书,引导学生思考元日是什么意思。有学生说是元旦节,有学生说不是,是春</div> </li> <li><a href="/article/1946812967404236800.htm" title="这造就我的世界(中)" target="_blank">这造就我的世界(中)</a> <span class="text-muted">两杯开水</span> <div>一年时间,我快要战胜那个了,高中生活我来了。我曾经害怕这人潮汹涌的世界,但那是从前了,我现在是一个阳光的女孩,我要去拥抱向我而来的生活。我留着我喜欢的长发,走进了高中校门,我来到班级,做到了自己的座位上,最后等来了一个熟悉的陌生人。我的同桌我认识,看他的样子应该是认不出我了。可开学的一个月时间他都没有说过话,没有跟我说话,和谁都没有说一句话。他这个样子有些奇怪,我又观察了一段时间,我发现他应该是病</div> </li> <li><a href="/article/1946800622086975488.htm" title="幸福日志2018-09-14" target="_blank">幸福日志2018-09-14</a> <span class="text-muted">楠楠家的莹小宝</span> <div>图片发自App1、带恩仔参加苹果老师的书籍分享跳蚤市场,认识了带孩子读绘本主要是读图,要引导孩子自己读图讲故事,可能孩子的故事不是书中的故事,可是,谁说故事只能有一个版本。通过两期的跳蚤市场分享,虽然家长累点,但是恩仔认识了很多好朋友,我也认识了几个志同道合的妈妈。2、家里断舍离,扔了很多不用和坏的行李箱,换成透明的收纳箱。扔东西的感觉很好,有时候我们并不需要很多东西,最主要的,我觉着家里不需要太</div> </li> <li><a href="/article/1946795140207144960.htm" title="中医笔记1-悟道修身、生命的认识、神通" target="_blank">中医笔记1-悟道修身、生命的认识、神通</a> <span class="text-muted"></span> <div>【该部分笔记主要是记录梁平师傅传授及其他网络资料讲述中医的精华知识】悟道修身:探索人的精神世界,只能依靠生命本身,生命的源头是无极大道,极少数经络敏感型的人通过修气脉,打通全身经络,尤其是任督、中脉,冲开天眼突破三维时空限制,强大的精气精能量能内视到一团光,随着能量不断增加,光的波长不断缩短,亮度不断增加,当内视到金光时,波长为零,与生命的本体无极大道相合,成为宇宙的最高级生命即是佛。我们的灵魂来</div> </li> <li><a href="/article/1946793621776822272.htm" title="爱情的法码" target="_blank">爱情的法码</a> <span class="text-muted">牛得芳草</span> <div>工业园东南角有两家工厂。一家是车轮厂,一家是服装厂。车轮厂男工多,那个服装厂女工多。工业园中心还有一个农贸市场。平时下班的时候,各个厂的工人的一日三餐都到市场买。小张,小李和小赵都是二十出头的小伙子,在车轮厂上班,都是老乡,又都没有找对象。小张爱吃馒头。每天都3元5元的买。时间长了,和卖馒头的一个小姑娘认识了,处了对象。一年之后,他们结婚了。小李爱吃煎饼果子。每天三顿,至少吃两顿。一天十元钱。渐渐</div> </li> <li><a href="/article/1946793235473035264.htm" title="2019-06-15理财小白感悟" target="_blank">2019-06-15理财小白感悟</a> <span class="text-muted">Sophy_Wong</span> <div>从很喜欢的一个喜马拉雅节目,认识了一个有趣,有思想,有能力的主播。从不知道可转债是什么,到前几天很幸运的中签了。一直都很相信吸引力法则,向优秀的人学习。哈哈,希望哪天也能成为财务自由[嘿哈][爱心]</div> </li> <li><a href="/article/1946774282679939072.htm" title="2018-07-25" target="_blank">2018-07-25</a> <span class="text-muted">林卿qing</span> <div>小城的夏天,一如既往地热。可是除了炎热,我还听到了以前都不曾听过的蝉鸣。那炙热下的马路旁,绿树的底下,密集又吸引人的聒噪声,穿透了一整个夏天。猛地回头,才发现,已经离开那么久了,其实也就一个多月的时光而已,却仿佛隔了几光年!一直不肯接受的是自己已经毕业的这个事实,可现实还是会狠狠地将你拍醒,让你清醒的认识到这个真实的存在。恩,我知道,逃不过的,我还是毕业了。上大学的这几年,可以说是人生之中的关键转</div> </li> <li><a href="/article/1946762820536299520.htm" title="2021-11-07" target="_blank">2021-11-07</a> <span class="text-muted">唯一_6805</span> <div>看到一句:有些人安静地出现在你的生命里,陪你度过一小段快乐时光,然后他再不动声色的离开,于是你的人生就有了幸福的回忆,即使以后你的道路上布满了风雪,可是你依然可以想起曾经幸福的事情,你就可以依然勇敢。特别想对那些一起走过一段路的朋友说:人和人之间的关系本就浅薄,一不留神就会走散,但无论怎样,想到那些我们共同拥有过的美好时光,我还是会觉得当初很高兴认识你。虽然没有一起了,我也有了更好的朋友。但是从来</div> </li> <li><a href="/article/1946746793932943360.htm" title="2019-学英语,我是认真的" target="_blank">2019-学英语,我是认真的</a> <span class="text-muted">Olivia奥丽薇</span> <div>学英语,2019提上了日程,在流利说体验打卡23天了,正能量群的群友推荐的每日英语听力也累计打卡使用了14天,在流利说的学习群里认识了yoyo,她介绍我用扇贝背单词,她说她们有一个群,每天背50个单词打卡,当天谁若是没有背的,就自罚红包五元到群里,通过这个方法,效果很不错。我自己也用扇贝背了5天单词的,体验还不错。感谢yoyo(送花)于是有了组队学习的想法。一直以来也是想找一个学习的伴,我们一起学</div> </li> <li><a href="/article/1946743988396552192.htm" title="带着系统穿异界第三章看戏" target="_blank">带着系统穿异界第三章看戏</a> <span class="text-muted">霜澜</span> <div>几天后,云岚宗的人来到了乌坦城萧家。大厅中,萧战以及三位长老,正在颇为热切的与那位陌生老者交谈着,不过这位老者似乎有什么难以启齿的事情一般,每每到口的话语,都将会有些无奈的咽了回去,而每当这个时候,一旁的娇贵少女,都是忍不住的横了老者一眼..倾耳听了一会,萧炎便是有些困倦,思绪飘荡,想着街头偶遇的萧成钰什么意思。“萧炎哥哥,你认识他吗,好像对你有很深的敌意呢!””就在萧炎无聊得想要打瞌睡之时,身旁</div> </li> <li><a href="/article/1946741430932271104.htm" title="嵌入式学习-PyTorch(4)-day21" target="_blank">嵌入式学习-PyTorch(4)-day21</a> <span class="text-muted">LGGGGGQ</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>1、torchvision中数据集的使用认识官方的一些数据集Datasets—Torchvision0.22documentation试了一下CIFAR10数据集,知道了如何下载官方数据集和展示他们去tensorboard中importtorchvisionfromtorch.utils.tensorboardimportSummaryWriter#处理数据集dataset_transform=t</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>