整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
習(xí)html5從入門到精通，零基礎(chǔ)新手也能看懂，無(wú)論你是唱歌，畫畫的藝術(shù)生，還是學(xué)習(xí)機(jī)械專業(yè)的工科生，或者大學(xué)讀的文學(xué)學(xué)科。先了解HTML5可以實(shí)現(xiàn)的功能有哪兒些？
1. HTML5可以同時(shí)在多種設(shè)備上運(yùn)行，這一點(diǎn)是其他方式都無(wú)法做到的；
2. 在互聯(lián)網(wǎng)中隨意被分享，并且搜索時(shí)可以及時(shí)被找到；有搜索擴(kuò)展性。
3. HTML5應(yīng)用可以使用交互式設(shè)計(jì)來(lái)提供最佳體驗(yàn)，而不需要更改代碼。你可以從桌面到手機(jī)到平板電腦無(wú)縫進(jìn)行切換，而無(wú)需重復(fù)安裝不同的應(yīng)用；
4. HTML5適用于多廠商標(biāo)準(zhǔn)，建立在協(xié)議之上，是眾多公司努力的結(jié)果。
所以，只要你平時(shí)上網(wǎng)，你看完這篇文章之后，相信你一定能夠?qū)tml5有一個(gè)基本的認(rèn)識(shí)。
有小白會(huì)問(wèn)html5是做什么的？
這里極其簡(jiǎn)單的概括：用于實(shí)現(xiàn)我們能夠看到的所有網(wǎng)站，但是不涉及到數(shù)據(jù)層面（也就是負(fù)責(zé)將一張?jiān)O(shè)計(jì)好的網(wǎng)頁(yè)圖片（設(shè)計(jì)師的工作），用代碼實(shí)現(xiàn)出來(lái)，在一個(gè)地方放置個(gè)塊，給一個(gè)塊設(shè)置顏色，調(diào)整字體大小，讓圖片動(dòng)起來(lái)等）。
html5的由來(lái)
不熟悉html5的人，可能會(huì)很熟悉一個(gè)2005年以前常用的詞語(yǔ)——網(wǎng)頁(yè)設(shè)計(jì)與制作。
隨著行業(yè)的發(fā)展，網(wǎng)站的制作越來(lái)越受到了人們的重視，社會(huì)化分工越來(lái)越明細(xì)。在2005年，“web前端開發(fā)工程師”這個(gè)詞語(yǔ)開始出現(xiàn)在各個(gè)一線城市。2008年，html5橫空出世，2009年html5這個(gè)全新的詞語(yǔ)在北京的一些頂尖級(jí)公司出現(xiàn)，2012年，逐漸的普及開來(lái)，2014年迅速發(fā)展。
1. HTML5有本地存儲(chǔ)的特征，基于HTML5開發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。
2. 利用HTML5非常方便的在網(wǎng)頁(yè)上添加視頻和音頻，不需要很復(fù)雜的代碼，就能打造一款功能齊全的HTML5播放器。
3. CSS3的使用可以提供更多的CSS屬性，可以制作更加豐富的渲染效果。
除了以上基本知識(shí)點(diǎn)以外，還需要掌握：HTML5的前端技術(shù)也是必備的，其中包括：CSS、HTML、DOM、javascript、Ajax，jquery，Vue，jquery- mobile，zepto等，在掌握這些技術(shù)的同時(shí)，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理以及存在的各種Bug。
上面講的是HTML5主要一些特征。
html5的基本組成
html5 = html + cs+ java
html指的是結(jié)構(gòu)
css指樣式
js即java，指的是行為
關(guān)于結(jié)構(gòu)、樣式、行為的理解
結(jié)構(gòu)——在整個(gè)網(wǎng)頁(yè)中有標(biāo)題，有列表，有圖片等。
樣式 —— 標(biāo)題文字的字體大小、顏色、字體；圖片的大小；某個(gè)塊的背景色或背景圖等。
行為——在網(wǎng)頁(yè)上四處飄動(dòng)的廣告；圖片滾動(dòng)；瀏覽淘寶時(shí)鼠標(biāo)移動(dòng)到商品時(shí)，放大商品的效果等。
容易弄混的概念
html5移動(dòng)端的功能和應(yīng)用程序。
對(duì)于蘋果手機(jī)中的應(yīng)用程序，屬于ios開發(fā)，語(yǔ)言是oc；對(duì)于其他安卓系統(tǒng)的手機(jī)，需要使用java語(yǔ)言進(jìn)行開發(fā)。html5能夠做的是移動(dòng)端的網(wǎng)頁(yè)以及微信平臺(tái)中的移動(dòng)端網(wǎng)頁(yè)。
前端后臺(tái)的區(qū)別
無(wú)論html5還是ios，在整個(gè)網(wǎng)頁(yè)開發(fā)流程當(dāng)中，前端（html5）開發(fā)工程師，主要負(fù)責(zé)的是“前臺(tái)頁(yè)面制作”，“網(wǎng)站測(cè)試”，“修改”三個(gè)部分。
html5 與 網(wǎng)頁(yè)設(shè)計(jì)與制作 的區(qū)別
原有的網(wǎng)頁(yè)設(shè)計(jì)與制作，主要針對(duì)pc平臺(tái)，進(jìn)行網(wǎng)頁(yè)網(wǎng)站的設(shè)計(jì)與制作，相對(duì)會(huì)涉及一部分設(shè)計(jì)工作，并將美工圖實(shí)現(xiàn)成網(wǎng)頁(yè)。通常使用的工具是網(wǎng)頁(yè)三劍客——photoshop、flash、dreamweaver。然而，行業(yè)的發(fā)展使得“網(wǎng)頁(yè)設(shè)計(jì)與制作”這一職業(yè)逐漸遭到了淘汰，原因主要有四：
【一】：網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)頁(yè)制作是兩個(gè)完不同的領(lǐng)域，一個(gè)由美感主導(dǎo)，另一個(gè)則需要邏輯思維主導(dǎo)。對(duì)于開發(fā)人員來(lái)說(shuō)，如果將寶貴的精力分散到兩個(gè)不同的行業(yè)中，最后通常兩方面都是半斤八兩，沒(méi)有實(shí)質(zhì)的競(jìng)爭(zhēng)力；
【二】：網(wǎng)頁(yè)設(shè)計(jì)與制作，這一職業(yè)中的制作，指的是網(wǎng)頁(yè)的結(jié)構(gòu)與樣式（即html+css），而當(dāng)前網(wǎng)站中java已經(jīng)占據(jù)了極大的比重，如果還停留在原有的結(jié)構(gòu)和樣式中，發(fā)展空間會(huì)變得很小；
【三】：網(wǎng)頁(yè)設(shè)計(jì)與制作當(dāng)中的結(jié)構(gòu)實(shí)現(xiàn)，通常采用的是table布局；而web前端開發(fā)工程師、html5當(dāng)中結(jié)構(gòu)的實(shí)現(xiàn)，采用的是div+css方式的布局，因此，dreamweaver工具的使用也就沒(méi)有什么必要性了，取而代之的是內(nèi)存占用小，開發(fā)速度快的文本類編輯器。而flash，在與html5的大戰(zhàn)當(dāng)中戰(zhàn)敗，當(dāng)前已經(jīng)退出了移動(dòng)端以及電視平臺(tái)的市場(chǎng)爭(zhēng)奪，在pc平臺(tái)也越來(lái)越少。轉(zhuǎn)言之，flash在網(wǎng)頁(yè)制作的領(lǐng)域里已經(jīng)江郎才盡~原來(lái)的網(wǎng)頁(yè)三劍客只剩下一個(gè)ps，在前端工作的要求中，需要掌握基本的切圖即可。
【四】移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，也使得html5的地位迅速提升。移動(dòng)設(shè)備有其特殊的開發(fā)要求，原有的網(wǎng)頁(yè)設(shè)計(jì)與制作，早已無(wú)法滿足開發(fā)的需要。
html5是移動(dòng)互聯(lián)網(wǎng)前端的主流開發(fā)語(yǔ)言，所以說(shuō)，無(wú)論做手機(jī)網(wǎng)站還是在手機(jī)app應(yīng)用，前端的樣式都是html5開發(fā)。html5作為移動(dòng)互聯(lián)網(wǎng)主流前端開發(fā)語(yǔ)言，從事html5相關(guān)開發(fā)工作，就業(yè)前景真的是一片光明。在目前還沒(méi)有一個(gè)前端的開發(fā)語(yǔ)言能取代html5的位置。
D轉(zhuǎn)換
在二維的平面上做一些變化，使用transform屬性
2D轉(zhuǎn)換之移動(dòng)（將div在屏幕中居中）translate
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#090;
position:absolute; /*絕對(duì)定位*/
left:50%;
top:50%;
transform:translate(-50%,-50%); /*以自己左上角為原點(diǎn)，向左移動(dòng)50%,向上移動(dòng)50%*/
}
</style>
2D轉(zhuǎn)換之旋轉(zhuǎn)（rotate）
默認(rèn)情況下是按中心點(diǎn)旋轉(zhuǎn)，我們可以通過(guò)transform-origin調(diào)中心點(diǎn)，
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#090;
margin:100px auto;
transform-origin:top left; /*旋轉(zhuǎn)的中心點(diǎn)，中心點(diǎn)在左上角*/
}
div:hover{
transform:rotate(45deg); /*deg表示度數(shù)*/
}
</style>
2D轉(zhuǎn)換之縮放（scale）
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#090;
margin:100px auto;
}
div:hover{
/*transform:scale(0.5);*/ /*x軸和Y軸都是縮放0.5倍*/
/*transform:scaleX(0.5);*/ /*在x的方向上縮放0.5倍*/
transform:scale(2,3);
}
</style>
2D轉(zhuǎn)換之斜切（skew）
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#090;
margin:100px auto;
}
div:hover{
/*transform:skewX(8deg);*/
transform:skewY(10deg);
}
</style>
例題：三角的做法
<style type="text/css">
div{
width:300px;
height:40px;
border:#5c5c5c solid 1px;
margin:100px auto;
position:relative;
}
div:after{
content:'';
width:12px;
height:12px;
display:block;
border-right:#5c5c5c solid 2px;
border-bottom:#5c5c5c solid 2px;
position:absolute;
top:50%;
right:12px;
transform:translateY(-50%) rotate(45deg);
}
div:hover{
border:#009 solid 1px;
}
div:hover:after{
border-right:#009 solid 2px;
border-bottom:#009 solid 2px;
}
</style>
<div></div>
過(guò)渡（transition）
動(dòng)畫過(guò)渡類型
小例題
<style type="text/css">
div{
width:200px;
height:100px;
border:#00F solid 3px;
background-color:#F90;
margin:100px auto;
border-radius:15px;
/*transition:width 0.5s ease 0s;*/
/*transition:all 0.5s ease 2s;*/
transition:all 0.5s;
}
div:hover{
width:300px;
height:150px;
background:#F30;
}
</style>
<div></div>
例題：頭像旋轉(zhuǎn)
<style type="text/css">
img{
border:#093 solid 4px;
display:block;
margin:100px auto;
border-radius:50%;
transition:all 1s ease 0;
}
img:hover{
transform:rotate(360deg);
}
</style>
<img src="images/face.jpg">
例題：鼠標(biāo)經(jīng)過(guò)圖片變大
<style type="text/css">
div{
width:200px;
height:200px;
border:#666 solid 1px;
margin:100px auto;
overflow:hidden;
}
div img{
transition:all 0.5s;
cursor:pointer;
}
div img:hover{
transform:scale(1.1);
}
</style>
<div><img src="images/face.jpg"></div>
3D轉(zhuǎn)換
3D轉(zhuǎn)換之X軸旋轉(zhuǎn)
X軸的旋轉(zhuǎn)就像單杠的旋轉(zhuǎn)。
例題：
<style type="text/css">
div{
width:200px;
height:200px;
margin:100px auto;
border:#000 solid 1px;
perspective:400px; /*透視的效果，這個(gè)屬性必須給父元素添加*/
}
img{
transform-origin:bottom;
transition:all 0.5s
}
div:hover img{
transform:rotateX(60deg); /*X軸旋轉(zhuǎn)60度*/
}
</style>
<div><img src="images/face.jpg"></div>
例題：打開盒子（3D轉(zhuǎn)換之X軸旋轉(zhuǎn)）
完整代碼：
<style type="text/css">
#content{
width:300px;
height:300px;
margin:50px auto;
position:relative;
}
#face1,#face2{
width:300px;
height:300px;
background:url(images/musicb.jpg) no-repeat;
position:absolute;
top:0px;
left:0px;
border:#666 solid 1px;
border-radius:50%;
}
#face2{
background:url(images/musict.jpg) no-repeat;
transform-origin:bottom;
transition:all 2s;
}
#content:hover #face2{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<div id="content">
<div id="face1"></div>
<div id="face2"></div>
</div>
3D轉(zhuǎn)換之Y軸（百度錢包）
Y軸旋轉(zhuǎn)就像鋼管舞，沿著Y軸方向旋轉(zhuǎn)。
例題
完整代碼：
<style type="text/css">
body{
background:#f14849;
}
#content{
width:300px;
height:300px;
margin:100px auto;
position:relative;
}
#face1,#face2{
width:300px;
height:300px;
background:url(images/baidu_bg.png) no-repeat left bottom;
position:absolute;
top:0px;
left:0px;
transition:all 1s;
backface-visibility:hidden; /*轉(zhuǎn)過(guò)去以后隱藏*/
}
#face1{
z-index:1;
}
#face2{
background-position:-305px bottom; /*css中spirits技術(shù)*/
transform:rotateY(-180deg);
}
#content:hover #face1{
transform:rotateY(-180deg);
}
#content:hover #face2{
transform:rotateY(0deg);
}
</style>
</head>
<body>
<div id="content">
<div id="face1"></div>
<div id="face2"></div>
</div>
例題：抽獎(jiǎng)
<style type="text/css">
#content{
width:650px;
height:600px;
background:url(images/turntable-bg.jpg) no-repeat;
margin:auto;
overflow:hidden;
position:relative;
}
#zhuan{
width:450px;
height:450px;
background:url(images/turntable.png) no-repeat;
margin:60px 0px 0px 115px;
transition:all 3s ease 0;
}
#content img{
position:absolute;
top:150px;
left:250px;
cursor:pointer;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#content img').click(function(e) {
var num=Math.floor(Math.random()*3600); //求得隨機(jī)的旋轉(zhuǎn)度數(shù)
$('#zhuan').css('transform','rotate('+num+'deg)');
num%=360; //num=num%360;
setTimeout(function(){
if(num<=51.4*1)
{
alert('免單4999');
}
else if(num<=51.4*2)
{
alert('免單50元')
}
else if(num<=51.4*3)
{
alert('免單10元');
}
else if(num<=51.4*4)
{
alert('免單5元')
}
else if(num<=51.4*5)
{
alert('免分期服務(wù)費(fèi)');
}
else if(num<=51.4*6)
{
alert('提高白條額度');
}
else if(num<=51.4*7)
{
alert('未中獎(jiǎng)');
}
},3000)
});
});
</script>
<div id="content">
<div id="zhuan"></div>
<img src="images/pointer.png">
</div>
獲取相關(guān)例題及更多文章請(qǐng)關(guān)注公眾號(hào)“愛(ài)搞機(jī)個(gè)人版”
首先祝賀自己過(guò)了新手期，每天可以發(fā)五篇文章啦！可以讓大家每天學(xué)到飽，哈哈！
最終解釋權(quán)歸愛(ài)搞機(jī)個(gè)人版所有！
實(shí)學(xué)習(xí)HTML5的入行門檻很低，對(duì)于沒(méi)有任何計(jì)算機(jī)基礎(chǔ)的同學(xué)來(lái)說(shuō)也是可以學(xué)習(xí)的，但是想要自學(xué)好這門技術(shù)，怎么從入門到精通呢？給大家推薦HTML5課程大綱，這份HTML5從入門到精通學(xué)習(xí)路線圖相信非常適合你的學(xué)習(xí)。
HTML5從入門到精通學(xué)習(xí)路線圖
學(xué)習(xí)的方法很多，但是如果你只是自己關(guān)起來(lái)閉門造車，那么可能你真的學(xué)不到什么更好更新的技術(shù)，互聯(lián)網(wǎng)行業(yè)日新月異，迭代的速度非常快，如果你不能跟的上腳步，那么學(xué)到的技術(shù)可能無(wú)法實(shí)現(xiàn)你想達(dá)到的就業(yè)目的，所以，跟著這份路線圖開始學(xué)習(xí)，讓你掌握的不僅僅是較新的技術(shù)，而且還能有更清晰的學(xué)習(xí)思路。
第一階段：前端頁(yè)面重構(gòu)
內(nèi)容包含了：（PC端網(wǎng)站布局項(xiàng)目、HTML5+CSS3基礎(chǔ)項(xiàng)目、WebApp頁(yè)面布局項(xiàng)目）
第二階段：JavaScript高級(jí)程序設(shè)計(jì)
內(nèi)容包含：1）原生 JavaScript交互功能開發(fā)項(xiàng)目、面向?qū)ο筮M(jìn)階與 ES5/ES6應(yīng)用項(xiàng)目、JavaScript工具庫(kù)自主研發(fā)項(xiàng)目）
第三階段：PC端全棧項(xiàng)目開發(fā)
內(nèi)容包含：（jQuery經(jīng)典交互特效開發(fā)、HTTP協(xié)議、Ajax進(jìn)階與PHP/JAVA開發(fā)項(xiàng)目、前端工程化與模塊化應(yīng)用項(xiàng)目、PC端網(wǎng)站開發(fā)項(xiàng)目、PC端管理信息系統(tǒng)前端開發(fā)項(xiàng)目）
第四階段：移動(dòng)端項(xiàng)目開發(fā)
內(nèi)容包含：（Touch端項(xiàng)目、微信場(chǎng)景項(xiàng)目、應(yīng)用 Angular+Ionic開發(fā) WebApp項(xiàng)目、應(yīng)用 Vue.js開發(fā) WebApp項(xiàng)目、應(yīng)用 React.js開發(fā) WebApp項(xiàng)目）
第五階段：混合（Hybrid,ReactNative）開發(fā)
內(nèi)容包含：（微信小程序開發(fā)、React Native、各類混合應(yīng)用開發(fā)）
第六階段：NodeJS全棧開發(fā)
內(nèi)容包括：（WebApp后端系統(tǒng)開發(fā)、一、NodeJS基礎(chǔ)與NodeJS核心模塊二、Express三、noSQL數(shù)據(jù)庫(kù)）
第七階段：大數(shù)據(jù)可視化
內(nèi)容包含：（大數(shù)據(jù)可視化化基礎(chǔ)與實(shí)戰(zhàn)、一、數(shù)據(jù)可視化入門、二、D3.js詳解、三、其他JS庫(kù)）
想要從入門到精通學(xué)習(xí)HTML5技術(shù)課程，那么你一定要找到正確的學(xué)習(xí)方式，這樣才能更好的提升和掌握這門技術(shù)，更好的達(dá)到就業(yè)的目的。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
