




版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
TOC\o"1-3"\h\u26507HTML概要知識點梳理 2323831、了解HTML的概念 290002、熟練掌握HTML的文檔結構。 2263153、標簽的分類 231863塊記標簽: 231080行級標簽: 327051掌握靈活運用實際開發中常用的4中布局結構: 316593注意編寫習慣: 327649超鏈接的應用: 37995表單的應用: 421277下拉列表框: 519189多行文本框 529799只讀和禁用屬性 68912隱藏域: 615949Css樣式表 617115常用樣式設置總結 73730超鏈接偽類樣式 717401各類樣式的優先級 711280Javascript知識點匯總 79492一、JavaScript理論知識點的理解: 819471、JavaScript定義 848612、JavaScript組成。 9176373、JavaScript的基本結構 9113204、JavaScript的引用方式 921391二、JavaScript核心語法 1021201、語法約定: 10250452、變量: 10179733、數據類型: 10321114、運算符: 1017504三、JavaScript基本應用 1173251、消息框: 11296702、數組: 1122651JavaScript中的forin迭代語句: 1230993、函數: 13110234、事件: 14181525、其他注意事項: 1422192四、JavaScript中的對象 1521776一、BOM和DOM對象有哪些區別:(了解) 152486二、BOM對象 1629097Window對象屬性 1610384window對象常用的方法: 1730283三、DOM對象 1714777Document對象常用的屬性 187617Document對象的常用方法 182593getElementByxx獲得元素節點 18HTML概要知識點梳理1、了解HTML的概念HTML是超文本標記語言,他是隨著瀏覽器(IE谷歌)的發展而誕生出來的一種標記語言,是一種用來制作超文本文檔的語言。(注意:他并不是一種編程語言列如:cc++vb).理解:所謂標記語言我們可以把它理解為一中符號標記,不同的符號有著不同效果。超文本:包括聲音,圖片,影視等等。2、熟練掌握HTML的文檔結構。這里需要注意的地方<head><title></title></head>若標題標簽書寫錯誤會導致文檔無法顯示。(雖然瀏覽器現在能夠自動補全代碼)3、標簽的分類塊記標簽:<p></p><h1></h1><h6></h6><ol><ul>(常用與帶有列表的數據或菜單)<li></li><li></li></ol></ul><dl>(常用數據描述)<table>(常與大數據|表單布局場合)<dt></dt>(標題)<tr> <dd></dd>(內容)<tdcolspan="2"|rowspan="4"></td>(跨行列合并) </tr></dl></table <div></div>(常用與頁面布局)<hr/>(繪制一條水平線一般用于網頁腳部)<form></form>(用于表單數據)<ahrfe=“#”></a>(超鏈接|錨鏈接)行級標簽:<imgsrc=“”alt=“提示文字”title=“提示文字”></img><span></span>(用于改變某個單一字體的樣式)<br/>(換行)掌握靈活運用實際開發中常用的4中布局結構:1、div-ul(ol)-li:常用于分類導航或菜單等2、div-dl-dt-dd:常用于圖文混編的場合3、table-tr-td:常用于圖文布局或顯示數據4、form-table-tr-td:常用于布局表單注意編寫習慣:1、標簽名和屬性名稱盡量小寫(屬性值具有語義化)2、HTML標簽必須成對出現。(單標簽除外)3、屬性值必須用引號括起來(注意單引號和雙引號應用場合)4、標簽必須正確嵌套5、內容樣式功能分離出來。超鏈接的應用:<ahref=”url地址”>被鏈接的文本|圖片</a>超鏈接<ahref=“#star”name屬性值>當前位置<a/>同頁面的錨鏈接<aname=”star”>目標位置</a><ahref=“xxx.html#star”>當前位置</a>不同頁面的錨鏈接<aname=“star”>另一個網頁的目標位置</a>(注意:與同一頁面寫格式不一樣)<ahref="mailto:">站長信箱</a>郵箱鏈接(需要有郵箱工具)表單的應用:<formaction="表單提交地址"method="get|post"><inputname="表單元素名稱"type="類型"value="值"size="顯示寬度"maxlength="最大長度"/></form>type功能例子text單行文本輸入(默認類型)<input
type="text"
name="username"size=“21”value=“默認值”
/>password密碼<input
type="password"
name="password"size=“21”
/>radio單選(name屬性值一樣)<input
type="radio"
name="sex"
value="男"
/>男
<input
type="radio"
name="sex"
value="女"
/>女checkbox多選<input
type="checkbox"
name="hobby"checked=”chek”value="書"
/>書
<input
type="checkbox"
name="hobby"
value="畫"
/>畫reset重置表單數據<input
type="reset"
value="重置"
/>file文件上傳<input
type="file"
name="files"
/>submit提交表單數據(提交到action位置)<input
type="submit"
value="提交"
/>image圖形提交按鈕(只有提交功能)<input
type="image"
src="images/button.gif"
/>button普通按鈕(添加加事件)<input
type="button"
value="普通按鈕"
/>下拉列表框:格式:<selectname="指定列表名稱"size="一次性顯示行數"><optionvalue="選項值"selected="selected">…</option>……</select>例子:<selectname="bmon"><optionvalue=""selected="selected">[選擇月份]</option><optionvalue="0">一月</option><optionvalue="1">二月</option><optionvalue="2">三月</option><optionvalue="3">四月</option></select>多行文本框格式:<textareaname="..."cols="列寬"rows="行寬">文本內容</textarea>例子:<textareaname="textarea"cols="40"rows="6"readonly=“readonly”>歡迎閱讀服務條款協議...</textarea>只讀和禁用屬性readonly:希望某個框內的內容只允許用戶看,不能修改disabled:因沒達到使用的條件,限制用戶使用隱藏域:(用于不讓用戶看到的信息)格式:<inputtype="hidden"name="…."value="…"/>Css樣式表格式:<head><styletype="text/css">標簽選擇器{屬性:屬性值0;}.class{屬性:屬性值1;}#id{屬性:屬性值2;}</style><head>對象選擇的組合使用格式:(減少代碼量)標簽+類標簽+idid+空格+類id+空格+類+逗號常用樣式設置總結超鏈接偽類樣式a:link a:link{color:#999;} 未訪問狀態a:visited a:visited{color:#333;} 已訪問狀態a:hover a:hover{color:#ff7300;size=“15”} 鼠標移上狀態a:active a:active{color:#999;} 激活選定狀態(鼠標點擊未釋放時)各類樣式的優先級(由低到高順序排列)瀏覽器默認設置外部樣式表文件(經常使用)內部樣式表行內樣式表(不建議使用)標簽選擇器類選擇器ID選擇器(ID的屬性唯一)Javascript知識點匯總JavaScript理論知識點的理解:JavaScript定義JavaScript是一種基于對象和事件驅動的、并具有安全性能的腳本語言。注意:嚴格來說JavaScript也是面向對象的編程語言(OOP)。OOP語言使我們有能力定義自己的對象和變量類型。對象只是一種特殊的數據。對象擁有屬性和方法。(javascript高級應用)概念分析:(理解)這里Javascript與Java對比分析比較容易理解。首先Java是面向對象的編程語言,并且是由sun公司推出的一款強大的編程軟件。
然而javascript是一種基于對象的腳本語言,并且是由網景公司(Netscape)推出的一款依附于瀏覽器運行的編程語言。Javascript與Java語言沒有關系,Netscape公司當初只是為了提高Javascript的知名度,才以Javascript命名,所謂大樹下面好乘涼。(javascript是由LIiveScript發展而來的)。
很多時候我們對腳本的概念不是很清楚,其實是由script翻譯成中文就是腳本的意思。專業性理解javaScript與Java的區別:(了解)我們可以看到Java和
JavaScript都有“Java”四個字,就以為它們是同一樣東西,連我自己當初也是這樣認為的。其實它們是完完全全不同的兩種東西。Java,全稱是
JavaApplet,是嵌在網頁中,而又有自己獨立的運行窗口的小程序。JavaApplet是預先編譯好的,一個
Applet文件(.class)用
Notepad打開閱讀,根本不能理解。JavaApplet的功能很強大,可以訪問
http、ftp等協議,相比之下,JavaScript的能力就比較小了。JavaScript是一種“腳本”(“Script”),它直接把代碼寫到
HTML文檔中,瀏覽器讀取它們的時候才進行編譯、執行,所以能查看
HTML源文件就能查看JavaScript源代碼。JavaScript沒有獨立的運行窗口,瀏覽器當前窗口就是它的運行窗口。JavaScript組成。Javascript是由三部分組成,分別是ECMAScriptDOMBOM。ECMAScript:ECMA其實是一個標準化組織,類似于W3C這樣的組織,而Javascript遵循了它提供的重要標準。作用:(描述了Javascript的核心語法和基本對象)DOM:(DocumentObjectModel)中文文檔對象模型,作用:DOM描述了處理網頁內容的方法和接口;BOM(BrowserObjectModel)中文瀏覽器對象模型,作用:BOM描述了與瀏覽器進行交互的方法和接口。后面會對DOMBOM對象進行詳細的了解。JavaScript的基本結構基本結構:<script[type=”text/javascript”|language="javascript"]> <!—腳本語句--></script>script默認類型是Javascript類型,當然也可以選中指定腳本類型type=”text/javascript”|language="javascript"兩個選任意一個都可以。 注意:javascript可以出現在html代碼段的任何位置,一般我們把他放在head標簽內。另外在一個html文件中可以出現多個javascript腳本段按從上到下的順序開始執行。JavaScript的引用方式行內樣式:<inputtype="button"value="彈出消息框"onclick="javascript:alert('歡迎你');"/>外部樣式:<scriptsrc=”后綴名為.js的文件路徑”></script>內部樣式:<script>腳本代碼</script>一般我們把寫好的腳本代碼單獨放在一個文件內,通過外部樣式引用進來。注意:外部文件引用在<script>標簽之間不能包含腳本代碼段。JavaScript核心語法語法約定: Javascript腳本語言嚴格區分大小寫。(Java不區分大小寫) 變量名必須以字母或下劃線開始 兩個語句之間用”;”結束。變量:JavaScript是一個弱數據類型的腳本語言。所有類型的變量都用var來定義。我們可以這樣來定義數據類型。
varage=24;number型varsex=“男”;string數據類型varbirthday=newArray{“1990/08/07”};Object對象(數組,null,對象都為object類型)也可以這樣定義:age=24;vara,b,c=2;(2的值只會賦給c變量,很少使用)可以先聲明再賦值,同時聲明和賦值,不聲明直接賦值(不建議使用)可以重新聲明javascript變量且原始的值保持不變例如:vara=3;vara;輸出a的值仍然是3.如果vara=3;vara=4;則輸出的a的值將會為4.數據類型: undefined:變量被聲明后,但未被賦值string:用單引號或雙引號來聲明的字符串boolean:true或falsenumber:整數或浮點數object:javascript中的對象、數組和null如果想測試一個變量的數據類型可以使用運算符typeof來測試。例如:alert(typeofa);警告框內會顯示a的數據類型。運算符:javascript中的運算符和Java中的運算符基本上是一樣的。這里就不再多說了。 控制語句:ifelseswitch()forwhile等跟Java內基本一樣不再多說了。JavaScript基本應用消息框:警告框:alert(“彈出一個警告框”);警告框內換行alert(”彈出一個警告框”+“/n”+”這個會換行”);確認框: confirm(“提示信息,確定退出嗎?”); confirm返回一個boolean類型的結果。選中確定則返回一個true選中否返回一個false。 例如:varisopen=confirm(“如果你想打開你就點確定吧?”); if(isopen==true) alert(“歡迎進入深藍home!”); else alert(“你確定你不進來看看?”);提示框(輸出框): prompt([“請輸入你的姓名”,“張三”]); prompt返回值是一個srting字符串。例如:varname=prompt(“請你輸入你的姓名”);Javascript注釋: 單行注釋:// 多行注釋:/****/數組:javascript中的數組與Java中的數組區別很大。Javascript中的數組特性:Javascript中的數組定義長度不固定。可以二次追加數據。Javascript同一個數組可以保存不同數據類型的數據。定義格式: varname=newArray(4); varname=newArray(“張三”,“李四”,“王五”);varname=newArray(“劉一鍋”,25);//可以是不同的數據類型一般不這么做!獲取數組中的數據: 可以使用下標的形式去訪問數組內的原素。如:name[0]……… 也可以直接獲取數組內的數據alert(name);(Java中這樣取的是地址額)數組常用屬性和方法:調用方法:數組名。屬性名;或數組名。方法名;屬性:length屬性 name.length則會返回數組name中數組元素的個數。常用方法:join()把數組的所有元素放入一個字符串,通過一個的分隔符進行分隔 可以理解為將數組轉換成string類型的字符串。如:varname=newArray(“小龍女”,”楊過”,”楊康”);Object數據類型 name.join([“-”]);string數據類型 其中[]為可選項默認一,為分割符且分割符也會成為字符串的一部分。push() 向數組尾部添加新元素,并返回新的數組的長度值。 例:name.push(“歐陽鋒”);返回值為4;sort()對數組進行排序,但是排序功能不夠太完善,所以很少使用(首位不能為最大數)toString()將數組轉換成字符串并返回結果。JavaScript中的forin迭代語句: 作用:遍歷數組或者對象的屬性(對數組或者對象的屬性進行循環操作)。 例:varname=newArray(“張三”,“李四”,“王五”);for(xinname){alert(“學生的姓名分別是”+name[x]);}其中x返回的是數組中的下標,類似于Java中的增強for循環函數:Javascript中常用的系統函數:isNaN()判斷一個常量或變量不是一個數值varage=23;isNaN(age)結果為:falseNumber()把一個對象(object類型的數據)轉換成數字,如果轉換的的是非數值型數據則會返回一個NaN(NotaNumber非數字)Number(name[0]);parseInt(string)把一個字符串轉換成一個整數并返回解析的整數。注意:如果被解析的字符串開頭不是以數字開頭則會返回值為NaN(空格除外)且解析出來的數組只是開頭的連續的數字。String()函數把對象的值轉換為字符串。JavaScript中的自定義函數: 在js中自定義函數中包含一些腳本代碼,這些代碼只有當該函數被調用的時,該腳本代碼才會被執行。(一般為事件調用) 自定義函數的定義:無參函數: functions函數名(){js腳本代碼};調用方法:onclick=函數名();事件名=函數名();有參函數: function函數名(參數1,參數2){腳本代碼[return]}調用方法:onclick=函數名(實參1,實參2);匿名函數:(有函數沒有函數名就叫匿名函數) varsum=function(){腳本代碼段};調用方法:onclick=sum();事件:屬性當以下情況發生時,出現此事件onabort圖像加載被中斷onblur元素失去焦點onchange用戶改變域的內容onclick鼠標點擊某個對象ondblclick鼠標雙擊某個對象onerror當加載文檔或圖像時發生某個錯誤onfocus元素獲得焦點onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標按鍵被按下onmousemove鼠標被移動onmouseout鼠標從某元素移開onmouseover鼠標被移到某元素之上onmouseup某個鼠標按鍵被松開onreset重置按鈕被點擊onresize窗口或框架被調整尺寸onselect文本被選定onsubmit提交按鈕被點擊onunload用戶退出頁面注意:其中onload事件在一個html頁面中只能存在一個起作用。(最后一個)且只能在腳本段內和body標簽內使用。其他注意事項:在Javascript中可以忽略多個空格,為了代碼的可閱讀性可以添加適當的空格。在javascript中對大小寫很敏感。在javascript中如果想換行則可以使用\進行換行(一般很少使用)如:alert(“歡迎你\哈雷”);但是不能alert\(“歡迎你哈雷”);//這里的換行只能在字符串中使用。有時候需要使用一些特殊符號,這時就要使用反斜杠轉義特殊符號。\'單引號\"雙引號\&和號\\反斜杠\n換行符\r回車符\t制表符\b退格符\f換頁符JavaScript中的對象BOM和DOM對象有哪些區別:(了解)前面我們已經說過javascript有三部分構成,ECMAScript,DOM和BOM,根據宿主(瀏覽器)的不同,具體的表現形式也不盡相同,ie和其他的瀏覽器風格也有很大差異。1.DOM(BrowerObjectModel)是W3C的標準;[所有瀏覽器公共遵守的標準]
2.BOM(DocumentObjectModel)是各個瀏覽器廠商根據DOM
在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同]
3.window是BOM對象,而非js對象;DOM(文檔對象模型)是HTML和XML的應用程序接口(API)。BOM主要處理瀏覽器窗口和框架,不過通常瀏覽器特定的JavaScript擴展都被看做BOM的一部分。這些擴展包括:彈出新的瀏覽器窗口移動、關閉瀏覽器窗口以及調整窗口大小提供Web瀏覽器詳細信息的定位對象提供用戶屏幕分辨率詳細信息的屏幕對象對cookie的支持IE擴展了BOM,加入了ActiveXObject類,可以通過JavaScript實例化ActiveX對象javacsript是通過訪問BOM(BrowserObjectModel)對象來訪問、控制、修改客戶端(瀏覽器),由于BOM的window包含了document,window對象的屬性和方法是直接可以使用而且被感知的,因此可以直接使用window對象的document屬性,通過document屬性就可以訪問、檢索、修改XHTML文檔內容與結構。因為document對象又是DOM(DocumentObjectModel)模型的根節點。可以說,BOM包含了DOM(對象),瀏覽器提供出來給予訪問的是BOM對象,從BOM對象再訪問到DOM對象,從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。從window.document已然可以看出,DOM的最根本的對象是BOM的window對象的子對象。區別:DOM描述了處理網頁內容的方法和接口,BOM描述了與瀏覽器進行交互的方法和接口。BOM對象 BOM模型:BOM描述了與瀏覽器進行交互的方法和接口。 BOM對象常用的對象與方法:Window對象:表示在瀏覽器中打開的窗口。Window對象常用的方法與屬性:Window對象屬性Window常用的屬性:(這三個屬性有分別是三個對象)History該對象包含用戶(在瀏覽器窗口中)訪問過的URL。Location 該對象包含有關當前URL的信息。 Document每個載入瀏覽器的HTML文檔都會成為Document對象。history對象方法方法描述back()加載history列表中的前一個URL。forward()加載history列表中的下一個URL。go()加載history列表中的某個具體頁面。使用方法:;跟后退功能一樣,如果history列表內沒有訪問記錄。則此功能無效。也可以省略掉window直接寫成history.back();其中go()跟前個方法功能類似,如果go(-1)同back(),為正數時,則同forward()作用。Location對象的方法:屬性描述assign()加載新的文檔。reload()重新加載當前文檔。(刷新)replace()用新的文檔替換當前文檔。用法:location.assign(URL);這里的URL指的是統一資源定位器,就是我們通常說的網址,當然在這里還可以是一個網頁文件的路徑地址。例如:location.assign(“c:/index.html|"”); location.reload();相當于刷新 location.replace(Newurl);跳轉到指定的頁面document對象會在DOM對象中細說。window對象常用的方法:方法描述alert()顯示帶有一段消息和一個確認按鈕的警告框。clearInterval()取消由setIn
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 公司新年開工小活動方案
- 公司競拍活動方案
- 公司案例收集活動方案
- 公司歡迎回來活動方案
- 公司職工健身房策劃方案
- 公司疫情捐贈活動方案
- 2025年裝修工程師職業資格考試試題及答案
- 公共關系與危機管理的2025年試卷及答案
- 2025年養老服務體系建設考試試卷及答案
- 2025年刑法學知識與實踐應用考核題及答案
- 《SLT631-2025水利水電工程單元工程施工質量驗收標準》知識培訓
- 2025氮氣、氬氣供應合同
- 2024年貴州省普通高校招生信息表(普通類本科提前批C段-物理組合)
- 過敏原檢測試臨床意義
- 大模型在證券行業合規的應用
- 2024北京豐臺區初一(下)期末英語試題和答案
- 水電站機電設備拆除施工方案
- 理論力學(周衍柏第三版)思考題+習題答案
- DB37T 1913-2011 金屬非金屬地下礦山特種作業人員配置
- 國家開放大學國開電大《學前兒童游戲指導》形考任務1-4答案
- 【MOOC】大數據與法律檢索-湖南師范大學 中國大學慕課MOOC答案
評論
0/150
提交評論