shape=“circle”
coords=“309,257,20”target=“_blank”
href=“http://5新標簽
number:數字輸入
date picker:日期選擇
datalist:自動提示
sichuan chongqing guangzhou shanghai beijing tianjin
video:動畫
媒體
radio:音頻
autocomplete:是否關閉自動提示(off |
on)html5新標簽
autofocus: 自動獲得
焦點
required: 表示控件
必須輸入內容
controls : 播放控制條
autoplay :自動播放
loop :循環播放preload :預加載,如果設置了autoplay,就可以不用設置preload
CSS知識點總結
內聯:直接在標簽的style屬性上編寫
樣式 樣式定義方式
樣式塊:在style標簽中編寫樣式塊,并通過一定規則(選擇器)應用到對應的那些標簽上(通常寫在head中)
外部樣式文件:將樣式塊編寫在外部的css文件中(不用寫style標簽)* 在需要使用樣式的頁面通過link標簽引入樣式文件(通常寫在head中)
id選擇器#xxx 針對id為xxx的標簽
類選擇器.xxx 針對class屬性為xxx的標
簽
標簽選擇xxx 針對標簽名為xxx的標簽
*選擇器選擇所有元素選擇器
后代元素關系選擇selector1 selector2 {...} 針對selector1下的所有的selector2
子元素關系選擇selector1 > selector2 {...} 只針對selector1的selector2子元素(如果有后代selector2元素則不會應用)
緊鄰兄弟關系選擇selector1 + selector2 {...} 只針對緊接在selector1后的selector2元素
所有隨后的兄弟關系selector1 ~ selector2 {...} 針對selector1后的所有的selector2兄弟元素
color:字體顏色
font-size:字體大小
font-family:字體樣式
字體
font-weight: bolder(加粗)| normal(不加粗)font-style: 設置字體傾斜(normal | italic | oblique)*italic和oblique實際顯示效果
幾乎一致font-variant: 設置字體顯示為小型大寫字母
text-align: 水平對齊方式(left | center | right)常用屬性
vertical-align: 垂直對齊方式(top | middle |
bottom)
line-height: 設置行高(通常用于設置文本居
中)
white-space: nowrap 不換行, pre 當做pre標簽
border: 邊框(1px solid
red)
文本
width: 寬度
underline 下劃線
height: 高度
overline 上劃線
text-decoration: 文本裝
飾
line-through 貫穿線(刪
除線)
blink 閃爍
none 無
dtext-shadow: 3px 3px 5px red;第一個參數: 陰影水平位置(x軸上的偏移量)
text-shadow: 文本陰影
第二個參數: 陰影垂直位置(y軸上的偏移量)
第三個參數: 模糊程度第四個參數: 陰影顏色
padding:內邊距
padding: xxpx;
padding: xxpx xxpx;
padding: xxpx xxpx xxpx;
padding: xxpx xxpx xxpx xxpx;padding: auto;
padding: xxpx auto;padding-toppadding-leftpadding-rightpadding-bottom盒子模型
margin:外邊距
margin: xxpx;
margin: xxpx xxpx;
margin: xxpx xxpx xxpx;
margin: xxpx xxpx xxpx xxpx;margin: auto;
margin: xxpx auto;margin-topmargin-leftmargin-rightmargin-bottom
border:邊框
color:顏色;width:寬度;
style:outset|inset|solid|double|dottedborder-radius: 10px;/* 同時設置4個角*/
background-color: 背景顏色
background-image: 背景圖片
background-repeat: no-repeat | repeat-x |
repeat-y | repeat背景
background-position: xxxpx xxpx | xx%
xx%;(可以為負數)
background-size: xxxpx xxpx | xx% xx% |
cover | contain;(不能為負數)
cover: 拉伸,可以超出contain: 拉伸不能超出
background-attachment: scroll(隨著內容
一起滾動)| fixed(不滾動)
hidden:隱藏
scroll:滾動
overflow:當內容溢出
時的處理方式
visible:直接顯示
auto:如果溢出就滾動,否則不顯示滾動條
visible 顯示
visibility:設置元素是
否顯示
hidden 隱藏,保留占位
none:隱藏,不保留占
位
block:設置為塊級元
素
display:設置元素是否
顯示
inline:設置為行級元
素
布局
inline-block:設置為行
內塊元素
left 左浮動
float: 浮動right 右浮動
none 不浮動
left 不允許左邊有浮動
clear: 清除浮動right 不允許右邊有浮動
both 不允許兩邊有浮動
ul或ol 自帶樣式:
列表樣式
list-style-type: 列表項的樣式
margin: 16px 0px;padding: 0px 0px 0px
40px;
absolute:如果有父元素被定位按照父元素的原點進行定位,否則按照瀏覽器原點進行定位
position
定位
z-index: 設置z軸的值,越大越在最前
relative:相對定位參照元素本身的位置
fixed:固定位置,不
會滾動
link 超鏈接默認樣式
hover 鼠標懸停樣式
active 鼠標點擊樣式
visited 訪問之后的樣式(主要控制顏色)
偽類
focus 獲得輸入焦點的樣式
first-child 第一個元素
last-child 最后一個元素
:not 不包含指定的選
擇器
:noly-child 是父元素的唯
一子元素
cursor 鼠標樣式
其他樣式
box-shadow 陰影
translate:平移
rotate:旋轉transform:變換
scale:縮放
skew:扭曲
matrix:以變換矩陣變換
第一個值表示需要過渡的樣式屬性transition 過渡
transition:transform2s,background-color.5s;
第二個值表示整個過渡過程需要的時間第三個值表示過渡時的貝塞爾曲線第四個值表示延遲多久才開始過渡animation 動畫
@keyfarmes 關鍵幀用于定義動畫的細節(每一幀如何顯示)
@keyframes myanimation {0% { background-color: #cfc;}30% {
background-color: #ccf;border-radius: 50px;}80% {
width: 300px;
background-color: #fcc;}
100% {
width: 300px;height: 300px;
background-color: #000;}}
@-o-keyframes myanimation {}@-ms-keyframes myanimation {}@-moz-keyframes myanimation {}@-webkit-keyframes myanimation {}
需要顯示動畫的地方通過animation屬性來使用聲明的關鍵幀
.ac:active {
animation: myanimation 5s;-o-animation: myanimation 5s;-ms-animation: myanimation 5s;-moz-animation: myanimation 5s;-webkit-animation: myanimation 5s;}opacity透明度從0.0 ~ 1.0 0.0完全透明,1.0 完全不透明瀏覽器兼容前綴
-webkit-chrome,safari, opera-o-opera
-moz-firefox
-ms-ie(ie9以上)
JavaScript
javascript代碼必須包含在標簽中
也可以書寫到外部的.js文件中,通過來引入
script標簽只能同時做一件事情.如果既有src屬性也包含代碼則只會執行外部文件的代碼
通過alert來彈出提示框
通過document.write來輸入文本到頁面上(可以輸入標簽)Number: 數值型整數和小數Boolean: 布爾型(true |
false)
String: 字符串
字符串必須被”“或''包含必須對稱
如果字符串中包含引號可以單引號中包含雙引號或者是雙引號中包含單引號
也可以使用'來表示一個單引號”來表示一個雙引號
n 表示換行數據類型
t 表示制表符表示書寫方式
NaN: Not A Number 當使用非數字來進行運算時的值
undefied: 未定義
null: 空值
substring 截取子串, 從start到end-1處,如果
沒指定end則取到最后一個字符
toUpperCase 將所有字符變成大寫
toLowerCase 將所有字符變成小寫
indexOf 查找子串首次出現的位置, 如果找不到則
返回-1字符串處理
lastIndexOf 查找子串最后一次出現的位置, 如果找不到則返回-1charAt 取指定位置上的字符slice 也是取子串,效果和substring一樣可以用-1,-2,-3...從末尾
開始計數split 將字符串按照指定的字符進行拆分成為數組
獲取當前時間var now = new Date()
獲取指定時間的日期對象
var date = new Date(yyyy,MM,dd,HH,mm,ss)
設置指定時間(將時間對象設置為一個指定時間)
now.setFullYear(yyyy,MM,dd,HH,mm,ss)
now.setMonth日期Date
now.setDatenow.setHours
...獲取指定時間信息
now.getFullYear()// 年只能取出年份,如: 2015
now.getMonth // 月0-11月
now.getDate // 日
now.getDay // 星期0-6(0表示星期天)
now.getHours // 時24小時制
now.getMinutes // 分now.getSeconds // 秒now.getMilliseconds// 毫秒
通過new Array()來創建數組var names = new Array();
var names = new Array(“小王”, “大王”, “炸彈”);// 創建時給數組設置默認值
//用json格式表示數組
var names = [];
var names = [“小王”, “大王”, “炸彈”];數組Array
可以通過length來設置或獲取數組的長度
push : 往數組末尾添加元素
pop: 刪除并返回數組的最后一個元素unshift: 往數組的開頭添加元素shift: 刪除并返回數組的第一個元素reverse: 顛倒數組順序
sort: 按“字符串”的自然排序規則進行升序
splice: 刪除指定位置處的指定個數元素并將第三個參數之后的參數添加到被刪除位置(設置第二個參數為0則實現只添加不刪除, 之傳入兩個參數實現只刪除不添加)
slice: 獲取start到end處的子數組
join: 將數組元素以指定分隔符進行連接成為字符串
function xxx(....){
聲明函數
....}
var xxx = function(...){
...函數變量
}var ooo = xxx;
ooo();函數
function fn(fx){
fx();
將函數作為參數
}fn(function(){
...});(function(...){
立即執行函數
....})(...);
getElementById 根據id獲取唯一的元素var xx = document.getElementById(“xx”);DOM(Document Object Model)文檔對象模型
獲取元素
getElementsByTagName 根據標簽名獲取元
素數組
onclick 鼠標點擊事件
getElementsByClassName 根據類獲取元素數組(如果元素被改變了class值將會從數組
中刪除)
onmouseover 鼠標進入事件
onmouseout 鼠標離開事件
onmousemove 鼠標被移動
onmousedown 鼠標按鈕被按下事件機制
onmouseup 鼠標按鈕被松開
onkeydown 某個鍵盤按鍵被按下
onkeyup某個鍵盤按鍵被松開
onload 一張頁面或圖像被完成加載
onchange 域的內容被改變
onfocus 元素獲得焦點
onblur 元素失去焦點
setTimeout: 延遲執行(只會執
行一次)var xx = setTimeout(xxx, 1000);setTimeout(“fn();”, 3000);BOM(Browser Object Model)
window
清除使用clearTimeout(xx);setInterval: 定時執行(間隔指
定時間循環執行)
xx.offsetLeft獲取元素的位置和尺寸(只讀)
xx.offsetTopxx.offsetWidthxx.offsetHeight
var xx = setInterval(xxx,1000);
清除使用clearInterval(xx);
[] 表示[]中的字符任意取一個
在[] 中的^ 表示非不包含該字符
()表示將多個表達式合并為一個表達式
在()中的|表示將兩個匹配條件進行邏輯“或”(Or)運算。+ 前一個表達式出現至少一次1~n {1,}* 前一個表達式出現任意次0~n {0,}? 前一個表達式出現0~1次{0,1}{n} 前一個表達式出現n次
{n,} 前一個表達式出現至少n次{n,m} 前一個表達式出現n~m次.任意字符(不包含rn)正則表達式
^ 匹配字符串的開頭$ 匹配字符串的結尾
w 表示一個任意的單詞字符包括_ [a-zA-Z0-9_] * 不包含破折號
W 對w取反(不包含單詞字符)[^a-zA-Z0-9_]d 表示一個數字字符[0-9]D 對d取反[^0-9]s 表示一個任意空白字符空格中文狀態的空格制表符全角空格
S 對s取反非空格n 換行符b 單詞邊界
B 不是單詞邊界(對b取反)
eval
執行字符串形式的代碼。
for(var i in array){var item = array[i];
}
for(var key in obj){var value = obj[key];
}
迭代數組迭代出的值為數組的下標
for...in
迭代對象迭代出的值為對象的屬性名其他
with
設置以某個對象為代碼塊作用域對象
delete attribute刪除屬性
isNaN
如果被判斷值不是一個數字則返回true,否則為false
html 小結
html不區分大小寫