●目 錄 第1章 HTML5概述 11.1 HTML5簡介 11.1.1 HTML發展歷程 11.1.2 HTML開發組織 21.1.3 HTML5的新特性 21.2 HTML的標簽構成 31.2.1 HTML標簽概述 31.2.2 開始標簽 41.2.3 頭部標簽 41.2.4 標題標簽
51.2.5 主體標簽<body> 51.2.6 編寫時注意事項 51.3 HTML文件的編寫方法 61.3.1 手工編寫頁面 61.3.2 使用可視化軟件制作頁面 71.3.3 使用瀏覽器瀏覽HTML文件 101.4 綜合實例——在瀏覽器中輸出“你好” 11知識點提煉 11習題 11第2章 HTM素與屬性 122.1 HTML5的語法變化 122.1.1 HTML5中的標記方法 122.1.2 HTML5與之前版本的不同 132.2 素和素 142.2.1 新增素 142.2.2 新增的行內(inline素 152.2.3 新增的塊級(block素 152.2.4 新增的in素的類型 162.2.5 新增的素與素 162.2.6 素 172.3 新增的屬性和廢除的屬性 182.3.1 新增的屬性 182.3.2 廢除的屬性 202.4 全局屬性 222.4.1 designMode屬性 222.4.2 hidden屬性 222.4.3 contentEditable屬性 222.4.4 tabindex屬性 232.4.5 spellcheck屬性 232.5 綜合實例——檢查單詞的拼寫情況 24知識點提煉 24習題 24第3章 HTML5表單 253.1 表單概述 253.2 表單素 263.2.1 表單標記及其屬性 263.2.2 表素 293.3 表素 403.3.1 新素與屬性 403.3.2 驗證表單 463.3.3 新增和改良素 483.4 綜合實例——search搜索類型的in素 55知識點提煉 56習題 56第4章 文件與拖放 584.1 選擇文件 584.1.1 FileList對像與file對像 584.1.2 Blob對像的屬性 594.1.3 通過類型過濾文件 604.2 使用FileReader對像讀取文件 624.2.1 檢測瀏覽器對FileReader對像的支持 624.2.2 FileReader對像的方法 624.2.3 實現圖片的預覽 624.2.4 文本文件的讀取 644.2.5 FileReader對像中的事件 654.3 拖放API的使用 664.3.1 實現拖放的步驟 664.3.2 拖放實例 674.4 dataTransfer對像 694.4.1 設置拖放效果 694.4.2 設置拖放圖標 704.5 綜合實例——使用拖放API將商品拖入購物車 71知識點提煉 73習題 73第5章 繪制圖形 745.1 canvas基礎 745.1.1 can素簡介 745.1.2 插入can素 745.1.3 繪制矩形實例 765.2 使用路徑繪制圓形 775.2.1 繪制圓形 775.2.2 繪制火柴人 785.2.3 繪制貝塞爾曲線 805.3 運用樣式與顏色 825.3.1 fillStyle 和 strokeStyle屬性 825.3.2 globalAlpha屬性 845.3.3 線型Line styles 855.4 實現圖形的變形 875.4.1 坐標的變換 875.4.2 矩陣變換 885.5 繪制漸變圖形 915.5.1 繪制線性漸變 915.5.2 繪制徑向漸變 925.6 繪制陰影和組合圖形 935.6.1 繪制陰影 935.6.2 繪制組合圖形 945.7 繪制文字 965.8 應用圖像 975.8.1 繪制圖像 975.8.2 圖像的局部放大 995.8.3 圖像平鋪 1005.8.4 圖像裁剪 1025.8.5 處理像素 1025.9 保存與恢復狀態 1035.10 文件的保存 1045.11 使用畫布繪制動畫 1045.12 綜合實例——繪制桌面時鐘 105知識點提煉 108習題 108第6章 HTML5中的多媒體 1096.1 HTML5頁面中的多媒體 1096.2 素的屬性 1106.3 素的方法 1146.3.1 媒體播放時的方法 1146.3.2 canPlayType方法 1156.4 素的事件 1166.4.1 事件處理 1166.4.2 事件介紹 1166.5 綜合實例——用timeupdate事件動態顯示媒體文件播放時間 117知識點提煉 119習題 119第7章 HTML5的數據存儲 1207.1 Web Storage 1207.1.1 Web Storage簡介 1207.1.2 WebStorage的API 1217.1.3 兩種不同存儲類型的實例——計數器 1227.1.4 JSON對像的存儲實例——用戶信息卡 1247.2 Web SQL數據庫 1267.2.1 Web SQL數據庫簡介 1267.2.2 Web SQL Database API的使用 1267.3 跨文檔消息通信 1287.3.1 postMessageAPI的使用 1287.3.2 跨文檔消息傳輸 1287.4 綜合實例——簡單的Web留言本 130知識點提煉 132習題 132第8章 離線Web應用和地理定位 1338.1 HTML5離線Web應用 1338.1.1 HTML5離線Web應用概述 1338.1.2 創建HTML5離線應用 1358.1.3 瀏覽器與服務器的交互 1378.1.4 applicationCache對像 1388.2 獲取地理位置 1428.2.1 Geolocation API概述 1428.2.2 position對像 1448.3 綜合實例——在頁面上使用google地圖 146知識點提煉 147習題 148第9章 CSS3基礎 1499.1 CSS3概述 1499.2 CSS3新特性 1509.3 CSS3選擇器 1519.3.1 選擇器概述 1519.3.2 屬性選擇器 1529.3.3 結構性偽類選擇器 1549.3.4 素狀態偽類選擇器 1619.3.5 通素選擇器 1669.4 綜合實例——生動的列表導航 167知識點提煉 170習題 171第10章 CSS字體與文本相關屬性 17210.1 給文字添加陰影——text-shadow屬性 17210.1.1 text-shadow屬性的使用方法 17210.1.2 指定多個陰影 17410.2 文本相關屬性 17410.2.1 文本自動換行：word-break 17410.2.2 長單詞和URL地址換行 17510.3 CSS 3新增的服務器字體 17610.3.1 使用服務器字體 17610.3.2 定義粗體、斜體字 17710.3.3 優先使用客戶端字體 17910.4 使用font-size-adjust屬性微調字體大小 18010.4.1 字體不同導致文字大小的不同 18010.4.2 font-size-adjust屬性的使用方法 18110.4.3 font-size-adjust屬性的使用示例 18110.5 綜合實例——設計立體文本 182知識點提煉 183習題 183第11章 CSS3美化背景與邊框 18411.1 設置背景 18411.1.1 設置背景顏色 18411.1.2 設置背景圖片 18611.1.3 CSS 3新增的與背景相關的屬性 18911.2 邊框設置 19311.2.1 設置邊框的線寬 19311.2.2 設置邊框的樣式 19511.2.3 設置邊框的顏色 19611.2.4 邊框綜合屬性 19711.2.5 CSS 3新增的與邊框相關的屬性 19811.3 內外邊距的相關屬性 20111.3.1 設置內邊距 20111.3.2 設置外邊距 20211.4 綜合實例——設計企業門戶網站首頁 203知識點提煉 205習題 205第12章 變形與動畫相關屬性 20612.1 CSS變形(Transformation) 20612.1.1 變形基礎——transform屬性 20612.1.2 旋轉動畫——rotate()函數 20712.1.3 縮放動畫——scale()函數 20812.1.4 移動動畫——translate()函數 21012.1.5 傾斜動畫——skew()函數 21112.1.6 變形原點——transform-origin屬性 21312.2 CSS過渡——transition屬性 21412.2.1 設置過渡的CSS屬性——transition-property屬性 21412.2.2 設置過渡的時間——transition-duration屬性 21612.2.3 設置過渡延遲時間——transition-delay屬性 21712.2.4 設置過渡效果——transition-timing-function屬性 21812.3 CSS動畫——animation屬性 22012.4 綜合實例——模擬進度條效果 223知識點提煉 224習題 225第13章 JavaScript概述 22613.1 JavaScript概貌 22613.1.1 JavaScript的歷史起源 22613.1.2 JavaScript的主要特點 22713.1.3 JavaScript成功案例 22713.2 搭建JavaScript開發環境 22913.2.1 硬件要求 22913.2.2 軟件要求 22913.2.3 瀏覽器對JavaScript的支持 23013.3 編寫JavaScript的工具 23113.3.1 Adobe Dreamweaver 23113.3.2 Microsoft FrontPage 23213.4 JavaScript在HTML中的使用 23213.4.1 在頁面中直接嵌入JavaScript 23213.4.2 鏈接外部JavaScript 23313.5 綜合實例——用JS輸出中文字符串 233知識點提煉 234習題 234第14章 JavaScript語言基礎 23514.1 JavaScript數據結構 23514.1.1 標識符 23514.1.2 關鍵字 23614.1.3 常量 23614.1.4 變量 23614.2 數據類型 23814.2.1 數字型數據 23814.2.2 字符串型數據 23914.2.3 布爾型數據 24014.2.4 特殊數據類型 24014.2.5 數據類型的轉換規則 24114.3 運算符與表達式 24214.3.1 算術運算符 24314.3.2 比較運算符 24314.3.3 賦值運算符 24414.3.4 字符串運算符 24514.3.5 布爾運算符 24514.3.6 條件運算符 24514.3.7 其他運算符 24614.3.8 運算符優先級 24714.3.9 表達式 24814.4 流程控制語句 24814.4.1 條件控制語句 24814.4.2 循環控制語句 25514.4.3 跳轉語句 25714.5 函數 25914.5.1 函數的定義 25914.5.2 函數的調用 26014.5.3 幾種特殊的函數 26314.6 綜合實例——將長數字分位顯示 268知識點提煉 269習題 269第15章 JavaScript內置對像 27115.1 字符串對像String 27115.1.1 search方法 27115.1.2 match方法 27215.1.3 split方法 27215.1.4 replace方法 27315.2 常用的數值處理對像 27315.2.1 Math對像 27315.2.2 Number對像 27515.2.3 Boolean對像 27915.2.4 Date對像 28015.3 數組對像 28315.3.1 數組對像Array 28315.3.2 常用的數組操作方法 28615.3.3 獲取數組中的某素 28915.3.4 將數組轉換成字符串 29015.4 綜合實例——使用數組存儲商品信息 291知識點提煉 291習題 292第16章 JavaScript對像編程與事件處理 29316.1 文檔(document)對像 29316.1.1 文檔對像的常用屬性、方法與事件 29416.1.2 Document對像的應用 29616.2 窗口(window)對像 30216.2.1 窗口對像的常用屬性與方法 30216.2.2 控制窗口 30416.2.3 窗口事件 31116.3 DOM對像 31216.3.1 DOM概述 31216.3.2 DOM對像節點屬性 31316.3.3 操作節點 31816.3.4 獲取文檔中素 32416.4 事件處理 32516.4.1 事件與事件處理概述 32516.4.2 DOM事件模型 32816.4.3 表單相關事件 33116.4.4 鼠標鍵盤事件 33516.4.5 頁面事件 33916.5 綜合實例——動態設置網頁的標題欄 341知識點提煉 342習題 343第17章 HTML5、CSS3與JavaScript綜合應用 34417.1 綜合實例 1——文字升降特效 34417.2 綜合實例 2——閃爍的圖片 34517.3 綜合實例 3——左右移動的圖片 34617.4 綜合實例 4——自動隱藏菜單 34817.5 綜合實例 5——樹狀導航菜單 35117.6 綜合實例 6——顏色選擇器 353第18章 課程設計——旅遊信息網前臺 35718.1 需求分析 35718.2 繫統設計 35718.2.1 繫統目標 35718.2.2 網站預覽 35718.3 開發及運行環境 35918.4 關鍵技術 36018.4.1 網站主題結構設計 36018.4.2 HTML素的使用 36018.5 網站公共部分設計 36118.5.1 設計網站公共header 36118.5.2 設計網站公共footer 36718.6 網站主頁設計 36718.6.1 顯示網站介紹及相關圖片 36818.6.2 主頁左側導航的實現 36918.7 “留下足跡”頁面設計 37118.7.1 播放音樂 37218.7.2 添加留言功能的實現 37218.8 課程設計總結 374 </div> </div> <div align="center"> <img src="https://img1.360buyimg.com/imgzone/jfs/t1/113910/28/8817/16836/5ed49f5fEa18db827/86574627922cf9a7.jpg" alt="內容簡介"/> <div> 本書作為HTML5課程的教材，首先用較大篇幅詳細講解了HTML5技術，然後講解CSS3技術，之後用一定篇幅介紹JavaScript技術，最後講解三者的搭配應用，並通過大案例綜合應用。全書共分18章，內容包括HTML5概述、HTM素與屬性、HTML5表單、文件與拖放、繪制圖形、HTML5中的多媒體、HTML5的數據存儲、離線Web應用和地理定位、CSS3基礎、CSS3字體與文本相關屬性、CSS3美化背景與邊框、變形與動畫相關屬性、JavaScript概述、JavaScript語言基礎、JavaScript內置對像、JavaScript對像編程與事件處理、HTML5、CSS3與JavaScript綜合應用、課程設計——旅遊信息網前臺。全書每章內容都與實例緊密結合，有助於學生理解知識、應用知識，達到學以致用的目的。 等 </div> </div> </div></div><div><img src="https://img10.360buyimg.com/imgzone/jfs/t1/147514/7/5440/73116/5f34a3beE3ba58783/f5b2391383f5625c.jpg" width="988"/></div><br/><br><br>"</td></tr><tr> <td> </td></tr></table> </td></tr><tr valign=top><td colspan=4 height="53"> <table border=0 cellpadding=0 cellspacing=0 width="98%" align="center"><tbody><tr valign=bottom> <td colspan=2 height=23><span class="bt_1">網友評論</span> 我們期待著您對此商品發表評論</td> </tr><tr valign=top><td colspan=2> <table bgcolor=#000000 border=0 cellpadding=0 cellspacing=0 height=1 width="100%"> <tbody><tr> <td></td></tr></tbody> </table> </td></tr><tr valign=top><td colspan=2> <table align=center border=0 cellpadding=4 cellspacing=0 width=400> <tbody><tr align=middle><td width="100%"> <div align=center> <input style="FONT-SIZE: 12px" type=button value="我要評論" onClick="javascript:open('forum.asp?method=blank&id=33501737','','');"></div> </td></tr></tbody> </table> <div></div></td></tr><tr valign=top><td colspan=2> </td></tr></tbody> </table> </td></tr><tr valign=top><td colspan=4> <table width="98%" border="0" cellspacing="0" cellpadding="0" align="center"><tr> <td class="bt_1" height="26">相關商品</td> </tr><tr> <td height="1" bgcolor="#000000"></td> </tr><tr> <td valign="top"></td></tr><tr> <td valign="top"><table border=0 bordercolordark=#ffffff bordercolorlight=#ffffff cellpadding=4 cellspacing=2 width="100%"> <tr> <td colspan=2><b>【同作者商品】</b></td> </tr><tr valign=top><td colspan=2 height=99> <table align=center width="100%"><tbody><tr valign=top><td colspan=3 valign=top><a href="ps_2_0_1_$E5$BD$AD$E7$B4$8D$E6$96$B0$E6$94$AF$E6$8F$B4.html" target=_blank>彭納新支援</a></td> </tr><tr valign=top><td height=55 width="5%"> </td> <td height=55 width="95%" bgcolor=#f1f1f1>本網站暫時沒有該作者的其它商品。 </td> </tr></tbody> </table> </td><form action=email_operate.asp method=post name=fmag2 target=_blank onsubmit="return checke2();"> <td width="43%"><font color="#FF6600">☆</font><b>有該作者的商品通知您嗎？</b><br> 請選擇作者： <br> <input name=content type=checkbox value="彭納新支援" checked> 彭納新支援<br> 您的Email地址<br> <input name=email 12px> <input type=hidden name=ttype value="2"><input type=submit value=確定 12px></td></form></tr></table> </td></tr><tr> <td> </td></tr></table> </td></tr></tbody> </table> </td></tr></table> </td></tr></table> <TABLE cellSpacing=0 cellPadding=0 width=1000 align=center border=0>
<TBODY>
<TR>
<TD><IMG height=5 src="/liaode/images/bottom_01.jpg" width=1000></TD></TR>
<TR>
<TD align=middle>
<TABLE class=size cellSpacing=1 cellPadding=0 width="100%" bgColor=ffffff><TBODY>
<TR>
<TD width="100%" height=15 align=center>
<a href="contact.asp?t=3" class="links6" target=_blank><font color=red><b>在線留言</b></font></a>
商品價格為新臺幣
</TD>
</tr>
<TR>
<TD width="100%" height=15 align=center>
<a href="help.html" class="links6">關於我們</a>
<a href="help.html" class="links6">送貨時間</a>
<a href="help.html" class="links6">安全付款</a>
<a href="user.asp" class="links6">會員登入</a>
<a href="user.asp" class="links6">加入會員</a>
<a href="user.asp?method=fillbill" class="links6">我的帳戶</a>
<a href="help_5.html" class="links6"><font color=red>網站聯盟</font></a>
</TD>
</tr>
<TR>
<TD width="100%" height=15 align=center>
<a href="http://www.liaode.com.tw/sitemap.htm" title="DVD" target="_blank" class="links6"><strong>DVD</strong></a> <a href="http://www.liaode.com.tw/sitemap.xml" title="連續劇" target="_blank" class="links6"><strong>連續劇</strong></a>
Copyright © 2024, Digital 了得網 Co., Ltd.
</TD>
</tr>
</TBODY></TABLE></TD></TR></TBODY></TABLE>
<style type="text/css">
.ui-scrolltop:hover {
opacity: 1;
filter: alpha(opacity=100);
-moz-transition: opacity 0.3s ease-in,opacity 0.3s ease-out;
-webkit-transition: opacity 0.3s ease-in,opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-in,opacity 0.3s ease-out;
transition: opacity 0.3s ease-in,opacity 0.3s ease-out;
}
.ui-scrolltop {
display: block;
position: fixed;
_position: absolute;
right: 10px;
bottom: 200px;
z-index: 9999;
height: 60px;
width: 60px;
text-indent: -999999px;
overflow: hidden;
background: #000 url(http://liaode.com.tw/images/untitled.png) 18px 21px no-repeat;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
-moz-transition: opacity 0.3s ease-in,opacity 0.3s ease-out;
-webkit-transition: opacity 0.3s ease-in,opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-in,opacity 0.3s ease-out;
transition: opacity 0.3s ease-in,opacity 0.3s ease-out;
}
</style>
<a id="J_ScrollTopBtn" class="ui-scrolltop" title="返回頂部" href="#top">返回頂部</a>
<!-- oeya -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.conn.tw/" : "http://adcenter.conn.tw/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "track/oeya_url_cookie.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
var manu_code = '9nTT0aH7gmjA948';
var code='member';
var code_value='$member';
var code_sub='';
var pro_info='';
var action_name = '';
url = pkBaseURL + "track/oeya_url_cookie.php";
oeya_log(action_name, manu_code, url,code,code_value,code_sub,pro_info);
</script>
<!-- End oeya Tag -->
<!--<script type="text/javascript" src="http://z1-pcok6.kuaishangkf.com/bs/ks.j?cI=338981&fI=119634&ism=1" charset="utf-8"></script>-->
<div id="dialog-warning" style="display:none;" title="提示"> <p><span class="red">請選擇顏色、尺碼等選項！</span></p></div><div id="dialog-confirm" style="display:none;" title="提示"> <p><span class="red">已成功加入購物車！</span></p></div></body></html> 
