前端相关html和css
#请参考http://www.cnblogs.com/pycode/p/5792142.html
#html css 和js说明
##1.什么是html？
HTML(HyperText MarkUp Language)超文本标记语言,通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行解析,然后把结果显示在网页上，通俗的讲它就是服务器发送的字符串到浏览器，通过浏览器能解析的规则用HTML来描述， 它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础
* HTML语言是一种标记语言,不需要在服务端编译,直接由浏览器解释执行
* HTML文件是一个文本文件,包含了HTML自己的所有元素
* HTML文件必须使用html或htm为文件名后缀
* HTML不区分大小写,所以HTML与html是一样的
## 2. html css 和js关系
html是一个网页的主题，是由多个元素组合成的，但是这写元素保留的是基本默认属性，css就是这个网页的样式，css定义了元素的属性，js是通过jacascript语言，实现在一个页面上展现不同的css样式。
它们的关系通俗讲就是 html是一个赤裸裸的人，css是人的衣服，js作用是让人动起来
# HTML
##结构
```
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
html中元素是成对存在的，前面叫开始标签，后边叫闭合标签，如< html></ html>,还有一种不需要成对出现的标签，又称为自闭合标签
##Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
* BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
* CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
有，用什么？
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
如下就是列举出来的部分解析html的规则。
##head信息
###1.Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
* 页面编码（告诉浏览器是什么编码）
```
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
<meta charset="UTF-8">
```
* 刷新和跳转
```
<meta http-equiv=“Refresh” Content=“30″>
<meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
```
* 关键词
关键字作用一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站
```
<meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
```
* 描述
例如：cnblogs
```
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
```
* X-UA-Compatible 浏览器兼容类型
```
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
```
### 2. TITLe
网页头部信息
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是头部标题</title>
</head>
<body>
</body>
</html>
```
效果：
###3. Link
引入外部文件
* css
```
<link rel="stylesheet" type="text/css" href="css/common.css" >
```
* icon 图标
```
<link rel="shortcut icon" href="image/favicon.ico">
```
* Style
在页面中写样式
例如：
```
<style type="text/css" >
.bb{
background-color: red;
}
</style>
```
* Script
* 引进文件
```
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> <／script >
```
* 写js代码
```
<script type="text/javascript" > ... </script >
```
##body主体
body主体是由多个标签组成，标签一般分为两种：
* 块级标签：显示外观按块显示，有一定的宽度和高度，并占据一行,如标题标签、段落标签、水平线标签、列表标签、分区标签(div)
* 行内标签：内嵌标签，类似于文本，按行逐一显示，只有本行完事之后，才继续下一行。如图像标签、超链接标签、范围标签、换行标签等
###特殊符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
###常用标签
* h 标题标签 h1--h6表示不同等级的标题
```
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
```
效果：
* 行控制标签
* br/ 换行
* p 段落
* hr/ 水平线
* span 范围
```
<p>这是P标签</p>
<p>这是换行效果sdafafa<br/>asfafafafafafafaf</p>
asdasdasdada<hr/>
<span>fuzj</span>
```
效果：
* 上标和下标
上标：< sub></ sub>
下标：< sup></ sup>
* a 超链接标签
* 页面链接
< a href="b.html"> </a>
* url连接
< a href="http://www.autohome.com.cn"> </a>
* 锚连接
1.命名标记 id=1 id需要唯一
2.锚连接 < a href="#1"> </a>
```
<a href="http://www.baidu.com">百度1</a>
<a href="http://www.baidu.com" target="_blank">百度2</a>
#以上两个代码都是跳转到百度页面，唯一在于，加target又重新打开一个标签页面，第一句是在自身页面打开的
<!--寻找页面中id=i1的标签，将其标签放置在页面顶部-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<!--id没有一个标签的id属性值不允许重复，id属性可以不写-->
<div id="i1" style="height: 500px";>第一章内容</div>
<div id="i2" style="height: 500px";>第二章内容</div>
<div id="i3" style="height: 500px";>第三章内容</div>
```
* 表单 form
* 概念
作用：收集客户端的信息，实现交互
结构：
表单域 < form> < /form>
表单元素 < input />
* 表单域
action 数据提交的目标地址
method 提交方式 get post
* 表单元素
* 文本域 type='text'
* 密码框 type='password'
* 单选框 type='redio' 注意同表单中name需要指定，并且保持一致，并设置不同的选定值 value
* 复选框 type='checkbox' 需设定选定值value
* 列表菜单 select
< select>
< option>选项1< /option>
< option>选项2< /option>
< /select>
* 提交按钮 type='submit'
* 重置按钮 type='reset'
* 普通按钮 type='butten'
* 图片按钮 type='image' src='图片'
* 文本区域 < testarea>< /testarea>
* 文件域 type='file'
```
<form>
<input type="text" value="文本框" />
<input type="password" value="密码框" />
<br> 男 <input type="radio" value="man" name="chice" />
<br> 女 <input type="radio" value="woman" name="chice" />
<br> 北京 <input type="checkbox" value="Beijing" name="bj" />
<br> 上海 <input type="checkbox" value="Shanghai" name="sh" />
<br> 广州 <input type="checkbox" value="Guangzhou" name="gz" />
<br> 深圳 <input type="checkbox" value="Shenzhen" name="sz" />
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<select>
<optgroup label="华北">
<option>北京</option>
<option>天津</option>
<option>石家庄</option>
</optgroup>
<optgroup label="东北">
<option>辽宁</option>
<option>吉林</option>
<option>黑龙江</option>
</optgroup>
</select>
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</form>
```
* 列表
* 无序列表
< ul>
< li>< /li>
< li>< /li>
< /ul>
* 有序列表
< ol>
< li>< /li>
< li>< /li>
< /ol>
* 定义列表
< dl>
< dt>标题1< /dt>
< dd>选项1< /dd>
< dd>选项2< /dd>
< dt>标题2< /dt>
< dd>选项1< /dd>
< dd>选项2< /dd>
< /dl>
* 表格
* 格式：
< table>
< tr> 一列
< td>< /td> 一行
< td>< /td> 二行
< /tr>
< tr> 二列
< td>< /td> 一行
< td>< /td> 二行
< /tr>
< /table>
* 合并单元格：
跨列（横向合并）：< td cospan=列数>。。。< /td>
跨行（纵向合并）: < tr rowspan=行数>。。。< /tr>
注意：合并多少，需在下一列或行减去对应的行数或列数
* 高级
* 标题 < caption>...< /caption>
* 表头 < th>..< /th>
* 页眉 < thread>...< /thread>
* 页脚 < tfoot>..< /tfoot>
# CSS
##选择器
```
标签选择器
div{ background-color:red; }
<div > </div>
class选择器
.bd{ background-color:red; }
<div class='bd'> </div>
id选择器
#idselect{ background-color:red; }
<div id='idselect' > </div>
关联选择器
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
组合选择器
input,div,p{ background-color:red; }
属性选择器
input[type='text']{ width:100px; height:200px; }
```
优先级：
ID选择器>类选择器>标签选择器
按照代码的上下顺序，下面的优先级更高
内层标签>外层标签
行内标签优先级高于所有样式表
##CSS常用属性
###background 背景
* 1.background-color 背景颜色
```
<div style=" 红色背景</div>
```
效果：
* 2.background-image 背景图片
```
<div style="background-image: url(saf.jpg); height: 100px;width: 100px"></div>
```
效果：
发现当图片大小小于div时，图片默认会复制多个进行填充，看下面解决办法
* background-repeat 设置是否及如何重复背景图像
```
<div style="background-image: url(saf.jpg); height: 100px;width: 100px;background-repeat: no-repeat"></div>
```
* background-position 图片移位
```
<div style="background-image: url(saf.jpg); height: 100px;width: 100px;background-repeat: no-repeat; background-position: bottom"></div>
```
### border 边框
设置边框，分为实线、虚线、点的线形式如下代码
```
<!--第一种：设置一个线粗2像素、实线、红色、框高20像素（不写框高线就重叠了）、框里面的内容为实线-->
<div style="border: 2px solid red;height: 20px">实线</div>
<!--第二种：设置线粗2像素、点形式的线、黑色、框高20像素，框里面的内容为 虚线-->
<br /><div style="border: 2px dotted black;height: 20px">虚线</div>
<!--第三种：设置线粗2像素、虚线、蓝色、框高20像素，框里面的内容为虚线-->
<br/><div style="border: 2px dashed blue;height: 20px">粗虚线</div>
```
### cursor
设置鼠标停留的形状
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标小手</title>
</head>
<body>
<p style="cursor:pointer">停放在这里显示小手(pointer)</p>
<p style="cursor:help">停放在这里显示问号(help)</p>
<p style="cursor:wait">停放在这里显示一个圈正在加载形状(wait)</p>
<p style="cursor:move">停放在这里显示移动(move)</p>
<p style="cursor:crosshair">停放在这里显示定位(crosshair)</p>
</body>
</html>
```
###float 浮动
默认块级元素占一整行，如果想要并排显示，可以使用float属性
float属性分左浮动、右浮动
默认：
```
<div style="border: 1px solid black">
<div style=" width: 50px ;height: 50px"> </div>
<div style=" width: 50px ;height: 50px"> </div>
</div>
```
效果：
如果想要红色的div和蓝色div并排显示，可以加入float属性
```
<div style="border: 1px solid black">
<div style=" width: 50px ;height: 50px ; float: left"> </div>
<div style=" width: 50px ;height: 50px;float: left"> </div>
</div>
```
已经达到我们的效果，通过效果发现，float起来之后，最外边的div没有里面div的支撑，已经没有了高度，如果我们既需要并排显示，也需要将float之后重新支撑最外边的div，可以进行如下配置
```
<div style="border: 1px solid black">
<div style=" width: 50px ;height: 50px ; float: left"> </div>
<div style=" width: 50px ;height: 50px;float: left"> </div>
<div style="clear: both"></div>
</div>
```
或者利用伪类进行操作：
```
<style>
.clearfix:after {
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
<div style="border: 1px solid black" class="clearfix">
<div style=" width: 50px ;height: 50px ; float: left"> </div>
<div style=" width: 50px ;height: 50px;float: left"> </div>
</div>
```
关于伪类的扩展：
before 在标签前加属性
after 在标签后加属性
```
<style>
.c1:before {
content: '666';
}
.c2:after {
content: '888';
}
</style>
<div>
<div class="c1">777</div>
<div class="c2">000</div>
</div>
```
效果：
这种用法常用于设置整个页面的背景颜色
###边距 margin和padding
* margin 即外边距 ，用于设置对象标签之间距离间隔
* padding 即内边距，用于设置本标签内部间距
使用：
默认：
```
<div style="border: 1px solid red">
<div style="width: 50px;height: 50px;">123</div>
<div style="width: 50px;height: 50px;">456</div>
</div>
```
效果：
使用边距移动:
```
<div style="border: 1px solid red ;height: 150px; width: 150px;">
<div style="width: 50px;height: 50px; margin: 10px 0px 0px 20px;padding: 10px 10px 10px 10px">123</div>
<div style="width: 50px;height: 50px;">456</div>
</div>
```
效果：
说明：
* margin: 10px 0px 0px 20px 是蓝色div 距外边框上面10px、右边0px、下边0px、左边20px ，所以蓝色边框距原来的位置移动了
* padding: 10px 10px 10px 10px 是蓝色div内部，通过增加内边距，将123 向上、右、下、左各增加了10px，所以123就出现了边框中间
margin和padding 也支持单独对某个边进行设置
margin-left 对象左边外延边距 （margin-left:5px; 左边外延距离5px）
margin-right 对象右边外延边距 （margin-right:5px; 右边外延距离5px）
margin-top 对象上边外延边距 （margin-top:5px; 上边外延距离5px）
margin-bottom 对象下边外延边距 （margin-bottom:5px; 下边外延距离5px）
padding同样
###定位
常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。
position参数：
* fixed:特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位，滚动鼠标位置不移动
* absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。按照浏览器的窗口进行定位，滚动鼠标，位置会跟着移动
* relative : 单独写没有什么什么效果，给absolute 结合才能出现化学反应，可以固定在指定的哪个框里面的位。
fixed示例：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
</head>
<body>
<div style="height: 1000px"></div>
<!--在浏览器窗口右上角固定位置,鼠标怎么滚动位置都不会变-->
<div style="position: fixed;right:30px;top:30px;height: 50px;width: 100px">
返回顶部
</div>
</body>
</html>
```
absolute用法：
单独使用absolute用法给fixed语法一样区别在于，固定的浏览器窗口位置会随着鼠标的滚动而移动。
```
<div style="height: 100px;width: 200px">
<!--在浏览器窗口右上角固定位置,随着鼠标滚动而滚动-->
<div style="position: absolute;right:30px;top:30px;height: 50px;width: 100px">
返回顶部
</div>
```
效果：
relative ＋ absolute用法：
relative为absolute指定了固定位置的参照标签，如上图，我需要将红色div放在左边的框里
```
<div style="height: 100px;width: 200px;position: relative">
<!--在外边div右上角固定位置,随着鼠标滚动而滚动-->
<div style="position: absolute;right:30px;top:30px;height: 50px;width: 100px">
返回顶部
</div>
```
效果：
###滚动条overflow
Overflow可以实现隐藏超出对象内容，同时也有显示与隐藏滚动条的作用。
应用场景，有这么一种情况，在一个div内有很多的的内容，如果div的框体不是很大超出去了怎么办？
如下图我不想把"Tom"超出我定义的边框样式：
使用overflow
```
<div style="height: 100px;width: 500px;overflow: auto">
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
123<br/>
</div>
```
效果：
###display显示与隐藏
我们常常会用到display对应值有block、none、inline这三个值
* 使用display:none;来隐藏所有信息（无空白位占据）
* display:block；用来把内联标签变成块级标签
* display:inline;用来把块级标签变成内联标签
* display:inline-block;把内联标签可以运用样式如：高度，或宽度
```
<!--把内联标签变成块级标签-->
<p style="display:inline;height: 50px;">
块级标签转成内联标签
</p>
<div style="display: none"> display: none此标签隐藏</div>
<span style="display:block;height: 50px;">内联标签转换成块级标签</span>
<span style="display: inline-block;height: 50px; ">内联标签可以运用样式如：高度、宽度</span>
```
效果：
##补充属性
* 背景属性
* background-color 规定要使用的背景颜色。
* background-position 规定背景图像的位置。
* background-size 规定背景图片的尺寸。
* background-repeat 规定如何重复背景图像。
* background-origin 规定背景图片的定位区域。
* background-clip 规定背景的绘制区域。
* background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 1
* background-image 规定要使用的背景图像。
* inherit 规定应该从父元素继承 background 属性的设置。
* 边框属性
* border 简写属性，用于把针对四个边的属性设置在一个声明。
* border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
* border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
* border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
* border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
* border-bottom-color 设置元素的下边框的颜色。
* border-bottom-style 设置元素的下边框的样式。
* border-bottom-width 设置元素的下边框的宽度。
* border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
* border-left-color 设置元素的左边框的颜色。
* border-left-style 设置元素的左边框的样式。
* border-left-width 设置元素的左边框的宽度。
* border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
* border-right-color 设置元素的右边框的颜色。
* border-right-style 设置元素的右边框的样式。
* border-right-width 设置元素的右边框的宽度。
* border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
* border-top-color 设置元素的上边框的颜色。
* border-top-style 设置元素的上边框的样式。
* border-top-width 设置元素的上边框的宽度。
* outline 在一个声明中设置所有的轮廓属性
* outline-color 设置轮廓的颜色
* outline-style 设置轮廓的样式
* outline-width 设置轮廓的宽度
* 文本属性
* color 设置文本颜色
* direction 设置文本的方向、书写方向
* letter-spacing 设置字符间距
* line-height 设置行高
* text-align 设置文本的水平对齐方式
* text-decoration 设置添加到文本的装饰效果
* text-indent 设置缩进
* text-shadow 设置添加到文本的阴影效果
* word-spacing 设置单词间距
* 外边距属性
* margin 在一个声明中设置所有的外边距属性
* margin-bottom 设置下外边距属性
* margin-left 设置左外边距属性
* margin-right 设置右外边距属性
* margin-top 设置上外边距属性
* 内边距属性
* padding 在一个声明中设置所有的外边距属性
* padding-bottom 设置下内边距属性
* padding-left 设置左内边距属性
* padding-right 设置右内边距属性
* padding-top 设置上内边距属性
* 定位属性
* position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
* top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
* right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
* bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
* left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
* overflow 设置当元素的内容溢出其区域时发生的事情。
* clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
* vertical-align 设置元素的垂直对齐方式。
* z-index 设置元素的堆叠顺序。
* cursor 设置光标类型
* display 是否显示
* float 设置浮动
##其他技巧：
* 拐角：
效果：
代码：
```
<style>
.jianjiao{
display: inline-block;
border-top: 15px solid red;
border-bottom: 15px solid yellow;
border-right:15px solid green;
border-left:15px solid blue;
}
}
</style>
<div class="jianjiao">
</div>
```
* 跑马灯：
```
<div id="i1" style="color: white ; display: inline-block"> 欢迎暴强莅临指导</div>
<script>
// 方式1
// setInterval("f1()",1000)
// function f1() {
//
// var tag = document.getElementById("i1");
// var text = tag.innerText;
// var a = text.charAt(0)
// var sub = text.substring(1,text.length)
//
// var new_str = sub + a
// tag.innerText = new_str
//
// }
// 方式2
setInterval(function () {
var tag = document.getElementById("i1");
var text = tag.innerText;
var a = text.charAt(0)
var sub = text.substring(1,text.length)
var new_str = sub + a
tag.innerText = new_str
},1000);
```
前端相关html和css的更多相关文章
- 【前端优化之拆分CSS】前端三剑客的分分合合
几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- Web前端相关资源
Web前端相关 GRUNT: js task runner Sea.js: js模块化 knockout.js:MVVM开发前台,绑定技术 Angular.js: 使用超动感HTML & JS ...
- 15款不容错过的前端开发Javascript和css类库 - 2017版本~
前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- Web 前端之HTML和CSS
Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...
- 前端总结·基础篇·CSS（一）布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
随机推荐
- sql 判断 函数 存储过程是否存在的方法
下面为您介绍sql下用了判断各种资源是否存在的代码,需要的朋友可以参考下,希望对您学习sql的函数及数据库能够有所帮助.库是否存在if exists(select * from master..sys ...
- Oracle转移数据表空间存储位置
问题描述:Oracle表空间创建到了C盘,发现C盘的空间不够,现在将表空间的文件转移到D盘下. 操作方法: 1. 先登录sqlplus,登录用户.在cmd中输入:sqlplus /nologSQL&g ...
- MongoDB学习笔记~为IMongoRepository接口添加了排序和表达式树，针对官方驱动
回到目录 MongoDB的官方驱动,语法更好,更强 之前写过关于IMongoRepository仓储的文章,在mongodb的驱动选择上使用了NoRM,但是进行$ref引用类型导航时出现了问题,它对引 ...
- Python简单爬虫入门二
接着上一次爬虫我们继续研究BeautifulSoup Python简单爬虫入门一 上一次我们爬虫我们已经成功的爬下了网页的源代码,那么这一次我们将继续来写怎么抓去具体想要的元素 首先回顾以下我们Bea ...
- MalformedByteSequenceException: Invalid byte 1 of 1-byte
修改了线上程序的xml配置文件,重启后报如下错误: MalformedByteSequenceException: Invalid byte 1 of 1-byte 百度了下大体的意思是说文件的编码错 ...
- [ZZ]From QA to Engineering Productivity
http://googletesting.blogspot.com/2016/03/from-qa-to-engineering-productivity.html In Google’s early ...
- 闪电动画模拟（Dielectric Breakdown Model）附源码
当两个物体之间存在较大的电势差时会出现放电现象,比如生活中常见的闪电现象,闪电形成的条件就是云层积累了大量负电荷之后与地面之间形成了强大的电势差.目前关于闪电建模的方法比较少,下面介绍一种利用电介击穿 ...
- HDU3466 Proud Merchants[背包DP 条件限制]
Proud Merchants Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) ...
- codevs 2928 你缺什么
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 继"你幸福吗"之后,央视又推出了"你缺什么 ...
- mysql 加锁测试
今天研究cobar,做执行时间测试,需要对表记录加锁.用了以下两种方式为表记录加锁. 第一种方式: begin; //开始事务 select * from 表名 ( where ……) for ...