Python 学习第十六天 html 前端内容总结
一，css知識(shí)總結(jié)???????????????????????????????????????????????????????????????????????????????????????????????
1, css屬性 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
??? css的屬性包括以下內(nèi)容
??? position:規(guī)定元素的定位類(lèi)型
??? background:屬性在一個(gè)聲明中設(shè)置所有的背景屬性
可以設(shè)置的如下屬性：
? （1）background-color
????????? （2）background-position
????????? （3）background-size
????????? （4）background-image
text-align:規(guī)定元素中的文本的水平對(duì)齊方式
??? margin:在一個(gè)聲明中設(shè)置所有的外邊距屬性
padding:在一個(gè)聲明中設(shè)置所有的內(nèi)邊距屬性
??? font-size:可以設(shè)置字體的尺寸
??? z-index:設(shè)置元素的堆疊順序，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低元素的前面
??? over-flow:規(guī)定是否對(duì)內(nèi)容的上下邊緣進(jìn)行裁剪-如果溢出元素內(nèi)容區(qū)域的話
??? :hover:用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素
?? opacity:設(shè)置元素的不透明級(jí)別
?? float(clear:both):設(shè)置元素在哪個(gè)方向浮動(dòng)
?? line-height:設(shè)置行間的距離
?? border:設(shè)置邊框
?? color:設(shè)置字體顏色
?? display:規(guī)定元素應(yīng)該生成的框的類(lèi)型
?2,頁(yè)面布局 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
??? （1）position的值? fiexd 永遠(yuǎn)固定在窗口某個(gè)位置 relative 單獨(dú)設(shè)置沒(méi)有效果，absolute單獨(dú)設(shè)置會(huì)根據(jù)滑輪的位置變動(dòng)而變動(dòng)
（2）兩種頁(yè)面布局CSS代碼
?????????? 第一種，左側(cè)菜單跟隨滾動(dòng)條
position:absolute; top:48px; left:0; bottom:0; width:200px baclground-color:#dddddd;
}
.pd-content .content{
position:absolute;
top:48px；
right:0;
bottom:0;
left:200px；
background-color:purple;
}
??? 第二種，左側(cè)以及上面不動(dòng),相比第一種只需要在content 屬性中添加overflow:auto屬性
.pd-content .menu{ position:absolute; top:48px; left:0; bottom:0; width:200px baclground-color:#dddddd; } .pd-content .content{position:absolute;top:48px；right:0;bottom:0;left:200px；background-color:purple;overflow:auto; }?3，用戶(hù)登錄欄設(shè)置 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?? （1）戶(hù)頭像為圓形
?????? border-radius:50%
?? （2）div 鼠標(biāo)從上移入或從下移入，下面的div都變色
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.item{background-color: #dddddd;}.item:hover{color:red;}.item:hover .b{background-color: green;}</style> </head> <body><div class="item"><div class="a">123</div><div class="b">456</div></div> </body> </html>??? （3）設(shè)置小圖標(biāo)
???? 下載font-awesome-4.7.0,在css 部位寫(xiě)上<link rel="stylensheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>添加壓縮版的css內(nèi)容
?二，Javascript 知識(shí)回顧???????????????????????????????????????????????????????????????????
???? 1，Javascript存在形式
?????? （1）可以通過(guò)src 引入其它目錄中的javascript文件，src需要放在body內(nèi)容的最下面
? ? ?? （2） 在head 中寫(xiě)script代碼
???? 2，全局變量和局部變量區(qū)別在于：變量前面是否有var, 有var標(biāo)注的變量為局部變量
???? 3，數(shù)據(jù)類(lèi)型：（1）數(shù)字（2）字符串（3）數(shù)組（4）對(duì)象（例如字典類(lèi)型）
???? 4，循環(huán)，兩種新式
????????? （1） for (var item in [11,22,33]）{ console.log(item（輸出索引）}
????????? （2） var arra = [11,22,32,33] for (var i=0;i<arra.lenght;i=i+1){}
???? 5，條件語(yǔ)句
????????? （1）if （）{}else if（）{}else{}
????????? 其中if判斷中的==為值相等 ===為值和類(lèi)型都相等
????????? （2）switch(name){
???????????????? case '1':
age=123;
?????????????????????? break;
???????????????? case '2'
?????????????????????? age=456;
??????????????????????? break;
???????????????? default:
age = 777;
???????????? }
?????? 6，函數(shù) function func(arg) {
???????????????? return arg+1
??????????? }
??????????? var result = func(1)
???????????? console.log(result);
????? 7，javascript函數(shù)詳解
（1）普通函數(shù) function func(arg){ return arg+1 }
（2）匿名函數(shù)setInterval(function（）{console.log(123);},5000）
?????????? （3）自執(zhí)行函數(shù){function(arg){console.log(arg);}}(1)
???? 8，序列化 ?
li=[11,22,33,4,5] s=JSON.stringify(li) #將列表轉(zhuǎn)化成字符串 newLi=JSON.parse(s) #將字符串轉(zhuǎn)化成列表? 9，轉(zhuǎn)義中文
url = "https://www.sougou.com/web?query=理解” encodeURI(url) #轉(zhuǎn)義url中的英文 newurl=encodeURI(url) decodeURI(newurl) #還原url escape() #對(duì)字符串轉(zhuǎn)義 unescape() #給轉(zhuǎn)義字符串解碼???? 10，eval
val = eval(表達(dá)式)exec(執(zhí)行代碼) value=eval("1+1")??? 11，時(shí)間
var d = new Date() #獲取當(dāng)前時(shí)間 n = d.getMinutes() +4 d.setMinutest(n) #設(shè)置時(shí)間??? 12，作用域
其他語(yǔ)言 public void Func () {if (1==1){string name="Java";console.writeline(name); #可以正常返回}console.writeline(name); #報(bào)錯(cuò)Func（） 在其他語(yǔ)言中已代碼塊為作用域，Python中已函數(shù)作為作用域， 1，javascript以函數(shù)作為作用域function Func () {if (1==1){string name="Java"; }console.writeline(name); Func（） #可以正常返回 2，函數(shù)的作用域在函數(shù)未被調(diào)用之前，已被創(chuàng)建 3，函數(shù)的作用域存在作用域連，并且也是在被調(diào)用之前創(chuàng)建 xo= "alex"function func(){//var xo=‘eric’function inner(){// var xo='tony'console.log(xo);} inner()} func() 沒(méi)有tony 返回eric ,沒(méi)有eric返回alex xo= "alex"function func(){var xo=‘eric’function inner(){var xo='tony'console.log(xo);} return inner;} var ret = func() #返回inner 函數(shù)對(duì)象 ret() #執(zhí)行inner函數(shù) 最終返回ericxo= "alex"function func(){var xo=‘eric’function inner(){var xo='tony'console.log(xo);} var xo = 'tony';return inner;} var ret = func() #返回inner 函數(shù)對(duì)象 ret() #執(zhí)行inner函數(shù) 最終返回tony 4，函數(shù)內(nèi)局部變量 提前聲明function func() {console.log(xxoo);var xxoo = 'alex' #提前只聲明var xxoo 并未賦值}func(); // undefined???? 14，JavaScript面向?qū)ο?/p> function foo(){this.name = 'alex'; #this相當(dāng)于self } var object= new foo(); #創(chuàng)建一個(gè)object 對(duì)象 function Foo(n){this.name = n #this相當(dāng)于self } var object= new foo('we'); #創(chuàng)建一個(gè)object 對(duì)象 和函數(shù)不同 1，this代指對(duì)象（Python self） 2，創(chuàng)建對(duì)象時(shí)，new函數(shù)（）原型 function Foo(n){this.name = n; #只創(chuàng)建一次 原型也只創(chuàng)建一次 } Foo.prototype = { #原型類(lèi)似于字典'sayName': function(){console.log(this.name)} }obj1 = new Foo('we') #通過(guò)obj1 先找到類(lèi)，然后再找到原型執(zhí)行 obj2 = new Foo('wee')
?三，DOM ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
??? 1，查找
???????? （1）直接查找
???????? （2）間接查找
?? 2，（1）innerText 提取文本內(nèi)容? innerHTML 提取html內(nèi)容 兩者都可以直接賦值
??????? obj.innerText=“<a href=‘http://www.oldboyedu.com’>老男孩</a>”
??????? obj.innerHTML="<a href='http://www.oldboyedu.com'>老男孩</a>"
??????? （2）value 對(duì)input標(biāo)簽生效，獲取當(dāng)前標(biāo)簽內(nèi)的值
??????????????????????? 對(duì)select 標(biāo)簽生效，獲取選中的value值（selectIndex）
??????????????????????? 對(duì)textarea標(biāo)簽生效，獲取其中的值
??????? （3）搜索框代碼實(shí)現(xiàn)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="width:600px;margin:0 auto;"><input id="i1" οnfοcus="Focus();" οnblur="Blur();" type="text" value="請(qǐng)輸入關(guān)鍵字"/><input type="text" placcholder="請(qǐng)輸入關(guān)鍵字" /> #可以不用寫(xiě)javascript</div><script>function Focus() {var tag = document.getElementById('i1');var val = tag.value;if (val == "請(qǐng)輸入關(guān)鍵字") {tag.value = '';}}function Blur(){var tag = document.getElementById('i1');var val = tag.value;if (val.length == 0 ){tag.value = '請(qǐng)輸入關(guān)鍵字';}}</script></body> </html>?? 3，DOM 樣式操作
obj = document.getElementById('i1') obj.className="c1 c2"; #為元素添加class C1,C2屬性 obj.classList #以列表形式列出obj的class值 obj.classList.add("c3") #添加c3屬性 obj.classList.remove("c2") #移除c2屬性obj.style.xx="xx" #font-size寫(xiě)為fontSize
?? 4，DOM屬性操作
obj = document.getElementById('i1') obj.setAttribute('xxxx','alex') #為標(biāo)簽添加屬性 obj.removeAttribute('value') #為標(biāo)簽刪除屬性 obj.attributes #獲取所有屬性?? 5，創(chuàng)建標(biāo)簽，并添加的html中（1）字符串方式（2）對(duì)象方式
?? 6，插入標(biāo)簽
?????? document.setElementById('i1').insertAdjacentHTML("beforeEnd",tag)
?????? 其它位置參數(shù)beforeBegin,afterBegin,beforeEnd,afterEnd
?? 7，提交表單，任何標(biāo)簽都可以
??????? document.getElementById('f1').submit()
?? 8，location.href 獲取當(dāng)前URL? 設(shè)置當(dāng)前URL做跳轉(zhuǎn) locaton.reload() 頁(yè)面刷新
9，設(shè)置定時(shí)器 setInterval(function(){ },500)
??????? clearIneterval()刪除定時(shí)器
??????? setTimeout() 定時(shí)器只執(zhí)行一次，用法和setInterval一樣，等到某個(gè)時(shí)間執(zhí)行一次
? clearTimeout() 清除定時(shí)器
? 10，事件
??????? onclick,onblur,onfocus,onmouseover,onmouseout
轉(zhuǎn)載于:https://www.cnblogs.com/system-public/p/6096150.html
總結(jié)
以上是生活随笔為你收集整理的Python 学习第十六天 html 前端内容总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python的简介和入门
- 下一篇： HTML5实现文件断点续传