APP
HTML, CSS, JavaScript
一、HTML
1. HTML4常用標(biāo)簽
1.1 文件標(biāo)簽
-
<html>標(biāo)簽：代表當(dāng)前書寫的是一個(gè)HTML文檔 -
<head>標(biāo)簽：存儲(chǔ)的本頁(yè)面的一些重要的信息，它不會(huì)顯示該標(biāo)簽下有一個(gè)子標(biāo)簽
<title>用于定義頁(yè)面的標(biāo)題欄的名稱 -
<body>標(biāo)簽：該標(biāo)簽中的書寫的內(nèi)容會(huì)顯示出來(lái)該標(biāo)簽下的屬性：
HTML中標(biāo)簽的屬性值可以用
' '或" "包圍-
text用于設(shè)置文字的顏色 -
bgcolor用于設(shè)置頁(yè)面的背景色 -
background用于設(shè)置頁(yè)面的背景圖片需要在當(dāng)前項(xiàng)目下創(chuàng)建文件夾存放HTML中調(diào)用的圖片文件，圖片的路徑不能以
/開(kāi)始，必須是以這個(gè)文件夾開(kāi)始
-
-
示例Code
<html> <head> <title> this is title </title> </head> <body text="red" bgcolor="pink" background="image/test.JPG"> </body> </html>
1.2 排版標(biāo)簽
-
HTML注釋
<!-- 注釋內(nèi)容 -->VSCode中注釋的快捷鍵
ctrl+/ -
換行標(biāo)簽
<br/>標(biāo)簽就是一個(gè)換行（回車）功能標(biāo)簽，標(biāo)簽中的/可有可無(wú)的。有/是HTML語(yǔ)言的標(biāo)準(zhǔn)化，但是HTML語(yǔ)言是一門不那么嚴(yán)謹(jǐn)?shù)恼Z(yǔ)言 -
段落標(biāo)簽
在
<p>標(biāo)簽中的內(nèi)容,會(huì)在開(kāi)始與結(jié)束之間產(chǎn)生一個(gè)空白行，并且它會(huì)自動(dòng)換行.常用屬性
align它的作用是設(shè)置段落中的內(nèi)容對(duì)齊方式 可取值有left（默認(rèn)值是left）、right、center<html> <head> <title> this is title </title> </head> <body text="red" bgcolor="pink" background="image/test.JPG"> hello <br/> hello hello <p align="center">hello</p> <p align="left">hello</p> <p align="right">hello</p> <p align>hello</p> </body> </html> -
水平線標(biāo)簽
<hr>標(biāo)簽會(huì)在頁(yè)面上產(chǎn)生一個(gè)水平線對(duì)于hr標(biāo)簽常用屬性:
align：取值有left，right，center代表水平線的位置size：代表水平線厚度（粗細(xì)）width：代表水平線寬度color：水平線的顏色
單位：size="5"，單位為"像素"/"像素點(diǎn)"，像素就是構(gòu)成計(jì)算機(jī)圖片的最小單位，單位也可以使用百分比，如：size="50%"
-
分區(qū)標(biāo)簽
<div>是一個(gè)塊標(biāo)簽，用來(lái)進(jìn)行布局的，不加屬性值的<div>并沒(méi)有什么效果，肉眼也看不見(jiàn)，但<div>與CSS結(jié)合，就會(huì)更好對(duì)頁(yè)面進(jìn)行排版<div>與<span>都是“容器”的作用，區(qū)別：-
<div>標(biāo)簽會(huì)自動(dòng)換行，是塊級(jí)元素，<span>標(biāo)簽不會(huì)自動(dòng)換行，是行內(nèi)元素div中的屬性：
- width：設(shè)置div寬
- height：設(shè)置div高
- background或background-color：設(shè)置div背景顏色
- margin：用于設(shè)置本div與其他元素或頁(yè)面四周邊框之間的邊距
- padding: div中元素與本div四周邊框之間的距離
VSCode快捷鍵：
div*n快速創(chuàng)建n行div -
<div>：整體劃分區(qū)塊，<span>：局部劃分
-
1.3 字體標(biāo)簽
-
字體標(biāo)簽
<font>標(biāo)簽可以設(shè)置字體，字體的大小和顏色，使用該標(biāo)簽包圍要設(shè)置的內(nèi)容即可常用屬性：
-
face：設(shè)置字體 -
size：設(shè)置字體的大小 -
color：設(shè)置字體的顏色表示字體顏色屬性值的3種方法：
-
使用十六進(jìn)制方式，取值范圍 #000000 ~ #FFFFFF （黑色到白色）
當(dāng)顏色值為#cc3300 時(shí)，可簡(jiǎn)化成 #c30 這種方式
-
RGB顏色表示法：RGB（x,y,z）其中x、y、z是0 ～ 255之間的整數(shù)
rgb字母大小寫無(wú)所謂
- 直接使用給定的值：red、blue
可以使用color屬性的標(biāo)簽：
<font>、<body>等 -
-
-
標(biāo)題標(biāo)記
作用：
<h數(shù)字>標(biāo)簽可以給一段文字起一個(gè)標(biāo)題使用方法：在
<h1>到<h6>中標(biāo)題尺寸遞減與普通文本的區(qū)別：自動(dòng)換行，字體加粗，標(biāo)題與標(biāo)題之間產(chǎn)生一定的距離
-
格式化標(biāo)簽
<b>：使文本內(nèi)容字體加粗<i>：使文本內(nèi)容字體傾斜<del>：為文本內(nèi)容添加刪除線<u>：為文本內(nèi)容添加下劃線
在HTML中允許標(biāo)簽進(jìn)行嵌套的，但是一般都包裹嵌套，而不可以進(jìn)行交叉嵌套
<b> hi how are you doing </b> <br/> <i><b> hi how are you doing </b></i> <br/> <del><b> hi how are you doing </b></del> <br/> <u><del><b> hi how are you doing </b></del></u> <br/>
1.4 列表標(biāo)簽
-
列表標(biāo)記中先設(shè)置列表的類型標(biāo)簽，再用多個(gè)子標(biāo)簽
<li>表示列表一行的信息 -
有序列表
<ol>標(biāo)簽中的屬性：-
type：設(shè)置標(biāo)簽顯示的順序的方式常用的屬性值：
- 默認(rèn)值是數(shù)字
- 以英文字母順序：
A - 以羅馬字符順序：
I
-
start：給定義一個(gè)數(shù)字，設(shè)置序列從這個(gè)數(shù)字開(kāi)始
-
-
無(wú)序列表
<ul>標(biāo)簽中的屬性：-
type：設(shè)置無(wú)序列表中的符號(hào)形狀常用的屬性值：
- 實(shí)心圓（默認(rèn)值）：
disc - 方塊：
square - 空心圓：
circle
- 實(shí)心圓（默認(rèn)值）：
-
-
示例Code
<ol type="I"> <li>this is the first line</li> <li>this is the second line</li> <li>this is the third line</li> <li>this is the fourth line</li> </ol> <ul type="circle"> <li><b>this is the first line</b></li> <li>this is the second line</li> <li>this is the third line</li> <li>this is the fourth line</li> </ul>
1.5 圖像標(biāo)簽
-
作用：
<img>：圖像標(biāo)簽可以在頁(yè)面中引入圖片 -
圖像標(biāo)簽中的屬性：
-
src：用于設(shè)置圖片的路徑 -
width：用于設(shè)置圖片的寬度 -
height：用于設(shè)置圖片的高度 -
border：用于設(shè)置圖片的邊框 -
alt：如果圖片不可以顯示時(shí)，默認(rèn)顯示的文本信息 -
title：鼠標(biāo)懸停圖片上，默認(rèn)顯示的文本信息 -
align：圖片附件文字的對(duì)齊方式，可取值有常用的屬性值：
left、right、middle、top、bottom
-
1.6 超鏈接標(biāo)簽
-
<a>標(biāo)簽可以實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊這段內(nèi)容后進(jìn)行跳轉(zhuǎn)到其它頁(yè)面的操作超鏈接內(nèi)容不僅可以是文本，也可以是圖片等信息
超鏈接標(biāo)簽的常用屬性：
-
href：代表要跳轉(zhuǎn)的路徑屬性值若是網(wǎng)站的地址，則需要加
http:// -
target：性規(guī)定在何處打開(kāi)這個(gè)鏈接文檔常用的屬性值：
_blank：在新窗口中打開(kāi)頁(yè)面_self：在本窗口打開(kāi)頁(yè)面
-
1.7 表格標(biāo)簽
-
定義一個(gè)表格先定義
<table>，再定義多個(gè)<tr>表示多行，在每個(gè)<tr>中定義多個(gè)<td>表示每行中的每列下的數(shù)據(jù)單元<table border="1" width="250px" align="center" cellspacing="0 "> <tr align="center"> <td align="right">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
-
<table>標(biāo)簽用于定義整個(gè)表格常用的屬性：
-
border：邊框，取值是像素為單位 -
width：代表表格的寬度，取值是像素為單位 -
align：代表該表格在整個(gè)頁(yè)面中的對(duì)其方式常用的屬性值：
left：左對(duì)齊right：右對(duì)齊center：居中對(duì)齊
-
cellspacing：每個(gè)單元格之間的間距（通常設(shè)置0表示單線表格）
-
-
<tr>表示表格中的行 (Table Row)常用的屬性：
-
align：統(tǒng)一設(shè)置表格中行的所有數(shù)據(jù)單元內(nèi)容的對(duì)齊方式常見(jiàn)的屬性值同
<table>中的<align>
-
-
<td>表示表格中的數(shù)據(jù)單元 (Table DataCell)常用的屬性：
-
colspan：列的合并屬性值為從當(dāng)前列起向右一共要合并的列數(shù)
-
rowspan：行的合并屬性值為從當(dāng)前行起向下一共要合并的行數(shù)
-
align：設(shè)置合并后的數(shù)據(jù)單元內(nèi)容在表格中的對(duì)齊方式，或者用于單獨(dú)設(shè)置表格中數(shù)據(jù)單元內(nèi)容的對(duì)齊方式常見(jiàn)的屬性值同
<table>中的<align><table border="1" width="250px" align="center" cellspacing="0 "> <tr align="center"> <td colspan="2" align="center">row</td> <td>3</td> </tr> <tr> <td>4</td> <td rowspan="2" align="center">col</td> <td>6</td> </tr> <tr> <td>7</td> <td>9</td> </tr> </table>
-
1.8 表單標(biāo)簽
-
表單概念
通過(guò)錄入的信息將要提交的信息，即所有的數(shù)據(jù)形成一個(gè)整體，一起提交給服務(wù)器，提交到指定的位置
常見(jiàn)的 登錄頁(yè)面、注冊(cè)頁(yè)面 都離不開(kāi)表單的應(yīng)用
-
表單標(biāo)簽
<form><form>中的屬性：-
action：將整個(gè)表單提交到目的地 -
method：表單提交的方式屬性值：
get：提交時(shí)，傳輸數(shù)據(jù)量少，明文提交post：提交時(shí)，傳輸數(shù)據(jù)量大，密文提交
-
表單標(biāo)簽常規(guī)寫法
使用段落標(biāo)簽，標(biāo)簽中的內(nèi)容，會(huì)在開(kāi)始與結(jié)束之間產(chǎn)生一個(gè)空白行，并且它會(huì)自動(dòng)換行
<form> <p> <input type="xxx"> </p> <p> <input type="xxx"> </p> <p> <input type="xxx"> </p> </form>
-
-
表單標(biāo)簽
<form>中的子標(biāo)簽-
所有表單中的元素都要具有名稱（否則提交到服務(wù)器之后，服務(wù)器無(wú)法區(qū)識(shí)別多個(gè)元素之間的不同）
-
<intput>：提供指定的輸入模式屬性type的常見(jiàn)屬性值：
-
text：type屬性的默認(rèn)值，普通的文本輸入框當(dāng)type為
text時(shí)，還可以加入以下屬性placeholder：提示用戶輸入文本的信息maxlength：設(shè)置最多能輸入的字符數(shù)量
<p>帳號(hào)：<input name="a" type="text" placeholder="請(qǐng)輸入帳號(hào)..." maxlength="5" ></p> -
password：密碼輸入框<p>密碼：<input name="b" type="password"></p> -
checkbox：多選框/復(fù)選框每個(gè)帶checkbox屬性的input標(biāo)簽都代表一個(gè)選項(xiàng)，要使這些選項(xiàng)成為一組必須要同時(shí)給input加入屬性值相同的name屬性
所有的復(fù)選框以組為單位，組內(nèi)的每個(gè)復(fù)選框都應(yīng)該具有相同的name值
type屬性值為checkbox的input標(biāo)簽，可以加入屬性值為checked的checked屬性，來(lái)實(shí)現(xiàn)默認(rèn)選擇一個(gè)選項(xiàng)
<p>愛(ài)好： <input type="checkbox" name="gender"> 抽煙 <input type="checkbox" name="gender"> 喝酒 <input type="checkbox" name="gender" checked="checked"> 燙頭 <input type="checkbox" name="gender" checked="checked"> 泡澡 </p> -
radio：?jiǎn)芜x按鈕每個(gè)帶radio屬性的input標(biāo)簽都代表一個(gè)選項(xiàng)，要使這些選項(xiàng)成為一組必須要同時(shí)給input加入屬性值相同的name屬性
單選框要想可以一次只選擇一個(gè)，要具有相同的name值
type屬性值為radio的input標(biāo)簽，可以加入屬性值為checked的checked屬性，來(lái)實(shí)現(xiàn)默認(rèn)選擇一個(gè)選項(xiàng)
<p>性別： <input type="radio" name="gender"> 男 <input type="radio" name="gender" checked="checked"> 女 </p> -
file：上傳文件<p>頭像： <input type="file"> </p> -
reset：重置按鈕：重置當(dāng)前表單的所有子標(biāo)簽的內(nèi)容 -
submit：提交按鈕：提交當(dāng)前表單的所有子標(biāo)簽的內(nèi)容 -
button：普通按鈕：可以用作取消的按鈕，用于返回上一個(gè)頁(yè)面或退出<p> <input type="reset" value="清空"> <input type="submit" value="提交"> <input type="button" value="取消"> <button>保存</button> </p>value屬性代表按鈕上顯示的內(nèi)容
-
-
<select>：下拉列表子標(biāo)簽
<option>：列表中的項(xiàng)常見(jiàn)的屬性：
selected：被選中
<p>血型： <select> <option>A型</option> <option>B型</option> <option>C型</option> <option selected="selected">O型</option> </select> </p> -
<textarea>：文本域（多行文本框）可以通過(guò) cols 和 rows 屬性來(lái)規(guī)定 textarea 的尺寸，不過(guò)更好的辦法是使用 CSS 的 height 和 width 屬性
<p>個(gè)人簡(jiǎn)介： <textarea cols="10" rows="5"></textarea> </p> -
<button>：按鈕在
<form>表單中，作用和submit一樣<p> <input type="submit" value="提交"> <button>保存</button> </p>不在
<form>表單中，就是普通按鈕（配合后期的JavaScript，可擴(kuò)展性更高）
-
1.9 框架標(biāo)簽
-
框架標(biāo)簽
<frameset>作用：用多個(gè)界面拼接成一個(gè)界面
使用方法：每個(gè)frameset下的子標(biāo)簽可以是frame也可以還是一個(gè)frameset
在html標(biāo)簽中frameset標(biāo)簽不能與body標(biāo)簽共存
常用屬性
-
rows：用于將頁(yè)面分為幾行內(nèi)容屬性值可以按照需求自定義每部分的百分比，剩下的一部分可以使用
* -
cols：用于將頁(yè)面分為幾列內(nèi)容屬性值可以按照需求自定義每部分的百分比，剩下的一部分可以使用
*
-
-
框架標(biāo)簽子標(biāo)簽
<frame>常用屬性
src：表示當(dāng)前行或列的資源路徑
-
示例Code
<frameset rows="10%,*,13%"> <frame src="top.html"></frame> <frameset cols="15%,*"> <frame src="left.html"></frame> <frame src="right.html"></frame> </frameset> <frame src="foot.html"></frame> </frameset>
1.10 其他標(biāo)簽與特殊字符
-
<meta>標(biāo)簽常見(jiàn)的作用：
-
指定頁(yè)面的字符編碼方案
常見(jiàn)的編碼表：
ASCII：美國(guó)標(biāo)準(zhǔn)信息交換碼， 使用一個(gè)字節(jié)的低7位二位進(jìn)制進(jìn)行表示
ISO8859-1：拉丁碼表，歐洲碼表，使用一個(gè)字節(jié)的8位二進(jìn)制進(jìn)行表示
GB2312：中國(guó)的中文編碼表，最多使用兩個(gè)字節(jié)16位二進(jìn)制為進(jìn)行表示
GBK：中國(guó)的中文編碼表升級(jí)，融合了更多的中文文字符號(hào)，最多使用兩個(gè)字節(jié)16位二進(jìn)制位表示
Unicode：國(guó)際標(biāo)準(zhǔn)碼，融合了目前人類使用的所有字符，為每個(gè)字符分配唯一的字符碼。所有的文字都用兩個(gè)字節(jié)16位二進(jìn)制位來(lái)表示
Unicode只是定義了一個(gè)龐大的、全球通用的字符集，并為每個(gè)字符規(guī)定了唯一確定的編號(hào)，具體存儲(chǔ)成什么樣的字節(jié)流，取決于字符編碼方案
推薦的Unicode編碼是UTF-8和UTF-16
UTF-8：變長(zhǎng)的編碼方式，可用1-4個(gè)字節(jié)來(lái)表示一個(gè)字符
-
指定頁(yè)面的顯示參數(shù)，如：顯示窗口的寬度、顯示文字和圖形的初始比例
-
設(shè)置頁(yè)面加載后在指定的時(shí)間后跳轉(zhuǎn)到指定的頁(yè)面
<meta>標(biāo)簽必須寫在<head>標(biāo)簽中 -
-
<link>標(biāo)簽作用：一般通過(guò)該標(biāo)簽來(lái)導(dǎo)入CSS
<link>標(biāo)簽必須寫在<head>標(biāo)簽中 -
特殊字符
作用：在HTML中標(biāo)簽的內(nèi)容有時(shí)需要某些特殊字符
如：每個(gè)空格需要使用
來(lái)表示
2. HTML5新特性
2.1 HTML4和HTML5主要區(qū)別
-
HTML5包含了HTML4的標(biāo)簽
-
H5中大小寫不敏感
可以在標(biāo)簽、屬性、屬性值中隨機(jī)使用大小寫字母
-
屬性值的引號(hào)可以省略
-
可以省略結(jié)尾標(biāo)簽（不推薦）
查看源代碼，瀏覽器會(huì)自動(dòng)補(bǔ)全結(jié)尾標(biāo)簽
2.2 新增語(yǔ)義化標(biāo)簽
HTML4中，所有的容器標(biāo)簽95%都會(huì)使用div，div過(guò)多的話，很難區(qū)分彼此，新增許多語(yǔ)義化標(biāo)簽，讓div“見(jiàn)名知意”
2.3 媒體標(biāo)簽
想在網(wǎng)頁(yè)上播放視頻，可以使用<video>標(biāo)簽
2.4 新增表單控件
- 新增了表單
<form>標(biāo)簽下的<input>標(biāo)簽下的type屬性值，代表顯示不同的工具 - 新增了表單
<form>標(biāo)簽下的新標(biāo)簽
二、CSS
1. CSS概述
- CSS是指層疊樣式表 cascading style sheets
- 通過(guò)CSS可以讓開(kāi)發(fā)者定義HTML元素如何顯示，而且CSS可以讓原本HTML不能描述的效果，通過(guò)CSS描述出來(lái)
2. CSS與HTML結(jié)合的三種方式
-
內(nèi)聯(lián)/行內(nèi)樣式
實(shí)現(xiàn)方式：HTML標(biāo)簽上通過(guò)style屬性來(lái)引用CSS代碼
優(yōu)缺點(diǎn)：直接通過(guò)屬性簡(jiǎn)單方便，但是只能對(duì)一個(gè)標(biāo)簽進(jìn)行修飾
<body> <div style="color:pink">hello, world</div> <font color="pink">hello, world</font> </body> -
內(nèi)部樣式表
通過(guò)
<style>標(biāo)簽來(lái)聲明我們的CSS，通常<style>標(biāo)簽推薦寫在<head>和<body>之間格式：
選擇器 {屬性:值;屬性:值}優(yōu)缺點(diǎn)：可以通過(guò)多個(gè)標(biāo)簽進(jìn)行統(tǒng)一的樣式設(shè)置，但是它只能在本頁(yè)面上進(jìn)行修飾
<style> div { color:blue; } </style> <body> <div>have a good day</div> </body> -
外部樣式表
需要單獨(dú)定義一個(gè)CSS文件，注意CSS文件的后綴名就是
.css實(shí)現(xiàn)方式1：在項(xiàng)目根目錄下，創(chuàng)建css目錄，在css目錄中創(chuàng)建css文件，在
<head>中使用<link>標(biāo)簽引用外部的css文件需要將
<link>中屬性rel的值設(shè)置為stylesheet，屬性href為.css文件的目錄<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../CSS/css_test.css"> </head>實(shí)現(xiàn)方式2：類似于內(nèi)部樣式表，
@import 'CSS文件所在地址'<style> @import '../CSS/css_test.css' </style>兩種實(shí)現(xiàn)方式的區(qū)別：加載順序不同，@import方式導(dǎo)入會(huì)先加載html，然后才導(dǎo)入css樣式；如果使用link方式，它會(huì)先加載樣式表
-
三種樣式表的優(yōu)先級(jí)：內(nèi)聯(lián) > 內(nèi)部 > 外部
3. CSS選擇器、基本屬性、定位
3.1 CSS選擇器
-
作用：在style標(biāo)簽中，通過(guò)指定的標(biāo)簽名或標(biāo)簽內(nèi)的屬性值選定某個(gè)或多個(gè)標(biāo)簽，通過(guò)設(shè)定屬性值來(lái)修改對(duì)應(yīng)標(biāo)簽的樣式
-
元素（標(biāo)簽）選擇器
它可以對(duì)頁(yè)面上相同的標(biāo)簽進(jìn)行統(tǒng)一的設(shè)置，它描述的就是標(biāo)簽的名稱
-
類選擇器
類選擇器在使用時(shí)使用
.來(lái)描述，它描述的是元素上的class屬性值需要在元素添加class屬性，選擇器前加
.若選擇器不加任何符號(hào)，會(huì)先去找與選擇器同名的標(biāo)簽而不是class屬性值VSCode快捷鍵:
div.xxx快速生成div標(biāo)簽和class屬性值為xxx，<div class="xxx"></div> -
id選擇器
它只能選擇一個(gè)元素，使用
#引入，引用的是元素的id屬性值。id選擇器，比類選擇器更具有唯一性需要在元素添加id屬性，選擇器前加
#若選擇器不加任何符號(hào)，會(huì)先去找與選擇器同名的標(biāo)簽而不是id屬性值VSCode快捷鍵:
div#xxx快速生成div標(biāo)簽和id屬性值為xxx，<div id="xxx"></div><style> .a { color:purple; } #b { color:red; } </style> <body> <div class="a">have a good day</div> <div class="a">have a good day</div> <div id="b">have a good day</div> <div>have a good day</div> </body> -
選擇器組
作用：合并相同內(nèi)容的選擇器
使用方法：不同選擇器名之間使用
,進(jìn)行分隔<style> #b,.a { color:purple; } </style> <body> <div class="a">have a good day</div> <div class="a">have a good day</div> <div id="b">have a good day</div> <div>have a good day</div> </body> -
派生選擇器
兩個(gè)標(biāo)簽選擇器同時(shí)寫在一個(gè)內(nèi)容上時(shí)(或只寫一個(gè))，這兩個(gè)標(biāo)簽下的所有內(nèi)容樣式會(huì)被修改
<style> div p { color:purple; } </style> <body> <div> <p>11111</p> <p>22222</p> <p>33333</p> <span> <p>444444</p> <p>555555</p> <p>666666</p> </span> </div> </body>當(dāng)設(shè)置
div > p時(shí)，就只會(huì)使得div子標(biāo)簽內(nèi)容樣式被修改，而div子標(biāo)簽下子標(biāo)簽的內(nèi)容樣式不被修改<style> div > p { color:purple; } </style> <body> <div> <p>11111</p> <p>22222</p> <p>33333</p> <span> <p>444444</p> <p>555555</p> <p>666666</p> </span> </div> </body> -
CSS偽類
-
CSS偽類可對(duì)css的選擇器添加一些特殊效果
-
超鏈接偽類的四種狀態(tài)：
:active向被激活的元素添加樣式（鼠標(biāo)長(zhǎng)按時(shí)）:hover當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式:link向未被訪問(wèn)的鏈接添加樣式:visited向已被訪問(wèn)的鏈接添加樣式超鏈接的偽類：要遵守使用順序，愛(ài)恨原則 LoVeHAte，lvha
<!-- 當(dāng)鼠標(biāo)指向baidu時(shí)，字體變小變紅 --> <style> a:hover{ color:red; font-size: small; } a { font-size: large; } </style> <body> <a >baidu</a> </body>超鏈接偽類的四種狀態(tài)測(cè)試：
重復(fù)查看
:link效果，需要清除瀏覽器瀏覽數(shù)據(jù)和緩存<style> a:link{ color:blue; font-size: small; } a:visited{ color:yellow; font-size: small; } a:hover{ color:red; font-size: small; } a:active{ color:green; font-size: small; } a { font-size: large; } </style> <body> <a >dubai</a> </body> -
其他偽類
:first-child向元素的第一個(gè)子元素添加樣式。作用等同于使用class屬性的標(biāo)簽，用類選擇器來(lái)指定這個(gè)標(biāo)簽的樣式，只是使用偽類更加便捷
-
3.2 CSS基本屬性
-
文本屬性
單位：px：像素、em：倍數(shù)
line-height的屬性值表示當(dāng)前文本上方和下方的所占空間大小
<style> #title{ font-family:"隸書"; font-size:5em; /* 默認(rèn)字體大小的5倍 */ font-weight: bold; /*字體加粗*/ color:red; /*字體顏色*/ text-align: center; /*居中對(duì)齊*/ text-decoration: underline; /*下劃線*/ line-height: 30px; /* 行高*/ } .content{ text-indent:2em; /*首行縮進(jìn)*/ } </style> <body> <p id="title">中華人民共和國(guó)萬(wàn)歲！</p> <p style="text-align: right;">作者：AAA</p> <p class="content">我們相親相愛(ài)，是一家人！</p> <p>我們相親相愛(ài)，是一家人！</p> </body> -
背景屬性
-
CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果
-
一般使用
<div>標(biāo)簽定義好寬高后，不指定background-color屬性則默認(rèn)是白色，為了區(qū)分可以設(shè)置background-color屬性的顏色background-color和background作用相同可相互替換使用color屬性是指div中的文本顏色，不是背景 -
添加
background-image屬性后，原背景會(huì)被覆蓋，若添加的圖片尺寸小于背景尺寸，則默認(rèn)使用全背景平鋪效果 -
添加
background-repeat屬性，修改屬性值為no-repeat，則平鋪方式為只是本圖片不重復(fù)的效果其他的平鋪方式：
-
repeat-x：表示橫向平鋪到整個(gè)背景上 -
repeat-y：表示縱向平鋪到整個(gè)背景上
-
-
添加
background-position屬性，屬性值中第一個(gè)數(shù)字參數(shù)表示圖片的左側(cè)與背景左側(cè)的距離，第二個(gè)數(shù)字參數(shù)表示圖片的上方與背景上方的距離兩個(gè)參數(shù)都可以是負(fù)數(shù)，表示圖片進(jìn)入到背景邊界外的長(zhǎng)度（這部分不顯示）；當(dāng)數(shù)字參數(shù)為正數(shù)超過(guò)背景范圍后也不顯示超過(guò)的圖片部分
-
添加
background-attachment屬性，屬性值為fixed，表示當(dāng)頁(yè)面在在滾動(dòng)時(shí)，圖片位置不隨頁(yè)面滾動(dòng)（在div范圍中），該屬性的默認(rèn)值是scroll -
示例Code
<style> div { /*設(shè)置基本的背景屬性*/ width: 500px; height: 500px;/*高度可以不指定，不指定時(shí)需要div中有帶內(nèi)容的其他標(biāo)簽，不指定時(shí)背景顏色height根據(jù)div中內(nèi)容的長(zhǎng)度變化而變化（內(nèi)容會(huì)覆蓋背景）；指定height時(shí)，背景顏色的height不會(huì)隨div中內(nèi)容變化（內(nèi)容同樣會(huì)覆蓋背景）*/ background-color: pink; /* 背景顏色 */ /*添加一張圖片到背景中*/ background-image: url("img/cat.gif"); background-repeat: no-repeat; /* 平鋪方式*/ background-position: 0px 100px; /*背景的位置（移動(dòng)）*/ background-attachment: fixed; /* 固定的背景*/ } </style> <body> <div></div> </body>
-
-
列表屬性
-
通過(guò)
ul或ol的選擇器來(lái)設(shè)置列表的標(biāo)記形狀-
設(shè)置不同的列表項(xiàng)標(biāo)記為有序列表
-
設(shè)置不同的列表項(xiàng)標(biāo)記為無(wú)序列表
-
設(shè)置列表項(xiàng)標(biāo)記為圖像
-
示例code
<style> .a { list-style-type: none;/* 無(wú)序列表無(wú)標(biāo)記 */ } .b { list-style-type: decimal-leading-zero;/* 有序列表中以0開(kāi)頭的數(shù)字標(biāo)記 */ } .c { list-style-type: upper-roman;/* 有序列表中標(biāo)記是大寫羅馬數(shù)字(I, II, III, IV, V, 等 */ } .d { list-style-type: upper-alpha;/* 有序列表中標(biāo)記是大寫英文字母The marker is upper-alpha (A, B, C, D, E,等 */ } .e { list-style-image: url('img/list-img-2.gif');/* 設(shè)置列表項(xiàng)標(biāo)記為圖像 */ } </style> <body> <ul class="a"> <li>曹操</li> <li>劉備</li> <li>孫權(quán)</li> </ul> <ol class="b"> <li>呂布</li> <li>趙云</li> <li>典韋</li> </ol> <ol class="c"> <li>關(guān)羽</li> <li>馬超</li> <li>張飛</li> </ol> <ol class="d"> <li>黃忠</li> <li>夏侯惇</li> <li>姜維</li> </ol> <ol class="e"> <li>老孫</li> <li>老楊</li> <li>老西</li> </ol> </body>
-
-
將縱向列表設(shè)置為橫向的顯示效果
為列表中的每個(gè)
li添加屬性和屬性值float: left;，一般也會(huì)添加屬性和屬性值list-style-type: none;來(lái)去除列表項(xiàng)標(biāo)記 -
設(shè)置每個(gè)列表項(xiàng)
li中文字的對(duì)齊方式text-align、字體大小font-size、顏色color -
設(shè)置每個(gè)列表項(xiàng)
li中背景顏色background-color、行高line-height -
設(shè)置每個(gè)列表項(xiàng)
li中鼠標(biāo)指向時(shí)的顯示樣式cursor -
設(shè)置每個(gè)列表項(xiàng)
li中的width，若不設(shè)置則背景顏色會(huì)填充整行 -
列表案例：導(dǎo)航條
<style> li{ list-style-type: none; color:white; background-color: black; width: 150px; text-align: center; float: left; /* 將li實(shí)現(xiàn)水平方向顯示*/ line-height: 40px; font-size: 1.3em; cursor: pointer; /* 鼠標(biāo)光標(biāo)顯示樣式 */ } li:hover{ background-color: orange; /* 當(dāng)鼠標(biāo)在此懸浮時(shí)，顯示背景顏色為橙色 */ line-height: 50px; /* 當(dāng)鼠標(biāo)在此懸浮時(shí)，顯示的行高變大 */ } </style> <body> <ul> <li>apple</li> <li>banana</li> <li>peach</li> </ul> </body>
-
-
邊框?qū)傩?/p>
-
CSS邊框?qū)傩栽试S指定一個(gè)元素邊框的樣式和顏色
-
設(shè)置邊框的樣式必要的三個(gè)屬性
border-width、border-color、border-style若缺少border-style屬性則不顯示邊框
border-width: 2px; border-color:red; border-style: solid;可以向?qū)傩灾屑尤胛恢?，就可以指定邊框具體某個(gè)邊的樣式
border-right-color:green; /* 設(shè)置右邊框的顏色 */ border-bottom-style: dashed; /* 設(shè)置下邊框的樣子 */或使用簡(jiǎn)化寫法：為
border屬性指定屬性值線寬、線條形狀、顏色border:10px solid red; -
示例Code
<style> div { width: 400px; height: 40px; margin: 10px; /* div和div彼此之間產(chǎn)生10像素的距離*/ } .a { /* 設(shè)置四個(gè)邊 */ border-width: 2px; border-color:red; border-style: solid; border-right-color:green; /* 設(shè)置右邊框的顏色 */ border-bottom-style: dashed; /* 設(shè)置下邊框的樣子 */ } /* 以下是邊框的簡(jiǎn)化寫法 */ .b1{ border:10px solid red; } .b2{ border:10px dotted red; } .b3{ border:10px dashed red; } .b4{ border:10px double red; } .b5{ border:10px groove red; } .b6{ border:10px ridge red; } .b7{ border:10px inset red; } .b8{ border:10px outset red; } </style> <body> <div class="a"></div> <div class="b1">實(shí)心線</div> <div class="b2">點(diǎn)線</div> <div class="b3">虛線</div> <div class="b4">雙線</div> <div class="b5">3D效果的凹槽</div> <div class="b6">3D脊邊框</div> <div class="b7">嵌入邊框</div> <div class="b8">突出邊框</div> </body>
-
-
輪廓屬性
輪廓是在邊框外的一層線條，使用方法為
outline屬性指定屬性值線寬、線條形狀、顏色（與邊框border的屬性值寫法相同）<style> div{ width: 400px; height: 200px; border: 30px solid darkcyan; outline: 5px dashed red; /*輪廓*/ } </style> <body> <div></div> </body>
-
盒子模型
CSS盒子模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容
- margin(外邊距) - 盒子與盒子之間的距離
margin使用場(chǎng)景：一般通過(guò)margin設(shè)置div在頁(yè)面中的位置；div中的元素通過(guò)margin可以設(shè)置該元素在div中的位置
當(dāng)div內(nèi)元素的margin超過(guò)div的height和width時(shí)，該元素可以顯示超出的部分，這是與div中添加背景圖片的不同
更具體的屬性：margin-top、margin-left
-
border(邊框) - 盒子的保護(hù)殼
-
padding(內(nèi)邊距/填充) - 內(nèi)填充，盒子邊與內(nèi)容之間的距離
更具體的屬性：padding-top、padding-left
- content(內(nèi)容) - 盒子的內(nèi)容，顯示的文本或圖像
<style> div{ width: 200px; height: 200px; border:2px solid greenyellow; margin-top: 50px; /*上外邊距*/ margin-left: 100px; /*左外邊距*/ padding-top:20px; /*上內(nèi)邊距*/ padding-left:40px; /*左內(nèi)邊距*/ } </style> <body> <div> <img src="img/cat.gif"> </div> </body>
3.3 CSS定位
-
默認(rèn)定位
-
塊級(jí)元素：h1~h6，p, div 等，自上而下，垂直排列（自動(dòng)換行）；可以改變寬高
-
行內(nèi)元素：a, b, span,等，從左向右，水平排列（不會(huì)換行）；不能改變寬高，若在這些標(biāo)簽的選擇器下更改width和height屬性，則無(wú)法識(shí)別寬高
行內(nèi)元素通過(guò)加入 display 屬性設(shè)置屬性值inline-block可以轉(zhuǎn)換為行內(nèi)塊元素，從而改變寬高
-
行內(nèi)塊元素：input, img等，從左向右，水平排列（自動(dòng)換行）；可以改變寬高
-
示例Code
<style> div{ width: 100px; height: 50px; border :1px solid red; } span{ width: 100px; height: 100px; border :1px solid red; } input{ width: 50px; height: 50px; border :1px solid red; } a { width: 50px; height: 50px; border :1px solid red; /* a標(biāo)簽是行內(nèi)元素，無(wú)法改變寬高。但只要轉(zhuǎn)換成行內(nèi)塊元素，就可以改變寬高了。 */ display: inline-block; /* 將a元素，顯示成 行內(nèi)塊 */ } </style> <body> <a href="">aaa</a> <a href="">bbb</a> <a href="">ccc</a> </body>
-
-
浮動(dòng)定位
-
不僅可以使塊級(jí)元素靠著左邊或右邊。還可以消除塊級(jí)元素的獨(dú)自占一行的特性
-
float屬性的取值：
none ：不浮動(dòng)
left：貼著左邊 浮動(dòng)
right：貼著右邊 浮動(dòng)
-
示例Code
如圖所示，c1，c2向右浮動(dòng)直到本行堆滿，c3換行繼續(xù)向右堆
如圖所示，若不指定float屬性，默認(rèn)從左上角開(kāi)始從上至下堆；所有未指定float屬性的元素為一列從左上第一個(gè)位置進(jìn)行向下堆疊
-
-
相對(duì)定位
-
和原來(lái)的位置進(jìn)行比較，進(jìn)行移動(dòng)定位（偏移）
-
使用方法：設(shè)定屬性和屬性值
position: relative、top: xxxpx、left: xxxpxtop和left可以為負(fù)值表示向左上移動(dòng)，正值時(shí)表示向右下移動(dòng)
-
示例Code
-
-
絕對(duì)定位
-
選定一個(gè)當(dāng)前元素
position: absolute與它的父元素中設(shè)定有position: relative的元素按偏移量top和left的屬性值進(jìn)行偏移如果父級(jí)元素定位了，就以父級(jí)為參照物；
如果父級(jí)沒(méi)定位，找爺爺級(jí)，爺爺定位了，以爺爺為參照物。
如果爺爺沒(méi)定位，繼續(xù)向上找，都沒(méi)定位的話，body是最終選擇
-
必須找當(dāng)前元素的父元素作為參照物進(jìn)行絕對(duì)定位，不可用與當(dāng)前元素處于同一并列位置的元素作為參照物（位置保持不變，不會(huì)以偏移值進(jìn)行偏移）
-
示例Code
<style> .parent{ width: 250px; height: 300px; border: 2px solid red; /* 設(shè)定屬性值為parent的元素是參照物 */ position: relative; } .child{ width: 150px; height: 280px; border: 2px solid green; margin: 15px; /* 設(shè)定屬性值為child的元素是參照物 */ /* position: relative; */ } .mod01{ width: 50px; height: 60px; border: 2px dashed gold; /* 有父元素的時(shí)候，設(shè)定屬性值為mod1的元素是參照物, 此時(shí)是無(wú)效的*/ /* position: relative; */ } .mod02{ width: 50px; height: 60px; border: 2px dashed orange; /* 設(shè)定當(dāng)前的絕對(duì)位置元素為mod2 */ position: absolute; /* 設(shè)置偏移值 */ top: 50px; left: 50px; } .mod03{ width: 50px; height: 60px; border: 2px dashed blueviolet; /* 有父元素的時(shí)候，設(shè)定屬性值為mod3的元素是參照物, 此時(shí)是無(wú)效的*/ /* position: relative; */ } </style> <body> <div class="parent"> <div class="child"> <div class="mod01"></div> <div class="mod02"></div> <div class="mod03"></div> </div> </div> </body>
-
-
固定定位
-
將元素的內(nèi)容固定在頁(yè)面的某個(gè)位置，當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)元素框并不隨著移動(dòng)
-
使用方法：設(shè)定屬性和屬性值
position: fixed、width: xxxpx、height: xxxpx固定定位同時(shí)可以設(shè)定當(dāng)前元素距離頁(yè)面左和上的邊距
-
-
z-index
-
如果有重疊元素，使用z軸屬性，定義上下層次
-
z軸屬性，要配合相對(duì)或絕對(duì)定位來(lái)使用
-
z值沒(méi)有額定數(shù)值（整型就可以，具體用數(shù)字幾，悉聽(tīng)尊便）
-
使用方法：為兩個(gè)重疊的標(biāo)簽同時(shí)設(shè)定屬性和屬性值
position: relative、z-index: xxx其中
z-index的屬性值較大的顯示在上層 -
示例Code
-
4. CSS3
- 圓角與盒子陰影
- 漸變
- 背景
- 過(guò)渡
- 動(dòng)畫
三、JavaScript
1. JavaScript概述
- JavaScript的特點(diǎn)
- 解釋執(zhí)行：事先不編譯，逐行執(zhí)行
- 基于對(duì)象：內(nèi)置大量現(xiàn)成對(duì)象
- JavaScript的組成
- ECMAScript：定義核心語(yǔ)法，關(guān)鍵字，運(yùn)算符，數(shù)據(jù)類型等系列標(biāo)準(zhǔn)
- DOM：文檔對(duì)象模型，將一個(gè)html頁(yè)面的所有節(jié)點(diǎn)看成是一個(gè)一個(gè)的對(duì)象，更有層次感的管理每一個(gè)節(jié)點(diǎn)
- BOM：瀏覽器對(duì)象模型，是對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作
2. HTML與JavaScript結(jié)合方式
-
行內(nèi)腳本
作為屬性值來(lái)使用，一般只寫方法調(diào)用或
return 方法調(diào)用 -
內(nèi)部腳本
-
使用
<script></script> -
標(biāo)準(zhǔn)是寫在head和body之間（脖子位置）
-
-
外部腳本
使用script標(biāo)簽中的屬性src添加
.js文件來(lái)引入腳本
3. JavaScript的使用
-
變量
-
在定義變量的時(shí)候，所有的數(shù)據(jù)類型都是var
-
聲明變量：
var x、var x,y -
實(shí)際的變量類型
- number：不區(qū)分整型數(shù)值和浮點(diǎn)型數(shù)值
- string：首尾由單引號(hào)或雙引號(hào)括起
- boolean：true和false也代表1和0
-
自動(dòng)類型轉(zhuǎn)換
-
數(shù)據(jù)類型相關(guān)函數(shù)
- parseInt
- parseFloat
- typeof：查詢變量的當(dāng)前類型
-
null和undefined
- null：在程序中代表“無(wú)值”或者“無(wú)對(duì)象”，可以通過(guò)給一個(gè)變量賦值 null 來(lái)清除變量的內(nèi)容
- undefined：聲明了變量但從未賦值或者對(duì)象屬性不存在
-
算數(shù)運(yùn)算符特殊用法
-可以表示減號(hào)，也可以表示負(fù)號(hào)，如：x = -y+可以表示加法，也可以用于字符串的連接
-
關(guān)系運(yùn)算符
-
===：類型相同，數(shù)值相同 -
!==：非嚴(yán)格相等，與==類似 -
示例Code
<script> var a = "10"; var b = 10; if (a == b) { alert("a == b");//成立 } if (a !== b) { alert("a !== b");//成立 } if (a === b) { alert("a === b");//不成立 } </script>
-
-
邏輯運(yùn)算符
-
流程控制語(yǔ)句
-
-
字符串處理API
-
數(shù)組
-
創(chuàng)建數(shù)組
var arr1 = new Array(); -
初始化數(shù)組的三種方式：
- 利用索引進(jìn)行初始化
- 使用Array構(gòu)造方法傳參進(jìn)行初始化
- 利用方括號(hào)
[]進(jìn)行初始化
數(shù)組類型的返回值類型通常也是用var
-
獲取數(shù)組長(zhǎng)度的字段
length -
對(duì)數(shù)組進(jìn)行操作的常用方法
- 轉(zhuǎn)字符串：
tostring()、join() - 利用現(xiàn)有數(shù)組創(chuàng)建新數(shù)組：
conact()、slice() - 更改當(dāng)前數(shù)組：反轉(zhuǎn)
reverse()、排序sort()
- 轉(zhuǎn)字符串：
-
-
Math對(duì)象
無(wú)需創(chuàng)建Math對(duì)象，直接把 Math 作為對(duì)象使用就可以調(diào)用其所有屬性和方法
-
Number對(duì)象
對(duì)數(shù)值進(jìn)行四舍五入操作
-
正則表達(dá)式
對(duì)字符串執(zhí)行模式匹配
-
日期對(duì)象
-
函數(shù)
-
使用關(guān)鍵字
function定義函數(shù)，形參列表中不要加數(shù)據(jù)類型；函數(shù)不寫返回值類型，但是可以有返回值function 函數(shù)名( 形參列表 ) { // 函數(shù)體 return 返回值; } -
參數(shù)對(duì)象
arguments是參數(shù)列表內(nèi)容的一個(gè)數(shù)組對(duì)象，可以使用length獲取參數(shù)列表長(zhǎng)度，使用索引下標(biāo)訪問(wèn)數(shù)組中的元素，參數(shù)數(shù)組索引也是從0開(kāi)始 -
構(gòu)造函數(shù)
將函數(shù)的返回值直接寫入原來(lái)的參數(shù)列表中，參數(shù)和返回值都用字符串表示
var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); //使用構(gòu)造函數(shù) console.log(x); -
匿名函數(shù)
var fn = function(a, b) {// 沒(méi)有名字的函數(shù)，應(yīng)該用一個(gè)變量來(lái)接收 return a * 10 + b; }; console.log( fn(3, 4) ); -
全局函數(shù)：直接使用函數(shù)，無(wú)需創(chuàng)建對(duì)象
isNaNevalencodeURI和decodeURI
-
閉包
-
閉包的概念：指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)，一般情況就是在一個(gè)函數(shù)中包含另一個(gè)函數(shù)
-
閉包的作用：訪問(wèn)函數(shù)內(nèi)部變量、保持函數(shù)在環(huán)境中一直存在，不會(huì)被垃圾回收機(jī)制處理
-
JavaScript中的全局變量可以不加var聲明，不使用var聲明的變量默認(rèn)是全局變量，作用范圍是整個(gè)script標(biāo)簽
-
使用全局變量有時(shí)不安全，容易改變變量的值；使用閉包可以實(shí)現(xiàn)全局變量的效果，較為安全，但不推薦大量使用閉包
-
閉包直觀的說(shuō)就是形成一個(gè)不銷毀的棧環(huán)境。在函數(shù)中嵌套一個(gè)子函數(shù)，通過(guò)父函數(shù)返回值調(diào)用子函數(shù)，在父函數(shù)外可以使用返回值這個(gè)變量單獨(dú)調(diào)用子函數(shù)的內(nèi)容，而這個(gè)過(guò)程中父函數(shù)沒(méi)有被銷毀
-
閉包的使用：利用子函數(shù)將父函數(shù)中局部變量改變值
-
應(yīng)用示例：統(tǒng)計(jì)一個(gè)函數(shù)被執(zhí)行的次數(shù)
<script> function parent() { var cnt = 0; function child() { return cnt++; } return child; } var fun = parent(); fun();//0 fun();//1 alert(fun());//輸出2 </script><script> function parent() { var cnt = 0; function child() { return cnt += 1; } return child; } var fun = parent(); alert(fun); // 輸出結(jié)果： // function child() { // return cnt++; // } alert(fun());//輸出結(jié)果：1 alert(fun());//輸出結(jié)果：2 alert(parent); // 輸出結(jié)果： // function parent() { // var cnt = 0; // function child() { // return cnt++; // } // return child; // } alert(parent()); // 輸出結(jié)果： // function child() { // return cnt++; // } </script>
-
-
-
JavaScript幾種輸出方式（其中alert、confirm、prompt都是全局方法直接使用）
-
普通彈框
alert("hello，拉勾"); -
控制臺(tái)日志輸出
console.log("谷歌瀏覽器按F12進(jìn)入控制臺(tái)"); -
頁(yè)面輸出
將
<h2>元素輸出到<body>中:document.write("<h2>我愛(ài)你中國(guó)</h2>");輸出內(nèi)容可以加標(biāo)簽，制作不同的頁(yè)面輸出效果
-
確認(rèn)框
confirm("確定刪除嗎？");頁(yè)面輸出會(huì)顯示確認(rèn)和取消按鈕傳參是彈框提示語(yǔ)句的字符串
一般用var接收boolean類型的返回值，選擇確認(rèn)返回true，選擇取消返回false
-
提示輸入框
prompt("請(qǐng)輸入姓名：");頁(yè)面輸出會(huì)顯示輸入框和確認(rèn)、取消按鈕傳參是彈框提示語(yǔ)句的字符串
一般用var接收返回值，返回值內(nèi)容為輸入框輸入的字符串內(nèi)容
-
4. DOM操作
4.1 DOM訪問(wèn)
-
document對(duì)象：表示當(dāng)前整個(gè)HTML頁(yè)面
<!DOCTYPE html>HTML頁(yè)面中通常在最上方進(jìn)行聲明文檔類型
!表示聲明，DOCTYPE表示文檔類型，html表示是HTML類型的文檔 -
通過(guò)標(biāo)簽的id屬性獲取元素節(jié)點(diǎn)對(duì)象
方法
getElementById<body> <form action="" onsubmit="login()"> <p>賬號(hào)：<input id="username"></p> <p>電話：<input id="phone"></p> <p><button>登錄</button></p> </form> <script> function login(){ var id = document.getElementById("username"); alert(id); } </script> </body>onsubmit屬性可以在本表單提交后調(diào)用login方法，方法調(diào)用后彈框打印[object HTMLInputElement]，表示getElementById方法獲取的對(duì)象類型對(duì)該對(duì)象調(diào)用
value字段可以獲取具體數(shù)值或字符串<body> <form action="xxx" onsubmit="return login()"> <p>賬號(hào)：<input id="username"></p> <p>電話：<input id="phone"></p> <p><button>登錄</button></p> </form> <script> function login(){ var id = document.getElementById("username").value; if (id == "") { alert("賬號(hào)不能為空"); return false; } return true; } </script> </body>本表單提交后，屬性
onsubmit獲取返回值，若為true則以繼續(xù)執(zhí)行，若為false則停在此處 -
通過(guò)標(biāo)簽的多個(gè)相同name屬性獲取元素節(jié)點(diǎn)對(duì)象數(shù)組
onchange屬性可以在復(fù)選框選擇時(shí)，調(diào)用checkAllBox方法，其中傳入的this參數(shù)代表本input標(biāo)簽（type為checkbox的復(fù)選框）對(duì)象通過(guò)
getElementsByName方法可以獲取同一name屬性的所有標(biāo)簽對(duì)象，方法返回值為由這些對(duì)象組成的數(shù)組type屬性值為checkbox的input標(biāo)簽，可以加入屬性值為checked的checked屬性，若不定義這個(gè)屬性，checkbox類型的input也會(huì)默認(rèn)有這個(gè)屬性
<body> <table border="1" cellspacing="0"> <tr align="left"> <td><input type="checkbox" name="cb" onchange="checkAllBox(this)">全選</td> <td>生產(chǎn)日期</td> <td>價(jià)格</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品1</td> <td>1990</td> <td>25d</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品2</td> <td>1991</td> <td>30d</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品3</td> <td>1996</td> <td>67d</td> </tr> </table> <p><button>提交訂單</button></p> <script> function checkAllBox(all) { var arr = document.getElementsByName("cb"); for (var n = 0; n < arr.length; n++) { arr[n].checked = all.checked; } } </script> </body> -
通過(guò)標(biāo)簽名稱獲得元素節(jié)點(diǎn)對(duì)象集，通常拿到元素節(jié)點(diǎn)對(duì)象可以使用
.style.屬性值的方式的修改元素節(jié)點(diǎn)的樣式（類似于使用CSS中style標(biāo)簽下的選擇器）使用方法：使用element對(duì)象調(diào)用
getElementsByTagName方法取得返回值是數(shù)組，對(duì)數(shù)組進(jìn)行遍歷，其中每個(gè)數(shù)組元素為相同標(biāo)簽名的元素節(jié)點(diǎn)
4.2 DOM修改
-
獲取或改變HTML中的內(nèi)容
主要是通過(guò)獲取到的元素節(jié)點(diǎn)對(duì)象調(diào)用
innerHTML字段來(lái)獲取或修改標(biāo)簽的內(nèi)容 -
獲取或改變HTML中的樣式
主要是通過(guò)獲取到的元素節(jié)點(diǎn)對(duì)象調(diào)用
style字段來(lái)獲取節(jié)點(diǎn)的style對(duì)象，再通過(guò)調(diào)用標(biāo)簽的樣式字段來(lái)獲取或修改標(biāo)簽的樣式（類似于使用CSS中style標(biāo)簽下的選擇器） -
添加元素節(jié)點(diǎn)
使用
createElement創(chuàng)建節(jié)點(diǎn)，對(duì)節(jié)點(diǎn)對(duì)象調(diào)用方法setAttribute設(shè)置屬性和屬性值插入節(jié)點(diǎn)一般用父節(jié)點(diǎn)對(duì)象調(diào)用方法
appendChild(子節(jié)點(diǎn)對(duì)象)使用getElementsByTagName獲取當(dāng)前頁(yè)面的節(jié)點(diǎn)對(duì)象數(shù)組，通過(guò)索引下標(biāo)來(lái)訪問(wèn)某個(gè)父節(jié)點(diǎn)
-
刪除元素節(jié)點(diǎn)
通過(guò)
parentNode來(lái)獲取該節(jié)點(diǎn)的父節(jié)點(diǎn)，通過(guò)父節(jié)點(diǎn)方法removeChild(子節(jié)點(diǎn)對(duì)象)來(lái)刪除子節(jié)點(diǎn) -
替換元素節(jié)點(diǎn)
- 獲取當(dāng)前節(jié)點(diǎn)對(duì)象old
- 創(chuàng)建新節(jié)點(diǎn)對(duì)象new
- 當(dāng)前節(jié)點(diǎn)對(duì)象調(diào)用
parentNode方法獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，通過(guò)父節(jié)點(diǎn)方法replaceChild(new,old)進(jìn)行替換
4.3 事件
-
事件：JavaScript通過(guò)捕獲頁(yè)面上的操作而做出反饋，事件一般是標(biāo)簽中的屬性，一般將事件屬性的屬性值設(shè)定為JavaScript方法調(diào)用或return 方法調(diào)用
屬性值是
return xxx()，方法返回值為布爾值時(shí)有效，方法返回true為執(zhí)行，false為阻止當(dāng)前標(biāo)簽事件發(fā)生（如<a>中會(huì)阻止頁(yè)面跳轉(zhuǎn)） -
窗口事件
在body和frameset元素中添加onload屬性，將其屬性值設(shè)定為一個(gè)JavaScript方法，每當(dāng)頁(yè)面加載完成后自動(dòng)調(diào)用這個(gè)方法
-
表單元素事件
表單標(biāo)簽
<form>的子標(biāo)簽中可以添加屬性onblur（失去焦點(diǎn)時(shí)執(zhí)行）、onfocus（獲得焦點(diǎn)時(shí)執(zhí)行）獲取焦點(diǎn)：通過(guò)點(diǎn)擊輸入框、復(fù)選框選項(xiàng)
-
鼠標(biāo)事件
對(duì)執(zhí)行腳本進(jìn)行如：?jiǎn)螕?、雙擊、移出元素、懸停元素
-
鍵盤事件
-
事件冒泡
-
事件捕獲
4.4 面向?qū)ο驩OP
- 使用Object創(chuàng)建通用對(duì)象
- 使用構(gòu)造函數(shù)
- 使用直接量
4.5 JSON
-
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式
-
作用：互聯(lián)網(wǎng)上來(lái)回傳遞數(shù)據(jù)，如果沒(méi)有一個(gè)統(tǒng)一的格式，解析起來(lái)的難度很大，
使用JSON易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成
-
格式：
{ 屬性1：值1， 屬性2：值2， 。。。。 } -
使用JavaScript可以將JSON看作一個(gè)對(duì)象，通過(guò)
對(duì)象.屬性值名的方式獲取JSON對(duì)象屬性值常見(jiàn)的用法：JSON數(shù)組（以JSON為元素類型的數(shù)組），同樣可以使用索引下標(biāo)訪問(wèn)每個(gè)JSON對(duì)象
-
復(fù)雜的JSON對(duì)象
JSON對(duì)象的屬性值可以是字符串?dāng)?shù)組，屬性的訪問(wèn)方式
JSON對(duì)象.屬性名[索引]
5. BOM操作
-
BOM操作就是JavaScript對(duì)瀏覽器的一些常規(guī)操作的方法
-
window對(duì)象：
window是全局的可以直接調(diào)用相應(yīng)的字段-
screen屏幕對(duì)象
window.screen屏幕對(duì)象，屏幕對(duì)象常用字段：width、height -
navigator對(duì)象包含有關(guān)訪問(wèn)者瀏覽器的信息
window.navigator -
location通常用來(lái)做頁(yè)面跳轉(zhuǎn)，是內(nèi)置的對(duì)象可以直接使用該對(duì)象調(diào)用字段或方法
location.href：href字段可以指定URL進(jìn)行跳轉(zhuǎn)location.reload()：reload方法可以重新加載當(dāng)前頁(yè)面（相當(dāng)于刷新頁(yè)面） -
history對(duì)象會(huì)記錄瀏覽器的痕跡，是內(nèi)置的對(duì)象可以直接使用該對(duì)象調(diào)用字段或方法
history.go(-1)：跳回上一級(jí)頁(yè)面history.back()：跳回上一級(jí)頁(yè)面 -
存儲(chǔ)對(duì)象
-
兩種存儲(chǔ)對(duì)象的存儲(chǔ)方式：和Java中map很相似，都是鍵值對(duì)的方式存數(shù)據(jù)
-
localStorage:本地存儲(chǔ)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后將會(huì)刪除這些數(shù)據(jù)
常用方法：
getItem、setItem、removeItem -
sessionStorage:會(huì)話存儲(chǔ)，就是保持瀏覽器別關(guān)閉，關(guān)閉瀏覽就等于結(jié)束了一次會(huì)話，
開(kāi)啟瀏覽器就意味著創(chuàng)建了一次會(huì)話。
常用方法：
getItem、setItem、removeItem、clear -
兩種存儲(chǔ)對(duì)象的使用方式：先set再get，若沒(méi)有set就get，get方法返回false
-
-
-
計(jì)時(shí)操作（常用3個(gè)方法都是全局方法可以直接調(diào)用）
-
setInterval：指定時(shí)間間隔去執(zhí)行某個(gè)方法，該方法返回定時(shí)器對(duì)象
setInterval(方法名, 毫秒數(shù)) -
clearInterval：和setInterval配合使用，向clearInterval傳入定時(shí)器對(duì)象，停止定時(shí)器
clearInterval(定時(shí)器對(duì)象) -
setTimeout：設(shè)定指定時(shí)間倒計(jì)時(shí)完成后執(zhí)行某個(gè)方法
setTimeout(方法名, 毫秒數(shù))
-
本文摘自 ：https://www.cnblogs.com/
