滿額折
商品簡介
作者簡介
目次
商品簡介
本書遵循由淺入深的原則編寫。全書分為3個部分，分別包括了HTML5、CSS3與JavaScript的基礎與應用知識。第1部分分為10章，分別是HTML概述、HTML基礎結構、文字/段落/列表、超級鏈接、圖像、表格、框架、HTML表單、多媒體、HTML5佈局；第2部分分為9章，分別是CSS學習第一步、文字樣式、定位佈局、邊框/邊距/用戶界面、背景和圖像、列表/表格/鏈接、過渡與動畫、多欄與彈性盒模型、選擇器；第3部分分為8章，分別是JavaScript基礎、JavaScript語言進階、JavaScript本地對象、Windows對象、DOM（文檔對象模型）、JavaScript事件、HTML5 canvas、HTML5編程。
本書結構系統、內容全面、案例豐富，適合想學習Web前端開發的初學者閱讀，也適合Web前端開發從業人員作為案頭手冊參考。
本書結構系統、內容全面、案例豐富，適合想學習Web前端開發的初學者閱讀，也適合Web前端開發從業人員作為案頭手冊參考。
作者簡介
作者為大學老師，長期在教學一線工作，致力於程序設計方面課程的教學，以及相關圖書的寫作與開發，具有豐富的教學經驗，也具備豐富的寫作經驗
目次
目 錄
第 1章 概述 1
1.1 HTML 1
1.1.1 HTML概述 1
1.1.2 HTML的發展歷史 1
1.1.3 HTML 5的特點 2
1.1.4 XML 3
1.1.5 XHTML 3
1.2 CSS 3
1.2.1 CSS概述 3
1.2.2 CSS的發展歷史 4
1.2.3 CSS的優點 4
1.3 JavaScript 4
1.3.1 JavaScript概述 5
1.3.2 JavaScript的發展歷史 5
1.3.3 客戶端JavaScript 5
1.3.4 JavaScript與Java的區別 5
1.4 W3C 6
1.5 開發工具 6
1.6 本書使用的瀏覽器 6
第 2章 HTML基本結構 8
2.1 第 1個HTML文檔 8
2.1.1 創建第 1個HTML文檔 8
2.1.2 標簽和元素 9
2.1.3 HTML文檔的結構 10
2.2 和 10
2.2.1 嚴格版本（Strict）DTD 10
2.2.2 過渡版本（Transitional）DTD 11
2.2.3 框架（Frameset）DTD 11
2.2.4 HTML5中的 11
2.2.5 標簽 11
2.3 全局屬性 11
2.4 頭部標簽 12
2.4.1 標題標簽 12
<BR>2.4.2 元信息標簽<meta> 13
<BR>2.4.3 基準網址標簽<base> 18
<BR>2.4.4 基準文字標簽<basefont> 18
<BR>2.4.5 <style>標簽 19
<BR>2.4.6 <link>標簽 19
<BR>2.4.7 <script>標簽 20
<BR>2.5 主體標簽<body> 20
<BR>2.5.1 網頁背景顏色 21
<BR>2.5.2 網頁背景圖片 21
<BR>2.5.3 網頁文字顏色 22
<BR>2.5.4 超級鏈接顏色 22
<BR>2.6 注釋<!--.--> 23
<BR>2.7 HTML代碼書寫規範 24
<BR>第3章 文字/段落/列表 25
<BR>3.1 段落設置 25
<BR>3.1.1 段落標簽<p> 25
<BR>3.1.2 換行標簽<br/> 26
<BR>3.1.3 不換行標簽<nobr> 26
<BR>3.1.4 預格式化標簽<pre> 27
<BR>3.1.5 居中標簽<center> 28
<BR>3.1.6 標簽<q>和<blockquote> 28
<BR>3.1.7 早期標簽<plaintext>和<xmp> 29
<BR>3.1.8 <span>標簽 30
<BR>3.2 水平線 30
<BR>3.2.1 插入水平線標簽<hr> 30
<BR>3.2.2 水平線屬性 30
<BR>3.3 字體標簽<font> 31
<BR>3.3.1 字體屬性face 31
<BR>3.3.2 字號屬性size 32
<BR>3.3.3 顏色屬性color 32
<BR>3.3.4 <basefont>標簽 33
<BR>3.4 文字內容 33
<BR>3.4.1 普通文本 33
<BR>3.4.2 輸出空格 33
<BR>3.4.3 特殊字符 34
<BR>3.5 標題字 35
<BR>3.5.1 標題字標簽<hn> 35
<BR>3.5.2 標題字對齊屬性 36
<BR>3.6 文本格式化 36
<BR>3.6.1 <b>和<strong>標簽 36
<BR>3.6.2 斜體標簽 37
<BR>3.6.3 <u>標簽 37
<BR>3.6.4 <sup>和<sub> 38
<BR>3.6.5 刪除線標簽 38
<BR>3.6.6 <ins>標簽 39
<BR>3.6.7 <big>和<small>標簽 39
<BR>3.6.8 <address>標簽 40
<BR>3.6.9 <tt>和<kbd>標簽 40
<BR>3.6.10 <code>和<samp>標簽 40
<BR>3.6.11 <var>標簽 41
<BR>3.6.12 <abbr>和<acronym>標簽 42
<BR>3.6.13 <dfn>標簽 42
<BR>3.7 使用列表 43
<BR>3.7.1 有序列表標簽<ol> 43
<BR>3.7.2 有序列表類型 44
<BR>3.7.3 有序列表起始值 44
<BR>3.7.4 倒序排列列表 45
<BR>3.7.5 設置列表項序號 45
<BR>3.7.6 無序列表<ul> 46
<BR>3.7.7 無序列表類型 47
<BR>3.7.8 目錄列表標簽<dir> 47
<BR>3.7.9 定義列表標簽<dl> 48
<BR>3.7.10 菜單列表標簽<menu> 49
<BR>3.7.11 <bdo>標簽 49
<BR>3.8 HTML5新增標簽 50
<BR>3.8.1 <ruby><rp><rt>標簽 50
<BR>3.8.2 <mark>標簽 51
<BR>3.8.3 <time>標簽 51
<BR>3.8.4 <figure>標簽 52
<BR>3.8.5 <figcaption>標簽 53
<BR>3.8.6 <details>和<summary>標簽 53
<BR>3.8.7 HTML5標簽使用誤區 54
<BR>第4章 超級鏈接 55
<BR>4.1 超級鏈接基礎 55
<BR>4.1.1 物理路徑和虛擬路徑 55
<BR>4.1.2 絕對路徑和相對路徑 55
<BR>4.1.3 超級鏈接標簽<a> 56
<BR>4.2 內部鏈接 56
<BR>4.2.1 href屬性 56
<BR>4.2.2 target屬性 57
<BR>4.2.3 media屬性 58
<BR>4.2.4 type屬性 59
<BR>4.2.5 rel屬性 59
<BR>4.3 錨點鏈接 60
<BR>4.3.1 同一文檔中的錨點鏈接 60
<BR>4.3.2 鏈接到其他文檔的錨點 61
<BR>4.4 外部鏈接 62
<BR>4.4.1 鏈接到外部網站 62
<BR>4.4.2 電子郵件鏈接 62
<BR>4.4.3 鏈接FTP 63
<BR>4.5 其他應用 64
<BR>4.5.1 下載文件鏈接 64
<BR>4.5.2 調用JavaScript 64
<BR>4.5.3 設定空鏈接 65
<BR>4.5.4 基準網址 65
<BR>4.5.5 父路徑和根路徑 66
<BR>第5章 圖像 68
<BR>5.1 圖像的格式 68
<BR>5.1.1 GIF格式 68
<BR>5.1.2 JPEG格式 68
<BR>5.1.3 PNG格式 68
<BR>5.2 插入圖像 68
<BR>5.2.1 插入圖像標簽<img> 68
<BR>5.2.2 圖像必選屬性 69
<BR>5.2.3 height和width屬性 70
<BR>5.2.4 border屬性 70
<BR>5.2.5 圖像文字排列 71
<BR>5.2.6 垂直邊距/水平間距 72
<BR>5.3 圖像的超級鏈接 73
<BR>5.4 圖像熱區鏈接 73
<BR>5.4.1 <map>標簽 73
<BR>5.4.2 <area>標簽 74
<BR>5.5 圖像列表 75
<BR>5.5.1 <ul>標簽顯示圖像 75
<BR>5.5.2 <dl>標簽顯示圖像 75
<BR>第6章 表格 77
<BR>6.1 創建表格 77
<BR>6.1.1 表格的基本構成 77
<BR>6.1.2 表格的常用屬性 78
<BR>6.2 <caption>、<th>標簽 78
<BR>6.2.1 表格標題<caption> 79
<BR>6.2.2 表格表頭<th> 79
<BR>6.3 表格的基本屬性 80
<BR>6.3.1 設置表格邊框 80
<BR>6.3.2 設置表格邊框顏色 81
<BR>6.3.3 單元格間距設置 81
<BR>6.3.4 表格內容與邊框的間距 82
<BR>6.3.5 表格背景顏色 82
<BR>6.3.6 表格背景圖像 83
<BR>6.3.7 表格的寬度和高度 83
<BR>6.3.8 表格對齊方式 84
<BR>6.3.9 frame屬性 84
<BR>6.3.10 rules屬性 85
<BR>6.4 表格行列設置 85
<BR>6.4.1 行背景顏色/圖像 85
<BR>6.4.2 行邊框顏色 86
<BR>6.4.3 行水平對齊方式 87
<BR>6.4.4 行垂直對齊方式 87
<BR>6.4.5 行高控制 88
<BR>6.4.6 <col>標簽 89
<BR>6.4.7 <colgroup>標簽 90
<BR>6.5 單元格屬性 91
<BR>6.5.1 單元格大小 91
<BR>6.5.2 單元格水平跨度 92
<BR>6.5.3 單元格垂直跨度 93
<BR>6.5.4 對齊方式 93
<BR>6.5.5 單元格的背景顏色 94
<BR>6.5.6 單元格的邊框顏色 95
<BR>6.6 表格的結構 95
<BR>6.6.1 表格頭部標簽<thead> 95
<BR>6.6.2 表格主體標簽<tbody> 96
<BR>6.6.3 表格表尾標簽<tfoot> 96
<BR>6.6.4 應用實例 96
<BR>6.7 表格中的數據 97
<BR>6.7.1 表格中插入複雜數據 97
<BR>6.7.2 嵌套表格 98
<BR>第7章 框架 100
<BR>7.1 框架的概念 100
<BR>7.2 框架標簽 100
<BR>7.2.1 水平分割窗口 101
<BR>7.2.2 垂直分割窗口 102
<BR>7.2.3 嵌套分割窗口 102
<BR>7.2.4 <noframes>標簽 103
<BR>7.3 設置窗口屬性 104
<BR>7.3.1 框架源文件 104
<BR>7.3.2 框架名稱name 104
<BR>7.3.3 禁止調整框架大小 105
<BR>7.3.4 設定框架的邊框 105
<BR>7.3.5 邊框與頁面內容邊距 106
<BR>7.3.6 控制框架滾動條 106
<BR>7.3.7 框架實現導航 107
<BR>7.4 內聯框架<iframe> 107
<BR>7.4.1 頁面源文件 108
<BR>7.4.2 內聯框架的寬度和高度 108
<BR>7.4.3 內聯框架的對齊方式 109
<BR>7.4.4 邊框顯示 109
<BR>7.4.5 其他屬性 109
<BR>第8章 HTML表單 110
<BR>8.1 表單標簽 110
<BR>8.1.1 表單處理文件action 110
<BR>8.1.2 表單提交方法method 111
<BR>8.1.3 編碼方式enctype 111
<BR>8.1.4 name屬性和target屬性 112
<BR>8.1.5 HTML5新增屬性 112
<BR>8.2 表單標簽<input> 112
<BR>8.2.1 提交按鈕submit 114
<BR>8.2.2 重置按鈕reset 116
<BR>8.2.3 文本框text 117
<BR>8.2.4 密碼域password 119
<BR>8.2.5 單選按鈕radio 119
<BR>8.2.6 複選框checkbox 120
<BR>8.2.7 普通按鈕button 121
<BR>8.2.8 圖像提交按鈕image 121
<BR>8.2.9 隱藏域hidden 122
<BR>8.2.10 文件域file 122
<BR>8.3 HTML5新增<input>類型 123
<BR>8.3.1 顏色選擇器 123
<BR>8.3.2 時間日期選擇器 124
<BR>8.3.3 email字段 125
<BR>8.3.4 number字段 126
<BR>8.3.5 range字段 127
<BR>8.3.6 search字段 127
<BR>8.3.7 tel字段 128
<BR>8.3.8 url字段 128
<BR>8.4 下拉框、列表框、多行文本域 129
<BR>8.4.1 下拉框 129
<BR>8.4.2 列表框 130
<BR>8.4.3 多行文本域 131
<BR>8.4.4 <button>標簽 132
<BR>8.5 HTML5新增表單標簽 133
<BR>8.5.1 <datalist>標簽 133
<BR>8.5.2 <keygen>標簽 134
<BR>8.5.3 <output>標簽 134
<BR>第9章 多媒體 136
<BR>9.1 滾動效果 136
<BR>9.1.1 滾動標簽 136
<BR>9.1.2 滾動方向 136
<BR>9.1.3 滾動方式 137
<BR>9.1.4 滾動速度 137
<BR>9.1.5 循環滾動 138
<BR>9.1.6 其他屬性 138
<BR>9.2 進度條<progress> 139
<BR>9.3 <embed>標簽 140
<BR>9.3.1 插入Flash動畫 141
<BR>9.3.2 插入音頻 141
<BR>9.3.3 插入視頻 142
<BR>9.4 設置背景音樂 142
<BR>9.5 對象標簽<object> 143
<BR>9.5.1 插入Flash文件 143
<BR>9.5.2 插入音頻文件 146
<BR>9.5.3 插入視頻文件 147
<BR>9.5.4 插入FLV文件 148
<BR>9.6 <audio>標簽（HTML5） 149
<BR>9.7 <video>標簽（HTML5） 150
<BR>9.8 <track>標簽 151
<BR>第 10章 HTML5佈局 153
<BR>10.1 <div>標簽 153
<BR>10.2 HTML5中的新增佈局標簽 154
<BR>10.2.1 <header>標簽 155
<BR>10.2.2 <nav>標簽 155
<BR>10.2.3 <section>標簽 156
<BR>10.2.4 <article>標簽 156
<BR>10.2.5 <hgroup>標簽 157
<BR>10.2.6 <aside>標簽 158
<BR>10.2.7 <footer>標簽 158
<BR>第 11章 CSS學習第 一步 160
<BR>11.1 CSS基礎 160
<BR>11.1.1 創建第 1個CSS 160
<BR>11.1.2 CSS的基本語法 161
<BR>11.1.3 內聯樣式 162
<BR>11.1.4 內部樣式表 162
<BR>11.1.5 外部樣式表 163
<BR>11.1.6 樣式優先級 166
<BR>11.1.7 樣式表的層疊性 166
<BR>11.1.8 CSS注釋 168
<BR>11.2 常用選擇器 168
<BR>11.2.1 E選擇器 168
<BR>11.2.2 class類選擇器 168
<BR>11.2.3 ID選擇器 169
<BR>11.2.4 包含選擇器 171
<BR>11.2.5 通配選擇器（*） 171
<BR>11.2.6 選擇器組 172
<BR>11.2.7 選擇器的優先權 172
<BR>11.3 CSS中的常用單位 174
<BR>11.3.1 百分比單位 174
<BR>11.3.2 數字 174
<BR>11.3.3 長度單位 174
<BR>11.3.4 角度單位 175
<BR>11.3.5 時間單位 175
<BR>11.3.6 頻率單位 175
<BR>11.3.7 特殊佈局單位 175
<BR>11.4 顏色取值 175
<BR>11.4.1 HEX 175
<BR>11.4.2 英文單詞名稱 176
<BR>11.4.3 RGB 177
<BR>11.4.4 RGBA 178
<BR>11.4.5 HSL 178
<BR>11.4.6 HSLA 179
<BR>11.4.7 transparent 179
<BR>11.5 URL取值 180
<BR>第 12章 文字樣式 181
<BR>12.1 字體屬性 181
<BR>12.1.1 文字顏色 181
<BR>12.1.2 字體名稱 182
<BR>12.1.3 字體樣式 183
<BR>12.1.4 字體變體 184
<BR>12.1.5 字體粗細 184
<BR>12.1.6 字體大小 185
<BR>12.1.7 字體屬性font 186
<BR>12.1.8 @font-face屬性 187
<BR>12.1.9 font-stretch屬性 188
<BR>12.2 文本屬性 188
<BR>12.2.1 單詞間距 189
<BR>12.2.2 字符間距 189
<BR>12.2.3 行距 190
<BR>12.2.4 文本水平對齊 191
<BR>12.2.5 文本垂直對齊 191
<BR>12.2.6 文本縮進 192
<BR>12.2.7 字符轉換 193
<BR>12.2.8 文本方向 194
<BR>12.2.9 文本格式化處理 194
<BR>12.2.10 溢出省略 195
<BR>12.2.11 文本換行 196
<BR>12.2.12 文本陰影 196
<BR>12.2.13 文本修飾text-decoration 197
<BR>12.2.14 text-decoration-line屬性 198
<BR>12.2.15 文字修飾類型 198
<BR>12.2.16 文字修飾線條顏色 198
<BR>12.2.17 text-decoration屬性 198
<BR>12.2.18 文字填充顏色 199
<BR>12.2.19 文字描邊寬度 199
<BR>12.2.20 文字描邊顏色 200
<BR>12.2.21 文字描邊 200
<BR>12.2.22 制表符長度 201
<BR>第 13章 定位佈局 202
<BR>13.1 尺寸屬性 202
<BR>13.1.1 width屬性 202
<BR>13.1.2 height屬性 202
<BR>13.1.3 min-width和max-width 203
<BR>13.1.4 min-height和max-height 204
<BR>13.2 盒模型（Box model） 204
<BR>13.2.1 盒模型設計 205
<BR>13.2.2 盒模型的寬和高 206
<BR>13.2.3 早期IE盒模型的寬和高 207
<BR>13.2.4 塊元素和內聯元素 207
<BR>13.3 定位屬性 209
<BR>13.3.1 定位屬性概述 209
<BR>13.3.2 position屬性 209
<BR>13.3.3 top屬性 210
<BR>13.3.4 right屬性 210
<BR>13.3.5 bottom屬性 210
<BR>13.3.6 left屬性 210
<BR>13.3.7 z-index屬性 210
<BR>13.3.8 對象定位實例 210
<BR>13.4 佈局屬性 213
<BR>13.4.1 display屬性 214
<BR>13.4.2 float屬性 217
<BR>13.4.3 clear屬性 218
<BR>13.4.4 visibility屬性 219
<BR>13.4.5 clip屬性 220
<BR>13.4.6 overflow屬性 221
<BR>第 14章 邊框/邊距/用戶界面 223
<BR>14.1 邊框（border） 223
<BR>14.1.1 邊框寬度 223
<BR>14.1.2 邊框樣式 224
<BR>14.1.3 邊框顏色 226
<BR>14.1.4 border屬性 227
<BR>14.1.5 邊框圓角 227
<BR>14.1.6 邊框背景圖像 229
<BR>14.1.7 多彩邊框 231
<BR>14.1.8 對象陰影 232
<BR>14.2 內邊距（padding） 233
<BR>14.3 外邊距（margin） 234
<BR>14.4 用戶界面模型 235
<BR>14.4.1 outline-style屬性 236
<BR>14.4.2 outline-width屬性 236
<BR>14.4.3 outline-color屬性 237
<BR>14.4.4 outline屬性 237
<BR>14.4.5 outline-offset屬性 238
<BR>14.4.6 resize屬性 238
<BR>14.4.7 cursor光標 239
<BR>14.4.8 box-sizing屬性 240
<BR>14.4.9 ime-mode屬性 241
<BR>14.4.10 nav屬性 241
<BR>第 15章 背景和圖像 243
<BR>15.1 背景 243
<BR>15.1.1 背景顏色 243
<BR>15.1.2 背景圖像 244
<BR>15.1.3 背景圖像填充方式 245
<BR>15.1.4 背景圖像起始位置 246
<BR>15.1.5 背景圖像固定方式 247
<BR>15.1.6 背景圖像大小 248
<BR>15.1.7 參考原點 249
<BR>15.1.8 背景圖像裁剪 250
<BR>15.1.9 background屬性 251
<BR>15.2 圖像函數 251
<BR>15.2.1 線性漸變圖像 252
<BR>15.2.2 重複線性漸變圖像 253
<BR>15.2.3 徑向漸變圖像 253
<BR>15.2.4 重複徑向漸變圖像 254
<BR>第 16章 列表/表格/鏈接 255
<BR>16.1 列表樣式 255
<BR>16.1.1 list-style-type屬性 255
<BR>16.1.2 list-style-image屬性 257
<BR>16.1.3 list-style-position屬性 258
<BR>16.2 表格樣式 259
<BR>16.2.1 border-collapse屬性 259
<BR>16.2.2 border-spacing屬性 260
<BR>16.2.3 caption-side屬性 261
<BR>16.2.4 empty-cells屬性 262
<BR>16.2.5 table-layout屬性 262
<BR>16.3 超級鏈接樣式 263
<BR>16.3.1 偽類選擇器 263
<BR>16.3.2 E:link選擇器 264
<BR>16.3.3 E:visited選擇器 264
<BR>16.3.4 E:hover選擇器 265
<BR>16.3.5 E:active選擇器 265
<BR>第 17章 過渡與動畫 267
<BR>17.1 過渡（transition） 267
<BR>17.1.1 transition-property屬性 267
<BR>17.1.2 transition-duration屬性 268
<BR>17.1.3 transition-timing-function屬性 269
<BR>17.1.4 transition-delay屬性 270
<BR>17.1.5 transition屬性 271
<BR>17.2 變換（transform） 271
<BR>17.2.1 transform屬性 272
<BR>17.2.2 transform-Origin屬性 274
<BR>17.2.3 綜合應用 275
<BR>17.3 動畫（animation） 275
<BR>17.3.1 @keyframes關鍵字 276
<BR>17.3.2 animation-name屬性 276
<BR>17.3.3 animation-duration屬性 277
<BR>17.3.4 animation-timing-function屬性 278
<BR>17.3.5 animation-delay屬性 278
<BR>17.3.6 animation-iteration-count屬性 279
<BR>17.3.7 animation-play-state屬性 280
<BR>17.3.8 animation-fill-mode屬性 280
<BR>17.3.9 animation-direction屬性 281
<BR>17.3.10 animation屬性 282
<BR>第 18章 多欄與彈性盒模型 284
<BR>18.1 多欄 284
<BR>18.1.1 column-count屬性 284
<BR>18.1.2 column-width屬性 284
<BR>18.1.3 columns屬性 284
<BR>18.1.4 column-gap屬性 285
<BR>18.1.5 column-rule-style屬性 286
<BR>18.1.6 column-rule-width屬性 286
<BR>18.1.7 column-rule-color屬性 287
<BR>18.1.8 column-rule屬性 287
<BR>18.1.9 column-span屬性 287
<BR>18.1.10 break-before屬性 288
<BR>18.1.11 break-after屬性 288
<BR>18.1.12 break-inside屬性 289
<BR>18.1.13 column-fill屬性 290
<BR>18.2 彈性盒模型 290
<BR>18.2.1 box-flex屬性 290
<BR>18.2.2 box-flex-group屬性 291
<BR>18.2.3 box-orient屬性 292
<BR>18.2.4 box-lines屬性 293
<BR>18.2.5 box-direction屬性 294
<BR>18.2.6 box-ordinal-group屬性 294
<BR>18.2.7 box-align屬性 295
<BR>18.2.8 box-pack屬性 296
<BR>18.2.9 box-reflect屬性 297
<BR>第 19章 選擇器 299
<BR>19.1 關係選擇器 299
<BR>19.1.1 E F選擇器 299
<BR>19.1.2 E>F選擇器 300
<BR>19.1.3 E+F選擇器 300
<BR>19.1.4 E～F選擇器 301
<BR>19.2 屬性選擇器 302
<BR>19.2.1 E[foo]選擇器 302
<BR>19.2.2 E[foo="bar"]選擇器 302
<BR>19.2.3 E[foo～="bar"]選擇器 303
<BR>19.2.4 E[foo^="bar"]選擇器 304
<BR>19.2.5 E[foo$="bar"]選擇器 304
<BR>19.2.6 E[foo*="bar"]選擇器 305
<BR>19.2.7 E[foo|="bar"]選擇器 305
<BR>19.3 偽類選擇器 306
<BR>19.3.1 E:focus選擇器 306
<BR>19.3.2 E:lang(c)選擇器 307
<BR>19.3.3 E:not(s)選擇器 307
<BR>19.3.4 E:root選擇器 308
<BR>19.3.5 E:first-child選擇器 308
<BR>19.3.6 E:last-child選擇器 309
<BR>19.3.7 E:only-child選擇器 309
<BR>19.3.8 E:nth-child(n)選擇器 310
<BR>19.3.9 E:nth-last-child(n)選擇器 310
<BR>19.3.10 E:first-of-type選擇器 311
<BR>19.3.11 E:last-of-type選擇器 311
<BR>19.3.12 E:only-of-type選擇器 312
<BR>19.3.13 E:nth-of-type(n)選擇器 312
<BR>19.3.14 E:nth-last-of-type(n)選擇器 313
<BR>19.3.15 E:empty選擇器 313
<BR>19.3.16 E:checked選擇器 314
<BR>19.3.17 E:enabled選擇器 315
<BR>19.3.18 E:disabled選擇器 315
<BR>19.3.19 E:target選擇器 316
<BR>19.4 偽元素選擇器 316
<BR>19.4.1 E::first-letter選擇器 317
<BR>19.4.2 E::first-line選擇器 317
<BR>19.4.3 E:before/E::before選擇器 318
<BR>19.4.4 E:after/E::after選擇器 318
<BR>19.4.5 E::selection選擇器 319
<BR>19.5 內容生成 319
<BR>19.5.1 content屬性 319
<BR>19.5.2 counter-increment屬性 320
<BR>19.5.3 counter-reset屬性 320
<BR>19.5.4 quotes屬性 321
<BR>19.5.5 counter函數 321
<BR>第 20章 JavaScript基礎 323
<BR>20.1 HTML和JavaScript 323
<BR>20.1.1 使用<script>標簽 323
<BR>20.1.2 第 1個JavaScript程序 323
<BR>20.1.3 隱藏JavaScript代碼 324
<BR>20.1.4 <head>標簽放置腳本 324
<BR>20.1.5 <body>標簽放置腳本 325
<BR>20.1.6 HTML之外放置腳本 325
<BR>20.1.7 HTML中插入多段腳本 325
<BR>20.1.8 在元素內部嵌入JavaScript 326
<BR>20.2 引用外部JavaScript文件 326
<BR>20.2.1 創建外部JavaScript文件 327
<BR>20.2.2 調用外部JS文件 327
<BR>20.3 腳本執行順序 327
<BR>20.3.1 文檔載入時執行 327
<BR>20.3.2 文檔載入後執行 328
<BR>20.3.3 響應事件執行 329
<BR>20.3.4 函數調用執行 329
<BR>20.4 語法結構 329
<BR>20.4.1 字符集 329
<BR>20.4.2 大小寫的敏感性 329
<BR>20.4.3 空白符和換行符 329
<BR>20.4.4 可選的分號 330
<BR>20.4.5 保留字 330
<BR>20.4.6 添加注釋 330
<BR>20.5 變量 331
<BR>20.5.1 變量的聲明 331
<BR>20.5.2 變量的命名規則 331
<BR>20.5.3 未定義變量 332
<BR>20.5.4 變量的訪問 332
<BR>20.5.5 變量的作用域 332
<BR>20.6 數據類型 333
<BR>20.6.1 基本數據類型 333
<BR>20.6.2 typeof運算符 336
<BR>20.6.3 類型轉換 336
<BR>20.7 運算符 342
<BR>20.7.1 算術運算符 342
<BR>20.7.2 賦值運算符 344
<BR>20.7.3 關係運算符 345
<BR>20.7.4 邏輯運算符 345
<BR>20.7.5 運算符優先級 346
<BR>20.7.6 :運算符 347
<BR>第 21章 JavaScript語言進階 348
<BR>21.1 條件語句 348
<BR>21.1.1 if語句 348
<BR>21.1.2 if…else語句 348
<BR>21.1.3 if…else if…else語句 349
<BR>21.1.4 if與if…else語句的嵌套 350
<BR>21.1.5 switch…case語句 351
<BR>21.2 循環語句 352
<BR>21.2.1 while語句 352
<BR>21.2.2 do…while語句 353
<BR>21.2.3 for語句 354
<BR>21.3 跳轉語句 355
<BR>21.3.1 break語句 355
<BR>21.3.2 continue語句 355
<BR>21.4 函數（方法） 356
<BR>21.4.1 函數的結構 356
<BR>21.4.2 函數參數應用 357
<BR>21.4.3 返回值應用 358
<BR>21.4.4 函數相互調用 358
<BR>21.4.5 變量的作用域 359
<BR>21.4.6 函數的嵌套 360
<BR>第 22章 JavaScript本地對象 362
<BR>22.1 對象的類型 362
<BR>22.2 Object對象 362
<BR>22.2.1 Object對象的創建 362
<BR>22.2.2 Object對象的屬性 363
<BR>22.2.3 Object對象的方法 363
<BR>22.3 數組對象 366
<BR>22.3.1 數組的創建 366
<BR>22.3.2 數組賦值 367
<BR>22.3.3 初始化數組 367
<BR>22.3.4 修改數組成員的值 368
<BR>22.3.5 不同類型的值 368
<BR>22.3.6 動態數組大小 368
<BR>22.3.7 join()方法 369
<BR>22.3.8 shift()和unshift()方法 369
<BR>22.3.9 pop()和push()方法 370
<BR>22.3.10 sort()方法 371
<BR>22.3.11 reverse()方法 372
<BR>22.3.12 slice()方法 372
<BR>22.3.13 splice()方法 373
<BR>22.3.14 concat()方法 373
<BR>22.4 字符串對象 374
<BR>22.4.1 創建string對象 375
<BR>22.4.2 調用字符串對象的屬性和方法 375
<BR>22.4.3 查找類方法 375
<BR>22.4.4 操作類方法 377
<BR>22.4.5 大小寫轉換方法 378
<BR>22.4.6 HTML標簽類方法 379
<BR>22.5 日期對象 380
<BR>22.5.1 創建日期對象 381
<BR>22.5.2 日期對象常用方法 381
<BR>22.6 Number對象 382
<BR>22.6.1 Number對象的創建 382
<BR>22.6.2 Number對象的屬性 382
<BR>22.6.3 Number對象的方法 383
<BR>22.7 Boolean對象 384
<BR>22.7.1 Boolean對象的創建 384
<BR>22.7.2 Boolean對象的屬性和方法 384
<BR>22.8 Math對象 385
<BR>22.8.1 Math對象的屬性 385
<BR>22.8.2 Math對象的方法 385
<BR>22.9 Global對象 386
<BR>22.9.1 Global對象的屬性 386
<BR>22.9.2 Global對象的方法 387
<BR>第 23章 Window對象 390
<BR>23.1 Window對象概述 390
<BR>23.2 Window對象屬性 390
<BR>23.2.1 closed屬性 390
<BR>23.2.2 status和defaultstatus屬性 391
<BR>23.2.3 opener屬性 391
<BR>23.2.4 name屬性 392
<BR>23.2.5 self屬性和window屬性 392
<BR>23.2.6 top屬性 393
<BR>23.3 Window對象方法 393
<BR>23.3.1 open()方法 394
<BR>23.3.2 close()方法 395
<BR>23.3.3 alert()方法 395
<BR>23.3.4 confirm()方法 396
<BR>23.3.5 prompt()方法 396
<BR>23.3.6 moveTo()方法 397
<BR>23.3.7 moveBy()方法 398
<BR>23.3.8 resizeTo()和resizeBy()方法 399
<BR>23.3.9 focus()方法 400
<BR>23.3.10 blur()方法 400
<BR>23.3.11 scrollBy()方法 400
<BR>23.3.12 scrollTo() 401
<BR>23.3.13 setInterval()方法 401
<BR>23.3.14 clearInterval()方法 402
<BR>23.3.15 setTimeout()方法 402
<BR>23.3.16 clearTimeout()方法 403
<BR>23.4 Window的子對象 403
<BR>23.4.1 Document對象 404
<BR>23.4.2 Location對象 411
<BR>23.4.3 History對象 415
<BR>23.4.4 Navigator對象 416
<BR>24.4.5 Screen對象 419
<BR>第 24章 DOM（文檔對象模型） 420
<BR>24.1 DOM基礎 420
<BR>24.2 HTML DOM 420
<BR>24.2.1 HTML DOM標準屬性 420
<BR>24.2.2 HTML DOM常用對象 421
<BR>第 25章 JavaScript事件 441
<BR>25.1 事件流 441
<BR>25.1.1 冒泡型事件流 441
<BR>25.1.2 捕獲型事件流 443
<BR>25.1.3 DOM事件流 443
<BR>25.2 事件監聽方法 443
<BR>25.2.1 IE 443
<BR>25.2.2 DOM 444
<BR>25.3 Event對象 445
<BR>25.3.1 Window對象事件句柄 445
<BR>25.3.2 表單對象事件句柄 450
<BR>25.3.3 鍵盤對象事件句柄 453
<BR>25.3.4 鼠標對象事件句柄 456
<BR>25.3.5 媒介對象事件句柄 460
<BR>25.3.6 鼠標和鍵盤屬性 460
<BR>25.3.7 Event對象標準屬性 465
<BR>25.3.8 Event對象標準方法 470
<BR>第 26章 HTML5 canvas 472
<BR>26.1 添加、訪問canvas元素 472
<BR>26.1.1 <canvas>標簽 472
<BR>26.1.2 訪問canvas元素 473
<BR>26.1.3 getContext()方法 473
<BR>26.2 繪製路徑 474
<BR>26.2.1 canvas坐標系統 474
<BR>26.2.2 使用路徑 474
<BR>26.2.3 繪製直線 475
<BR>26.2.4 繪製圓弧 476
<BR>26.2.5 繪製貝塞爾曲線 478
<BR>26.2.6 三次貝塞爾曲線 478
<BR>26.2.7 矩形路徑 479
<BR>26.2.8 繪製文字 480
<BR>26.3 繪製矩形 480
<BR>26.3.1 刪除矩形圖形 480
<BR>26.3.2 填充矩形 481
<BR>26.3.3 繪製矩形邊框 481
<BR>26.4 圖像 482
<BR>26.5 風格屬性 483
<BR>26.5.1 路徑輪廓 483
<BR>26.5.2 路徑填充 484
<BR>26.5.3 線段端點 484
<BR>26.5.4 線段連接 485
<BR>26.5.5 miterLimit屬性 486
<BR>26.5.6 線條寬度 487
<BR>26.5.7 透明度 487
<BR>26.5.8 字體屬性 488
<BR>26.6 常用對象 489
<BR>26.6.1 顏色漸變對象 489
<BR>26.6.2 線性顏色漸變 489
<BR>26.6.3 徑向顏色漸變 490
<BR>26.6.4 貼圖模式對象 491
<BR>26.7 圖形陰影 492
<BR>26.7.1 shadowBlur屬性 492
<BR>26.7.2 shadowColor屬性 492
<BR>26.7.3 shadowOffsetX屬性 492
<BR>26.7.4 shadowOffsetY屬性 492
<BR>26.8 狀態保存與恢復 493
<BR>26.8.1 保存狀態 493
<BR>26.8.2 恢復狀態 493
<BR>26.9 組合 494
<BR>26.9.1 層疊屬性 494
<BR>26.9.2 裁剪路徑 494
<BR>26.10 坐標變換 495
<BR>26.10.1 translate()方法 495
<BR>26.10.2 scale()方法 496
<BR>26.10.3 rotate()方法 497
<BR>第 27章 HTML5高級編程 498
<BR>27.1 HTML拖放 498
<BR>27.1.1 設置元素拖放屬性 498
<BR>27.1.2 拖放事件句柄 498
<BR>27.1.3 拖放事件順序 499
<BR>27.1.4 dataTransfer對象 499
<BR>27.2 拖放實例 503
<BR>27.2.1 拖放事件流 503
<BR>27.2.2 拖放一幅圖像 504
<BR>27.3 客戶端數據存儲 505
<BR>27.3.1 Web Storage 505
<BR>27.3.2 Web SQL Database 506
<BR>27.3.3 Offline Storage 506
<BR>27.4 本地存儲 506
<BR>27.4.1 本地存儲API 506
<BR>27.4.2 本地存儲應用 507
<BR>27.4.3 事件監聽 509
<BR>27.5 會話存儲 511
<BR>27.6 Web SQL Database存儲 512
<BR>27.7 Offline Storage存儲 512
<BR>27.7.1 manifest文件 512
<BR>27.7.2 緩存更新 514
<BR>27.7.3 檢測是否在線 514
<BR>27.8 視頻控制 515
<BR>27.8.1 獲取和創建Video對象 515
<BR>27.8.2 Video對象 515
<BR>27.8.3 應用實例 516 </div>
</div>
</div>
</div>
<div class="col-12 col-lg-2 d-none d-lg-block">
<div class="w200 m0" style="position:sticky;top:126px;">
<div class="position-relative">
<div class="TitleUnderline color-blue2 "><i class="bi bi-bookmark-star-fill"></i> 主題書展</div>
<a href="/promote/publisher" class="text text-blue2 position-end Bold fs-12">更多 <i class="bi bi-plus-lg"></i></a>
</div>
<div class="swiper-container SwiperVertical w200 h730 Vertical180 p0">
<div class="swiper-wrapper ">
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/monthly_coupon/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14679.gif" alt="三民月月讀書金" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">滿600現折50</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/simplifiedbooks/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/13576.gif" alt="簡體每月選書" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0126drama/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14835.gif" alt="寒假補完計畫，逃離人間進入小說世界" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">79折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0122original/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14829.gif" alt="匯讀中外曬書展" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">5折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2025/2025sanmintop/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14768.gif" alt="2025三民年度暢銷書展" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">79折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2024/0325simplified_chinese/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14161.gif" alt="簡體曬書節" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">單79五70</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/dramabooks/index/?id=a0&pi=1&utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://activity.sanmin.com.tw/promotions/event/dramabooks/180.gif" alt="簡體熱門影劇書展" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0203tibeorig/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14844.gif" alt="2026台北說展 精選參展外文書" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">2折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0115tibe/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14815.gif" alt="2026台北國際書展" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">75折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0101newyear/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14779.gif" alt="2026新年書展" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">75折起</span></div>
</a>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
$(function () {
SwiperVertical('.Vertical180', 5);
})
</script>
</div>
</div>
</div>
<div id="IndexRelation" class="mb5"></div>
</div>
<div class="d-lg-none">
<div class="mt5">
<div class="position-relative">
<h2 class="TitleUnderline color-blue2 "><i class="bi bi-bookmark-star-fill"></i> 主題書展</h2>
<a href="/promote/publisher" class="text text-blue2 position-end Bold">更多書展 <i class="bi bi-plus-lg"></i></a>
</div>
<div class="py5">
<div class="swiper-container PromoAD180" id="PromoAD180">
<div class="swiper-wrapper ">
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/monthly_coupon/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14679.gif" alt="三民月月讀書金" />
</div>
<h3 class="d-none">三民月月讀書金</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">滿600現折50</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/simplifiedbooks/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/13576.gif" alt="簡體每月選書" />
</div>
<h3 class="d-none">簡體每月選書</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0126drama/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14835.gif" alt="寒假補完計畫，逃離人間進入小說世界" />
</div>
<h3 class="d-none">寒假補完計畫，逃離人間進入小說世界</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">79折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0122original/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14829.gif" alt="匯讀中外曬書展" />
</div>
<h3 class="d-none">匯讀中外曬書展</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">5折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2025/2025sanmintop/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14768.gif" alt="2025三民年度暢銷書展" />
</div>
<h3 class="d-none">2025三民年度暢銷書展</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">79折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2024/0325simplified_chinese/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14161.gif" alt="簡體曬書節" />
</div>
<h3 class="d-none">簡體曬書節</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">單79五70</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/dramabooks/index/?id=a0&pi=1&utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://activity.sanmin.com.tw/promotions/event/dramabooks/180.gif" alt="簡體熱門影劇書展" />
</div>
<h3 class="d-none">簡體熱門影劇書展</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0203tibeorig/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14844.gif" alt="2026台北說展 精選參展外文書" />
</div>
<h3 class="d-none">2026台北說展 精選參展外文書</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">2折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0115tibe/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14815.gif" alt="2026台北國際書展" />
</div>
<h3 class="d-none">2026台北國際書展</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">75折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0101newyear/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14779.gif" alt="2026新年書展" />
</div>
<h3 class="d-none">2026新年書展</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">75折起</span></div>
</a>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
$(function() {
SwiperRWD('#PromoAD180',2,3,6);
})
</script>
</div>
</div>
</div>
<div class="content mb10">
<h2 class="TitleUnderline color-sanmin mb0">
<i class="bi bi-exclamation-circle-fill"></i> 購物須知
</h2>
<div class="p10 bg-gray">
<p><span style="color:#237a0f;">大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。</span><br /><br /><span style="color:#ff0000;">特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。</span><br /><br /><span style="color:#006699;">無現貨庫存之簡體書，將向海外調貨：</span><br /><span style="color:#006699;">海外有庫存之書籍，等候約45個工作天;</span><br /><span style="color:#006699;">海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。</span></p><p>為了保護您的權益，「三民網路書店」<span style='color:red'>提供會員七日商品鑑賞期</span>(收到商品為起始日)。</p><p>若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。</p>
</div>
</div>
</div>
<script type="text/javascript" src="/scripts/rwd/pinch-zoom.umd.js"></script>
<script>
$(function () {
if (navigator.userAgent == 'SanminTools') {
SanminTools.camera.openScanButton();
}
$("#Scaner").keyup(function (e) {
if (e.keyCode == 13) {
var EAN = $("#Scaner").val();
location.href = 'https://www.sanmin.com.tw/product/EAN/' + EAN;
}
});
})
</script>
<!-- 下方按鈕 mobile -->
<div class="MobileBottomNav ProductBottomCart">
<div class="row">
<div class="col-6 PriceStock">
<div>
<div class="DiscPrice text-inherit">
<span>優惠價：</span><span class="Disc disc-87">87</span>
<span class="Price">465</span>
</div>
<div class="mobile-store fs-14 lh-14 text-brown">
<span>海外經銷商無庫存，到貨日平均30天至45天</span>
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col">
<button type="button" class="bottomBtn" onclick="AddCollect('006792474');">
<i class="bi bi-heart-fill"></i>
<br> 收藏
</button>
</div>
<div class="col">
<button type="button" class="bottomBtn bg-sanmin" onclick="AddCart('006792474', '');">
<i class="bi bi-cart-fill"></i>
<br> 加入購物車
</button>
</div>
</div>
</div>
</div>
</div>
<!-- end 下方按鈕 mobile -->
<script>
$(function () {
var c = getCookie('weblinkauth');
if (c != '') {
var wUser = JSON.parse(c);
var $btn = $('<button>').addClass('btn btn-orange2-l px10 py2').text('推薦至圖書館');
$btn.appendTo('#btn-WebLink');
$btn.click(function () {
window.open('https://weblink.bookhouse.com.tw/WB2024/dy.aspx?ui=' + wUser.ui + '&id=' + wUser.id + '&isbn=9787115471406', '圖書推薦採訪整合系統',);
});
}
})
</script>
<script>
function PriceTabs( tab = 0) {
var $ctrl = $('#PriceTabs');
var $tabs = $ctrl.find('>.title');
var $content = $ctrl.find('>.body');
var i = 0;
var link = '';
$tabs.find('.tab').click(function () {
i = $(this).index();
link = $(this).attr('link');
if (link != '' && tab != i) {
location.href ='/product/index/'+ link;
} else {
$tabs.find('.active').removeClass('active');
$content.find('.active').removeClass('active');
$tabs.find('.tab').eq(i).addClass('active');
$content.find('> div').eq(i).addClass('active');
}
});
if ($tabs.find('.tab').length == 1 ) {
$tabs.hide();
tab = 0;
} else {
$tabs.show();
}
$tabs.find('.tab').eq(tab).click();
}
$(function () {
PriceTabs(0);
})
</script>
</div>
<div class="MobileBottomNav">
<a href="https://www.sanmin.com.tw/promote/top"><i class="bi bi-trophy-fill"></i><br />暢銷榜</a>
<a href="https://www.sanmin.com.tw/home/faq"><i class="bi bi-question-circle-fill"></i><br />客服中心</a>
<a href="https://www.sanmin.com.tw/shopping/car/collect"><i class="bi bi-heart-fill"></i><br />收藏</a>
<a href="#"><label for="HistoryHide"><i class="bi bi-book"></i><br />瀏覽紀錄</label></a>
<a href="https://www.sanmin.com.tw/member/index"><i class="bi bi-people-fill"></i><br />會員專區</a>
</div>
<style>
.SiteMap .col{
padding:1px;
}
</style>
<footer>
<div class="content">
<div class="row">
<div class="col-12 col-lg-8 p0">
<div class="Bold text-yellow fs-20">網站導航 >> </div>
<div class="p5 lh-18 mb10">
<div class="row row-cols-lg-5 row-cols-3 text-left fs-16 SiteMap">
<div class="col"><a href="https://www.sanmin.com.tw/static/history">關於我們</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/store/index">門市專區</a></div>
<div class="col"><a href="http://www.104.com.tw/jobbank/custjob/index.php?r=cust&j=456143252c393f6831593c20533f39197413b4426262626683d43512270j53">人才招募</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/other/voucher">禮券兌換</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/promote/bonus">紅利積點</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/promote/library">中文分類</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/product/scheme/?id=000">圖書分類法</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/product/schemechina/?id=A">中國圖書館分類法</a></div>
<div class="col "><a href="https://www.sanmin.com.tw/home/faq/">常見問題</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/home/faq/新手購書">新手購書</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/member/index/couponreg">通關密碼</a></div>
<div class="col"><a href="https://elearning.sanmin.com.tw/">學習平台</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/static/catalogue">圖書館採購/編目</a></div>
<div class="col"><a href="https://activity.sanmin.com.tw/nou/">空中大學購書</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/static/businesscustomer">企業合作</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/other/cooperation">異業合作</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/blog/index">閱讀潮評</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/promote/bonus">紅利兌換</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/static/g_Link">好站連結</a></div>
</div>
</div>
<div class="d-none d-md-inline-block">
<div class="Bold text-yellow fs-20">圖書目錄 >> </div>
<div class="p5 lh-18 mb10">
<div class="row row-cols-3 text-left fs-16">
<div class="col p0">
<a href="https://drive.google.com/file/d/1lqCGLstDfjSsP19EBNKM7Yv1M0e-41So/view?usp=sharing">三民・東大・弘雅三民</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_9F89z01Pbc7RNVkBoaEf-kbKkBo3eLS/view?usp=sharing">小山丘童書(0-6歲)</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_5CdIcQpltRg_W40Qj8aCtN_KMy9KEU4/view?usp=sharing">兒童・青少年(7歲以上)</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_9IfRSoXgMyLykhCF84oOk-iifxpW9q6/view?usp=sharing">古籍圖書目錄</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_BTZb2IMtGzdlXaOCSsFeqyebWPREv9E/view?usp=sharing">古典圖書目錄</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_Bzpauv2oxyua-zIN0ggqs7isy0Aijcv/view?usp=sharing">畢業禮品</a>
</div>
</div>
</div>
<div class="Bold text-yellow fs-20">聯絡資訊 >> </div>
<div class="row text-light fs-14">
<div class="col">
<div class="text-light Bold"><i class="fas fa-map-marker-alt"></i> 網路書店</div>
<div><a href="https://goo.gl/maps/hnxoce4uHmT2" class="text-light" target="_blank">台北市復興北路386號</a></div>
<div>電話：02-2500-6600轉 130、131</div>
<div>
客服信箱：<a href="mailto:ec@sanmin.com.tw">ec@sanmin.com.tw</a>
</div>
</div>
<div class="col">
<div class="text-light Bold"><i class="fas fa-map-marker-alt"></i> 復北店</div>
<div><a href="https://goo.gl/maps/hnxoce4uHmT2" class="text-light" target="_blank">台北市復興北路386號</a></div>
<div>電話：02-2500-6600</div>
<div>營業時間：11:00 AM - 9:00 PM</div>
</div>
<div class="col">
<div class="text-light Bold">
<i class="fas fa-map-marker-alt"></i> 重南店
</div>
<div><a href="https://goo.gl/maps/XSHRbPBDf5s" class="text-light" target="_blank">台北市重慶南路一段61號</a></div>
<div>電話：02-2361-7511</div>
<div>營業時間：11:00 AM - 9:00 PM</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 p0">
<div class="text-center mb10">
<a href="https://www.sanmin.com.tw/other/epaper" target="_blank"><img src="https://cdnec.sanmin.com.tw/images/layout/epaper.gif" alt="訂閱電子報"></a>
<a href="https://www.sanmin.com.tw/staticpage/hkck/index.html" target="_blank"><img src="https://cdnec.sanmin.com.tw/images/layout/hkckship.gif" alt="香港便利店"></a>
</div>
<div class="Bold text-yellow fs-20 text-left">聚焦三民 >> </div>
<div id="FollowSanmin" class="">
<div class="row row-cols-5">
<div class="col"><a href="https://www.facebook.com/sanminfans/" target="_blank"><div class="border"><i class="bi bi-facebook"></i></div><span>三民書局</span></a></div>
<div class="col"><a href="https://www.facebook.com/sanmineditor/" target="_blank"><div class="border"><i class="bi bi-facebook"></i></div><span>三民出版</span></a></div>
<div class="col"><a href="https://www.instagram.com/sanminbook/" target="_blank"><div class="border"><i class="bi bi-instagram"></i></div></a></div>
<div class="col"><a href="https://line.me/R/ti/p/5uaGk_kB9l" target="_blank"><div class="border"><i class="bi bi-line"></i></div></a></div>
<div class="col"><a href="https://www.youtube.com/channel/UC3ws3A0NjQcJmN1ZPs-UWgQ" target="_blank"><div class="border"><i class="bi bi-youtube"></i></div></a></div>
</div>
</div>
<div class=" text-center pb10">
<img src="https://cdnec.sanmin.com.tw/images/logo/footer_logo_g.png" class="mw-100" alt="三民網路書店">
</div>
<div class="section px10">
<div class="copyright fs-14 lh-20 w260 m0">
<div>本站著作權屬弘雅三民圖書股份有限公司<br />及相關著作權所有人所有</div>
<div>Copyright © San Min Book Co.,Ltd.<br /> All Rights Reserved.</div>
<div>統一編號：05134324</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<div id="SideMenu">
<div class="MenuClose">
<button >
<i class="bi bi-x"></i>
</button>
<div style="flex:8"></div>
</div>
<ul class="MenuBar row">
<li class="col"> <a href="/member/joinApply "> <i class="bi bi-person-plus-fill"></i> 加入會員 </a></li>
<li class="col"> <a href="javascript:;" onclick="Login();"> <i class="bi bi-box-arrow-in-right"></i> 會員登入 </a> </li>
<li class="col"><a href="/home/faq"><i class="bi bi-question-circle-fill"></i> 客服中心</a></li>
<li class="col"><a href="/coupon/index/"><i class="bi bi-currency-dollar"></i> 領券專區</a></li>
</ul>
<div class="MenuBody ">
<div class="MenuLeft ">
<ul class="Menulink">
<li> <a href="/">首頁 </a> </li>
<li class="active" name="網站導航">
<a alt="網站導航" onclick="SideMenuActive('網站導航')">網站導航 </a> </li>
<li name="暢銷榜"> <a href="/promote/top" alt="暢銷榜" >暢銷榜 </a> </li>
<li name="新品"> <a href="/promote/hotbook" alt="新品" >新品 </a> </li>
<li name="中文書"> <a href="/promote/library" alt="中文書" >中文書 </a> </li>
<li name="外文書"> <a href="/promote/originaltext" alt="外文書" >外文書 </a> </li>
<li name="簡體書"> <a href="/promote/china" alt="簡體書" >簡體書 </a> </li>
<li name="三民東大"> <a href="/promote/sanmin" alt="三民東大" >三民東大 </a> </li>
<li name="親子館"> <a href="/promote/child" alt="親子館" >親子館 </a> </li>
<li name="文具禮品"> <a href="/promote/stationery" alt="文具禮品" >文具禮品 </a> </li>
<li name="漫畫館"> <a href="/promote/comic" alt="漫畫館" >漫畫館 </a> </li>
<li name="教科考用"> <a href="/promote/exam" alt="教科考用" >教科考用 </a> </li>
<li name="政府出版"> <a href="/promote/government" alt="政府出版" >政府出版 </a> </li>
<li name="香港出版"> <a href="/promote/hongkong" alt="香港出版" >香港出版 </a> </li>
<li name="大學出版"> <a href="/promote/university" alt="大學出版" >大學出版 </a> </li>
<li name="得獎作品"> <a href="/promote/prize" alt="得獎作品" >得獎作品 </a> </li>
<li name="套書"> <a href="/promote/packagebook" alt="套書" >套書 </a> </li>
<li name="紅利兌換"> <a href="/promote/bonus" alt="紅利兌換" >紅利兌換 </a> </li>
<li> <a href="https://activity.sanmin.com.tw/addbuy">加價構 </a> </li>
<li> <a href="/promote/publisher">主題書展 </a> </li>
</ul>
</div>
<div class="MenuRight ">
<div class="MenuContent show" name="網站導航">
<div class="panel bg-sanmin">
<div class="title">三民書局</div>
<div class="body">
<div class="row row-cols-2 lh-30 fs-16 sublist">
<div class="col"><a href="/static/history">關於我們</a></div>
<div class="col"> <a href="/store/index">門市專區 </a> </div>
<div class="col"> <a href="https://activity.sanmin.com.tw/promotions/event/122103sanmin/index">藝文講座 </a> </div>
<div class="col"> <a href="https://elearning.sanmin.com.tw/">學習平台 </a> </div>
<div class="col"><a href="/other/cooperation">異業合作</a></div>
<div class="col"><a href="/static/catalogue">圖書採購/編目</a></div>
<div class="col"><a href="http://www.104.com.tw/jobbank/custjob/index.php?r=cust&j=456143252c393f6831593c20533f39197413b4426262626683d43512270j53" target="_blank">人才招募</a></div>
<div class="col"><a href="/other/voucher">禮券兌換處</a></div>
<div class="col"><a href="/i">瀏覽器資訊</a></div>
</div>
</div>
</div>
<div class="panel bg-sanmin">
<div class="title">三民網路書店服務</div>
<div class="body">
<div class="row row-cols-2 sublist">
<div class="col"><a href="/static/termsofservice">會員服務條款</a></div>
<div class="col"><a href="/static/termssecurity">資訊安全警語</a></div>
<div class="col"><a href="/static/termspprivacy">隱私權政策</a></div>
<div class="col"><a href="/home/faq/新手購書">新手購書</a></div>
<div class="col"><a href="/product/scheme/?id=000">圖書分類</a></div>
<div class="col"><a href="/product/schemechina/?id=A">中國圖書館分類</a></div>
<div class="col"><a href="https://activity.sanmin.com.tw/nou/?Kind=Book">空中大學購書</a></div>
<div class="col"><a href="/static/g_divnk">好站連結</a></div>
</div>
</div>
</div>
<div class="panel bg-sanmin">
<div class="title">企業會員專區</div>
<div class="body">
<div class="row row-cols-2 sublist">
<div class="col"><a href="/static/businessclause/?type=join">加入企業會員</a></div>
<div class="col"><a href="/static/businessclause">服務條款</a></div>
<div class="col"><a href="/static/businessprocurement">會員須知</a></div>
</div>
</div>
</div>
<div class="panel bg-sanmin">
<div class="title">圖書目錄下載</div>
<div class="body">
<div class="row row-cols-2 sublist">
<div class="col-12"><a href="https://drive.google.com/file/d/1lqCGLstDfjSsP19EBNKM7Yv1M0e-41So/view?usp=sharing">三民・東大・弘雅三民</a></div>
<div class="col-12"><a href="https://drive.google.com/file/d/1_9F89z01Pbc7RNVkBoaEf-kbKkBo3eLS/view?usp=sharing">小山丘童書(0-6歲)</a></div>
<div class="col-12"><a href="https://drive.google.com/file/d/1_5CdIcQpltRg_W40Qj8aCtN_KMy9KEU4/view?usp=sharing">兒童・青少年(7歲以上)</a></div>
<div class="col"><a href="https://drive.google.com/file/d/1_9IfRSoXgMyLykhCF84oOk-iifxpW9q6/view?usp=sharing">古籍圖書目錄</a></div>
<div class="col"><a href="https://drive.google.com/file/d/1_BTZb2IMtGzdlXaOCSsFeqyebWPREv9E/view?usp=sharing">古典圖書目錄</a></div>
<div class="col"><a href="https://drive.google.com/file/d/1_Bzpauv2oxyua-zIN0ggqs7isy0Aijcv/view?usp=sharing">畢業禮品</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
var $Menu = $('#SideMenu');
$('.SideMenuBtn').click(function () {
$Menu.show();
if ($('#PromoUrl').length == 1) {
var url = $('#PromoUrl').val();
var id = $('#PromoteSelectID').val();
url=url.replace(/\/$/g,'');
var $a = $Menu.find('[href="' + url + '"]');
$a.parent().addClass('active');
SideMenuActive($a.attr('alt'), url);
}
})
$Menu.find('.MenuClose').click(function () {
$Menu.hide();
});
})
function SideMenuActive(name,url) {
var $m = $('#SideMenu');
var $mr = $m.find('.MenuRight');
var $tab = $mr.find('.MenuContent[name="' + name + '"]');
var $ml = $m.find('.Menulink');
$ml.find('.active').removeClass('active');
$ml.find('[name="'+ name +'"]').addClass('active');
$mr.find('.show').removeClass('show');
if ($tab.length == 0 && true) {
$tab = $('<div>').addClass('MenuContent').attr('name', name);
var $div = $('<div/>').html(name);
var PromoUrl = $('#PromoUrl').val();
if (PromoUrl !=null && PromoUrl.includes(url)) {
var $left = $('.left-menu');
$div.html($left.html());
} else {
$div = $('<div/>').load(url + '/?id=menu');
}
$div.appendTo($tab);
$tab.appendTo($mr);
}
$tab.addClass('show');
}
</script>
<input type="hidden" id="ScanInput">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="/scripts/rwd/click.js?v=21230017"></script>
<script src="/scripts/jquery.rwdImageMaps.min.js?v=21230017"></script>
<script src="/scripts/swiper/swiper.min.js?v=21230017"></script>
<script src="/scripts/rwd/silder.js?v=21230017"></script>
<script src="/scripts/lazyload.js"></script>
<script src="/scripts/sanmin.js?v=21230017"></script>
<script src="/scripts/mvcsite.js?v=21230017"></script>
<script type="application/ld+json">
{ "@context": "http://schema.org", "@type": "Book", "additionalType":"Product",
"@id": "https://www.sanmin.com.tw/product/index/006792474", "isbn": "9787115471406", "name": "HTML5/CSS3/JavaScript技術大全（簡體書）",
"url": "https://www.sanmin.com.tw/product/index/006792474", "image": "https://cdnec.sanmin.com.tw/product_images/711/711547140.jpg", "description":"書名：HTML5/CSS3/JavaScript技術大全（簡體書），ISBN：9787115471406，出版社：人民郵電出版社，作者：曹衍龍、汪傑，頁數：517，出版日期：2018/05/15",
"BookFormat": "Paperback",
"numberOfPages": "517", "datePublished": "2018-05-15",
"typicalAgeRange":"0-0", "bookEdition": "", "version": "",
"author": [{ "@type": "Person", "name": "曹衍龍、汪傑" }],
"publisher": [{ "@type": "Organization", "name": "人民郵電出版社" }],
"offers": { "@type": "Offer", "priceCurrency":"TWD", "price": "465",
"availability":"http://schema.org/OutOfStock", "url":"https://www.sanmin.com.tw/product/index/006792474",
"priceValidUntil":"2026-02-21" } }
</script>
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"首頁","item":"https://www.sanmin.com.tw"},{"@type":"ListItem","position":2,"name":"簡體書","item":"http://www.sanmin.com.tw/promote/china"},{"@type":"ListItem","position":3,"name":"電腦〈計算機〉","item":"http://www.sanmin.com.tw/promote/china/?id=nn14"},{"@type":"ListItem","position":4,"name":"電腦入門","item":"http://www.sanmin.com.tw/promote/china/?id=nn1401"}]}
</script>
<script type="text/javascript">
$(function () {
$(".TryToSeeSmall").lazyload();
$('.ProductImageSilder').bind('click mouseenter ', function () {
var isload = $(this).hasClass('isload');
if (!isload) {
$(".TryToSeeBig").lazyload();
$(this).addClass('isload');
}
})
var url = 'https://www.sanmin.com.tw/product/index/006792474';
var form = '<iframe src="https://www.facebook.com/plugins/like.php?href=' + url + '&width=146&layout=button_count&action=like&size=large&show_faces=true&share=true&height=40&appId=231535363937338" width="65vw" style="border:none;overflow:hidden;height:32px;" scrolling="no" frameborder="0"allowtransparency="true" allow="encrypted-media"></iframe>';
$('#DviFaceBook').html(form);
var SilderBottom = new Swiper(".ProductImageSilder .Silder-Bottom", {
spaceBetween: 5,
slidesPerView: 5,
freeMode: true,
watchSlidesProgress: true,
});
var SilderTop = new Swiper(".ProductImageSilder .Silder-Top", {
spaceBetween: 10,
thumbs: {
swiper: SilderBottom,
},
});
$('.ZoomIn').click(function () {
var $silder = $('.ProductCover');
var $top = $('.Silder-Top');
if ($silder.hasClass('bg-mask')) {
$silder.removeClass('bg-mask');
$(this).find('i').attr('class', 'bi bi-search');
} else {
$silder.addClass('bg-mask');
$(this).find('i').attr('class', 'bi bi-x-lg');
}
SilderTop.update();
SilderBottom.update();
});
App_History.add('006792474','711547140', 'HTML5/CSS3/JavaScript技術大全（簡體書）', 'https://cdnec.sanmin.com.tw/product_images/711/711547140.jpg');
onDisplay('IndexRelation', function () {
$('#IndexRelation').load('/product/relation/006792474');
});
$('.IntroSection').each(function () {
var $body = $(this).find('.SectionBody');
var h = $body.height();
var title = $(this).find('.SectionTitle').text();
if (h >= 150) {
var $btn = $('<button/>').addClass('IntroMore').html('More');
$btn.appendTo($body);
$btn.click(function () {
$body.css('max-height', 5000);
$(this).remove();
});
}
});
})
function PlatformAlert(title, url) {
var r = confirm("您將離開本網站，前往" + title);
if (r == true) {
window.open(url);
}
}
</script>
<script>
var iframeMode = false;
if (self.frameElement && self.frameElement.tagName == "IFRAME") {
iframeMode = true;
} else if (window.frames.length != parent.frames.length) {
iframeMode = true;
} else if (self != top) {
iframeMode = true;
}
if (iframeMode) {
$('body').addClass('iframe');
}
function AddCart(pf_id, addfrom) {
//Start-----GA加入購物車事件
sanminCrossDomain.push({ 'addPfid': pf_id });
//End-----GA加入購物車事件
if ($('#DivAddItem').length == 0) {
$('<div/>').attr('id', 'DivAddItem').appendTo('body');
}
var url = httpsHost + '/shopping/addItem/?id=' + pf_id + '&js=true&addfrom=' + addfrom;
$('.AddScript').remove();
var $Script = $('<script/>').addClass('.AddScript');
$Script.attr('src', url);
$Script.appendTo('body');
return true;
}
document.getElementById('ScanInput').addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
const value = this.value.trim();
if (value.length === 13) {
window.location.href = 'https://www.sanmin.com.tw/product/EAN/' + value;
}
}
});
</script>
</body>
</html>
第 1章 概述 1
1.1 HTML 1
1.1.1 HTML概述 1
1.1.2 HTML的發展歷史 1
1.1.3 HTML 5的特點 2
1.1.4 XML 3
1.1.5 XHTML 3
1.2 CSS 3
1.2.1 CSS概述 3
1.2.2 CSS的發展歷史 4
1.2.3 CSS的優點 4
1.3 JavaScript 4
1.3.1 JavaScript概述 5
1.3.2 JavaScript的發展歷史 5
1.3.3 客戶端JavaScript 5
1.3.4 JavaScript與Java的區別 5
1.4 W3C 6
1.5 開發工具 6
1.6 本書使用的瀏覽器 6
第 2章 HTML基本結構 8
2.1 第 1個HTML文檔 8
2.1.1 創建第 1個HTML文檔 8
2.1.2 標簽和元素 9
2.1.3 HTML文檔的結構 10
2.2 和 10
2.2.1 嚴格版本（Strict）DTD 10
2.2.2 過渡版本（Transitional）DTD 11
2.2.3 框架（Frameset）DTD 11
2.2.4 HTML5中的 11
2.2.5 標簽 11
2.3 全局屬性 11
2.4 頭部標簽 12
2.4.1 標題標簽