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