前端知识小节

Myth丶恋晨 2022-06-06 07:27 162阅读 0赞

## 1 HTML，描述网页的语言 ##

——————————————————  
编码 <meta charset="utf-8">  
HTML5头标识 <!DOCTYPE html>  
换行 <br/>  
水平线 <hr/>  
空格 &nbsp;  
超链接 未访问：蓝色下划线。访问过：紫色下划线。点击：红色下划线。  
跳转 <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兼容性  
  
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 οnclick="this.innerHTML='Ooops!'">点击文本!</h1>  
—————————  
<script>  
function changetext(id)\{   
id.innerHTML="Ooops!";  
\}  
</script>  
</head>  
<body>  
<h1 οnclick="changetext(this)">点击文本!</h1>

## 5 JS，脚本语言 ##

——————————————————  
输出 document.write("<h1>This is a heading</h1>");  
提示 οnclick="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 匹配单词边界。  
\\B 匹配非单词边界。  
\\0 查找 NUL 字符。  
\\n 查找换行符。  
\\r 查找回车符。  
\\t 查找制表符。

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" 的元素。

$(this) 当前 HTML 元素  
$("p") 所有 <p> 元素  
$("p.intro") 所有 class="intro" 的 <p> 元素  
$("\#intro") id="intro" 的元素  
$("ul li:first") 每个 <ul> 的第一个 <li> 元素  
![0028.png_rev_2.6.1][]![0022.png_rev_2.6.1][]![005B.png_rev_2.6.1][]![0068.png_rev_2.6.1][]![0072.png_rev_2.6.1][]![0065.png_rev_2.6.1][]![0066.png_rev_2.6.1][] ("\[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;width: 300px;margin: auto;">  
<ul id="flip" style="width: 200px;height: 20px;text-align: center;margin-top: 10px;" >点击这里，隐藏/显示面板  
</ul>  
<hr/>  
<ul id="panel" style="width: 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 + "\\nStatus: " + 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 + "\\nStatus: " + 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对象表示法,轻量级的文本数据交换格式 ##

———————————————————————————————————

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

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">  
  
<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>

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-width: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-width:2"/>  
线 <line>  
<line x1="0" y1="0" x2="300" y2="300"  
style="stroke:rgb(99,99,99);stroke-width:2"/>  
折线 <polyline>  
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"  
style="fill:white;stroke:red;stroke-width:2"/>  
多边形 <polygon>  
<polygon points="220,100 300,210 170,250"  
style="fill:\#cccccc;  
stroke:\#000000;stroke-width: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 匹配任意空白字符，等价于 \[\\t\\n\\r\\f\].  
\\S 匹配任意非空字符  
\\d 匹配任意数字，等价于 \[0-9\].  
\\D 匹配任意非数字  
\\A 匹配字符串开始  
\\Z 匹配字符串结束，如果是存在换行，只匹配到换行前的结束字符串。c  
\\z 匹配字符串结束  
\\G 匹配最后匹配完成的位置。  
\\b 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。  
\\B 匹配非单词边界。'er\\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。  
\\n, \\t, 等. 匹配一个换行符。匹配一个制表符。等  
\\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\] 匹配除了数字外的字符

. 匹配除 "\\n" 之外的任何单个字符。要匹配包括 '\\n' 在内的任何字符，请使用象 '\[.\\n\]' 的模式。  
\\d 匹配一个数字字符。等价于 \[0-9\]。  
\\D 匹配一个非数字字符。等价于 \[^0-9\]。  
\\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 \[ \\f\\n\\r\\t\\v\]。  
\\S 匹配任何非空白字符。等价于 \[^ \\f\\n\\r\\t\\v\]。  
\\w 匹配包括下划线的任何单词字符。等价于'\[A-Za-z0-9\_\]'。  
\\W 匹配任何非单词字符。等价于 '\[^A-Za-z0-9\_\]'。

[0028.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Main/Regular/336/0028.png?rev=2.6.1
[0022.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Main/Regular/336/0022.png?rev=2.6.1
[005B.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Main/Regular/336/005B.png?rev=2.6.1
[0068.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Math/Italic/336/0068.png?rev=2.6.1
[0072.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Math/Italic/336/0072.png?rev=2.6.1
[0065.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Math/Italic/336/0065.png?rev=2.6.1
[0066.png_rev_2.6.1]: /images/20220606/38e2714f06154c6bb1075f5875f6eedb.png