整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
昨天我們在《使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作》（目錄在結尾）中學習了設置單元格以及其中內容的空間間距和背景顏色。
其中添加列向單元格背景顏色只需要修改對應的<tr>標簽中的style屬性，而修改行向標簽需要修改不同<tr></tr>標簽中的<td>標簽的style屬性，這樣操作起來就非常的麻煩，那有沒有簡便的修改行向單元格背景顏色的方法呢？
當然有！
開發團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題，下面讓我們詳細學習。
<colgroup></colgroup>標簽是一個給行向單元格打組的標簽，在頁面中不會顯示。
<col></col>標簽是來具體設置行向單元格數量和顏色的標簽。
示例代碼如下：
<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>這段代碼添加到"第一個頁面.html"當中就可以，具體代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>頁面效果如圖：
因為第一列和最后一列只有一行所以，也都變紅了。
其中span的數量代表行數。
如果把span等號后面的數改成2，因為表格只有兩行，所以整個表格都紅了。
表格嵌套
我們可以通過向表格中添加表格實現表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。
代碼示例如下：我們把"一列一行"分割成列向兩個單元格。
<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>使用
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>這段代碼替換文字"一列一行"即可。
頁面效果如圖所示：
留個思考題，大家可以思考一下行向分割單元格怎么寫。
今天的內容結束了。
全部示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
學到這里，相信大家已經有獨立讀懂HTML代碼說明的能力了，明天我會為大家講解16進制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎的話，學完16進制顏色表示方法后，基本上就可以無障礙的閱讀html代碼參考手冊了，如果閱讀起來還是有困難，請繼續看后面我為大家講解一些常用元素及屬性的文章，已及html中特殊符號的輸入方法，全部做完后再結束這套教程。
如果您有任何疑問或不解歡迎關注并私信我。
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
一、項目背景】
createjs是一個基于canvas的制作H5游戲、動畫、交互的庫。包括EaselJs、TweenJs、SoundJs、 PreloadJs四個部分。它基于容器進行展示，其中根容器是stage（舞臺）對象。
今天教大家用EaselJs、TweenJs結合做一個顏色配對游戲。
【二、項目準備】
1、去下方網站：
http://www.createjs.cc/然后下載EaselJs、TweenJs這兩個模塊。
2、軟件：Dreamweaver
【三、項目目標】
隨機產生4種顏色，讓下方的色塊通過鼠標移動，匹配上方的顏色框。如果上方顏色框與下方色塊顏色相同。全部色塊匹配完成則為成功。
【四、項目實現】
1、導入EaselJs、TweenJs模塊。
<script src="js/easeljs-0.7.1.min.js"></script>
<script src="js/tweenjs-0.5.1.min.js"></script>2、body 創建畫布canvas 設置畫布大小，畫布添加描邊 ，id屬性。
<canvas id="canvas" width="600" height="400" style="border: black solid 1px"></canvas>3、創建shapes.js文件。定義一個初始化init()方法 ，創建stage對象。
function init() {
stage = new createjs.Stage("canvas");
}4、定義畫圖形方法buildShapes()，調用createjs.Shape()方法 用graphics繪制描邊正方形。填充顏色。
function buildShapes() {
var colors = ['blue', 'red', 'green', 'yellow'];
var i, shape, slot;
for (i = 0; i < 4; i++) {
//slots 描邊正方形
slot = new createjs.Shape();
slots.push(slot);
//shapes 正方形
shape = new createjs.Shape();
shape.graphics.beginFill(colors[i]);
shape.graphics.drawRect(0, 0, 100, 100);
shape.regX = shape.regY = 50;
shape.key = i;
shapes.push(shape);
}
}5、設置正方形x,y的位置， for循環隨機填充顏色，添加在stage上。
slot.graphics.beginStroke(colors[i]);
slot.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255, 1));
slot.graphics.drawRect(0, 0, 100, 100);
slot.regX = slot.regY = 50;
slot.key = i;
slot.y = 80;
slot.x = (i * 130) + 100;
stage.addChild(slot);6、定義setShapes方法，for循環隨機產生一個r值，添加到shapes。產生移動的正方形。添加到舞臺（stages）上。
function setShapes() {
var i, r, shape;
var l = shapes.length;
for (i = 0; i < l; i++) {
r = Math.floor(Math.random() * shapes.length);
shape = shapes[r];
shape.homeY = 320;
shape.homeX = (i * 130) + 100;
shape.y = shape.homeY;
shape.x = shape.homeX;
stage.addChild(shape);
shapes.splice(r, 1);
}
}7、添加鼠標事件。控制正方形移動。
shape.addEventListener("mousedown", startDrag);8、定義開始游戲方法startGame，設置游戲的幀數，添加監聽事件。
function startGame() {
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function (e) {
stage.update();
});
}9、判斷游戲方法startDrag(e)
1）獲取當前鼠標的坐標。
var shape = e.target;2）讓鼠標的坐標等于填充正方形的坐標。
stage.addEventListener('stagemousemove', function (e) {
shape.x = e.stageX;
shape.y = e.stageY;
});3）hitTest方法。測試圖像是否與顏色相同的框有交集，判斷顏色是否相同。
if (slot.hitTest(pt.x, pt.y)) {
shape.removeEventListener("mousedown",startDrag);
score++;
createjs.Tween.get(shape).to({x:slot.x, y:slot.y}, 200, createjs.Ease.quadOut).call(checkGame);
console.log('h');
}
else {
}4）TweenJs設置動畫效果。
createjs.Tween.get(shape).to({x:shape.homeX, y:shape.homeY}, 200, createjs.Ease.quadOut);10、定義贏的方法checkGame ，用score分別代表四種顏色色塊，判斷score的值。
function checkGame(){
if(score == 4){
alert('You Win!');
}
}11、在init（）中，調用方法，實現效果
buildShapes();
setShapes();
startGame();【五、效果展示】
1、f12運行到chrome瀏覽器。
2、拖動隨機顏色塊，匹配顏色框。
3、四個顏色塊匹配完成 彈框 (勝利）！！
【六、總結】
1、本文主要介紹了createjs中EaselJs、TweenJs的用法，以及對stage是如何創建的，在stage上怎么去繪制圖形。在頁面上如何去呈現stage。
2、就本項目中的難點，重點，提供了詳細的講解和提供有效的解決方案。
3、大家可以嘗試了解createjs的其他模塊，官網上有對應的API文檔供大家學習。
4、按照操作步驟，自己嘗試去做。自己實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
5、需要本文源碼的小伙伴，后臺回復“顏色配對”四個字，即可獲取。
****看完本文有收獲？請轉發分享給更多的人****
想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/
lt;marquee>...</marquee>普通卷動
<marquee behavior=slide>...</marquee>滑動
<marquee behavior=scroll>...</marquee>預設卷動
<marquee behavior=alternate>...</marquee>來回卷動
<marquee direction=down>...</marquee>向下卷動
<marquee direction=up>...</marquee>向上卷動
<marquee direction=right></marquee>向右卷動
<marquee direction=left></marquee>向左卷動
<marquee loop=2>...</marquee>卷動次數
<marquee width=180>...</marquee>設定寬度
<marquee height=30>...</marquee>設定高度
<marquee bgcolor=FF0000>...</marquee>設定背景顏色
<marquee scrollamount=30>...</marquee>設定卷動距離
<marquee scrolldelay=300>...</marquee>設定卷動時間
<!>字體效果
<h1>...</h1>標題字(最大)
<h6>...</h6>標題字(最小)
<b>...</b>粗體字
<strong>...</strong>粗體字(強調)
<i>...</i>斜體字
<em>...</em>斜體字(強調)
<dfn>...</dfn>斜體字(表示定義)
<u>...</u>底線
<ins>...</ins>底線(表示插入文字)
<strike>...</strike>橫線
<s>...</s>刪除線
<del>...</del>刪除線(表示刪除)
<kbd>...</kbd>鍵盤文字
<tt>...</tt> 打字體
<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>固定寬度字體(不執行標記符號)
<listing>...</listing> 固定寬度小字體
<font color=00ff00>...</font>字體顏色
<font size=1>...</font>最小字體
<font style =font-size:100 px>...</font>無限增大
<!>區斷標記
<hr>水平線
<hr size=9>水平線(設定大小)
<hr width=80%>水平線(設定寬度)
<hr color=ff0000>水平線(設定顏色)
<br>(換行)
<nobr>...</nobr>水域(不換行)
<p>...</p>水域(段落)
<center>...</center>置中
<!>連結格式
<base href=位址>(預設好連結路徑)
<a href=位址></a>外部連結
<a href=位址 target=_blank></a>外部連結(另開新視窗)
<a href=位址 target=_top></a>外部連結(全視窗連結)
<a href=位址 target=頁框名></a>外部連結(在指定頁框連結)
<!>貼圖/音樂
<img src=圖片位址>貼圖
<img src=圖片位址 width=180>設定圖片寬度
<img src=圖片位址 height=30>設定圖片高度
<img src=圖片位址 alt=提示文字>設定圖片提示文字
<img src=圖片位址 border=1>設定圖片邊框
<bgsound src=MID音樂檔位址>背景音樂設定
<!>表格語法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)
<!>分割視窗
<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整
<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整
<frameset cols="20%,*">分割左右兩個框架
<frameset cols="20%,*,20%">分割左中右三個框架
<分割上下兩個框架
<frameset rows="20%,*,20%">分割上中下三個框架
<! - - ... - -> 注解
<a href target> 指定超連結的分割視窗
<a href=#錨的名稱> 指定錨名稱的超連結
<a href> 指定超連結
<a name=錨的名稱> 被連結點的名稱
<address>....</address> 用來顯示電子郵箱地址
<b> 粗體字
<base target> 指定超連結的分割視窗
<basefont size> 更改預設字形大小
<bgsound src> 加入背景音樂
<big> 顯示大字體
<blink> 閃爍的文字
<body text link vlink> 設定文字顏色
<body> 顯示本文
<br> 換行
<caption align> 設定表格標題位置
<caption>...</caption> 為表格加上標題
<center> 向中對齊
<cite>...<cite> 用於引經據典的文字
<code>...</code> 用於列出一段程式碼
<comment>...</comment> 加上注解
<dd> 設定定義列表的項目解說
<dfn>...</dfn> 顯示"定義"文字
<dir>...</dir> 列表文字標簽
<dl>...</dl> 設定定義列表的標簽
<dt> 設定定義列表的項目
<em> 強調之用
<font face> 任意指定所用的字形
<font face> 任意指定所用的字形
<font size> 設定字體大小
<form action> 設定戶動式表單的處理方式
<form method> 設定戶動式表單之資料傳送方式
<frame marginheight> 設定視窗的上下邊界
<frame marginwidth> 設定視窗的左右邊界
<frame name> 為分割視窗命名
<frame noresize> 鎖住分割視窗的大小
<frame scrolling> 設定分割視窗的卷軸
<frame src> 將html檔加入視窗
<frameset cols> 將視窗分割成左右的子視窗
<frameset rows> 將視窗分割成上下的子視窗
<frameset>...</frameset> 劃分分割視窗
<h1>~<h6> 設定文字大小
<head> 標示文件資訊
<hr> 加上分格線
<html> 文件的開始與結束
<i> 斜體字
<img align> 調整圖形影像的位置
<img alt> 為你的圖形影像加注
<img dynsrc loop> 加入影片
<img height width> 插入圖片并預設圖形大小
<img hspace> 插入圖片并預設圖形的左右邊界
<img lowsrc> 預載圖片功能
<img src border> 設定圖片邊界
<img src> 插入圖片
<img vspace> 插入圖片并預設圖形的上下邊界
<input type name value> 在表單中加入輸入欄位
<isindex> 定義查詢用表單
<kbd>...</kbd> 表示使用者輸入文字
<li type>...</li> 列表的項目 ( 可指定符號 )
<marquee> 跑馬燈效果
<menu>...</menu> 條列文字標簽
<meta name="refresh" content url> 自動更新文件內容
<multiple> 可同時選擇多項的列表欄
<noframe> 定義不出現分割視窗的文字
<ol>...</ol> 有序號的列表
<option> 定義表單中列表欄的項目
<p align> 設定對齊方向
<p> 分段
<person>...</person> 顯示人名
<pre> 使用原有排列
<samp>...</samp> 用於引用字
<select>...</select> 在表單中定義列表欄
<small> 顯示小字體
<strike> 文字加橫線
<strong> 用於加強語氣
<sub> 下標字
<sup> 上標字
<table border=n> 調整表格的寬線高度
<table cellpadding> 調整資料欄位之邊界
<table cellspacing> 調整表格線的寬度
<table height> 調整表格的高度
<table width> 調整表格的寬度
<table>...</table> 產生表格的標簽
<td align> 調整表格欄位之左右對齊
<td bgcolor> 設定表格欄位之背景顏色
<td colspan rowspan> 表格欄位的合并
<td nowrap> 設定表格欄位不換行
<td valign> 調整表格欄位之上下對齊
<td width> 調整表格欄位寬度
<td>...</td> 定義表格的資料欄位
<textarea name rows cols> 表單中加入多少列的文字輸入欄
<textarea wrap> 決定文字輸入欄是自動否換行
<th>...</th> 定義表格的標頭欄位
<title> 文件標題
<tr>...</tr> 定義表格美一行
<tt> 打字機字體
<u> 文字加底線
<ul type>...</ul> 無序號的列表 ( 可指定符號 )
<var>...</var> 用於顯示變數
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
