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