HTML,CSS
HTML1、一套規則，瀏覽器認識的規則。2、開發者：學習Html規則開發后臺程序：-?寫Html文件（充當模板的作用）?******-?數據庫獲取數據，然后替換到html文件的指定位置（Web框架）3、本地測試-?找到文件路徑，直接瀏覽器打開（單個文件測試時，無需使用socket服務端）-?pycharm打開測試4、編寫Html文件-?doctype對應關系??<!--對于不同的瀏覽器有自己的編碼規范，<!DOCTYPE?html>默認是統一的規范,否則顯示的頁面由于對應關系不同，會錯位-->-?html標簽，標簽內部可以寫屬性?====>?只能有一個，<html?lang="en">?</html>==>html標簽，lang="en"叫html標簽的屬性。-?注釋：??<!--??注釋的內容??-->5、標簽分類-?自閉合標簽只寫了一個<meta>標簽，沒有</meta>標簽，自己就閉合了。例如：<meta?charset="UTF-8">??-?主動閉合標簽例如：<title>老男孩</title>??6、-?<meta??->?編碼，跳轉，刷新，關鍵字，描述，IE兼容6.1?編碼：<meta?charset="UTF-8">6.2?跳轉：<meta?http-equiv="Refresh"?Content="5"?Url="http://baidu.com"?/>?5秒鐘后跳轉至baidu.com6.3?刷新：<meta?http-equiv="Refresh"?Content="30">??該頁面默認30秒刷新一次6.4?關鍵字：<meta?name="keywords"?content="星際2，紅警">6.5?描述：?<meta?name="description"?content="汽車之家為您提供最新汽車報價。"?/>6.6?兼容：<meta?http-equiv="X-UA-Compatible"?content="IE=IE9;IE=IE8;"?/>-?title標簽???,網站的標題-?<link?/>?搞圖標，欠-?<style?/>欠-?<script>?欠7、body標簽-?圖標，?? ??>???<-?p標簽，段落?<p></p>-?br，換行??<br?/>========?小總結??=====所有標簽分為：標簽之間可以嵌套標簽存在的意義：通過?css操作、js操作可以方便定位到哪個標簽的值。ps:chorme審查元素的使用-?定位-?查看樣式-?h系列???:標題字體大小，從h1到h6，h1最大，h6最小。???<h1></h1>?-?-?span???：白板，橫著輸出。屬于行內標簽；??<span></span>-?input系列?+?form標簽input?type='text'?????-?name屬性，value="趙凡"?input?type='password'?-?name屬性，value="趙凡"?input?type='submit'???-?value='提交'?提交按鈕，表單input?type='button'???-?value='登錄'?按鈕input?type='radio'????-?單選框?value，checked="checked"，name屬性（name相同則互斥）input?type='checkbox'?-?復選框?value,?checked="checked"，name屬性（批量獲取數據）input?type='file'?????-?依賴form表單的一個屬性?enctype="multipart/form-data"input?type='rest'?????-?重置<textarea?>默認值</textarea>??-?name屬性select標簽????????????-?name,內部option?value,?提交到后臺，size，multiple-?a標簽-?跳轉-?錨?????href='#某個標簽的ID'????標簽的ID不允許重復-?img?srcalttitle-?列表ulliollidldtdd-?表格tabletheadtrthtbodytrtdcolspan?=?''rowspan?=?''-?label用于點擊文件，使得關聯的標簽獲取光標<label?for="username">用戶名：</label><input?id="username"?type="text"?name="user"?/>-?fieldsetlegend-?20個標簽-html中的注釋<!--?注釋?-->CSS在標簽上設置style屬性：background-color:?#2459a2;height:?48px;...編寫css樣式：1.?標簽的style屬性2.?寫在head里面?style標簽中寫樣式-?id選擇區#i1{background-color:?#2459a2;height:?48px;}<!DOCTYPE?html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<title>Title</title>
<style>#i1?{background-color:?#2459a2;height:?48px;}.c1,.c2{background-color:?red;height:?48px;}.c1?div{background-color:?green;height:?48px;}.c3[name='xiaofeng']?{width:?100px;height:?100px;}
</style>
</head>
<body>
<div?id="i1">id標簽不能重復</div>???<!--id不能重復?-->
<div?class="c1">class標簽可以復用</div>??<!--?class標簽可以重復,最常用的一種方式?-->
<span?class="c2">組合選擇器<div>層級選擇器，關聯syle里的c1中的div樣式</div>
</span>
<input?class="c3"?type="text"?name="xiaofeng">
</body>
</html>-?class選擇器?******.名稱{...}<標簽?class='名稱'>?</標簽>-?標簽選擇器div{...}所有div設置上此樣式-?層級選擇器（空格）?重點，必須掌握.c1?.c2?div{}
-?組合選擇器（逗號）?重點，必須掌握#c1,.c2,div{}-?屬性選擇器?重點，必須掌握對選擇到的標簽再通過屬性再進行一次篩選.c1[n='alex']{?width:100px;?height:200px;?}PS:-?優先級，標簽上style優先，編寫順序，就近原則2.5?css樣式也可以寫在單獨文件中
1)創建一個stylesheet文件，文件名字叫commons.css，內容為style里的內容，如#i1?{
background-color:?#2459a2;
height:?48px;
}
.c1,.c2{
background-color:?red;
height:?48px;
}.c1?div{
background-color:?green;
height:?48px;
}
.c3[name='xiaofeng']?{
width:?100px;
height:?100px;
}
2)在html中<head>標簽中寫入??<link?rel="stylesheet"?href="commons.css"?/>?即可調用commons.css文件里的標簽樣式。3、css中的注釋/*???*/4、邊框-?寬度，樣式，顏色??(border:?4px?dotted?red;)-關于樣式solid：實線dotted：虛線-?border-left5、基礎樣式height，?????????高度?百分比width，??????????寬度?像素，百分比text-align:ceter,?水平方向居中line-height，垂直方向根據標簽height的高度居中，且水平方向也居中。?重點掌握color、?????字體顏色font-size、?字體大小font-weight?字體加粗6、float?漂浮讓標簽漂起來，比如讓兩個塊級標簽可以實現同一行里左右飄浮，使塊級標簽也可以堆疊。因為塊級標簽默認是占一行。例：<div?style="width:?20%;?height:?100px;border:?5px?dotted?blue;float:?left"></div><div?style="width:?70%;?height:?100px;border:?5px?dotted?darkorchid;float:?left"></div>老子管不住：<div?style="clear:?both;"></div>7、display??
display:?none;?--?讓標簽消失display:?inline;???將塊級標簽變成內連(行內)標簽例：<div?style="background:?red;display:?inline"?>塊級標簽</div>display:?block;??將內連(行內)標簽變成塊級標簽例：<span?style="background:?green;display:?block">內連標簽</span>
display:?inline-block;??使行內標簽可以設置高度和寬度，默認行內標簽無法設置高度，寬度，邊距。例：<span?style="height:50px;width:?100px;background:??green;display:?block;border:2px?solid?red;display:inline-block">內連標簽</span>具有inline,默認自己有多少占多少具有block，可以設置無法設置高度，寬度，padding??margin小結：
行內標簽：無法設置高度，寬度，padding??margin
塊級標簽：可以設置高度，寬度，padding??margin8、邊距
padding：內邊距padding-top:10px;距離當前div標簽的頂部邊框的距離是10像素
margin：外邊距margin-top:10px;?當前div標簽距離頂部10像素；margin(0,auto)?設置對象上下間距為0，左右自動。?事例：返回頂部
<body><div?style="height:?50000px"><div?οnclick="GoTop()"?style="height:?100px;width:?100px;position:?fixed;bottom:?20px;right:?20px;background:?cadetblue?;font-size:29px;color:?crimson?">返回頂部</div></div>
</body>
<script>function?GoTop(){document.body.scrollTop?=?0;}
</script>9?positionposition:?fixed;??<:?;:?;:?;:?;:?;:?;:;:?>返回頂部</>position:?absolute;???父標簽里定義一個position:relative;子標簽里定義一個position:absolute;?子標簽就會相對父標簽定位。bottom:20px;??right:?20px;??margin-top:?50px;??10?backgroundbackground-p_w_picpath:url('img/1.gif')??background-repeat:repeat-x;?background-repeat:repeat-y;?background-repeat:no-repeat;?background-position-x:0;background-position-y:-20px;background-position:0?-20px;11?hover???
選擇鼠標指針浮動在其上的元素，并設置其樣式：
a:hover
{?
background-color:yellow;
}12?overflow??
如果元素中的內容超出了給定的寬度和高度屬性，overflow?屬性可以確定是否顯示滾動條等行為。13?z-index???
層級。設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。數值最大的，在頂層。14?opacity
設置元素的不透明級別，規定不透明度。從?0.0?（完全透明）到?1.0（完全不透明）。???三、JavaScript：(獨立的編程語言，跟java半毛錢關系也沒有。瀏覽器就自帶js代碼的解釋器)
3.1?js代碼書寫方法和位置：
法一：以代碼形式存在html里的head中，但是不夠靈活
<head><meta?charset="UTF-8"><title>Title</title><style>/*?css?代碼*/</style><script>//javascript代碼</script>
</head>法二：js代碼以文件的形式存放，html里調用這個文件
<head><meta?charset="UTF-8"><title>Title</title><link?rel="stylesheet"?href="commons.css"?><script?src="commons.js"></script>
</head>法三：?臨時書寫，可以在瀏覽器終端的console里小結：一般js都不放在head里，為了提高網頁的打開效率和友好度，通常會把js的<scripts>js代碼</scripts>放在<body>html代碼</body>下面3.2?js注釋：???當行注釋??//內容多行注釋??/*?內容*/3.3?js基本語法：??
3.4變量：python中：name?=?"xiaoming"???js中：name?=?"xiaoming"????#全局變量var?name?=?"xiaoming"?#局部變量，切記，使用過程中變量一般都要加上var3.5?基本數據類型：
詳見：注意：?null、undefinednull是JavaScript語言的關鍵字，它表示一個特殊值，常用來描述“空值”。undefined是一個特殊值，表示變量未定義。3.5.1?數字
JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。
轉換：
parseInt(..)????將某值轉換成數字，不成功則NaN
parseFloat(..)?將某值轉換成浮點數，不成功則NaN
特殊值：NaN，非數字?？墒褂?isNaN(num)?來判斷。
Infinity，無窮大?？墒褂?isFinite(num)?來判斷。
更多數值計算：3.5.2字符串
字符串是由字符組成的數組，但在JavaScript中字符串是不可變的：可以訪問字符串任意位置的文本，但是JavaScript并未提供修改已知字符串內容的方法。
常見功能：
obj.length???????????????????????????獲取當前字符串長度
obj.trim()???????????????????????????移除空白
obj.trimLeft()??????????????????????????????????????????????????移除左面
obj.trimRight)
obj.charAt(n)????????????????????????返回字符串中的第n個字符,n是索引位置
obj.concat(value,?...)???????????????拼接
obj.indexOf(substring,start)?????????子序列位置，比如字符串索引位置
obj.lastIndexOf(substring,start)?????子序列位置
obj.substring(from,?to)??????????????根據索引獲取子序列,from是開始位置，to結束位置
obj.slice(start,?end)????????????????切片
obj.toLowerCase()????????????????????大寫
obj.toUpperCase()????????????????????小寫
obj.split(delimiter,?limit)??????????分割
obj.search(regexp)???????????????????從頭開始匹配，返回匹配成功的第一個位置(g無效)
obj.match(regexp)????????????????????全局搜索，如果正則中有g表示找到全部，否則只找到第一個。
obj.replace(regexp,?replacement)?????替換，正則中有g則替換所有，否則只替換第一個匹配項，$數字：匹配的第n個組內容；$&：當前匹配的內容；$`：位于匹配子串左側的文本；$'：位于匹配子串右側的文本$$：直接量$符號3.5。3?數組
JavaScript中的數組類似于Python中的列表
常見功能
obj.length??????????數組的大小obj.push(ele)???????尾部追加元素
obj.pop()???????????尾部獲取一個元素
obj.unshift(ele)????頭部插入元素
obj.shift()?????????頭部移除元素
obj.splice(start,?deleteCount,?value,?...)??插入、刪除或替換數組的元素obj.splice(n,0,val)?指定位置插入元素obj.splice(n,1,val)?指定位置替換元素obj.splice(n,1)?????指定位置刪除元素
obj.slice(?)????????切片
obj.reverse(?)??????反轉
obj.join(sep)???????將數組元素連接起來以構建一個字符串
obj.concat(val,..)??連接數組
obj.sort(?)?????????對數組元素進行排序3.5.4?字典
a={'k1':'v1','k2':'v2'}
執行a[k1]，值為v13.5.5?布爾值
布爾類型僅包含真假，與Python不同的是其首字母小寫。
==??????比較值相等
!=???????不等于
===???比較值和類型相等
!===??不等于
||????????或
&&??????且3.6?For循環
此種方法循環的是元素的索引
<script>a=[11,22,33,44]for?(item?in?a){console.log(a[item]);}b={'k1':'v1','k2':'v2'}for?(item?in?b){console.log(b[item])}
</script>3.7?條件語句
語法：
if(條件){
}else?if(條件){
}else?if(條件){
}else{
}條件符號：??==????只要值相同就相等!====???不僅要比對值，類型也要相等才會相等!==||????或，相當于python里的or&&????且，相當于python里的and函數的定義：function?func(){...}4、Dom
詳看：
http://www.cnblogs.com/wupeiqi/articles/5643298.html??4.1?找標簽
4.1.1直接找?$('#id')??$('.c1').siblings()
document.getElementById?????????????根據ID獲取一個標簽
document.getElementsByName??????????根據name屬性獲取多個標簽(獲取的是列表)
document.getElementsByClassName?????根據class屬性獲取標簽集合
document.getElementsByTagName???????根據標簽名獲取標簽集合直接查找var?obj?=?document.getElementById('i1')間接查找文件內容操作：innerText????僅文本innerHTML????全內容valueinput????value獲取當前標簽中的值select???獲取選中的value值（selectedIndex）textarea?value獲取當前標簽中的值搜索框的示例4.1.2?間接找
先找到一個標簽，然后根據這個標簽去找其他標簽；例如
var?tag?=?document.getElementById('i1')??//先找到id=i1的標簽
var?content?=?tag.parentElement?????//然后找i1的父標簽parentElement???????????//?父節點標簽元素
children????????????????//?所有子標簽
firstElementChild???????//?第一個子標簽元素
lastElementChild????????//?最后一個子標簽元素
nextElementtSibling?????//?下一個兄弟標簽元素
previousElementSibling??//?上一個兄弟標簽元素parentNode??????????//?父節點
childNodes??????????//?所有子節點
firstChild??????????//?第一個子節點
lastChild???????????//?最后一個子節點
nextSibling?????????//?下一個兄弟節點
previousSibling?????//?上一個兄弟節點4.2?操作：
4.2.1?內容
var?tag?=?document.getElementById('i1')??//先找到id=i1的標簽
var?content?=?tag.innerText????//獲取i1標簽的文本內容innerText???文本
outerText
innerHTML???HTML全內容
innerHTML???
value?????值?input????value獲取當前標簽中的值select???獲取選中的value值（selectedIndex）textarea?value獲取當前標簽中的值4.2.2?樣式操作：classNameclassListclassList.addclassList.removeobj.style.fontSize?=?'16px';obj.style.backgroundColor?=?'red';obj.style.color?=?"red"4.2.3?屬性操作?
attributes????????????????//?獲取所有標簽屬性
setAttribute(key,value)???//?設置標簽屬性
getAttribute(key)?????????//?獲取指定標簽屬性
removeAttribute?/*
var?atr?=?document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/?innerTextcheckbox:?checked????classNameclassList4.2.4?創建標簽，并添加到HTML中：a.?字符串形式b.?對象的方式document.createElement('div')4.2.5?提交表單任何標簽通過DOM都可提交表單document.geElementById('form').submit()4.2.6?其他：console.log()alertvar?v?=?confirm(信息)??v:true?falselocation.hreflocation.href?=?""??#?重定向，跳轉location.reload()???#?頁面刷新location.href?=?location.href???<?===?>?location.reload()var?o1?=?setInterval(function(){},?5000)clearInterval(o1);var?o2?=?setTimeout(function(){},?50000);clearTimeout(o2);var?obj?=?setInterval(function(){},?5000)clearInterval(obj);?事件：onclick，onblur，onfocus行為??樣式??結構?相分離的頁面？js????css???html??綁定事件兩種方式：a.?直接標簽綁定?οnclick='xxx()'??onfocus<div?οnclick='函數(123)'></div><script>。。。。</script>b.?先獲取Dom對象，然后進行綁定document.getElementById('xx').onclickdocument.getElementById('xx').onfocusthis，當前觸發事件的標簽a.?第一種綁定方式<input?id='i1'?type='button'?οnclick='ClickOn(this)'>function?ClickOn(self){//?self?當前點擊的標簽}b.?第二種綁定方式<input?id='i1'?type='button'?>document.getElementById('i1').onclick?=?function(){//?this?代指當前點擊的標簽}作用域示例：var?myTrs?=?document.getElementsByTagName("tr");var?len?=?myTrs.length;for(var?i=0;i<len;i++){//?i=0,i=1,i=2myTrs[i].onmouseover?=?function(){this.style.backgroundColor?=?"red";};}????????4.2.7?定時器書寫方法：setInterval('函數()',?4000)事例<script>function?f1(){console.log(1);}//創建一個定時器,5000是毫秒，相當于5秒執行一個alert命令，彈出一個框，內容是123setInterval("alert(123)",5000);??
</script>????????4.2.8?其他：alert()console.log()4.3?搜索框的示例
操作：??????樣式操作：classNameclassListclassList.addclassList.removeobj.style.fontSize?=?'16px';obj.style.backgroundColor?=?'red';obj.style.color?=?"red"屬性操作：attributesgetAttributeremoveAttribute創建標簽，并添加到HTML中：a.?字符串形式b.?對象的方式document.createElement('div')提交表單任何標簽通過DOM都可提交表單document.geElementById('form').submit()其他：console.log()alertvar?v?=?confirm(信息)??v:true?falselocation.hreflocation.href?=?""??#?重定向，跳轉location.reload()???#?頁面刷新location.href?=?location.href???<?===?>?location.reload()var?o1?=?setInterval(function(){},?5000)clearInterval(o1);var?o2?=?setTimeout(function(){},?50000);clearTimeout(o2);var?obj?=?setInterval(function(){},?5000)clearInterval(obj);????5?實戰
<body><div?id="i1">歡迎領導蒞臨指導</div>
</body>
<script>function?func(){//根據id獲取標簽的內容，定義局部變量var?tag?=?document.getElementById('i1');//獲取標簽內部的內容var?content?=?tag.innerText;var?f?=?content.charAt(0);var?l?=?content.substring(1,content.length);var?new_content?=?l?+f?;tag.innerText?=?new_content;}//創建一個定時器setInterval("func()",500);
</script>6、for循環for(var?item?in?[11,22,33]){console.log(item);continue;}var?arra?=?[11,22,32,3]for(var?i=0;i<arra.lenght;i=i+1){break;}while(條件){}
7、條件語句if(){}else?if(){}else{}=====name='3';switch(name){case?'1':age?=?123;break;case?'2':age?=?456;break;default?:age?=?777;}8.?函數function?func(arg){return?arg+1}var?result?=?func(1)console.log(result);普通函數：function?func(){}匿名函數：function?func(arg){return?arg+1}setInterval("func()",?5000);setInterval(function(){console.log(123);},5000)自執行函數(創建函數并且自動執行)：function?func(arg){console.log(arg);}//?func(1)(function(arg){console.log(arg);})(1)
注意：對于JavaScript中函數參數，實際參數的個數可能小于形式參數的個數，函數內的特殊值arguments中封裝了所有實際參數。9、序列化JSON.stringify()???將對象轉換為字符串JSON.parse()???????將字符串轉換為對象類型10、轉義客戶端（cookie）???=》?服務器端將數據經過轉義后，保存在cookie11、evalpython:val?=?eval(表達式)exec(執行代碼)JavaScript:eval
12、時間Date類var?d?=?new?Date()d.getXXX??獲取d.setXXX??設置13、作用域================================?1.?以函數作為作用域?（let）================================其他語言：?以代碼塊作為作用域public?void?Func(){if(1==1){string?name?=?'Java';}console.writeline(name);}Func()//?報錯Python：???以函數作為作用域情況一：def?func():if?1==1:name?=?'alex'print(name)func()//?成功情況二：def?func():if?1==1:name?=?'alex'print(name)func()print(name)//?報錯JavaScript:??以函數作為作用域function?func(){if(1==1){var?name?=?'alex';}console.log(name);}func()================================?2.?函數的作用域在函數未被調用之前，已經創建?================================function?func(){if(1==1){var?name?=?'alex';}console.log(name);}=================?3.?函數的作用域存在作用域鏈，并且也是在被調用之前創建?==================示例一：xo?=?"alex";function?func(){//?var?xo?=?'eric';function?inner(){//?var?xo?=?'tony';console.log(xo);}inner()}func()示例二：xo?=?"alex";function?func(){var?xo?=?'eric';function?inner(){console.log(xo);}return?inner;}var?ret?=?func()ret()示例三：xo?=?"alex";function?func(){var?xo?=?'eric';function?inner(){console.log(xo);}var?xo?=?'tony';return?inner;}var?ret?=?func()ret()=================?4.?函數內局部變量?聲明提前?==================function?func(){console.log(xxoo);}func();//?程序直接報錯function?func(){console.log(xxoo);var?xxoo?=?'alex';}解釋過程中：var?xxoo;func();//?undefined14、JavaScript面向對象JavaScript面向對象function?foo(){var?xo?=?'alex';}foo()function?Foo(n){this.name?=?n;this.sayName?=?function(){console.log(this.name);}}var?obj1?=?new?Foo('we');obj1.nameobj1.sayName()var?obj2?=?new?Foo('wee');obj2.nameobj2.sayName()==============》a.?this代指對象(python?self)b.?創建對象時,?new?函數()Python的面向對象：class?Foo:def?__init__(self,name):self.name?=?namedef?sayName(self):print(self.name)obj1?=?Foo('we')obj2?=?Foo('wee')原型：function?Foo(n){this.name?=?n;}#?Foo的原型Foo.prototype?=?{'sayName':?function(){console.log(this.name)}}obj1?=?new?Foo('we');obj1.sayName()obj2?=?new?Foo('wee');小結：CSS重要的標簽positionbackgroundtext-alignmarginpaddingfont-sizez-indexover-flow:hoveropacityfloat?(clear:both)line-heightbordercolordisplay補充：頁面布局
主站—<div?class='pg-header'><div?style='width:980px;margin:0?auto;'>內容自動居中</div></div><div??class='pg-content'></div><div??class='pg-footer'></div>
后臺管理布局：
position:fiexd????--?永遠固定在窗口的某個位置relative?--?單獨無意義absolute?--?第一次定位，可以在指定位置，滾輪滾動時，不在了。。。。a.?左側菜單跟隨滾動條
b.?左側以及上不不動???******jQuery
轉載于:https://blog.51cto.com/xiaofengcanyue/1876475
總結
- 上一篇： linux下epoll如何实现高效处理
- 下一篇： 《移动优先与响应式Web设计》一上册 移