網站分享:
http://www.runoob.com/
回顧:
html:展示
檔案 标簽:
<html>
<head>
<title></title>
<meta>
<link> //導入外部css
<style></style> //直接寫css
</head>
<body></body>
</html>
排版标簽:
p 段落
hr 分割線
br 換行
字型标簽:
<font></font>
h1~h6 标題标簽 （獨自占一行）
b strong
i
圖檔标簽:
<img src="圖檔的路徑" alt="替代文字" width="" height=""/>
超連結标簽
<a href="跳轉的路徑" target="在那裡打開">xx</a>
清單标簽
<ul></ul>
<ol></ol>
子标簽
<li></li>
表格★
<table border="1">
<tr>
<td></td>
</tr>
</table>
td的重要屬性:
colspan:列合并
rowspan:行合并
表單标簽:★
表單作用:收集使用者資訊
form:
常見的屬性:
action:設定送出路徑
method:送出方式
get和post GET比POST更不安全
，因為參數直接暴露在URL上，是以不能用來傳遞敏感資訊。
常見的子标簽:
input
select
textarea
input标簽:
屬性:
type取值:(10)
text:文本框
password:密碼
radio:單選框
checkbox:多選框
file:檔案框
submit:送出
reset:重置
button:普通按鈕
hidden:隐藏域
image:圖檔送出
name屬性:
1.送出到伺服器
2.将單選框或者複選框設定為一組
select:下拉選
格式:
<select name="">
<option>-請選擇-</option>
<option value="">展示的資訊</option>
</select>
textarea:文本域
格式:
<textarea rows="" cols="">預設值</textarea>
預設值:
text password:設定value屬性
radio checkbox:設定 checked="checked"屬性
select:在option上設定 selected="selected"屬性
value可以設定按鈕的展示文字
架構:
frameset:架構集
常用屬性:
cols:
rows:
常用子标簽:
frame
frame:
常用屬性:
src:展示的頁面
name:給目前的frame起個名字 友善a标簽使用 target="name"
塊标簽:div+css布局
div 獨自占一行，寬為浏覽器寬
span 行内标簽
//
css:★
層疊樣式表:渲染
格式:
選擇器:{屬性:值;屬性1:值1}
html和css的整合
方式1:内斂樣式表 通過标簽的style屬性
<xxx style="..."/>
方式2:内部樣式表 通過head的style子标簽
<style>....</style>
方式3:外部樣式表 通過link标簽導入
<link...> <link rel="stylesheet" type="text/css" href="../css/style.css" />
選擇器:
id選擇器 #id值
class選擇器 .class值
元素選擇器 标簽名
屬性選擇器 标簽名[屬性="值"]
後代選擇器
選擇器 後代選擇器
錨僞類
字型 文本 背景 清單(list-style-type:none) 浮動:float
清除浮動(分類) clear
顯示(分類) display: none block inline
框模型:内邊距 邊框 外邊距
js:javascript 腳本 直接解釋就可以
js和html整合:
方式1:在html頁面中
<script></script>
方式2:外部的js檔案
<script src=""></script>
js組成部分:
ECMAScript:文法
BOM:浏覽器對象模型
DOM:文檔對象模型
基礎文法:
var 變量名=值;
資料類型:
原始類型
Undefined Null String Number Boolean
通過typeof判斷屬于那種類型
引用類型
Number Boolean
★String
屬性:length
方法:
substring
★Array
屬性:length
方法:
join(分隔符):列印數組
Math
Date
RegExp
直接量文法:
/正規表達式/
方法:
test()
全局
decodeURI
encodeURI
eval（)
函數:
function 函數名(參數清單){
函數體
}
匿名函數:
function(){....}
周遊
方式1:
jquery對象.each(function(){});
方式2:
$.each(jquery對象,function(){});
//
案例1-表單校驗
需求:
通過validate插件來校驗表單
技術分析:
jqery validate
validate使用步驟:
validate是别人封裝好的第三方工具
1.導入jquery.js
2.導入validate.js
3.在頁面加載成功之後 對表單進行校驗 $("選擇器").validate()
4.在validate中編寫校驗規則
$("選擇器").validate({
rules:{},
messages:{}
});
//
rules格式:
格式1:
字段的name屬性:"校驗器"
格式2:
字段的name屬性:{校驗器:值,校驗器:值}
例如:
username:"required",
password:{
required:true,
digits:true
},
repassword:{
equalTo:"[name='password']"
},
zuixiaozhi:{
min:5
},
shuzhiqujian:{
range:[5,10]
}
///
messages的格式:
格式1:
字段的name屬性:"提示資訊"
格式2:
字段的name屬性:{校驗器:"提示資訊",校驗器:提示資訊"}
例如:
username:"使用者名不能為空",
password:{
required:"密碼不能為空",
digits:"密碼隻能是數字"
},
repassword:{
equalTo:"兩次輸入的内容不一緻"
},
zuixiaozhi:{
min:"最小值應該大于{0}"
},
shuzhiqujian:{
range:"輸入的範圍在{0}~{1}之間"
} ![CSS開發快速提升技巧[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)