概述

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!

如下图:

HTML页面主体格式如下:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
   ......
</head>
<body>
.......
</body>
</html>

下面我们一一来看一下每一个的含义:

<!DOCTYPE html>:
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档,建议填写,否则可能会出现位置错误
有和无的区别
  1. BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
  2. CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

有,用什么?

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。


Meta(metadata information)

提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

    1. 页面编码(告诉浏览器是什么编码)

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

<meta charset="UTF-8">

    1. 刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

    1. 关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

    1. 描述

例如:cnblogs

    1. X-UA-Compatible

微软的IE6是通过XP、Win2003等操作系统发布出来,作为占统治地位的桌面操作系统,也使得IE占据了通知地位,许多的网站开发的时候,就按照IE6的标准去开发,而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候,采用了微软公司内部标准以及部分W3C的标准,这个时候许多网站升级到IE7的时候,就比较痛苦,很多代码必须调整后,才能够正常的运行。而到了微软的IE8这个版本,基本上把微软内部自己定义的标准抛弃了,而全面的支持W3C的标准,由于基于对标准彻底的变化了,使得原先在早期IE8版本上能够访问的网站,在IE8中无法正常的访问,会出现一些排版错乱、文字重叠,显示不全等各种兼容性错误。

与任何早期浏览器版本相比,Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此,针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题,Internet Explorer 8 引入了文档兼容性的概念,从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式;这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示,则可以更新该站点以支持最新的 Web 标准(首选方式),也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中,可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时,它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型,则 Internet Explorer 8 将以 IE5 模式(Quirks 模式)显示该网页。更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Title

网页头部信息

Link

    1. css
< link rel="stylesheet" type="text/css" href="css/common.css" >
    1. icon
< link rel="shortcut icon" href="image/favicon.ico">

Style

在页面中写样式

例如:


< style type="text/css" >  #定义CSS样式 .bb
.bb{
background-color: red; #定义背景颜色为红色
}
< /style>

Script

  1. 引进文件
  2. < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
  3. 写js代码
  4. < script type="text/javascript" > ... </script >

常用标签及标签效果

标签一般分为两种:块级标签 和 行内标签

  • a、span、select 等
  • div、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落,默认段落之间是有间隔的!

br 是换行

a标签

< a href="http://www.autohome.com.cn"> </a>

1、target属性,_black表示在新的页面打开

2、锚

H 标签

H1

H2

H3

H4

H5
H6

select 标签

上海
 
北京
 
广州
   
上海
 
北京
 
广州
 
广州
   
上海
 
北京
 
广州
 
广州
   
 
石家庄
 
邯郸
 
 
 
太原
 
平遥

Checkbox

redio

password

button

file

提交文件时: enctype='multipart/form-data' method='POST'

textarea

label

ul ol dl

ul

  • ul.li
  • ul.li
  • ul.li

ol

  1. ol.li
  2. ol.li
  3. ol.li

dl

河北省
邯郸
石家庄
山西省
太原
平遥

table

fieldset

登录

用户名:

密码:

form 表单

文件:enctype='multipart/form-data' method='POST'

CSS及样式效果

css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。

存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。

语法:style = 'key1:value1;key2:value2;'

  • 在标签中使用 style='xx:xxx;'
  • 在页面中嵌入 < style type="text/css"> </style > 块
  • 引入外部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; }
 
 

background

border

margin

padding

display

display:none

original

display:block

display:inline

cursor

  • css提供的cursor值

pointer || help || wait || move || crosshair

  • 伪造超链接

pointer

  • 自定义(一般不用)

mine

浮动

position

http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

透明度

CSS 背景实例:

设置背景颜色

 <html>
<head> <style type="text/css"> body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 20px;} </style> </head> <body> <h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p> </body>
</html>

查看结果:

设置文本的背景颜色

 <html>
<head>
<style type="text/css">
span.highlight
{
background-color:yellow
}
</style>
</head> <body>
<p>
<span class="highlight">这是文本。</span>
<span class="highlight">这是文本。</span>
</p>
</body>
</html>

结果:

将图像设置为背景

 <html>
<head>
<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
</style>
</head>
<body></body>
</html>

结果:

CSS 文本实例:

设置文本颜色

 <html>
<head>
<style type="text/css">
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
</style>
</head> <body>
<h1>这是 heading 1</h1>
<p>这是一段普通的段落。请注意,该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>
<p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p>
</body>
</html>

结果:

CSS 字体(font)实例:

设置文本的字体大小

 <html>
<head>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head> <body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body> </html>

结果:

设置字体的粗细

 <html>
<head>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head> <body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body> </html>

结果:

CSS 边框(border)实例:

设置四边框样式

 <html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head> <body>
<p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p> <p class="solid">A solid border</p> <p class="double">A double border</p> <p class="groove">A groove border</p> <p class="ridge">A ridge border</p> <p class="inset">An inset border</p> <p class="outset">An outset border</p>
</body> </html>

结果:

设置每一边的不同边框

 <html>
