整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
增的結(jié)構(gòu)標簽
section元素
表示頁面中的一個內(nèi)容區(qū)塊,比如章節(jié)、頁眉、頁腳或頁面的其他部分。可以和h1、 h2...等元素結(jié)合起來使用，表示文檔結(jié)構(gòu)。
例：HTML5中<section>...</section>;HTML4中<div>...</div>。
article元素
表示頁面中一塊與上下文不相關(guān)的獨立內(nèi)容。比如一篇文章。
aside元素
表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。
header元素
表示頁面中一個內(nèi)容區(qū)塊或真?zhèn)€頁面的標題。
hgroup元素
表示對真?zhèn)€頁面或頁面中的一個內(nèi)容區(qū)塊的標題進行組合。
footer元素
表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注。一般來說，他會包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。
nav元素
表示頁面中導航鏈接的部分。
figure元素
表示一段獨立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。
figure 定義媒介內(nèi)容的分組, 以及它們的標題。
figcaption 定義 figure 元素的標題。
例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>HTML4中常寫作
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>新增的其他元素
video元素
定義視頻。像電影片段或其他視頻流。例：
<video src="movie.ogg" controls="controls">video元素</video>HTML4中寫法：
<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>audio元素
定義音頻。如音樂或其他音頻流。例：
<audio src ="someaudio.wav">audio元素</audio>html4中寫法：
<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>embed元素
用來嵌入內(nèi)容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />
HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>
mark元素
主要用來在視覺上向用戶呈現(xiàn)哪些需要突出顯示或高亮顯示的文字。典型應(yīng)用搜索結(jié)果中高亮顯示搜素關(guān)鍵字。
HTML5<mark></mark>;HTML4 <span></span>。
progress元素
表示運行中的進程，可以使用progress元素顯示JavaScript中耗時時間函數(shù)的進程。等待中……、請稍后等。<progress></progress>。
time元素
表示日期或時間，也可以兩者同時。
ruby元素
定義 ruby 注釋(中文注音或字符)。
與 <ruby> 以及 <rt> 標簽一同使用。ruby 元素由一個或多個字符(需要一個解釋/發(fā)音)和一個提供該信息的 rt 元素組成，
還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內(nèi)容。
<ruby>
漢朝<rt><rp>(</rp>西漢和東漢<rp>)</rp></rt>
</ruby>
rt元素
定義字符(中文注音或字符)的解釋或發(fā)音。
rp元素
在 ruby 注釋中使用, 以定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。
wbr元素
表示軟換行。與br元素的區(qū)別：br元素表示此處必須換行；wbr表示瀏覽器窗口或父級元素足弓寬時(沒必要換行時)，
不換行，而寬度不夠時主動在此處換行。
canvas元素
定義圖形，比如圖表和其他圖像。<canvas> 元素只是圖形容器(畫布)，必須使用腳本來繪制圖形。
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>command元素 各版本瀏覽器支持有問題
表示命令按鈕，比如單選按鈕、復選框或按鈕。
只有當 command 元素位于 menu 元素內(nèi)時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規(guī)定鍵盤快捷鍵。。
<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>details標簽
用于描述文檔或文檔某個部分的細節(jié) 。
可與 summary 標簽配合使用，summary可以為 details 定義標題。
標題是可見的，用戶點擊標題時，會顯示出 details。summary應(yīng)該是details的第一個子元素。
<details>
<summary>迪麗熱巴</summary>
<p>迪麗熱巴（Dilraba），1992年6月3日出生于新疆烏魯木齊市，中國內(nèi)地影視女演員。</p>
</details>fieldset標簽
組合表單中的相關(guān)元素
fieldset 標簽用于從邏輯上將表單中的元素組合起來。
legend 標簽為 fieldset 元素定義標題。
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>datalist標簽
定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來綁定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>datagrid標簽 如何用？
定義可選數(shù)據(jù)的列表。datagrid 作為樹列表來顯示。
如果把 multiple 屬性設(shè)置為 true，則可以在列表中選取一個以上的項目。
keygen標簽 如何用?
標簽規(guī)定用于表單的密鑰對生成器字段。
當提交表單時，私鑰存儲在本地，公鑰發(fā)送到服務(wù)器。
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>output標簽
定義不同類型的輸出，比如腳本的輸出。
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>source標簽
標簽為媒介元素(比如 <video> 和 <audio>)定義媒介資源。
menu標簽
定義菜單列表。當希望列出表單控件時使用該標簽。注意與nav的區(qū)別，menu專門用于表單控件。
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>abbr: 標記一個縮寫
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
顯示結(jié)果
The PRC was founded in 1949.
mark標簽
定義有記號的文本。
<mark>有記號的文本</mark>
progress 定義任何類型的任務(wù)的進度。
<progress min="0" max="100" value="60"></progress>
記得在過去的Web前端開發(fā)中，如果你需要繪圖或者生成相關(guān)圖形的話，使用Flash可能是你唯一或者說最強大的實現(xiàn)方式，而在近些年的技術(shù)熱點HTML5標準中，（畫布）能夠更加方便的幫助你實現(xiàn)2D繪制圖形圖像及其各種動畫效果功能。
首先我們先來了解一下什么是HTML Canvas？
我們可以在HTML中使用屬性width和height來定義Canvas。但是實現(xiàn)Canvas的相關(guān)功能主要還依賴于Javascript實現(xiàn)，即HTML5 Canvas API。我們使用javascript來訪問和控制Canvas相關(guān)的區(qū)域，比如調(diào)用相關(guān)繪圖的方法，用來動態(tài)的生成需要的動畫或者圖形。
接下來我們來看看canvas的特性：
互動性：Canvas支持互動，可以很好的響應(yīng)用戶的操作，我們可以通過Javascript來監(jiān)鍵盤，鼠標，及其觸摸設(shè)備相關(guān)事件。
動 畫：任何被canvas繪制的圖形都可以添加動畫，簡單的彈跳球或者復雜的HTML5游戲都可以實現(xiàn)
靈活性：開發(fā)人員可以使用Canvas來繪制任何的內(nèi)容，比如，直線，圖形，文字，圖片等，可以包含動畫或者不包含。同時你可以添加音頻或者視頻瀏覽器支持：幾乎所有的現(xiàn)代瀏覽器都支持，并且被廣泛的各種設(shè)備支持，例如，桌面，平板，智能手機等等。
流行度：canvas目前很流行，很多的開發(fā)人員都使用它來開發(fā)類似游戲或者繪圖類應(yīng)用
web標準：只需要有瀏覽器就可以運行，而非flash或者silverlight，需要安裝相關(guān)的插件
開發(fā)一次，任何瀏覽器都可以運行（當然，不包括老式瀏覽器）
可以使用免費擁有大量的開發(fā)工具及其類庫。
使用HTML5 Canvas我們能開發(fā)那些相關(guān)產(chǎn)品或者應(yīng)用呢？
1 可視化數(shù)據(jù)： 各類統(tǒng)計圖表，比如:百度的echart
2 場景秀：用Canvas實現(xiàn)動態(tài)的廣告效果能夠非常融洽的跨平臺運行。如:手機中微產(chǎn)品.在移動端兼容性很好。
3 游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas成為HTML5小游戲開發(fā)首選。現(xiàn)階段h5做游戲,營業(yè)方式不是很明確. 25 超棒的 HTML5 Canvas 游戲。
4 其他可嵌入網(wǎng)站的內(nèi)容 (多用于活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。
5 趨勢=> 模擬器： 無論從視覺效果還是核心功能方面來說，模擬器產(chǎn)品可以完全由JavaScript來實現(xiàn)。模擬真實硬件環(huán)境,如移動端各種類型手機.
6 趨勢=> 遠程計算機控制： Canvas可以讓開發(fā)者更好地實現(xiàn)基于Web的數(shù)據(jù)傳輸，構(gòu)建一個完美的可視化控制界面。
7 趨勢=> 圖形編輯器： Photoshop圖形編輯器將能夠100%基于Web實現(xiàn)。
如何使用HTML5 Canvas？
使用HTML5 canvas其實非常簡單， 每一個canvas都擁有一個上下文（context）。使用它你可以來調(diào)用相關(guān)的畫布方法。
<canvas id="mycanvas" width="500" height ="400">
<p>您的瀏覽器不支持HTML5 Canvas</p>
</canvas>
以上代碼我們在HTML中添加了一個canvas標簽，如果瀏覽器不支持canvas，會顯示<p>標簽的內(nèi)容，當然，如果你需要支持老式瀏覽器你也可以使用flash或者其它方法來做一個替代的解決方案。
var canvas = document.getElementById('mycanvas'),
context = canvas.getContext('2d');
以上代碼我們通過canvas取到2D的context。
在HTML5 Canvas的2D結(jié)構(gòu)中，坐標（0,0）在左上方，這和傳統(tǒng)的坐標不太一樣。大家需要注意一下，如下圖所示：
save():保存當前環(huán)境的狀態(tài)
restore():返回之前保存過的路徑狀態(tài)和屬性
createEvent()
getContext():返回一個對象，指出訪問繪圖功能必要的API
toDateURL():返回canvas圖像的URL
fillStyle:設(shè)置或返回用于填充繪畫的顏色、漸變或模式
strokeStyle:設(shè)置或返回用于筆觸的顏色、漸變或模式
shadowColor:設(shè)置或返回用于陰影的顏色
shadowBlur:設(shè)置或返回用于陰影的模糊級別
shadowOffsetX:設(shè)置或返回陰影距形狀的水平距離
shadowOffsetY:設(shè)置或返回陰影距形狀的垂直距離
createLinearGradient():創(chuàng)建線性漸變（用在畫布內(nèi)容上）
createPattern():在指定的方向上重復指定的元素
createRadialGradient():創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上）
addColorStop():規(guī)定漸變對象中的顏色和停止位置
lineCap:設(shè)置或返回線條的結(jié)束端點樣式
lineJoin:設(shè)置或返回兩條線相交時，所創(chuàng)建的拐角類型
lineWidth:設(shè)置或返回當前的線段寬度
miterLimit:設(shè)置或返回最大斜接長度
fill():填充當前繪圖(路徑)
stroke():繪制已定義的路徑
beginPath():起始一條路徑，或重置當前路徑
moveTo():把路徑移動到畫布中的指定點，不創(chuàng)建線條
closePath():創(chuàng)建從當前點回到起始點的路徑
lineTo():添加一個新點，創(chuàng)建從該點到最后指定點的線條
clip():從原始畫布剪切任意形狀和尺寸的區(qū)域
quadraticCurveTo():創(chuàng)建二次貝塞爾曲線
bezierCurveTo():創(chuàng)建三次貝塞爾曲線
arc():創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）
arcTo():創(chuàng)建兩切線之間的弧/曲線
isPointInPath():如果指定的點位于當前路徑中，返回布爾值
scale():縮放當前繪圖至更大或更小
rotate():旋轉(zhuǎn)當前繪圖
translate():重新映射畫布上的（0，0）位置
transform():替換繪圖的當前轉(zhuǎn)換矩陣
setTransform():將當前轉(zhuǎn)換重置為單位矩陣，然后運行transform（）
font:設(shè)置或返回文本內(nèi)容的當前字體屬性
textAlign:設(shè)置或返回文本內(nèi)容的當前對齊方式
textBaseline:設(shè)置或返回在繪制文本時使用的的當前文本基線
fillText():在畫布上繪制"被填充的"文本
strokeText():在畫布上繪制文本（無填充）
measureText():返回包含指定文本寬度的對象
drawImage():向畫布上繪制圖像、畫布或視頻
Canvas的API-像素操作方法和屬性
width:返回ImageData對象的寬度
height:返回ImageData對象的高度
data:返回一個對象，其包含指定的ImageData對象的圖像數(shù)據(jù)
createImageData():創(chuàng)建新的、空白的I馬哥Data對象
getImageData():返回ImageData對象，該對象為畫布上指定的矩形復制像素數(shù)據(jù)
putImageData():把圖像數(shù)據(jù)（從指定的ImageData對象）放回畫布上
globalAlpha:設(shè)置或返回繪圖的當前alpha或透明值
globalCompositeOperation:設(shè)置或返回新圖像如何繪制到已有的圖像上
直接使用Canvas來繪制圖形相對來說比較乏味并且麻煩，所以在現(xiàn)代的HTML5 Canvas中我們使用一些現(xiàn)成的第三方類庫幫助我們多快好省的實現(xiàn)圖形繪制的功能：Echart.js
，只要會往`<canvas>`里面畫一個長方形，就可以做出來這樣子的效果，畫比較多的正方形實現(xiàn)像素風頭像生成器：
趕時間的客官可以直接去`正文開始`那里。
今天有個想法，整成手把手系列，就是假設(shè)客官是一個從來沒有接觸過網(wǎng)頁編輯、代碼、編程的新手。所以會說的比較詳細，比較累贅，大神們笑笑點個贊就好了，哈哈。
我的想法（初心）是，將一個有興趣寫網(wǎng)頁，但是不知道從何開始的人，通過幾篇很小的實例，讓他產(chǎn)生興趣，跟出效果，形成自己動手去學習的動力，便是最好了。
所以，努力寫得通俗易懂，簡單直接，拋開別的因素，先實現(xiàn)出來再說，那時候?qū)W寫代碼的時候也是聽師傅說“先有后優(yōu)”，所以，粗糙點不管，能說明問題便好。
有客官對于我前面幾天碼的字，有反饋，有問題提出來，非常感謝有人搭理我。提出來的1,web字體設(shè)置的方法，2,響應(yīng)式布局，3,網(wǎng)頁上面音頻播放的多瀏覽器兼容問題，4,不知從何入手學習一個東西...我都在拿著小本記下來，閑暇時間趕緊去搜集一些比較好的方法，盡力去更新分享這些方面的一小點經(jīng)驗，還請各位客官多多搭理我呀。
這里先把昨天最后那個小坑給添一下，那個響應(yīng)式布局，是通過在CSS里面定義不同屏幕寬度時候使用不同的樣式，直接帖代碼出來吧：
@media screen and ( max-width: 1920px ) {
div.content {
height: 600px;
width: 300px;
float: left;
padding-top: 97px;
}
div.sider {
float: right;
}
body {
width: 600.111111px;
margin: 0 auto;
}
}
@media screen and ( max-width: 720px ) {
div {
display: block;
clear:both;
height: auto;
}
div.content {
display: block;
height: auto;
width: 100%;
}
div.sider {
display: block;
width: 100%;
padding-bottom: 100px;
}
body {
margin: 0;
padding: 0;
width: 100%;
}
}
在1920到720這么寬的時候，兩個div左右浮動，在小于720的時候，兩個div顯示模式改為塊級元素，寬度定義為100%，也就變成豎著排列了。就這樣子。
接下來，正文開始：
1, 只用一個文件：`t.html`就好了，忘掉那些什么最佳實踐，干就完了，新建文本文件，然后重命名成`t.html`，注意，重命名成網(wǎng)頁之后，文件的圖標會發(fā)生變化，不是以前文本文檔時候的樣子，如果圖標沒變，你極可能重命名成了`t.html.txt`這樣子的，我的小視頻里面有如何設(shè)置windows7顯示擴展名，看看也是極好的。
2, 很簡單的網(wǎng)頁基本代碼：
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>像素風頭像生成器</title> </head> <body> <div id="wrapper"> <!--第一個注釋，這里等下放畫板（canvas標簽）--> </div> <!--第二個注釋，這里等下放javascript代碼--> </body> </html>
復制上面的代碼到`t.html`里面，然后保存，存成utf-8編碼格式(實例001里面有個圖片演示了怎么保存)。
3, 繼續(xù)編輯`t.html`文件，在兩個注釋的地方，第一個放入`<canvas>`標簽，同時給它樣式，定義大小(寬500,高400），還有一個邊框（1像素實心線奶奶灰色），`<canvas>標簽中間的一句話，在不支持canvas標簽的瀏覽器里面會被顯示出來`：
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"> 快看，這里有一個還在用IE6/8的老實人，大家快來~~ </canvas>
4, 第2步里面的第二個注釋的位置，加入javascript代碼，看代碼注釋理解語句的含義：
<script type="text/javascript">
//在html中用ID找到叫做`mycanvas`的畫布，給它取名叫c
var c = document.getElementById("myCanvas");
//通過這個c（剛才找到的畫布），拿到一套可以畫2D圖片的基本工具， 取名叫ctx，可以理解成拿起一根畫筆
var ctx=c.getContext("2d");
//給ctx這根畫筆，蘸上橙色
ctx.fillStyle="orange";
//用ctx這根畫筆，在x=100,y=90這個坐標位置，畫一個長80,寬40的長方形
ctx.fillRect(100,90,80,40);
</script>
效果：
在畫布的左上角，坐標為0,0
大小位置標注：
嗯，就是這樣
是不是很簡單呀，在網(wǎng)上可以搜索`html5 canvas 基本開關(guān)`了解更多，不知客官可否通過這個別樣的“畫布”畫出來一個五角星呢？歡迎挑戰(zhàn)。
晚安
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
