Html，Css，JavaScript，Jquery概述
Html
HTML的全稱是Hyper Text Mark-up Language，超文字標記語言。
1.超文字：頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。
2.標記：與之相對是的編譯型語言，標記型語音無需編譯，直接可以被解析展示。
特點
可以設定文字的格式，比如
可以建立列表標題、字號、文字顏色、段落等等
可以插入影象和媒體
可以建立表格
超連結，可以使用滑鼠點選超連結來實現頁面之間的跳轉
標籤
標籤和內容構建出HTML文件，注意每一個標籤都需要閉合。
<標籤名>內容</標籤名> （圍堵標記）
<標籤名/> （自閉合標籤）
標籤名不區分大小寫，建議都用小寫。
HTML中不支援空格，回車，製表符,它們都會被解析成一個空白字元。
屬性
屬性，就是用來控制我們的內容（影象、文字等的）如何的顯示。
格式
<標籤 屬性1='屬性值' 屬性2='屬性值'>內容</標籤>
註釋
<!-- 註釋內容-->
基本結構
<html> :HTML文件的文件標記，也稱為HTML開始標記
<head> :HTML檔案頭標記，也稱為HTML頭資訊開始標記
<meta></meta> :頁面的元資訊（meta-information）
<title></title> :HTML檔案標題標記
</head>
<body> :HTML文件的主體標記
</body>
</html>
head，title，meta ，body標籤
head:用來包含檔案的基本資訊，比如網頁的標題、關鍵字。
在<head></head>內可以放<title></title>、<meta></meta>、<style></style>等等標記
注意：在<head></head>標記內的內容不會在瀏覽器中顯示
title:顯示在瀏覽器的視窗的左上角的標題
meta:頁面的元資訊（meta-information）
常見的屬性：author，keywords，description
注意：meta標記必須放在head元素裡面
body：HTML文件的主體標記，<body>...</body>是網頁的主體部分，在此標記之間可以包含如<p></p>、<h1></h1>、<br/>、<hr/>等等標記，正是由這些內容組成了我們所看見的網頁
文字標籤
<hn>:標題標記,n的範圍1~6，不同級別對應顯示大小不同的標題，h1最大
<font>字型設定標記,三個常用屬性size,color,face（字型）
<b>:粗字型標記
<i>:斜字型標記
<sub>:文字下標字型標記
<sup>:文字上標字型標記
<tt>:印表機字型標記
<cite>:引用方式的字型，通常是斜體
<em>:表示強調，通常顯示為斜體字
<strong>:表示強調，通常顯示為粗體字
<small>:小型字型標記
<big>:大型字型標記
<u>:下劃線字型標記
格式標籤
<br>：強制換行標記,讓後面的文字、圖片、表格等等，顯示在下一行
<p>：換段落標記，由於多個空格和回車在HTML中會被等效為一個空格，HTML要換段落用<p>
<center>：居中對齊標記，讓段落或者是文字相對於父標記居中顯示
<pre>：預格式化標記
<li>：列表專案標記，配合<ul>和<ol>使用，可以巢狀使用
<ul>：無序列表標記
<ol>：有序列表標記，屬性:type="1/A/a/I/i",value="指定序列數字起始值"
<hr>：水平分割線標記
<dl>：定義型列表，配合<dt><dd>使用
<div>：分割槽顯示標記，也稱之為層標記
<img>圖片標籤
常用屬性：
src：指定我們要載入的圖片的路徑和圖片的名稱以及圖片格式
width：指定圖片的寬度，單位px、em、cm、mm
height：指定圖片的高度，單位px、em、cm、mm
border：指定圖示的邊框寬度，單位px、em、cm、mm
alt：三個作用：
1.當網頁上的圖片被載入完成後，滑鼠移動到上面去，會顯示這個圖片指定的屬性文字
2.如果影象沒有下載或者載入失敗，會用文字來代替影象顯示
3.搜尋引擎可以通過這個屬性的文字來抓取圖片
注意：
<img>為單標記，不需要使用</img>閉合
在載入影象檔案的時候，檔案的路徑或者檔名檔案格式錯誤，將無法載入圖片
<a>超連結標籤
<a href="" target="開啟方式" name="頁面錨點名稱" >連結文字或者圖片</a>
常用屬性：
href：連結的地址，連結的地址可以是一個網頁，也可以是一個視訊、圖片、音樂等等
target：定義超連結的開啟方式
_blank：在一個新的視窗中開啟連結
_seif(預設值)：在當前視窗中開啟連結
_parent/_top：在父視窗/頂層視窗中開啟頁面（框架中使用較多）
name：指定頁面的錨點名稱（訪問定義好的錨點，連線需要加 ）
可以包圍在Img標籤外部，讓img有連結作用
<table>表格標籤
表格使用結構
<table> ：表格
<caption></caption> ：表名稱
<tr> ：表格的一行
<th></th><th></th> ：表格的兩個單元格，th表示列名單元格
</tr>
<tr>
<td></td><td></td> ：表格的兩個單元格，th表示普通單元格
</tr>
<table>
屬性：
width：表示表格的寬度，他的值可以是畫素（px）也可以是父級元素的百分百（%）
height：表示表格的高度，他的值可以是畫素（px）也可以是父級元素的百分百（%）
border：表示表格外邊框的寬度
align：表格的顯示位置(left,center,right)
cellspacing：單元格之間的間距，預設是2px，單位畫素
cellpadding：單元格內容與單元格邊框的顯示距離，單位畫素
frame：控制邊框最外層的四條框void,above,below,hsides,lhs,rhs,vsides,box,border
rules：控制如何顯示單元格內邊框none,groups,rows,cols,all
bgcolor：表格的背景顏色
表單標籤
Form
<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中的內容
常用屬性
name：表單名稱
method：傳送資料的方式，分為post和get兩種方式
get方式：get方式提交時，會將表單的內容附加在URL地址的後面，所以限制了提交的內容的長度，不超過8192個字元，且不具備保密性
post方式提交時，將表單中的資料一併包含在表單主體中，一起傳送到伺服器中處理，沒有資料大小限制
action：表單資料的處理程式的URL地址
enctype：設定表單的資料的編碼方式
target：和超連結form
的屬於類似，用來指定目標視窗
Input
input常用表單型別，具體型別根據type引數決定
常用屬性
type：多種型別，如下
text：預設值，表示文字框
password：密碼框
submit：提交按鈕
button：普通按鈕
radio：單選按鈕，可以使用cheked屬性來設定預設選中項
checkbox：複選按鈕，可以使用cheked屬性來設定預設選中項
hidden：隱藏域，用於某些資料無需展示，但是可能需要提交到後臺使用
name：定義控制元件的名稱，很重要，以鍵值對提交資料時，該name就是key
value：初始化值，開啟瀏覽器時，文字框中的內容，編輯修改後，value也會變化
size：設定控制元件的長度
maxlength：輸入框中最大允許輸入的字元數
Select
格式
<select name='name' size='size' multiple>
<option value='value1' selected>選項1</option>
<option value='value2'>選項2</option>
</select>
屬性
multiple：表示用可以多選的下來列表，如果沒有這個屬性就只能單選
size：設定列表的高度
name：定義這個列表的名稱，以鍵值對提交資料時，該name就是key
option標籤
value：給選項賦值，指定傳送到伺服器上面的值（鍵值對中的value）
selected：指定預設的選項
Textarea
多行文字域
屬性
rows：顯示的行數，單位是字元個數
cols：顯示的列數，單位是字元個數
frameset標籤
框架將瀏覽器劃分成不同的部分，每一部分載入不同的網頁，實現在同一瀏覽器視窗中載入多個頁面的效果
常用屬性
cols：
使用“畫素數”和%分割左右視窗，“*”表示剩餘部分
使用“*”，“*”表示框架平均分成2個
使用“*”，“*”，“*”表示框架平均分成3個
rows：使用“畫素數”和%分割上下視窗，“*”表示剩餘部分
frameborder：指定是否顯示邊框，0不顯示，1顯示
border：設定邊框的大小，預設值5畫素
<frame>子視窗標籤
是一個單標記，
必須放在<frameset>中使用
在<frameset>中設定了幾個視窗，就必須對應使用幾個<frame>框架
使用src屬性指定一個網頁。
常用屬性：
src：載入網頁檔案的URL地址
name：框架名稱，是連結標記的target所要引數
noresize：表示不能調整框架大小，沒有設定時就可以調整，引數值為noresize
scrolling：是否需要滾動條，可選auto，yes，no
frameborder：是否需要邊框可選1顯示邊框，0不顯示邊框
CSS
CSS 指層疊樣式表 (Cascading Style Sheets),是為了解決內容與表現分離的問題。
<body bgcolor='red'></red>
body為內容
bgcolor為表現
定義css幾種方式
第一種定義css的方式：內鏈樣式表
<body bgcolor="red" >
<body style="background-color: red" >
但是這種方式還是沒有將內容和表現分離
第二種定義css的方式：嵌入式樣式表
<style type="text/css"></style>
需要將樣式放在<head></head>中
<body bgcolor="yellow" >
<style type="text/css">
body{background-color:yellow}
</style>
但是這種方式還是沒有將內容和表現完全分離
第三種定義css的方式：引入式樣式表
<link rel="StyleSheet" type="text/css" href="style.css">
style.css中
body{background-color:yellow}
這種方式完全將內容和表現完全分離
選擇器
通過選擇器，我們可以定位到css樣式需要修飾的目標，常用的選擇器有：
<p id='p1' class='c1'>選我啊，選我啊</p>
標籤選擇器 p{color:red}
類選擇器 .c1{color:red}
ID選擇器 p1{color:red}
組合選擇器 如果有多個型別選擇器使用同一種樣式p,.p1, c1,h1,h2,h2{color:red}
偽元素選擇器 a:link{color:black} a:hover、a:active、a:visited
優先順序：就近原則
常用屬性
顏色屬性
顏色屬性表達方式有多種：
color：green
color： ff6600
color：rgb（255,255,255）
color：rgba（255,255,255,1）
字型屬性
font-size 字型大小
font-family：font-family：微軟雅黑，serif，可以使用“，”隔開，以確保當字型不存在的時候直接使用下一個
font-weight：normal(預設值)、bold(粗)、bolder(更粗)、lighter(更細)
背景屬性
背景顏色 background-color
背景圖片 background-image
background-image:url(圖片路徑)，無背景圖片值為none
背景重複 background-repeat
background-repeat：repeat/repeat-x/repeat-y/no-repeat
背景位置 background-position
橫向（left,center,right）縱向（top,center,bottom）：background-position:left top;
直接使用數值：background-position:30px 30px;
簡寫方式
background:背景顏色 url(影象) 重複 位置
background: ff6600 url(images/bg,jpg) no-repeat top center
文字屬性
text-align 橫向排列
可選值為left，center，right
line-height 文字行高
%基於字型大小的百分比行高
數值 來設定固定值
text-indent 首行縮排
letter-spacing 字元間距
word-spacing
normal 預設
length設定具體的數值（可以設定負值）
inherit 繼承
direction：ltr/rtl/inherit
text-transform：capitalize(單詞首字母大寫)lowercase/uppercase/inherit
邊框屬性
border-style 邊框風格
border-bottom-style，border-top-style，border-left-style，border-right-style
屬性值
none無邊框/solid直線邊框/dashed虛線邊框/dotted點狀邊框/double雙線邊框
groove 凸槽邊框/ridge 壟狀邊框/inset inset邊框/outset outset邊框
inherit繼承
border-width 邊框寬度
border-top-width，border-top-width，border-left-width，border-right-width
屬性值：thin 細邊框/medium 中等邊框/thick 粗邊框/inherit繼承/px 固定值的邊框
border-color 邊框顏色
border-top-color，border-top-color，border-left-color，border-right-color
一個值：border-color：（上、下、左、右）；
兩個值：border-color：（上下） （左右）；
三個值：border-color:（上） （左、右） （下）;
四個值：border-color：（上）（右）（下）（左）;
簡寫方式：
border：solid 2px f60
列表屬性
標記的型別:list-style-type
屬性值：none,disc（預設）,circle
標記的位置:list-style-position
inside列表專案標記放置在文字以內，且環繞文字根據標記對齊。
outside預設值。保持標記位於文字的左側。列表專案標記放置在文字以外，且環繞文字不根據標記對齊。
inherit規定應該從父元素繼承 list-style-position 屬性的值。
設定影象列表標記:list-style-image
URL 影象的路徑。
none 預設。無圖形被顯示。
inherit 規定應該從父元素繼承 list-style-image 屬性的值。
簡寫方式
list-style:square inside url('/images/a.jpg');
Div,span標籤
DIV和SPAN在整個HTML標記中，沒有任何意義，他們的存在就是為了應用CSS樣式，DIV和span的區別在與，span是內聯元素，div是塊級元素。
<style type="text/css">
div{
background-color: green;
}
span
{
background-color: green;
}
</style>
佈局相關屬性
position 定位方式
static：沒有定位，預設方式，用以防止繼承造成的影響
left（左），right（右），top（上），bottom（下）無效果
relative：相對定位
相對指的是其原來的位置，移動後，不會影響周邊的元素
absolute：
與relative類似，相對於body，而不是與原來的位置
fixed：
與relative類似，流量拿起視窗，而不是與原來的位置
z-index
z-index 層覆蓋先後順序（優先順序），引數為數值
display
display：none 層不顯示
display：block 塊狀顯示，在元素後面換行，顯示下一個塊元素
display：inline 內聯顯示，多個塊可以顯示在一行內
block相當於將span轉化為div，inline相當於將div轉化為span
float
left :左浮動
right:右浮動
clear：left/right/both清除浮動
<div sytle='float:left'></div>
<div sytle='float:left'></div>
<div sytle='clear:both'></div>//新增這個div，可以遮蔽前一個div的float影響到後面的div
<div></div>
JavaScript
JavaScript是NetScape公司為Navigator瀏覽器開發的，是寫在HTML檔案中的一種指令碼語言，能實現網頁內容的互動顯示。當用戶在客戶端顯示該網頁時，瀏覽器就會執行JavaScript程式，使用者通過互動的操作來改變網頁的內容，來實現HTML語言無法實現的效果。
定義javascript
通過<script></script>中直接編寫
通過<script src='目標文件的URL'></script>連結外部的Js檔案
作為某個元素的事件屬性值或者是超連結的href屬性值
基本語法
JavaScript的執行順序：按照在HTML檔案中出現的順序依次執行
大小寫敏感：JavaScript嚴格區分大小寫
忽略空白符和換行符
通過\對程式碼進行折行操作：
document.write(' hello\
world');
註釋:
單行註釋//
多行註釋/*註釋內容*/
JavaScript的保留字
通過document.write()向文件書寫內容
通過console.log()向控制檯寫入內容
JavaScript中除錯的錯誤
通過alert()進行除錯
通過控制檯進行除錯
常用事件
| onchange |
HTML 元素改變 |
| onclick |
使用者點選 HTML 元素 |
| onmouseover |
使用者在一個HTML元素上移動滑鼠 |
| onmouseout |
使用者從一個HTML元素上移開滑鼠 |
| onkeydown |
使用者按下鍵盤按鍵 |
| onload |
瀏覽器已完成頁面的載入 |
DOM
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）
常見用法
查詢 HTML 元素
getElementsByTagName
getElementsByName
GetElementById
建立節點
createElement
createTextNode
appendChild
刪除節點
removeChild
BOM
1. ESCMScript
2. dom(重點)
3. bom() browser object model
五大物件
1. window 整個瀏覽器
2. location 當前位置
3. history 歷史
4. screen 螢幕資訊
5. navigator 瀏覽器資訊
window
1. 可以獲取其他四大物件
1. window.location
2. location
2. 彈框
1. 警告框 alert("msg");
2. 確認框 confirm("確定退出嗎??");
3. 輸入框 prompt("請輸入賬號");
3. 定時器
1. setInterval(fn,ms);
2. setTimeout(fn,ms);
清除定時器
clearInterval(id):
clearTimeout(id):
4. 開啟關閉
1. window.open();
* 相當於a標籤 target="blank"
2. window.close();
* 關閉自己
location
1. href 屬性
1. 獲取當前位置
var l =location.href
2. 設定當前的地址
location.href ="http://wwww.baidu.com'
* 相當於a標籤 target="self"
history
1. go(數字)
Jquery
1. js封裝
2. 方法更加簡便,更加易用
3. 框架(半成品)
4. 宗旨是“write Less，Do More”
模擬jquery查詢元素的封裝
1. js找元素
1. document.getElementById("");
2. document.getElementsByName("");
3. document.getElementsByClassName("");
4. document.getElementsByTagName("");
2. var obj = getElement("引數"); //封裝 ,,, css選擇器
引數 " add"
3. jquery(" s");
4. $
1. java 類名? 可以(不推薦)
2. java 變數名? 可以(不推薦)
3. java 方法名? 可以(不推薦)
jquery步驟
1. 下載
1. http://jquery.com/
2. http://jquery.com/download/
1. compressed 壓縮
2. uncompressed 未壓縮
2. 匯入
1. typeof(xx)
2. typeof xx
找元素(重要)
var $jqObj = $(" username");
alert($jqObj.val());
轉換 (有的人喜歡js,jq)
1. js轉成jquery
* 通過js找到dom
* 轉成jq物件
* 方式 $(dom);
2. jquery轉成 js
* 通過jquery找jquery物件
* 轉成js
* get(0);
事件
1. js: onxxx
1. 內聯 onclick(add());
2. 事件分配
* dom.onclick=fn;
2. jquery:所有的on去除
1. $jqObj.click(fn);
1. dom.onclick = fn;
----------
function(){...} 等價於 fn
頁面載入
1. 完成事件分發
2. js
1. onload =function(){..}
3. jqueyr
1. $(function(){...});
2. $(document).ready(fn);
4. 區別
1. js一個頁面只能一個
2. jquery一個頁面多個
事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data]])
事件派發(頁面載入完)
1. dom物件.onclick = function(){...};
1. $("選擇器").click(function(){...});
2. 所有事件的on全部去掉
----------
找元素(重點)
var dom物件=document.getElementById("id");
$("選擇器");-> var $jq物件= $(" id");
基本選擇器(4個)
1. js id class name tag
2. jquery
1. id選擇器
* var $jquery = $(" id");
2. class選擇器 .
* var $jquery = $(".className");
3. tag標籤選擇器
* var $jquery = $("標籤名");
4. 多個
* var $jquery = $("標籤名1, id,.className");
層次選擇器(4個)
1. 後代選擇器 $("a b");
$("body div");
2. 孩子選擇器 $("a>b");
$("body>div");
3. 大弟弟選擇器 $("a+b");
$(" first+div");
4. 所有弟弟 $("a~b");
$(" first~div");
基本過濾選擇器(7個)
1. 第一個 $(":first");
$("div:first");
2. 最後 $(":last");
3. 奇數 $(":odd");
4. 偶數 $(":even");
5. 下標等於 $(":eq(num)");
6. > geater than $(":gt(num)");
7. < less than $(":lt(num)");
$("").hide /show /toggle();
內容過濾
1. :has(選擇器)
$("div:has( first-f)");
slideUp (ms)
slideDown(ms)
slideToggle(ms)
可見選擇器
1. :hidden -> display:none
$(":hidden").show(1000);
2. :visible
屬性選擇器
1. [屬性名]
2. [屬性名=值]
$("[屬性名='值']")
$("[屬性名=值]")
表單過濾器
1. :input :表單標籤: input selector textarea
$("input,select,textarea")
$(":input")
jquery樣式css
dom.style.backgroundColor="red";
css background-color
1. 獲取: $jqObj.css("background-color");
2. 設定: $jqObj.css("background-color","red");
jquery屬性attr,prop
1. js 屬性 dom.屬性名
dom.屬性名;
dom.屬性名= xx;
1. 獲取: $("").attr("屬性名");
2. 設定: $("").attr("屬性名","屬性值");
3. 移除: $("").remove("屬性名");
4. prop properties
動畫
基本
1. show
2. hide
3. toggle
滑動
1. slideUp
2. slideDown
3. slideToggle
淡入淡出
1. fadeIn
2. fadeOut
3. fadeToggle
----------
jquery陣列遍歷-2種方式
for(var i=0; i<length; i++)
{
..
}
1. ajax
2. 陣列.each(function(index,dom));
3. $.each(陣列,fn);
陣列 jquery
屬性
value屬性val
1. 獲取:val();
2. 設定:val("值");
標籤體內容
1. $jq.html(); //
2. $jq.html("<a>xx</a>");//
3. $jq.text();//
4. $jq.text("<a>xx</a>");//
text : 獲取普通文字 設定普通文字
html : 程式碼
元素
建立
1. $("<a></a>");
新增
1. a.append(b)->在a標籤裡面,追加b標籤到最後面
2. a.prepend(b) ->在a標籤裡面,追加b標籤到最前面