<head>
<style type="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head> <body>
<p class="soliddouble">Some text</p> <p class="doublesolid">Some text</p> <p class="groovedouble">Some text</p> <p class="three">Some text</p>
</body> </html>

设置四个边框的颜色

 <html>
<head> <style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style> </head> <body>

设置下边框的颜色

 <html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-color:#ff0000; #设置底部边框的颜色
}
</style>
</head> <body>
<p>This is some text in a paragraph.</p>
</body> </html>

设置下边框的样式

 <html>
<head>
<style type="text/css">
p {border-style:solid}
p.none {border-bottom-style:none}
p.dotted {border-bottom-style:dotted}
p.dashed {border-bottom-style:dashed}
p.solid {border-bottom-style:solid}
p.double {border-bottom-style:double}
p.groove {border-bottom-style:groove}
p.ridge {border-bottom-style:ridge}
p.inset {border-bottom-style:inset}
p.outset {border-bottom-style:outset}
</style>
</head> <body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>

设置下边框的宽度

 <html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-bottom-width: 15px
}
p.two
{
border-style: solid;
border-bottom-width: thin
}
</style>
</head>
<body> <p class="one"><b>注释:</b>"border-bottom-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p> </body>
</html>

左、右和上类似,不在一一赘述。

CSS 外边距 (margin) 实例:

设置文本的左外边距

 <html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head> <body>
<p>这个段落没有指定外边距。</p>
<p class="leftmargin">这个段落带有指定的左外边距。</p>
</body> </html>

设置文本的右外边距

 <html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head> <body>
<p>这个段落没有指定外边距。</p>
<p class="rightmargin">这个段落带有指定的右外边距。这个段落带有指定的右外边距。这个段落带有指定的右外边距。</p>
</body> </html>

设置文本的上外边距

 <html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head> <body>
<p>这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>

设置文本的下外边距

 <html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head> <body>
<p>这个段落没有指定外边距。</p>
<p class="bottommargin">这个段落带有指定的下外边距。</p>
<p>这个段落没有指定外边距。</p>
</body> </html>

所有的外边距属性在一个声明中

 <html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head> <body> <p>这个段落没有指定外边距。</p> <p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p> <p>这个段落没有指定外边距。</p> </body> </html>

CSS 内边距 (padding) 实例:

设置下内边距

 <html>
<head>
<style type="text/css">
td {padding-bottom: 2cm}
</style>
</head> <body>
<table border="1">
<tr>
<td>
这个表格单元拥有下内边距。
</td>
</tr>
</table>
</body> </html>

设置上内边距

 <html>
<head>
<style type="text/css">
td {padding-top: 2cm}
</style>
</head> <body>
<table border="1">
<tr>
<td>
这个表格单元拥有上内边距。
</td>
</tr>
</table>
</body> </html>

设置左内边距

 <html>
<head>
<style type="text/css">
td {padding-left: 2cm}
</style>
</head> <body>
<table border="1">
<tr>
<td>
这个表格单元拥有左内边距。
</td>
</tr>
</table>
</body> </html>

设置右内边距

 <html>
<head>
<style type="text/css">
td {padding-right: 5cm}
</style>
</head> <body>
<table border="1">
<tr>
<td>
这个表格单元拥有右内边距。
</td>
</tr>
</table>
</body> </html>

CSS 列表实例:

 <html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head> <body>
<ul class="disc">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="circle">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="square">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="none">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body> </html>

在有序列表中不同类型的列表项标记

 <html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head> <body>
<ol class="decimal">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol> <ol class="lroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol> <ol class="uroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>

所有的列表样式类型

 <html>
<head>
<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
</head> <body>
<ul class="none">
<li>"none" 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="disc">
<li>Disc 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="circle">
<li>Circle 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="square">
<li>Square 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="decimal">
<li>Decimal 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="decimal-leading-zero">
<li>Decimal-leading-zero 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="lower-roman">
<li>Lower-roman 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="upper-roman">
<li>Upper-roman 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="lower-alpha">
<li>Lower-alpha 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="upper-alpha">
<li>Upper-alpha 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="lower-greek">
<li>Lower-greek 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> <ul class="lower-latin">
<li>Lower-latin 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

将图像作为列表项标记

 <html>
<head>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head> <body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body> </html>

CSS 表格实例:

设置表格的布局

 <html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body> <table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table> <br /> <table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table> </body>
</html>

合并表格边框

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
} table, td, th
{
border:1px solid black;
}
</style>
</head> <body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
<p><b>注释:</b>如果没有规定 !DOCTYPE,border-collapse 属性可能会引起意想不到的错误。</p>
</body>
</html>

设置表格边框之间的空白

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>
<head>
<style type="text/css">
table.one
{
border-collapse: separate;
border-spacing: 10px
}
table.two
{
border-collapse: separate;
border-spacing: 10px 50px
}
</style>
</head>
<body> <table class="one" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table> <br /> <table class="two" border="1">
<tr>
<td>Carter</td>
<td>Thomas</td>
</tr>
<tr>
<td>Gates</td>
<td>Bill</td>
</tr>
</table> <p><b>注释:</b>如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 border-spacing 属性。</p> </body>
</html>

