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