整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML5是WEB開發(fā)世界的一次重大的改變，事實上不管你是否喜歡，它都是代表著未來趨勢。曾幾何時，當(dāng)HTML5出現(xiàn)在web端開發(fā)領(lǐng)域的時候，并沒有引起太多人的注意，究其原因，一方面是它還沒有被廣泛的支持，在IE中不好使，另一方面就是程序員自身對于XHTML代碼的情有獨鐘了，畢竟對于成熟的程序員而言，新鮮的技術(shù)面臨挑戰(zhàn)和泡沫。
彷徨和疑慮從根本上講是來源于對于HTML5技術(shù)內(nèi)核和未來發(fā)展的不了解。HTML5技術(shù)用于實現(xiàn)我們能夠看到的所有網(wǎng)站，但是不涉及到數(shù)據(jù)層面（也就是負(fù)責(zé)將一張設(shè)計好的網(wǎng)頁圖片[設(shè)計師的工作]，用代碼實現(xiàn)出來，在一個地方放置個塊，給一個塊設(shè)置顏色，調(diào)整字體大小，讓圖片動起來等）。
也許你會有這樣的疑慮，以上這些工作內(nèi)容網(wǎng)頁設(shè)計與制作職位也能完成啊，通過網(wǎng)頁三劍客PhotoShop、Flash、Dreamweaver就可以做到。然而原有的網(wǎng)頁設(shè)計與制作，主要針對PC平臺，進(jìn)行網(wǎng)頁網(wǎng)站的設(shè)計與制作，相對會涉及一部分設(shè)計工作，并將美工圖實現(xiàn)成網(wǎng)頁。近年來隨著移動互聯(lián)網(wǎng)的飛速發(fā)展，HTML5的地位迅速提升。移動設(shè)備有其特殊的開發(fā)要求，原有的網(wǎng)頁設(shè)計與制作，早已無法滿足開發(fā)的需要。
如今HTML5被廣為流傳，各類媒體更是炒的如火如荼，很多文章都在不遺余力的介紹HTML5技術(shù)，加之Apple的支持， Adobe圍繞HTML5的產(chǎn)品開發(fā)，以及移動flash的死亡，如此多網(wǎng)站的支持，HTML5已經(jīng)揭去了神秘的面紗，切實迎來了發(fā)展的浪潮。
行業(yè)的快速發(fā)展，未來必將面臨更多的競爭，只有不遺余力的把自己打造成一把利劍，從專業(yè)度到職業(yè)素質(zhì)，只有比別人更突出、更優(yōu)秀，才能夠在這個相互選擇的世界中擁有選擇的權(quán)利。
目標(biāo)清晰并且勤于努力的人，才會成為HTML5（http://www.bjstudents.com/H5.html）浪潮中的受益者。翡翠科技HTML5專項實訓(xùn)課程，就是針對這部分年輕人傾力打造的專屬課程，在“基礎(chǔ)知識+動手實操+項目實踐”的綜合訓(xùn)練下，幫助學(xué)員快速成長成為HTML5高手，在HTML5的浪潮中站穩(wěn)腳跟，變得優(yōu)秀起來。
行業(yè)好，也不能盲目跟風(fēng)，找到適合自己的發(fā)展方向，才能最終贏得完美的結(jié)局。HTML5浪潮來襲，你找到自己成功起航的路徑了嗎？
TML 代碼約定
很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。
在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。
而針對于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫，可以使用以下代碼：
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風(fēng)格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
除此之外，中星小編還介紹4款最受歡迎的HTML5/CSS3應(yīng)用及代碼，一起來看看吧。
1、基于HTML5 Canvas的圖表插件Chart.js
chart.js是一款基于HTML5 Canvas的圖表插件，chart.js的功能非常強(qiáng)大，它不僅提供了常見的柱形圖、折線圖、餅狀圖，而且還提供了環(huán)形圖、雷達(dá)圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js還有一個特點就是圖表在初始化的時候有彈性動畫特效，這也是HTML5 Canvas的一大功勞。
柱形圖折線圖餅狀圖環(huán)形圖雷達(dá)圖極線圖
2、HTML5 3D動畫柱狀圖表
這次我們要分享一款很酷的HTML5 3D圖表應(yīng)用，它是一款柱狀圖表，呈3D的外觀樣式，并且我們可以改變圖表的顏色主題，讓其更加符合你的需求。這款HTML5圖表可以切換需要查看的圖表數(shù)據(jù)，在切換的時候有不錯的動畫效果，而且，我們還可以切換圖表的大小，以適應(yīng)不同大小的瀏覽窗口。
3、CSS3 3D環(huán)形進(jìn)度條 帶進(jìn)度百分比
這是一款基于純CSS3的環(huán)形進(jìn)度條，而且，從外觀上看，這款進(jìn)度條很有3D立體的感覺，尤其是在進(jìn)度條上有立體的投影，顯得非常小巧迷人。另外，進(jìn)度條的環(huán)形中央帶有進(jìn)度百分比，可以實時根據(jù)進(jìn)度來更新百分比的數(shù)值，和之前分享的HTML5/CSS3扇形進(jìn)度條動畫相比有一定優(yōu)勢。
4、純CSS3垂直Tab菜單 Tab樣式可自定義
Tab菜單在網(wǎng)頁上使用起來非常方便，也比較節(jié)省空間，所以很多門戶網(wǎng)站很喜歡用Tab菜單。今天我們要來分享一款垂直方向的Tab菜單，它是用純CSS3實現(xiàn)的，加載和切換特別靈活。另外，Tab菜單的樣式你可以使用CSS重新定義，擴(kuò)展很方便。
、編碼格式：使用UTF-8
請確保您的編輯器使用的字符編碼為UTF-8，沒有字節(jié)順序標(biāo)記。在html模板或文檔中通過meta來定義編碼格式。
6、注釋
根據(jù)需要解釋代碼，這個就不多說了，團(tuán)隊開發(fā)這個非常重要，盡管很多時候大家不愿意遵守，但確實重要！
7、TODO待定項
尚未實現(xiàn)的或待定的內(nèi)容一定要標(biāo)識強(qiáng)調(diào)出來，利用TODO辨識，而非其他諸如@@來強(qiáng)調(diào)。在todo項中如果有必要列明聯(lián)系人，比如負(fù)責(zé)人。在TODO后追加一個冒號作為行動內(nèi)容，例如TODO：為網(wǎng)站增加html5模板。
html是一種簡單易記，功能強(qiáng)大的標(biāo)記語言，它是學(xué)習(xí)前端知識的第一站，也是所有WEB開發(fā)者、乃至產(chǎn)品經(jīng)理、運營人員必須學(xué)習(xí)的一項基礎(chǔ)內(nèi)容。
1. html5是WEB開發(fā)者，必須掌握的基礎(chǔ)知識；
2. html5應(yīng)用廣泛，它可以用來開發(fā)網(wǎng)站、WEB應(yīng)用、WEB游戲等等，如微信小程序、移動端小游戲等都跟html5有關(guān)；
3. html5很容易掌握，花幾個小時就可以掌握它；
1. 講師講課風(fēng)格幽默，整個學(xué)習(xí)過程輕松有趣，不枯燥、不乏味；
2. 以就業(yè)為導(dǎo)向，與實戰(zhàn)相結(jié)合，滿足大部分學(xué)員的學(xué)習(xí)需求；
1. 學(xué)完每一節(jié)課程，動手將代碼打一遍；
2. 舉一反三，學(xué)完每節(jié)課程，思考一下它的應(yīng)用場景；
3. 完成本門課程，試著自己寫一個純html5的網(wǎng)頁；
1. 零基礎(chǔ)學(xué)員；
2. 前端愛好者；
1、DOCTYPE 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。
網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標(biāo)記，每個版本的DTD版本均有不同
2、<html></html> 網(wǎng)頁文檔中的根標(biāo)記
html 標(biāo)簽有三個特殊的屬性
3、<head></head>頭部標(biāo)簽在網(wǎng)頁中只能有一個，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會在頁面中顯示出來·。
head里面的標(biāo)記
4、<body></body>只能有一個，顯示網(wǎng)頁的主體內(nèi)容。
<meta>元素的屬性：
1、name 屬性
1 <meta name="author" content="nyw">
2 <!--作者， 定義網(wǎng)頁的作者 -->
3 <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
4 <!-- 描述，描述網(wǎng)頁的實際內(nèi)容 -->
5 <meta name="keywords" content="HTML,meta">
6 <!-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 -->2、http-equiv屬性
1 <meta http-equiv="refresh" content="30">
2 <!-- 網(wǎng)頁30s后自動刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4 <!-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --><meta http-equiv="refresh" content="5,url=dom.html">
http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個文檔。
3、content 屬性
特殊屬性
4、charset屬性
指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。
代碼實例：
為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息
這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。
<meta name="robots" content="noindex,nofollow">
<!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->代碼實例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>網(wǎng)頁標(biāo)題(顯示在瀏覽器上)</title>
6 <meta name="author" content="nyw">
7 <!--作者， 定義網(wǎng)頁的作者 -->
8 <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
9 <!-- 描述，描述網(wǎng)頁的實際內(nèi)容 -->
10 <meta name="keywords" content="HTML,meta">
11 <!-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 -->
12 <meta http-equiv="refresh" content="30">
13 <!-- 網(wǎng)頁30s后自動刷新 -->
14 <meta http-equiv="refresh" content="5,url=dom.html">
15 <!-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 -->
16 <meta name="robots" content="noindex,nofollow">
17 <!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->
18 </head>
19 <body>
20 </body>
21 </html>title和base標(biāo)記都是寫在head標(biāo)簽中
title：設(shè)置網(wǎng)頁的標(biāo)題
寫法：<title>內(nèi)容</title>。
base：指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。
寫法：<base href="http://www.aaa.zzz/">
base屬性值：
<base href="http://baidu.com/"> 這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。
<base target="_blank"> 網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。
terget屬性值：
link標(biāo)記：鏈接外部文件時使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實現(xiàn)更多的功能。
link屬性：
href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/span>
rel：引用文件，引用資源的類型定義
我們在使用link標(biāo)簽引用外部文件的時候，外部文件的類型是多種多樣的。
alternate 代替文檔（種子，其他語言版本，其他格式等等）
author 網(wǎng)頁的作者
help 幫助文件的鏈接
icon 網(wǎng)頁的圖標(biāo)
next 如果是連續(xù)網(wǎng)頁的時候，指定下一個網(wǎng)頁
prefetch 把鏈接外部資源時提前緩存起來。
prev 如果是連續(xù)網(wǎng)頁
media 鏈接文件或是資源屬于哪一種資源。
hreflang 鏈接文件的語言種類
type 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）
sizes 根據(jù)link鏈接文件的類型，來指定文件的大小
代碼示例：
鏈接網(wǎng)頁圖標(biāo)：
網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾1 <!-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 -->
2 <link rel="icon">
3 <!-- 示例 -->
4 <link rel="icon" href="img/favicon.png" type="image/png">
5 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6 <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">注意：后面的href和前面type標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上
鏈接外部樣式單
1 <link rel="stylesheet">
2 <link rel="stylesheet" href="style1.css" media="screen">
3 <link rel="stylesheet" href="style2.css" title="主題樣式文件">
4 <link rel=" alternate stylesheet" href="style3.css" title="可選樣式單">說明：
alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進(jìn)行選擇
media 表示媒體類型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀
title 對這個link進(jìn)行簡單的說明
網(wǎng)站RSS種子指定
<!-- 網(wǎng)站RSS種子指定 -->
<link rel="alternate" type="application/rss+xml">為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL
<!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL -->
<link rel="canonical">
<link rel="canonical" href="http://www.aaa.zzz/help.html">告訴搜索引擎代替URL是哪里。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
