三天熟練掌握HTML5和CSS3
##三天熟練掌握HTML5和CSS3 1.認識html5javascript
-
HTML5並不只僅只是做爲HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成爲第一個將Web作爲應用開發平臺的HTML語言html
-
HTML5定義了一系列新元素，如新語義標籤、智能表單、多媒體標籤等，能夠幫助開發者建立富互聯網應用，還提供了一系列Javascript API，如地理定位、重力感應、硬件訪問等，能夠在瀏覽器內實現類原生應用，甚至結合Canvas咱們可開發網頁版遊戲，同時結合CSS3的過渡、轉換、動畫等特性，能夠極大的加強用戶體驗，提高開發功能的可應用性。html5
2.爲了解增長語義標籤的目的，以及各語義標籤所表達的意義，在網頁佈局中可以合理使用標籤。java
標籤 語義 <nav> 導航 <header> 頁眉 <footer> 頁腳 <section> 區塊 <article> 文章 <aside> 側邊欄 <progress> 進度條
3.輸入類型（這些屬性在移動設備上面支持較好，存在兼容性。)git
類型 使用示例 含義 email <input type="email"> 輸入郵箱格式 tel <input type="tel"> 輸入手機號碼格式 url <input type="url"> number <input type="number"> 輸入手機號碼格式 search <input type="search"> 搜索框（體現語義化） range <input type="rangegt"> 自由拖動滑塊 color <input type="color"> 拾色器 time <input type="time"> date <input type="date"> datetime <input type="datetime"> month <input type="month"> week <input type="week">
4.表單屬性web
屬性 用法 含義 placeholder <input type="text" placeholder="請輸入用戶名"> 佔位符 autofocus <input type="text" autofocus> 自動得到焦點 multiple <input type="file" multiple> 多文件上傳 autocomplete <input type="text" autocomplete="off"> 自動完成 form <input type="text" form="某表單ID"> required <input type="text" required> 必填項 pattern <input type="text" pattern="\d"> 自定義驗證
5.表單元素chrome
元素 含義 <datalist> 數據列表 <output> 輸出結果 <meter> 度量器
6.表單事件api
在html5 當中，新增了兩個事件，一個是oninput 事件，一個是oninvalid oninput 當輸入輸入數據的時候觸發。 oninvalid 當驗證不經過的時候觸發
7.音頻數組
<!--controls 控制--> <audio src="music/See%20You%20Again.mp3" controls></audio>
8.視頻瀏覽器
<video controls>
<!--
這個有兼容性
source 資源
-->
<source src="video/movie.mp4">
<source src="video/movie.avi">
<source src="video/movie.rmvb">
</video>
一樣，經過附加屬性能夠更友好的控制視頻的播放
autoplay 自動播放
controls 是否顯示默認播放控件
loop 循環播放
width 設置播放窗口寬度
height 設置播放窗口的高度
9.DOM擴展
-
獲取元素
-
document.getElementsByClassName ('class') 經過類名獲取元素，以僞數組形式存在
document.querySelector('selector') 經過CSS選擇器獲取元素，符合匹配條件的第1個元素。
document.querySelectorAll('selector') 經過CSS選擇器獲取元素，以僞數組形式存在。
-
類名操做
-
一、Node.classList.add('class') 添加class 二、Node.classList.remove('class') 移除class
-
自定義屬性
-
<!-- 自定義屬性， 1:怎麼爲當前元素添加要給屬性 2:怎麼去獲取屬性對應的值 自定義屬性： data- 固定寫法 獲取值的話，咱們須要使用dataset獲取自定義屬性的值 -->
<div class="one" data-attr-one="屬性"></div> <script> /* var attr=document.querySelector(".one").dataset['attr']; alert(attr);*/ alert(document.querySelector(".one").dataset['attrOne']);
10.選擇器
CSS3新增了許多靈活查找元素的方法，極大的提升了查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。
屬性選擇器 一、E[attr] 表示存在attr屬性便可； div[class] 二、E[attr=val] 表示屬性值徹底等於val； div[class=mydemo] 三、E[attr*=val] 表示的屬性值裏包含val字符而且在「任意」位置； div[class*=mydemo] 四、E[attr^=val] 表示的屬性值裏包含val字符而且在「開始」位置； div[class^=mydemo] 五、E[attr$=val] 表示的屬性值裏包含val字符而且在「結束」位置； div[class$=demos] 僞類選擇器 E:first-child 第一個子元素 E:last-child 最後一個子元素 E:nth-child(n) 第n個子元素 E:nth-last-child(n) 倒數第n個子元素 li:nth-child(2n-1) 選中全部的奇數的li li:nth-child(7n) 選中全部的7 的倍數的li li:nth-child(-1n+5) 選中前面五個 li:nth-last-child(-1n+5) 選中後面五個 li:nth-child(even) 全部的偶數 li:nth-child(odd) 全部的奇數 n但是多種形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5) E:empty 選中沒有任何子節點的E元素； 僞元素選擇器 E::before 往當前元素的子元素的最前面添加一個元素 E::after 往當前元素的子元素的最後面添加一個元素 E::first-letter 獲取當前文本的第一個字母或字 E::first-line 獲取當前元素裏面的文本的第一行 E::selection 可改變選中文本的樣式
11.顏色
一種新的顏色的表示方式
RGBA是表明Red（紅色） Green（綠色） Blue（藍色）和 Alpha的色彩空間。 rgba(255,0,0,0.1) R、G、B 取值範圍0~255 H 色調 取值範圍0~360，0/360表示紅色、120表示綠色、240表示藍色 S 飽和度 取值範圍0%~100% L 亮度 取值範圍0%~100% A 透明度 取值範圍0~1
12.關於透明度：
一、 opacity只能針對整個盒子設置透明度，子盒子及內容會繼承父盒子的透明度； 二、 transparent 不可調節透明度，始終徹底透明，RGBA、HSLA可應用於全部使用顏色的地方。
13.文本 (text-shadow陰影)
例子1：text-shadow: 2px 3px 7px red; 第一個參數：2px 影子水平的偏移位置，若是是正數，向右，若是之越大，越往右 若是是負數，水平向左，絕對值越大，越往左偏移 第二個參數：3px 影子的垂直方向偏移位置，若是是正數，向下，若是值越大，越往下 若是是負數，垂直向上，絕對值越大，越往上 第三個參數： 影子的模糊度 這個模糊度不能是負數。 第四個參數 影子的顏色 例子2：爲一個文本添加多個影子 text-shadow: 4px 10px 4px red,-10px -10px 4px green;
14.盒子陰影(box-shadow陰影)
例子：/*咱們能夠爲盒子添加多個陰影*/ /*box-shadow: 3px 3px 3px red, -10px -10px 4px blue;*/ /*內陰影*/ box-shadow: inset 3px 3px 2px #abcdef,inset -4px -4px 2px #ababab;
15.盒模型
經過box-sizing 來指定盒模型: box-sizing 有兩個值:content-box border-box; content-box:對象的實際寬度等於設置的width值和border、padding之和; border-box： 對象的實際寬度就等於設置的width值，即便定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width );
16.border-radius 屬性
<!--
自定義屬性，
1:怎麼爲當前元素添加要給屬性
2:怎麼去獲取屬性對應的值
自定義屬性：
data- 固定寫法
獲取值的話，咱們須要使用dataset獲取自定義屬性的值
-->
<div class="one" data-attr-one="屬性"></div>
<script>
/* var attr=document.querySelector(".one").dataset['attr'];
alert(attr);*/
alert(document.querySelector(".one").dataset['attrOne']);
17.多重背景
能夠爲盒子設置多張背景圖片
例子： background: url("images/bg1.png") no-repeat left top,
url("images/bg2.png") no-repeat right top,
url("images/bg3.png") no-repeat right bottom,
url("images/bg4.png") no-repeat left bottom,
url("images/bg5.png") no-repeat center
18.漸變
1.線性漸變
linear-gradient線性漸變指沿着某條直線朝一個方向產生漸變效果；(a、方向 b、起始色 c、終止色 d、漸變距離)
.linear-gradient {
width: 200px;
height: 200px;
margin: 100px auto;
/* 任務1 如何實現一個最簡單的線性漸變 */
/* 1：漸變方向
to right
to top
to bottom
to left
2：起始顏色
3：終止顏色*/
/* background: linear-gradient(
to top,
yellow,
green
);*/
/* 任務3 如何實現一個任意角度的漸變 */
/* background: linear-gradient(
180deg,
yellow,
green
);*/
}
/*在一個盒子實現背景多個距離的漸變。也就是多個起點跟終點。*/
例子：
.box{
width: 1000px;
height: 100px;
margin: 100px auto;
/* background: linear-gradient(
to right,
yellow 0%,
green 25%,
pink 50%,
red 75%,
blue 100%
);*/
background: linear-gradient(
135deg,
#000 0%,
#000 25%,
#fff 25%,
#fff 50%,
#000 50%,
#000 75%,
#fff 75%
);
/*
控制背景的大小，大小都是100px
*/
background-size: 100px 100px;
}
2.徑向漸變
radial-gradient徑向漸變指從一箇中心點開始沿着四周產生漸變效果
a) 輻射範圍即圓半徑
b) 中心點 即圓的中心
c) 漸變起始色
d) 漸變終止色
e) 漸變範圍
例子：
background: radial-gradient(
100px at 20px 20px,
yellow,
green
);
19.過渡
過渡是CSS3中具備顛覆性的特徵之一，能夠實現元素不一樣狀態間的平滑過渡（補間動畫），常常用來製做動畫效果。關於補間動畫更多學習可查看http://mux.alimama.com/posts/1009
1.過渡初體驗
- 經過all設置全部屬性的過渡效果
- 將過渡屬性transition設置在A或B狀態
例子：
.box2{
width:200px;
height:200px;
background-color:green;
position:absolute;
top:100px;
left:800px;
cursor:pointer;
/*
使用transition 屬性來完成過分
*/
transition:1s;
}
.box2:hover{
width:300px;
}
2.transition屬性拆解
- transition:是一個複合屬性，它有四個值。
transition-property：all：須要設置的過分的屬性
transition-duration：4s 過分的持續時間。
transition-timing-function: ease 默認值。
delay 延遲的意思
transition-delay：過分的延遲時間
/* 任務2 如何讓div的過渡速度發生變化呢？ */
/* 過渡時間函數 transition-timing-function 改變屬性變化過程當中的速率的屬性
過分的速度
*/
20.2D轉換
一、移動 translate(x, y) 能夠改變元素的位置，x、y可爲負值；
a) 移動位置至關於自身原來位置
b) y軸正方向朝下
c) 除了能夠像素值
例子：
transform:translate(200px,300px);
translateX 沿着水平方向移動
translateY 沿着垂直方向移動
二、縮放 scale(x, y) 能夠對元素進行水平和垂直方向的縮放，x、y的取值可爲小數；
三、旋轉 rotate(deg) 能夠對元素進行旋轉，正值爲順時針，負值爲逆時針；
a) 當元素旋轉之後，座標軸也跟着發生的轉變
b) 調整順序能夠解決，把旋轉放到最後
四、transform-origin能夠調整元素轉換的原點
例子： /*
改變選中的中心角的位置。
*/
transform-origin: left bottom;
transform: translate() rotate() scale() ...
例子：/*設置過渡效果*/
.share1 img,.share2 img{
transition: all 0.8s ease-in-out;
}
/*設置變形*/
.share1 img:hover {
transform: rotate(360deg) scale(1.5);
}
.share2 img:hover {
transform: rotate(-360deg) scale(0.7);
}
5，透視：perspective: 100px;
調整的是觀察者與目標物的距離，所謂的3d 只是在一個2d 平面實現3d 的效果。
21.CSS中的3D座標系
1.動畫
必要元素：
a、經過@keyframes指定動畫序列；
b、經過百分比將動畫序列分割成多個節點；
c、在各節點中分別定義各屬性
d、經過animation將動畫應用於相應元素；
關鍵屬性
a、animation-name設置動畫序列名稱
b、animation-duration動畫持續時間
c、animation-delay動畫延時時間
d、animation-timing-function動畫執行速度，linear、ease等
e、animation-play-state動畫播放狀態，running、paused等
f、animation-direction動畫逆播，alternate等
g、animation-fill-mode動畫執行完畢後狀態，forwards、backwards等
h、animation-iteration-count動畫執行次數，inifinate等
i、steps(60) 表示動畫分紅60步完成
參數值的順序：
關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意
例子：
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.box {
width: 200px;
height: 200px;
background-color: green;
/*執行動畫的名稱*/
animation-name:orbit ;
/*執行動畫的持續時間*/
animation-duration: 3s;
/*動畫的速度*/
animation-timing-function: linear;
/*動畫的延遲時間*/
animation-delay: 0s;
/*
動畫執行的次數
iteration 迭代
count 次數
infinite 無數次
*/
animation-iteration-count:2;
/*動畫的方向direction*/
/*
1:alternate 動畫先正常運行再反方向運行，並交替運行
2:reverse 反方向運行
3：normal
alternate ：會受動畫的次數影響，若是動畫執行的是無數次，
這個動畫持續交替運行。
*/
animation-direction:alternate;
/*
第七個參數。
forwards 動畫的狀態爲結束時候的狀態
backwards 動畫的狀態爲開始的時候的狀態。
*/
animation-fill-mode: backwards;
/*
暫停動畫，開始動畫
paused 暫停狀態
*/
/* animation-play-state:
;*/
animation-play-state:running;
}
.box:hover {
/*!*設置動畫暫停*!
animation-play-state: paused;*/
}
/*定義動畫 orbit 軌道*/
@keyframes orbit {
/*
定義動畫 的第一種寫法
/*from{
}to{
}*/
/*
假設我在這裏定義了這個動畫，我在上面要使用這個動畫，
指定這個動畫的執行時間，假設我是指定10s 完成這個動畫，0秒
第五秒執行50%，結束的時候執行 100
*/
0%{
width:200px;
width:200px;
}
/*50%{
width: 400px;
height: 400px;
}*/
100%{
width: 400px;
height: 400px;
}
}
22.伸縮佈局
CSS3在佈局方面作了很是大的改進，使得咱們對塊級元素的佈局排列變得十分靈活，適應性很是強，其強大的伸縮性，在響應式開中能夠發揮極大的做用。
主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向 側軸：與主軸垂直的軸稱做側軸，默認是垂直方向的 方向：默認主軸從左向右，側軸默認從上到下 主軸和側軸並非固定不變的，經過flex-direction能夠互換。 一、必要元素： a、指定一個盒子爲伸縮盒子 display: flex b、設置屬性來調整此盒的子元素的佈局方式 例如 flex-direction c、明確主側軸及方向 d、可互換主側軸，也可改變方向 二、各屬性詳解 flex-direction： 調整主軸方向（默認爲水平方向）包括row、column、row-reverse、column-reverse justify-content： 主軸方向對齊，能夠調整元素在主軸方向上的對齊方式，包括flex-start、flex-end、center、space-around、space-between幾種方式 align-items： 調整側軸方向對齊方式，包括flex-start、flex-end、center、stretch flex-wrap： 控制是否換行，包括wrap、nowrap align-content： 堆棧排列，可對應用flex-wrap: wrap後產生的換行進行控制，以側軸對齊,包括flex-start、flex-end、center、space-between、space-around、stretch flex： 控制伸縮項目的伸縮比例 例子：flex:2; align-self： 同align-items可覆蓋父元素設置的algin-items，包括flex-start、flex-end、center、stretch order： 控制伸縮項目的順序 例子：order:3; 詳見案例：360原版，攜程旅行
23.web字體的使用
例子
/*
定義
*/
@font-face {font-family: 'webfont';
src: url('webfont.eot'); /* IE9*/
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
/*
使用。
*/
p{
font-family:"webfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
推薦http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字體
http://www.iconfont.cn/
24.Web存儲 window.sessionStorage（會話存儲） window.localStorage （本地存儲）
拖拽元素，事件監聽
例子：
<body>
<div class="box" id="box1" draggable="true">
拖拽元素
</div>
<div class="box" id="box2">
目標元素。
</div>
<script>
/*
1：若是咱們要在這個元素能夠拖拽，我必須給這個元素設置一個屬性。
* 學習事件，主要事件何時觸發。。
* 拖拽元素
* 作這樣的拖拽開發，都是在這幾個事件的基礎上面來的。*/
//拖拽元素
var box1=document.querySelector("#box1");
//目標元素
var box2=document.querySelector("#box2");
//拖拽開始的時候就調用。
box1.ondragstart=function(){
this.style.backgroundColor="#abcdef";
}
//在整個拖拽拖過程中都會觸發。。
box1.ondrag=function(){
/* console.log("在整個拖拽過程中都會調用");*/
}
/*拖拽結束的時候調用。*/
box1.ondragend=function(){
/* console.log("拖拽結束的時候調用");*/
this.style.backgroundColor="red";
}
/*
*離開拖拽元素的時候調用
* */
box1.ondragleave=function(){
console.log("離開拖拽元素的時候調用");
this.style.backgroundColor="yellow";
}
//這三個事件是做用在目標元素上面的
var i=0;
//進入目標元素的時候觸發
box2.ondragenter=function(){
console.log("進入了目標元素。");
this.style.backgroundColor="blue";
}
//停留在目標元素的時候觸發
box2.ondragover=function(){
console.log("以及在 目標元素上面懸停。");
}
//應用於目標元素，離開目標元素或者拖拽結束的時候調用。
box2.ondragleave=function(){
console.log("離開目標元素的時候調用或者拖拽結束的時候調用。");
this.style.backgroundColor="green";
}
</script>
25.事件監聽
1.網絡狀態
咱們能夠經過window.onLine來檢測，用戶當前的網絡情況，返回一個布爾值
window.online用戶網絡鏈接時被調用
window.offline用戶網絡斷開時被調用
window.addEventListener("online",function(){
alert("已經創建了網絡鏈接")
})
window.addEventListener("offline",function(){
alert("已經失去了網絡鏈接")
})
26.地理定位 在HTML規範中，增長了獲取用戶地理信息的API，這樣使得咱們能夠基於用戶位置開發互聯網應用，即基於位置服務 (Location Base Service) Position. coords.latitude 緯度 var longitude = position. coords.longitude ; // 經度
例子：
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>
// 提供了一個對象 navigator.geolocation
// 此對象下有一個方法 getCurrentPosition(); 是用來獲取用戶當前位置
navigator.geolocation.getCurrentPosition(function (position) {
console.log(position);
}, function (error) {
console.log(1);
console.log(error);
});
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude; // 緯度
var longitude = position.coords.longitude; // 經度
//
console.log(position);
/********************/
// 這些都是寫死
var map = new BMap.Map("container"); // container表示主到哪一個容器
// 把經度緯度傳給百度
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
/****************************/
// 只寫上面三行就可出現地圖了，而且會定位
// 定義好了一個圖片標記
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
// 建立標註
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
});
}
</script>
相關文章
- 1. 熟練掌握各種MQ
- 2. (一)熟練HTML5+CSS3，天天覆習一遍
- 3. 【mysql】需熟練掌握的SQL語句
- 4. Windows系統從零學習git到熟練掌握（三）
- 5. 完全掌握CSS3
- 6. 熟練Java,這些基本類和函數一定要掌握
- 7. 掌握numpy(三)
- 8. 熟練的Java程序員應該掌握的技術
- 9. 學習大數據需要熟練掌握的技術（乾貨）
- 10. 你必須熟練掌握的Java關鍵字
- 更多相關文章...
- • TCP三次握手建立連接的過程 - TCP/IP教程
- • Spring實例化Bean的三種方法 - Spring教程
- • RxJava操作符（三）Filtering
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 熟練掌握各種MQ
- 2. (一)熟練HTML5+CSS3，天天覆習一遍
- 3. 【mysql】需熟練掌握的SQL語句
- 4. Windows系統從零學習git到熟練掌握（三）
- 5. 完全掌握CSS3
- 6. 熟練Java,這些基本類和函數一定要掌握
- 7. 掌握numpy(三)
- 8. 熟練的Java程序員應該掌握的技術
- 9. 學習大數據需要熟練掌握的技術（乾貨）
- 10. 你必須熟練掌握的Java關鍵字