前端知识十分钟预览之学习札记
1 HTML，描述网页的语言
——————————————————
编码 <meta charset="utf-8">
HTML5头标识 <!DOCTYPE html>
换行 <br/>
水平线 <hr/>
空格
超链接 未访问：蓝色下划线。访问过：紫色下划线。点击：红色下划线。
跳转 <a href="#C4">查看章节 4</a> <a id="C4">章节 4</a>
link <link rel="stylesheet" type="text/css" href="mystyle.css">
meta <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30"> 每30秒中刷新当前页面
CSS <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
文本对齐方式 text-align:center;
iframe
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<a href="http://www.runoob.com" target="iframe_a">
颜色 rgb http://www.runoob.com/html/html-colors.html
2 HTML5
——————————————————
解决浏览器对html5兼容性
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
canvas 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
自动填充 autocomplete="on"
pattern pattern="[A-Za-z]{3}
文本框内提示 placeholder="Last name"
required
不能空适用：text,search,url,telephone,email,assword,date,pickers,number, checkbox, radio 以及 file。
启动缓存 <html manifest="demo.appcache">
3 CSS3，叠样式表
——————————————
圆角
div
{
border:2px solid;
border-radius:25px;
}
盒阴影
div
{
box-shadow: 10px 10px 5px #888888;
}
边界图片
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
background-image
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
定位背景图片：content-box, padding-box,和 border-box区域内可以放置背景图像
background-origin:border-box;
渐变
上下
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
左右
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
对角
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
文本阴影
text-shadow: 5px 5px 5px #FF0000;
box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px grey;
box-shadow: 10px 10px 5px grey;
旋转
-webkit-transform:rotate(20deg); /* Safari and Chrome */
动画
div
{
animation: myfirst 5s;
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
column-count: 3;多列
column-gap:40px；列间隙
column-rule-style: solid; 列边框
column-rule-width 属性指定了两列的边框厚度:
column-rule-color 属性指定了两列的边框颜色：
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
4 DOM，文档对象模型
—————————————————
getElementById() 方法返回带有指定 ID 的元素
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
getElementsByClassName()
document.getElementsByTagName("p");
下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
——————————
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
事件
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
—————————
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
5 JS，脚本语言
——————————————————
输出 document.write("<h1>This is a heading</h1>");
提示 onclick="alert('Welcome!')
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
x.style.color="#ff0000"; //改变样式
<script src="myScript.js" /> // 外部调用
单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。
var cars=["Audi","BMW","Volvo"]; //数组
var person={firstname:"Bill", lastname:"Gates", id:5566}; //对象
for (x in person)
全局变量 carname
条件运算符 variablename=(condition)?value1:value2
错误捕获：
try {
//在这里运行代码
}
catch(err) {
//在这里处理错误
}
邮箱验证：
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
改变html属性
<script>
document.getElementById("image").src="landscape.jpg";
</script>
改变 HTML 样式
<script>
document.getElementById("p2").style.color="blue";
</script>
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 和 onunload 事件可用于处理 cookie。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：
var myDate=new Date()
myDate.setFullYear(2008,7,9)
设置为 5 天后的日期：
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
四舍五入：document.write(Math.round(4.7))
random() 方法来返回一个介于 0 和 1 之间的随机数：
document.write(Math.random())
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
正则
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
new RegExp(pattern, attributes);
pattern 字符串，正则表达式。
attributes 可选string，属性g:全局匹配、i:区分大小写
和 m:多行匹配。
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。
. 查找单个字符，除了换行和行结束符。
d 查找数字。
D 查找非数字字符。
s 查找空白字符。
S 查找非空白字符。
匹配单词边界。
B 匹配非单词边界。
查找 NUL 字符。
查找换行符。
查找回车符。
查找制表符。
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。
定义 RegExp：
var patt1=new RegExp("e");
test() 方法检索字符串中的指定值。返回值是 true 或 false。
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
警告框 alert("文本")
确认框 confirm("文本")
提示框 prompt("文本","默认值")
JavaScript 计时事件
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
cookie 用来识别用户:
创建和存储 cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
检查是否已设置 cookie：
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
如果 cookie 已设置，则显示欢迎词
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
6 JQuery，脚本语言
————————————————
Google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"/>
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
</script>
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 效果 - 隐藏和显示
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
也可以用jQuery hide() 和 show()
淡入淡出
jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);
jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeOut(speed,callback);
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);
元素上下滑动
jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);
jQuery slideUp() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$(selector).slideToggle(speed,callback);
$("#flip").click(function(){
$("#panel").slideToggle();
});
制作折叠
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle('fast');
});
});
</script>
<div style="background: green; 300px;margin: auto;">
<ul id="flip" style=" 200px;height: 20px;text-align: center;margin-top: 10px;" >点击这里，隐藏/显示面板
</ul>
<hr/>
<ul id="panel" style=" 200px;height: 200px;display: none;">一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</ul>
</div>
自定义的动画
$(selector).animate({params},speed,callback);
$("div").animate({left:'250px'});
stop() 方法用于在动画或效果完成前对它们进行停止
$(selector).stop(stopAll,goToEnd);
$("#panel").stop();
Callback 函数
$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$("p").css("background-color","yellow");
css({"propertyname":"value","propertyname":"value",...});
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
AJAX,部分网页的更新
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
jQuery load() 方法
$(selector).load(URL,data,callback);
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
jQuery $.get() 方法
$.get(URL,callback);
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "
Status: " + status);
});
});
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
jQuery $.post() 方法
$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "
Status: " + status);
});
});
jQuery noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行！");
});
});
7 AJAX，异步的 JavaScript 和 XML
——————————————————————————
XMLHttpRequest 对象
创建 variable=new XMLHttpRequest();
兼容版本：
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
GET 请求
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
_
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
POST 请求
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
__
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
服务器响应
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
8 JSON，JS对象表示法,轻量级的文本数据交换格式
———————————————————————————————————
<script type="text/javascript">
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];
employees[1].firstName="Jobs";
document.getElementById("fname").innerHTML=employees[1].firstName;
</script>
JSON 实例 - 来自字符串的对象
***************************
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
var obj = eval ("(" + txt + ")"); //必须把文本包围在括号中，这样才能避免语法错误
document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
9 bootstrap前端框架
————————————————
所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery
官网下载地址：http://getbootstrap.com/
中文网下载地址：http://www.bootcss.com/
w3c学习网站：https://www.w3cschool.cn/bootstrap
<!-- 引入 Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 精简版 -->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="//libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Bootstrap CSS 概览
************************
适当的绘制和触屏缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
一行12列，下面是设置响应式的列重置和偏移列
col-xs-6 col-sm-3 一行的6列，偏移3列
嵌套列
<div class="row">
<div class="col-md-3">
<h4>第一列</h4>
<p>Lorensectetur adipisicing elit.</p>
</div>
<div class="col-md-9">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6">
<p>Pinterest assumenda minim organic quis.</p>
</div>
<div class="col-md-6"
<p> sed do eiusmod tempor incididunt </p>
</div>
</div>
</div>
</div>
列排序
col-md-push-8
col-md-pull-4
内联子标题
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
布局：
container 居中
container-fluid 占满
class="lead" 引导主体副本
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
引用（Blockquote）
地址（Address）
列表
ul 无序列表
ol 有序列表
ul class="list-unstyled" 未定义样式列表
ul class="list-inline" 内联列表
Bootstrap 代码
第一种是 <code> 标签。内联显示代码
第二种是 <pre> 标签。 独立的块元素或者代码有多行
表格
table 简单表格
table table-striped 条纹表格
table table-bordered 边框表格
table table-hover 悬停表格
table table-condensed 精简表格
响应式表格:通过把任意的 .table 包在 .table-responsive class 内
垂直或基本表单
向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
Bootstrap 图片
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:500px 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
10 SVG 用XML来描述二维图形和绘图程序的语
———————————————————————————————
SVG 实例
-------
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
HTML 页面中的 SVG
---------
SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>
引用svg命名空间并嵌入到html中
<html xmlns:svg="http://www.w3.org/2000/svg">
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
直接嵌入到html
<iframe src="rect.svg" width="300" height="100">
</iframe>
SVG形状
--------------
矩形 <rect>
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-1;
stroke:rgb(0,0,0)"/>
圆形 <circle>
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
椭圆 <ellipse>
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-2"/>
线 <line>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-2"/>
折线 <polyline>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-2"/>
多边形 <polygon>
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-1"/>
路径 <path>
<path d="M250 150 L150 350 L350 350 Z" />
元素
------
altGlyph 呈现特殊的字符数据（例如，音乐符号或亚洲的文字）
animateColor 规定随时间进行的颜色转换
animateMotion 使元素沿着动作路径移动
animateTransform 对元素进行动态的属性转换
circle 定义圆
clipPath 路径
ellipse 定义椭圆
feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix SVG 滤镜。应用matrix转换。
feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。
feComposite SVG 滤镜。
feGaussianBlur SVG 滤镜。对图像执行高斯模糊。
font 定义字体。
font-face 描述某字体的特点。
font-face-uri
foreignObject
line 定义线条。
linearGradient 定义线性渐变。
path 定义路径。
polygon 定义由一系列连接的直线组成的封闭形状。
polyline 定义一系列连接的直线。
rect 定义矩形。
svg 定义SVG文档片断。
11 Git，分布式版本控制系统
————————————————————
Git 各平台安装包下载地址为：http://git-scm.com/downloads
pip install git-core
Windows 平台上安装包下载地址：http://msysgit.github.io/
使用
1）Windows版Git下载安装，在开始菜单里找到Git->Git Bash
2）配置你的名字和Email地址。
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"
提交
3）创建版本库
$ cd /F //你指定的个人盘符
$ mkdir bncgit //创建版本库根目录
$ cd bncgit //进入版本库目录
$ pwd //查看当前路径
4）通过git init命令把目录变成Git可以管理的仓库
$ git init
5) bncgit下创建一个readme.txt文件并编写两句话。
$touch readme.txt
$ vi readme.txt //i进编辑模式，esc退出：wq强制保存
Git is a version control system.
Git is free software.
$cat readme.txt //查看信息
6）用命令git add告诉Git,把文件添加到仓库
$ git add readme.txt
7）用命令git commit提交到仓库，-m本次提交的说明
$ git commit -m "wrote a readme file"
修改：
8) 运行git status命令查看当前仓库状态
$ git status
回退：
$ git reset --hard HEAD^ //回退上个版本
$ git reset --hard HEAD^^ //回退上上个版本
$ git log //现在版本库的状态
$ git commit -m 'append GPL'
$ git reset --hard 9636c65 //回退指定版本
删除文件
9） $ rm filename
$ git commit
0.远程连接仓库
$ git remote add origin git@github.com:username/gitnames.git
$ git push origin master
$ git clone git@github.com:yougithub/OracleCluste
1. 添加
git add filename
2. 提交
git commit -m '描述语句'
3. 删除
rm filename
git commit
4. 回退上个版本
git reset --hard HEAD^
_________________________
$ git config --list //检查已有的配置信息
$ vi ~/.gitconfig
$ git config user.name
$ git clone git://github.com/schacon/grit.git //克隆
测试实例
--------------
进入指定目录
cd e：
mkdir bncgit
cd bncgit
初始化仓库
git init
使用指定目录作为Git仓库
git init newrepo
$ git add README.md # 添加文件
$ git commit -m # 提交并备注信息
查看远程的别称
$ git remote -v
提交到 Github
git add proname
git commit -m '描述'
git remote add origin git@github.com:BaiNingchao/bncgit.git
git push -u origin master
删除远程仓库的别称
git remote rm origin
12 RE 正则表达式
———————————————
re.match 从字符串的起始位置匹配模式，不是起始位置匹配成功的话，match()就返回none。
re.match(pattern, string, flags=0)
re.search 扫描整个字符串并返回第一个成功的匹配。
re.match只匹配字符串的开始，如果字符串开始不符合正则表达式，则匹配失败，函数返回None；而re.search匹配整个字符串，直到找到一个匹配。
*************************
正则表达式模式
*************************
^ 匹配字符串的开头
$ 匹配字符串的末尾。
. 匹配任意字符，除了换行符
[amk] 匹配 'a'，'m'或'k'
[^abc] 匹配除了a,b,c之外的字符。
re* 匹配0个或多个的表达式。
re+ 匹配1个或多个的表达式。
re? 匹配0个或1个由前面的正则表达式定义的片段，非贪婪方式
re{ n}
re{ n,} 精确匹配n个前面表达式。
re{ n, m} 匹配 n 到 m 次由前面的正则表达式定义的片段，贪婪方式
a| b 匹配a或b
(re) G匹配括号内的表达式，也表示一个组
(?imx) 正则表达式包含三种可选标志：i, m, 或 x 。只影响括号中的区域。
(?-imx) 正则表达式关闭 i, m, 或 x 可选标志。只影响括号中的区域。
(?: re) 类似 (...), 但是不表示一个组
(?imx: re) 在括号中使用i, m, 或 x 可选标志
(?-imx: re) 在括号中不使用i, m, 或 x 可选标志
(?#...) 注释.
w 匹配字母数字及下划线
W 匹配非字母数字及下划线
s 匹配任意空白字符，等价于 [
f].
S 匹配任意非空字符
d 匹配任意数字，等价于 [0-9].
D 匹配任意非数字
A 匹配字符串开始
匹配字符串结束，如果是存在换行，只匹配到换行前的结束字符串。c
z 匹配字符串结束
G 匹配最后匹配完成的位置。
匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
B 匹配非单词边界。'erB' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
, , 等. 匹配一个换行符。匹配一个制表符。等
1...9 匹配第n个分组的内容。
10 匹配第n个分组的内容，如果它经匹配。否则指的是八进制字符码的表达式。
正则表达式实例
------------------------------------------------------------------
*****************************
[Pp]ython 匹配 "Python" 或 "python"
rub[ye] 匹配 "ruby" 或 "rube"
[aeiou] 匹配中括号内的任意一个字母
[0-9] 匹配任何数字。类似于 [0123456789]
[a-z] 匹配任何小写字母
[A-Z] 匹配任何大写字母
[a-zA-Z0-9] 匹配任何字母及数字
[^aeiou] 除了aeiou字母以外的所有字符
[^0-9] 匹配除了数字外的字符
. 匹配除 "
" 之外的任何单个字符。要匹配包括 '
' 在内的任何字符，请使用象 '[.
]' 的模式。
d 匹配一个数字字符。等价于 [0-9]。
D 匹配一个非数字字符。等价于 [^0-9]。
s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ f
v]。
S 匹配任何非空白字符。等价于 [^ f
v]。
w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。