HTML与CSS二三事的更多相关文章

  1. Java并发编程二三事

    Java并发编程二三事 转自我的Github 近日重新翻了一下<Java Concurrency in Practice>故以此文记之. 我觉得Java的并发可以从下面三个点去理解: * ...

  2. linux杂记(十二?) 关于账号和密码的二三事

    关于密码的二三事 关于账号和密码的二三事 久了不更linux的相关知识,实在是懒得想内容点(纯粹是懒).那么今天就来谈谈关于linux密码和账号的重要概念. 假如你的主机遭到入侵,那么对方的第一个侵入 ...

  3. MySQL5.7关于密码二三事

    MySQL5.7关于密码二三事 第一个:update user set password=password('root') where user='root' and host='localhost' ...

  4. Java中的匿名内部类及内部类的二三事

    匿名内部类适合创建那些只需要使用一次的类,它的语法有些奇怪,创建匿名内部类会立即创建一个该类的实例,这个类定义立即消失,且不能重复使用. 定义匿名类的格式如下: new 实现接口() |父类构造器(实 ...

  5. Emacs 启动优化二三事

    Emacs 启动优化二三事 */--> div.org-src-container { font-size: 85%; font-family: monospace; } p {font-siz ...

  6. WinForm二三事(三)Control.Invoke&Control.BeginInvoke

    http://www.cnblogs.com/yuyijq/archive/2010/01/11/1643802.html 这个系列从2009年写到2010年,差点又成太监文.随着WPF/Silver ...

  7. iOS7下滑动返回与ScrollView共存二三事

    [转载请注明出处] = =不是整篇复制就算注明出处了亲... iOS7下滑动返回与ScrollView共存二三事 [前情回顾] 去年的时候,写了这篇帖子iOS7滑动返回.文中提到,对于多页面结构的应用 ...

  8. 一只代码小白git托管路上的二三事

    [经验]一只代码小白git托管路上的二三事 写在前面的话 寒假的时候,娄老师给我们布置了代码托管的作业,并要求把托管地址发给学委.因假期的时候没有带电脑回家,所以只是在手机上草草注册了,也稀里糊涂就将 ...

  9. YTU 1008: 童年生活二三事

    1008: 童年生活二三事 时间限制: 1000 Sec  内存限制: 64 MB 提交: 842  解决: 592 题目描述 Redraiment小时候走路喜欢蹦蹦跳跳,他最喜欢在楼梯上跳来跳去. ...

随机推荐

  1. python 3 学习笔记(二)

    1.python中的数据类型 python使用对象模型来存储数据,每一个数据类型都有一个内置的类,每新建一个数据,实际就是在初始化生成一个对象,即所有数据都是对象对象三个特性 身份:内存地址,可以用i ...

  2. 用JS控制video暂停再播放

    模块就是用来进行封装,进行高内聚 低耦合的功能.其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须要引用它,ng2 中叫import 导入.那么我们看模块是否有 ...

  3. Linux任务计划

    Linux任务计划: 一次性任务执行(at.batch): at:定时任务,指定一个时间执行一个任务,只能执行一次. at使用方式: 交互式:让用户在at>提示符输入多个要执行的命令: 批处理: ...

  4. Zookeeper 的学习与运用

    引子 云计算越来越流行的今天,单一机器处理能力已经不能满足我们的需求,不得不采用大量的服务集群.服务集群对外提供服务的过程中,有很多的配置需要随时更新,服务间需要协调工作,这些信息如何推送到各个节点? ...

  5. 两种设置disabled属性以及三种方法移除disabled属性

    //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...

  6. 访问者模式(Visitor Pattern)

    定义:封装某些作用于某种数据结构中各元素的操作,它可以在不改变数据结构的前提下定义作用于这些元素的新的操作. Visitor 抽象访问者角色:为该对象结构中具体元素角色声明一个访问操作接口.该操作接口 ...

  7. How to create/restore a slave using GTID replication in MySQL 5.6

    MySQL 5.6 is GA! Now we have new things to play with and in my personal opinion the most interesting ...

  8. oracle 用户与表空间关系

    oracle用户与表空间关系用户=商家表=商品表空间=仓库1. 1个商家能有很多商品,1个商品只能属于一个商家2. 1个商品可以放到仓库A,也可以放到仓库B,但不能同时放入A和B3. 仓库不属于任何商 ...

  9. C#连接操作mysql实例

    第三方组件:Mysql.Data.dll说明:去官方网站下载Mysql.Data.dll,然后在项目中添加该组件的引用,在代码页里输入using Mysql.Data.MysqlClient,我们就可 ...

  10. 使用异步I/O大大提高应用程序的性能

    转自:https://www.ibm.com/developerworks/cn/linux/l-async/ AIO简介 Linux中最常见的输入输出(I/O)模型是同步I/O.在这个模型中,当请求 ...