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>
表格標籤 ★★
<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)
常用子標籤
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