day-02（css,js）
本文件並非個人所寫，只是便於參考:
回顧: html: 作用:展示 檔案標籤: <html> <head> <title></title> </head> <body></body> </html> 排版標籤: p 段落 hr 水平線 br 換行 字型 h1~h6 標題 font 字型 大小 顏色 b strong 加粗 i 斜體 圖片★<img src="圖片的路徑" alt="替代文字" width="" height=""/> 路徑的寫法: 相對路徑: ./ 或者 什麼都不寫 當前目錄 ../ 上一級目錄 絕對路徑:常用 http://www.itheima.com/xx 超連結★ <a href="跳轉的路徑" target="在什麼地方開啟"></a> 表格標籤 ★★ <tableborder="" width="" height="" bgcolor="" align="表格對齊方式"> <tr align="內容對齊方式"> <th></th> <!--表頭單元格--> <td></td> <!--普通單元格--> </tr> </table> td重要的屬性: colspan:列合併 rowspan:行合併 列表:<ol></ol> <ul></ul> 子標籤:列表項 <li></li> form 表單標籤: 常用屬性 action:提交的路徑 method:提交的方式(get和post) 常用子標籤 input select textarea input標籤 常用屬性: type: text password radio checkbox file submit reset button hidden image name: 要想將資訊提交到伺服器必須提供name屬性 將單選框和複選框設定成一組 value: text password 設定預設值 radio checkbox 設定選中後提交的值 submit reset button 給按鈕起個顯示的名字 select:下拉選 <select name=""> <option value="">顯示的名字</option> </select> textarea:文字域 <textarea cols="" rows="" name="">預設值</textarea> 給單選框多選框設定預設值 設定屬性 checked="checked" 給下拉選設定預設值 設定屬性 selected="selected" 提交的路徑(get) http://ssdfsdfsfd?key=vaule&key=value 例如: http://localhost/day/login.jsp?username=tom&password=123 框架(瞭解) frameset:規定框架結構 框架集 常用屬性: rows:水平qiege cols:垂直切割 常用子標籤 frame:具體實現 例如:水平切割3份 <frameset rows="15%,*,10%"> <frame> <frame> <frame> </frameset> frame: 常用的屬性: src:具體展示那個網頁 name:給當前的frame起個名稱 方便超連結使用 //////////////////// 案例1-用div+css重新佈局首頁 技術分析: div css ///////////// div: 塊標籤 <div></div> span:行內的塊標籤 <span><span> //////////// css:渲染 層疊樣式表 作用: 渲染頁面 提高工作效率 格式: 選擇器{屬性:值;屬性1:值1;} 字尾名: .css 獨立的css(樣式)檔案 和html元素的整合★ 方式1:內聯樣式表 通過標籤的style屬性設定樣式 方式2:內部樣式表 在當前頁面中使用的樣式 通過head標籤的style子標籤匯入 例如: <style> #divId2{ background-color: #0f0; } </style> 方式3:外部樣式表 有獨立的css檔案 通過head標籤的link子標籤匯入 例如: <link rel="stylesheet" href="css/1.css" type="text/css"/> 選擇器:★ id選擇器 要求: html元素必須有id屬性且有值 <xxx id="id1"></xxx> css中通過"#"引入,後面加上id的值 #id1{...} class選擇器 要求: html元素必須有class屬性且有值 <xxx class="cls1"/> css中通過"."引入,後面加上class的值 .cls1{...} 元素選擇器 直接用元素(標籤)名即可 xxx{...} 派生的選擇器 屬性選擇器★ 要求: html元素必須有一個屬性不論屬性是什麼且有值 <xxx nihao="wohenhao"/> css中通過下面的方式使用 元素名[屬性="屬性值"]{....} 例如: xxx[nihao="wohenhao"]{....} 後代選擇器 選擇器 後代選擇器{...} 在滿足第一個選擇器的條件下找後代的選擇器,給滿足條件的元素新增樣式 瞭解的選擇器 錨偽類選擇器 a:link {color: #FF0000} /* 未訪問的連結 */ a:visited {color: #00FF00} /* 已訪問的連結 */ a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */ a:active {color: #0000FF} /* 選定的連結 */ 選擇器使用小結: id選擇器:一個元素(標籤) class選擇器:一類元素 元素選擇器:一種元素 屬性選擇器:元素選擇器的特殊用法 使用的時候注意:(瞭解) 若多個樣式作用於一個元素的時候 不同的樣式,會疊加 相同的樣式,最近原則 若多個選擇器作用於一個元素的時候 越特殊優先順序越高 id優先順序最高 ////////////////////// 屬性(瞭解) 字型 font-family:設定字型(隸書) 設定字型家族 font-size:設定字型大小 font-style:設定字型風格 文字:改變文字的顏色、字元間距，對齊文字，裝飾文字，對文字進行縮排 color:文字顏色 line-height:設定行高 text-decoration: 向文字新增修飾。 none underline text-align:對齊文字 列表: list-style-type:設定列表項的型別 例如:a 1 實心圓 list-style-image:設定圖片最為列表項型別 使用的時候使用 url函式 url("/i/arrow.gif"); 背景: background-color:設定背景顏色 background-image:設定圖片作為背景 url 尺寸: width: height: 浮動: float: 可選值 left right 分類: clear:設定元素的兩邊是否有其他的浮動元素 值為:both 兩邊都不允許有浮動元素 display:設定是否及如何顯示元素。 none 此元素不會被顯示。 block 此元素將顯示為塊級元素，此元素前後會帶有換行符。 inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。 框模型:(理解) 一個元素外面有padding(內邊距) border(邊框) margin(外邊距) padding:元素和邊框的距離 margin:元素最外層的空白 上面這三個屬性都有簡寫的屬性 若設定大小的時候 四個值:順序 上右下左 padding:10px 10px 10px 10px 若只寫一個的話 代表四個邊使用同一個值 padding:10px 若只寫兩個個的話 代表四個邊使用同一個值 padding:10px 20px 若只寫三個個的話 代表四個邊使用同一個值 padding:10px 20px 30px border(邊框) 還可以設定顏色 風格 簡寫屬性: border:寬度 風格 顏色; border:5px solid red; solid:實線 dashed:虛線 double:雙實線 步驟分析: 1.建立一個div 2.在這個div中建立8個div 3.第1個div logo 巢狀三個div 4.第2個div 選單 巢狀一個列表 display:inline 5.第3個div 輪播圖 6.第4個div 熱門商品 標題標籤 圖片display:inline a:兩個div 左邊的div 展示一張圖片 右邊的div 展示所有商品 b.右邊的div中巢狀10個div 3.第5個div 廣告 3.第6個div 最新商品 3.第7個div 廣告 3.第8個div foot 版權 兩個p標籤 //////////////////////////////// javascript 俗稱 js 案例1-校驗表單 需求: 表單提交的時候需要校驗資料是否完整,若不滿足條件,則使用彈出框提示. 技術分析: js ////////////////////// JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言， 內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言 組成部分: ECMAScript:js基礎語法(規定 關鍵字 運算子 語句 函式等等...) BOM:瀏覽器物件模型 DOM:文件物件模型 作用: 修改html頁面的內容 修改html的樣式 完成表單的驗證 注意: js可以在頁面上直接寫,也可以單獨出去 js的檔案的字尾名 .js js和html整合 方式1:在頁面上直接寫 將js程式碼放在 <script></script>標籤中,一般放在head標籤中 方式2:獨立的js檔案 通過script標籤的src屬性匯入 js中變數宣告: var 變數名=初始化值; var 變數名; 變數名=初始化值; 注意: var可以省略 建議不要省略 一行要以分號結尾,最後一個分號可以省略,建議不要省略 js的資料型別: 原始型別:(5種) Null String Number Boolean Undefined 通過 typeof運算子可以判斷一個值或者變數是否屬於原始型別,若屬於原始型別,他還可以判斷出屬於那種原始型別 typeof 變數|值; 若變數為null,使用typeof彈出的值 object 使用typeof的返回值 undefined - 如果變數是 Undefined 型別的 boolean - 如果變數是 Boolean 型別的 number - 如果變數是 Number 型別的 string - 如果變數是 String 型別的 object - 如果變數是一種引用型別或 Null 型別的 引用型別: ////////////////////// js:事件驅動函式 函式定義格式: 方式1: function 函式名(引數){ 函式體; } 注意:函式不用宣告返回值型別 引數不需要加型別 函式呼叫的時候 函式名(引數) js中的事件: 常見的事件: 單擊: onclick 表單提交: onsubmit 加在form表單上的 onsubmit="return 函式名()" 注意函式返回值為boolean型別 頁面載入: onload js事件和函式的繫結: 方式1: 通過標籤的事件屬性 <xxx onclick="函式名(引數)"></xxx> js獲取元素: 方式1: var obj=documnet.getElementById("id值"); 獲取元素的value值 obj.value; 獲取元素的標籤體中的內容 obj.innerHTML; //////////////////// 案例2-步驟分析: 1.先有一個表單 2.在form上新增一個事件 onsubmit="return checkForm()" 3.編寫checkForm這個方法 4.獲取每個表單子標籤的內容 5.判斷是否滿足要求, 若滿足,不用管他 若不滿足,表單不能提交,返回false,且提示資訊. /////////////////////////// 函式的定義: 方式1: function 函式名(引數){ 函式體; } 方式2: var 函式名=function(引數){ 函式體; } js事件和函式的繫結: 方式1: 通過標籤的事件屬性 <xxx onclick="函式名(引數)"></xxx> 方式2: 給元素派發事件 document.getElementById("id值").onclick=function(引數){....} document.getElementById("id值").onclick=函式名 注意: 記憶體中應該存在該元素才可以派發事件 a.將方式2的js程式碼放在html頁面的最下面 b.在頁面載入成功之後在執行方式2的js程式碼 onload事件. //////////////////////// 案例3-輪播圖片 需求: 每隔3秒圖片更新一下 技術分析: bom中window物件的定時器方法 定時器: var id=setInterVal(code,毫秒數):每隔指定的毫秒數執行一次函式 週期 var id=setTimeout(code,毫秒數):延遲指定的毫秒數之後 只執行一次函式 清除定時器: clearInterval(id); claerTimeout(id); String物件 原始型別的String是一個為物件可以直接呼叫String類物件的方法 substring(0,endIndex); //////////////// 步驟分析: 1.在首頁上面繫結一個onload事件 2.事件繫結的函式中編寫一個定時器 3.定時器每隔3秒更換圖片 imgObj.src=""; /////////////// 補充: 運算子: 比較運算子: > >= < <= 若兩邊都是數字 和java一樣 若一般為數字,另一邊為字串形式的數字,將字串形式的數字轉換成數字在進行比較 3>"2" 若一般為數字,另一邊為字串,返回一個false 3>"hello" 兩邊都是字串的時候,比較ascii 等性運算子 == === == :只判斷值是否相同 ===:不僅判斷是否相同,還要判斷型別是否相同 語句: if語句 和java一樣 for while 語句和java一樣 switch 和java一樣(區別,switch 後面跟字串. 還可以跟變數) ///////////////////////////////////// 總結:掌握 1.css和html整合 方式3種 2.css中選擇器: id class 元素 屬性 後代 3.js js和html整合 方式兩種 4.變數定義 5.函式定義 2中格式 6.事件 onclick onload onsubmit 7.事件和函式的繫結 2中方式 8.定時器 2種 9.for while if
回顧:html:作用:展示檔案標籤:<html><head><title></title></head><body></body></html>排版標籤:p 段落hr 水平線br 換行字型h1~h6 標題font 字型 大小 顏色b strong 加粗i 斜體圖片★<img src="圖片的路徑" alt="替代文字" width="" height=""/>路徑的寫法:相對路徑:./ 或者 什麼都不寫 當前目錄../ 上一級目錄絕對路徑:常用http://www.itheima.com/xx超連結★<a href="跳轉的路徑" target="在什麼地方開啟"></a>表格標籤 ★★<table border="" width="" height="" bgcolor="" align="表格對齊方式"><tr align="內容對齊方式"><th></th> <!--表頭單元格--><td></td> <!--普通單元格--></tr></table>td重要的屬性:colspan:列合併rowspan:行合併列表:<ol></ol><ul></ul>子標籤:列表項<li></li>form 表單標籤:常用屬性action:提交的路徑method:提交的方式(get和post)常用子標籤inputselecttextareainput標籤常用屬性:type:textpasswordradiocheckboxfilesubmitresetbuttonhiddenimagename:要想將資訊提交到伺服器必須提供name屬性將單選框和複選框設定成一組value:text password 設定預設值radio checkbox 設定選中後提交的值submit reset button 給按鈕起個顯示的名字select:下拉選<select name=""><option value="">顯示的名字</option></select>textarea:文字域<textarea cols="" rows="" name="">預設值</textarea>給單選框多選框設定預設值設定屬性 checked="checked"給下拉選設定預設值設定屬性 selected="selected"提交的路徑(get)http://ssdfsdfsfd?key=vaule&key=value例如:http://localhost/day/login.jsp?username=tom&password=123框架(瞭解)frameset:規定框架結構 框架集常用屬性:rows:水平qiegecols:垂直切割常用子標籤frame:具體實現例如:水平切割3份<frameset rows="15%,*,10%"><frame><frame><frame></frameset>frame:常用的屬性:src:具體展示那個網頁name:給當前的frame起個名稱 方便超連結使用////////////////////案例1-用div+css重新佈局首頁技術分析:divcss/////////////div:塊標籤<div></div>span:行內的塊標籤<span><span>////////////css:渲染層疊樣式表作用:渲染頁面提高工作效率格式:選擇器{屬性:值;屬性1:值1;}字尾名:.css 獨立的css(樣式)檔案和html元素的整合★方式1:內聯樣式表 通過標籤的style屬性設定樣式方式2:內部樣式表 在當前頁面中使用的樣式通過head標籤的style子標籤匯入例如:<style>#divId2{background-color: #0f0;}</style>方式3:外部樣式表 有獨立的css檔案通過head標籤的link子標籤匯入例如:<link rel="stylesheet" href="css/1.css" type="text/css"/>選擇器:★id選擇器要求:html元素必須有id屬性且有值 <xxx id="id1"></xxx>css中通過"#"引入,後面加上id的值 #id1{...}class選擇器要求:html元素必須有class屬性且有值 <xxx class="cls1"/>css中通過"."引入,後面加上class的值 .cls1{...}元素選擇器直接用元素(標籤)名即可 xxx{...}派生的選擇器屬性選擇器★要求:html元素必須有一個屬性不論屬性是什麼且有值 <xxx nihao="wohenhao"/>css中通過下面的方式使用元素名[屬性="屬性值"]{....}例如:xxx[nihao="wohenhao"]{....}後代選擇器選擇器 後代選擇器{...} 在滿足第一個選擇器的條件下找後代的選擇器,給滿足條件的元素新增樣式瞭解的選擇器錨偽類選擇器a:link {color: #FF0000}/* 未訪問的連結 */a:visited {color: #00FF00}/* 已訪問的連結 */a:hover {color: #FF00FF}/* 滑鼠移動到連結上 */a:active {color: #0000FF}/* 選定的連結 */
選擇器使用小結:id選擇器:一個元素(標籤)class選擇器:一類元素 元素選擇器:一種元素屬性選擇器:元素選擇器的特殊用法使用的時候注意:(瞭解)若多個樣式作用於一個元素的時候不同的樣式,會疊加相同的樣式,最近原則若多個選擇器作用於一個元素的時候越特殊優先順序越高 id優先順序最高//////////////////////屬性(瞭解)字型font-family:設定字型(隸書) 設定字型家族font-size:設定字型大小font-style:設定字型風格文字:改變文字的顏色、字元間距，對齊文字，裝飾文字，對文字進行縮排color:文字顏色line-height:設定行高text-decoration: 向文字新增修飾。 none underlinetext-align:對齊文字列表:list-style-type:設定列表項的型別 例如:a 1 實心圓 list-style-image:設定圖片最為列表項型別 使用的時候使用 url函式 url("/i/arrow.gif");背景:background-color:設定背景顏色background-image:設定圖片作為背景 url尺寸:width:height:浮動:float: 可選值 left right分類:clear:設定元素的兩邊是否有其他的浮動元素值為:both 兩邊都不允許有浮動元素display:設定是否及如何顯示元素。none 此元素不會被顯示。 block 此元素將顯示為塊級元素，此元素前後會帶有換行符。 inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。框模型:(理解)一個元素外面有padding(內邊距) border(邊框) margin(外邊距)padding:元素和邊框的距離margin:元素最外層的空白上面這三個屬性都有簡寫的屬性若設定大小的時候 四個值:順序 上右下左padding:10px 10px 10px 10px若只寫一個的話 代表四個邊使用同一個值 padding:10px若只寫兩個個的話 代表四個邊使用同一個值 padding:10px 20px若只寫三個個的話 代表四個邊使用同一個值 padding:10px 20px 30pxborder(邊框)還可以設定顏色 風格簡寫屬性:border:寬度風格 顏色;
border:5px solid red;solid:實線dashed:虛線double:雙實線步驟分析:1.建立一個div2.在這個div中建立8個div3.第1個div logo巢狀三個div4.第2個div 選單巢狀一個列表 display:inline5.第3個div 輪播圖6.第4個div 熱門商品 標題標籤 圖片display:inlinea:兩個div左邊的div 展示一張圖片右邊的div 展示所有商品b.右邊的div中巢狀10個div3.第5個div 廣告3.第6個div 最新商品3.第7個div 廣告3.第8個div foot 版權兩個p標籤////////////////////////////////javascript 俗稱 js案例1-校驗表單需求:表單提交的時候需要校驗資料是否完整,若不滿足條件,則使用彈出框提示.技術分析:js//////////////////////JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言組成部分:ECMAScript:js基礎語法(規定 關鍵字 運算子 語句 函式等等...)BOM:瀏覽器物件模型DOM:文件物件模型作用:修改html頁面的內容修改html的樣式完成表單的驗證注意:js可以在頁面上直接寫,也可以單獨出去js的檔案的字尾名 .jsjs和html整合方式1:在頁面上直接寫將js程式碼放在 <script></script>標籤中,一般放在head標籤中方式2:獨立的js檔案通過script標籤的src屬性匯入js中變數宣告:var 變數名=初始化值;var 變數名;變數名=初始化值;注意:var可以省略 建議不要省略一行要以分號結尾,最後一個分號可以省略,建議不要省略js的資料型別:原始型別:(5種)NullStringNumberBooleanUndefined通過 typeof運算子可以判斷一個值或者變數是否屬於原始型別,若屬於原始型別,他還可以判斷出屬於那種原始型別typeof 變數|值;若變數為null,使用typeof彈出的值 object使用typeof的返回值undefined - 如果變數是 Undefined 型別的 boolean - 如果變數是 Boolean 型別的 number - 如果變數是 Number 型別的 string - 如果變數是 String 型別的 object - 如果變數是一種引用型別或 Null 型別的
引用型別://////////////////////js:事件驅動函式函式定義格式:方式1:function 函式名(引數){函式體;}注意:函式不用宣告返回值型別 引數不需要加型別函式呼叫的時候函式名(引數)js中的事件:常見的事件:單擊: onclick表單提交: onsubmit 加在form表單上的 onsubmit="return 函式名()" 注意函式返回值為boolean型別頁面載入: onloadjs事件和函式的繫結:方式1:通過標籤的事件屬性 <xxx onclick="函式名(引數)"></xxx>js獲取元素:方式1:var obj=documnet.getElementById("id值");獲取元素的value值obj.value;獲取元素的標籤體中的內容obj.innerHTML;////////////////////案例2-步驟分析:1.先有一個表單2.在form上新增一個事件 onsubmit="return checkForm()"3.編寫checkForm這個方法4.獲取每個表單子標籤的內容5.判斷是否滿足要求,若滿足,不用管他若不滿足,表單不能提交,返回false,且提示資訊.///////////////////////////函式的定義:方式1:function 函式名(引數){函式體;}方式2:var 函式名=function(引數){函式體;}js事件和函式的繫結:方式1:通過標籤的事件屬性 <xxx onclick="函式名(引數)"></xxx>方式2:給元素派發事件document.getElementById("id值").onclick=function(引數){....}document.getElementById("id值").onclick=函式名注意:記憶體中應該存在該元素才可以派發事件a.將方式2的js程式碼放在html頁面的最下面b.在頁面載入成功之後在執行方式2的js程式碼 onload事件.////////////////////////案例3-輪播圖片需求:每隔3秒圖片更新一下技術分析:bom中window物件的定時器方法定時器:var id=setInterVal(code,毫秒數):每隔指定的毫秒數執行一次函式 週期var id=setTimeout(code,毫秒數):延遲指定的毫秒數之後 只執行一次函式清除定時器:clearInterval(id);claerTimeout(id);String物件原始型別的String是一個為物件可以直接呼叫String類物件的方法substring(0,endIndex);////////////////步驟分析:1.在首頁上面繫結一個onload事件2.事件繫結的函式中編寫一個定時器3.定時器每隔3秒更換圖片imgObj.src="";///////////////補充:運算子:比較運算子: > >= < <=若兩邊都是數字 和java一樣若一般為數字,另一邊為字串形式的數字,將字串形式的數字轉換成數字在進行比較 3>"2"若一般為數字,另一邊為字串,返回一個false 3>"hello"兩邊都是字串的時候,比較ascii等性運算子 == ===== :只判斷值是否相同===:不僅判斷是否相同,還要判斷型別是否相同語句:if語句 和java一樣for while 語句和java一樣switch 和java一樣(區別,switch 後面跟字串. 還可以跟變數)/////////////////////////////////////
總結:掌握1.css和html整合方式3種 2.css中選擇器:id class 元素屬性 後代 3.jsjs和html整合方式兩種4.變數定義5.函式定義2中格式6.事件onclick onload onsubmit7.事件和函式的繫結2中方式8.定時器 2種9.for while if