文檔韓順平html筆記_第1頁
文檔韓順平html筆記_第2頁
文檔韓順平html筆記_第3頁
文檔韓順平html筆記_第4頁
文檔韓順平html筆記_第5頁
已閱讀5頁，還剩22頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

HTMLHTML有關知識點html介紹html是一種標記語言，主要的用途是開發網頁，使用html可以展現文字、圖片、視頻、聲音，html是我們web開發（網站開發）。html可以做什么html可以編寫靜態網頁該靜態網頁可以包括文字、圖像、動畫、聲音、表格、鏈接。從而構成一個個漂亮的網頁Html發展歷史19931993標記語言第一版1995html2.01996html3.2w3c推薦標準2001xhml1.1w3c推薦標準2000xhtml1.0w3c推薦標準1999html4.0.1w3c推薦標準2008html5Html的基本結構<html><html> <head> <title>html的基本結構</title> </head> <body> </body></html><html></html>是標記（也叫元素），標記的一般格式：<元素名[屬性=“屬性值”]>元素內容</標簽>如果沒有內容可以用：<元素名[屬性=“屬性值”]/>Html實體標記Html常用標記html超鏈接<ahref=””target=”_blank”></a>_blank新的窗口_self本窗口_parent父窗口_top 整個瀏覽器窗口html圖像元素<imgsrc=”文件路徑”width=”寬度”height=”高度”/>html表格<tableborder=”邊框寬度”width=””cellspacing=”空隙大小”cellpadding=”填充大小”> <tr> --用于說明行 <td></td> --用于說一小格 </tr></table>無序列表<ul> <li></li> <li></li></ul>有序列表<ul><li></li> <li></li></ul>框架<framesetframeborder=”邊框的大小”cols=”按照列的百分比分隔”rows=”按照行的比分比分隔”> <framesrc=””noresize/></frameset>表單元素<fromaction=””method=”post/get”> 元素可以是任意元素：屬性名和屬性值可以參考W3Cschool給出的文檔使用CSS的基本語法：使用內部css:<styletype=<styletype=”text/css”>.sytle{ font-size:20px; color:red; font–weight:bold; font-style:itlic;}</style>引用內部css:<元素class=”style”>注意：沒有.使用外部css:<linktype=”text/css”href=”css文件的路徑”rel=”stylesheet”>使用濾鏡：<styletype=<styletype=”text/css”>a:linkimg{ filter:gray;}</style>四種選擇器的用法：類選擇器，又叫做class選擇器：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>測試1</title></head><linktype="text/css"rel="stylesheet"href="1.css"/><body> <spanclass="style">新聞一</span> <spanclass="style">新聞二</span> <spanclass="style">新聞三</span> <spanclass="style">新聞四</span></body></html>/*.style/*.style是類選擇器*/.style{font-size:10px;font-weight:bold;color:#FF0000;}類選擇器的基本格式：.類選擇器名{ 屬性名：屬性值; ```}id選擇器：\基本語法格式：#id選擇器名稱：{ 屬性名：屬性值; ````}例如：#tyle2{ font-size:30px; ackground-color:green;}在html文件中使用id選擇器的格式是： <元素名id=””>html選擇器：html選擇器的語法格式：html元素名稱{ 屬性名：屬性值;```}通配符選擇器：*{ 屬性名：屬性值； ···}例如：*{ margin:0; padding:0;}外邊距：margin：上右下左；//是按順時針旋轉的 margin：10px20px 30px是代表上下外邊距是10px,右外邊距是20px,左 邊距是30px可以讓所有的html元素的外邊距和內邊距都默認為0注意：當一個元素被id選擇器，類選擇器，html選擇器修飾的時候，則優先級是： id選擇器>class選擇器>html選擇器選擇器深入探討：(四種選擇器可以組合使用)父子選擇器例如：#stylespan{ 屬性名：屬性值;}注意：eq\o\ac(○,1)子選擇器標簽必須是html可以識別的標記 eq\o\ac(○,2)可以有多層子選擇器 例如： #stylespanspan{ 屬性名：屬性值; ``` }一個標簽既可以用class選擇器，也可以用id選擇器；但是id的選擇器的優先級高于class選擇器一個元素最多有一個id選擇器，可以擁有多個class選擇器塊元素和行內元素的概念：行內元素，又叫做內聯元素：內聯元素只能容納文本或者內聯元素，常見的內聯元素有<span><a>塊元素(blockelement):塊元素一般都從新行開始，可以容納文本，其他內聯元素和其他塊元素，即使內容不能占滿遺憾，塊元素也要把整行占滿。常見的塊元素有<div><p>注意：塊元素轉換為行內元素：style=”display:inline” 行內元素轉換為塊內元素：style=”diplay:block”標準流/非標準流：流：在網頁設計中指的是元素(標簽)的排列方式標準流：元素在網頁中就像流水，排在前面的元素，內容前面出現；排在后面的元素，內容就后面出現。非標準流：當某個元素(標簽)脫離了標準流的【比如因為相對定位】排列，我們統稱為非標準流排列。盒子模型：浮動：浮動是css中很重要的概念，必須掌握。浮動分為左浮動，右浮動，清除浮動。.style{.style{background-color:#CC0066;width:150px;height:100px;border:1px;border-color:green;border-style:solid;float:left; //設置為左浮動}清除浮動：如果不希望別的元素在某個元素的左邊或者是右邊，可以使用清除浮動的方法：clear:left;clear:left;clear:both;定位——基本概念：css定位(Positioning)屬性允許你對元素進行定位。position屬性值：static(默認值)：元素框正常生成。塊級元素生成一個矩形框，作為文檔流/標準流的一部分。行內元素則會創建一個或多個行框，置于其父元素中。relative(相對定位)：元素偏離某個距離。元素仍保持其未定位的形狀，它原來所占的空間仍然保留，從這一角度，好像該元素仍然在文檔流/標準流中一樣<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>測試1</title></head><linktype="text/css"rel="stylesheet"href="1.css"/><body><divclass="style">div1</div><divclass="style"id="special">div2</div><divclass="style">div3</div><divclass="style">div4</div></body></html>.style{.style{background-color:#CC0066;width:150px;height:100px;border:1px;border-color:green;border-style:solid;float:left;}#special{position:relative;top:140px;left:50px;}運行效果圖：absolute(絕對定位)：元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流所占的空間會關閉，就好像原理不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>測試1</title></head><linktype="text/css"rel="stylesheet"href="1.css"/><body><divclass="style">div1</div><divclass="style"id="special">div2</div><divclass="style">div3</div><divclass="style">div4</div></body></html>.style{.style{background-color:#CC0066;width:150px;height:100px;border:1px;border-color:green;border-style:solid;float:left;}#special{position:relative;top:140px;left:50px;}運行效果圖：fixed：元素框的表現類似于將position設置成為absolute，不過其包含塊是視圖本身。JavaScriptjavascript基本介紹：javascript是實現網頁動態效果的基石，在web的開發中扮演重要的角色，被廣泛的應用到各個領域：eq\o\ac(○,1)網頁游戲eq\o\ac(○,2)地圖搜索eq\o\ac(○,3)股市信息查詢eq\o\ac(○,4)web聊天····在web開發中，js是必不可少的技術，同時js也是ajax/jquery/extjs等框架的基礎。javascript是一種廣泛用于客戶端WEB開發的腳本語言，常用來給HTML網頁添加動態的功能，比如響應用戶的各種操作。腳本語言：腳本語言往往不能獨立使用(單獨使用沒有什么意義)，它一般與html/asp/jsp/php腳本語言有自己的變量，函數，控制語句。腳本語言是一種解釋性語言。JS一般在客戶端的瀏覽器執行。但也可以對服務器進行編程(非常少)JavaScript簡介JavaScript是一種解釋型的語言。Javascript并不是java的一種java腳本語言，除了名字都帶有java這個此外，兩者并沒有任何關系。Javascript的第一個版本出現在NetscapeNavigator2瀏覽器中。人們最初給javascript起的名字是LiveScript。然而由于，當時java技術的正是如日中天，netscape公司給livescript改名為javascript，以便是人們更加注意javascript。隨著javascript的發展，微軟公司決定在IE瀏覽器中加入微軟的品牌的javascript，即Jscript。腳本語言不僅只有javascript的一種，還有其他的腳本語言，如VBscript和perl語言<script>標記：第一個簡單的javascript程序在網頁中添加<script></script>標簽中添加javascript代碼，在<script></script>之間的代碼塊，不是用于顯示html元素，而是需要瀏覽器進行處理的腳本代碼，在<script>標記和對應的</script>標記之間包圍的代碼塊，稱為腳本塊。<script>標記可以放在html頁面的頭部，即<head></head>之間。<script>標記具有一些屬性，其中最重要的屬性就是type屬性。前面提到了javascript并不是唯一可用的腳本語言，可以的腳本語言需要按不同的方式進行處理。我們需要瀏覽器，在當前的頁面中我們所使用的是何種腳本語言。<scripttype=”text/javascript”><html><html><head> <title></title></head><bodybgcolor="white"><scripttype="text/javascript">document.bgColor="red";</script></body></html><html><html><head> <title>Example1.1helloworld</title><scripttype="text/javascript"> document.write("helloworld");</script></head><noscript> 您的瀏覽器不支持javascript，請檢查瀏覽器的版本或者安全設置，謝謝</noscript><bodybgcolor></body></html>****************************************************************************************<noscript></noscript>是一種防御性編碼，如果用戶的瀏覽器不支持javascript或者是設置過高的安全級別，那么就會顯示出相應的提示洗洗，避免了在用戶不知情下停止運行或者的都錯誤結果。*******************************************************************************在javascript中用分號表示一個語句的結束Javascript是弱類型語言。什么叫做弱類型語言。在強類型語言中，使用變量之前，必須先聲明變量的類型，才能使用。而javascript則不需要這樣使用。案例1：你的第一個程序，javascript高手都是從這里開始的，這個程序完成一個非常簡單功能，在網頁中彈出一個對話框，顯示“helloworld！”<html><html><head><title>第一個javascript程序</title><scriptlanguage="javascript"> window.alert("helloworld");</script></head><body></body></html>js的位置：js的位置可以隨意，但是一般用在<head></head>標簽js必須用<scriptlanguage=”javascript”> js代碼</script>?如果沒有使用<script></script>包含起來的話，則瀏覽器則會視為普通文本案例2：對前面的程序，改成一個簡單加法運算程序<html><html><head><title>第一個javascript程序</title> /*js中的變量定義，變量都用var表示，不管實際類型怎樣*/ varnum1=456; varnum2=226; varresult=num1+num2; window.alert("結果是"+result);</head><body></body></html>js的變量的類型是怎樣決定？js的數據類型是弱數據類型語言。即在定義變量的時候，統一使用var表示，甚至可以去掉var關鍵字js中的數據類型是有js引擎來決定的。數據類型可以變化的。varname=”shopping”; //js引擎知道name是字符串 name=22; //這時name自動變成了數varkk=2; //kk是整數varyy; //y是undefined類型javascript中的標識符標識符指的是javascript中定義的符號，例如，變量名，函數名，數組名等。標識符可以有任意順序的大小小字母、數字，下劃線和美元符號（$）組成，但是標識符不能以數字開頭，不能是javascript的保留關鍵字。javascript是嚴格區分大小寫的。javascript中每條語句用分號“;”結束。注釋：單行注釋//多行注釋/**/javascript的基本語法---數據類型：基本數據類型： 通過typeof關鍵字，可以看到數據的類型Number(數值類型)整型常量（10進制\8進制\16進制）16進制以0x或者是0X開頭，例如：0x83;8進制必須以0開頭：實型常量 12.32193.985E7等特殊數值：NaN(notisanumber)、Infinity、isNaN()、isFinite()Boolean(布爾類型) true和falseString字符串 “thisisabook”復合數據類型：特殊數據類型：undefine的例子：<scriptlanguage="javascript"> vara; window.alert("a的數據類型"+typeofa);</script>null的例子：<scriptlanguage="javascript"> vara=null; window.alert("a的數據類型"+typeofa);</script>javascript的基本語法---定義變量、初始化、賦值：定義變量：vara;初始化變量：在定義變量的時候，就賦值：vara=45;給變量賦值：先定義變量：varnum; 再賦值： num=33javascript的基本語法---數據類型轉換：自動轉換：javascript的數據類型是動態的請看一個案例：<scriptlanguage="javascript"> //num先定義成Number數據類型 varnum=22; num="helloword"; window.alert("num的數據類型"+typeofnum); </script>強制轉換：請看案例：如何將字符串轉換成數字<scriptlanguage="javascript"> //num先定義成String數據類型 vars="123"; varnum=parseInt(s); window.alert(typeofnum); </script>javascript中的運算符和java中的一樣的,但是有幾個注意點：案例一：b先轉成9，在比較<scriptlanguage=”javascript”> vara=9; varb=’9’ if(a==b){ window.alert(“ok”); }else{ window.alert(“faile”); }</script>在邏輯運算中，0、“”、false、null、undefined、NaN均表示false<scriptlanguage=”javascript”> vara=0; if(a){ window.alert(“ok”); }else{ window.alert(“faile”); }</script>函數：為完成某一個功能的代碼的集合。函數定義：functionfunction函數名(參數列表){ 語句;//函數(方法)主體 return返回值; }函數名位于關鍵字function之后，為了讓代碼易于理解，函數名應具有一定的意義。注意點：函數沒有返回值類型。形參數不寫具體的類型。eval()可以將一個字符串當成一個腳本運行例如：<scriptlanguage=”javascript”type=”text/javascript”> varstr=”window.alert(“ok”)”; eval(str);</script>escape()可以將中文或日文轉為ascii碼：unescape()反之。一般這個函數相互配合，防止在瀏覽器中出現亂碼：<scriptlanguage=”javascript”type=”text/javascript”> varstr=”江西”; varstr2=escape(str); //轉回來 varstr3=unescape(str2);</script>數組：為什么需要數組？將一組數據放在一起，組成集合。它由一對方括號[]包圍，數組的每個元素用逗號分隔，數組元素可以是任意類型的數據創建數組：var數組名=[元素值，元素值，```]例如：vara=[“shopping”,123,1.1,4.5,true]二維數組：vara=[[1,2,3],[“hello”,”world”,”jiangxi”]]=============================================================================================================================================================================================================================================JS面向(基于)對象編程-----類（原型對象）與對象（實例）JS面向（基于）對象特征介紹在學習這個知識點之前，我們有必要給大家明確幾個概念，這樣大家在后續的學習中才不會犯暈：Javascript是一種基于對象（object-based）的語言，你遇到的所有東西機會都是對象?特別說明：基于對象也好，面向對象也好，實際上都是以對象的概念來編寫程序。從本質上并無區別，所以這兩個概念在課程中是一樣的。因為javascript中沒有class(類)，所以有人把類也稱為原型對象。因為這兩個概念在編程中發揮的作用看都市一個意思總結：JS中基于對象=JS面向對象 JS中沒有類的概念，按標準的說法原型對象。其實就是類為什么需要原型對象（類）？例子：張老太養了兩只貓貓：一只貓叫小白，今年3歲，白色；還有一只叫小花，今年5歲，花色。請編寫一個程序，當用戶輸入小貓的名字時，就顯示該貓的名字，年齡，顏色。如果用戶輸入的小貓名字錯誤，則顯示張老太沒有這只貓。 // //一般的解決方法是，但是這種方法比較麻煩 varcat1_name="小白"; varcat1_age=3; varcat1_color="白色"; //定義原型對象,也就是類 functionCat(){ } //如果這樣用，就成了函數 //Cat(); //創建cat1的一個對象（實例） varcat1=newCat(); //可以在后面添加對象的屬性 ="小白"; cat1.age=3; cat1.color="白色"; window.alert();類（原型對象）————如何自定義類（原型對象）和對象。創建類的方式有5中方法：工廠方法——使用newObject創建對象并添加相關屬性使用構造函數來定義類（原型對象）注意：上面的cat類就是用此種方法基本語法： function類名/原型對象名(){ } 創建對象： var對象名=new類名();例子： functionCat(){functionCat(){ } //如果這樣用，就成了函數 //Cat(); //創建cat1的一個對象（實例） varcat1=newCat(); //可以在后面添加對象的屬性 ="小白"; cat1.age=3; cat1.color="白色"; window.alert(); window.alert(cat1.constructor); //可以打印出實例對象的構造方法 window.alert(typeofcat1); //顯示cat1的類型使用prototype構造函數及原型混合方式動態原型方式 注意：JS中的一切都是對象。 如何判斷一個對象實例是不是Person類型？ if(ainstanceofPerson){ window.alert(“a是person的實例”) } if(a.constructor==Person){ window.alert(“a是person的實例”) }帶var和不帶var的區別： varabc=89; functiontest(){ //在函數里，如果你不帶var，則表示使用全局的abc變量。 //如果你帶上var,則表示在test()中，定義一個新的abc變量 abc=900; } test(); window.alert(abc);this問題的提出：functionPerson(){}varp1=newPerson();=”小明”;p1.age=22;window.alert(+””+p1.age);varp2=newPerson();window.alert();在這里我們可以看到window.alert()會輸出undefined；在實際的編程中，我們可能有這樣的需求，當我們創建了一個

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論