--- tags: HTML --- # HTML5--基礎篇 ## 簡介 * HTML(HyperText Markup Language)：強調及組織一般性文字，是一種標示，非程式設計 * 開始與結束標籤 * 巢狀結構 ## 基本架構 ```htmlmixed= <!DOCTYPE html> <html> <head> </head> <body> </body> </html> ``` * <html>~</html>：用html包覆整個程式 * <head>~</head>：給瀏覽器看的 * <body>~</body>：給人類看的 * <!DOCTYPE html>：定義目前使用的html為最新版 ## 基本語法 ### <head> * <meta charset="UTF-8">：這份文件是用UTF-8編碼 * <title>...</title>：網頁的標籤 ### <body> #### body內的屬性設定 * text：基本文字顏色。內定為黑色 * link：超連結的文字顏色，內定為藍色 * alink：按下超連結的文字顏色，內定為紫色 * vlink：已按過超連結的文字顏色，內定為紫色 * bgcolor：背景顏色，內定為白色 * background：插入背景圖片 #### 標題 (head) * <hn>...</hn>：標題，n=1~6，由大到小 #### 段落 (paragraph) * &lt;p&gt;...&lt;/p&gt;：建立段落。段落間空一行 * &lt;pre&gt;...&lt;/pre&gt;：保留標籤內文字的原始編排。但預設字體不同 #### 文字 * &lt;font size="n" color=""&gt;...&lt;/font&gt;：字體大小與顏色 n=1~7，內定為3 color可用色碼表 * &lt;b&gt;...&lt;/b&gt;：粗體 * &lt;i&gt;...&lt;/i&gt;：斜體 * &lt;u&gt;...&lt;/u&gt;：底線 * &lt;s&gt;...&lt;/s&gt;：刪除線 * &lt;sub&gt;...&lt;/sub&gt;：下標 * &lt;sup&gt;...&lt;/sup&gt;：上標 #### 圖片 * img：插入圖片。無結束標籤 * 圖片來源：絕對與相對路徑 * 替代文字：圖片無法顯示時，出現的替代文字 * 寬高會按照原始比例縮放 ```htmlmixed= <img src="圖片來源" alt="替代文字" width=" "> ``` #### 超連結 (anchor，錨點) * &lt;a&gt;...&lt;/a&gt;：插入超連結。絕對與相對路徑 * target="_blank"：在新分頁開網頁 * target="_self"：在原本視窗開網頁 ```htmlmixed= <a href="超連結" target="目標">...</a> ``` #### 表格 (table) * &lt;caption&gt;...&lt;/caption&gt;：表格標題 * &lt;th&gt;...&lt;/th&gt;：欄位標題 * colspan：左右欄合併 * rowspan：上下欄合併 ```htmlmixed= <table> <tr> <td>一小格</td> </tr> <tr>一行</tr> </table> ``` #### 跑馬燈 (marquee) * &lt;marquee&gt;...&lt;/marquee&gt;：建立跑馬燈。預設為左進右出。可加入屬性 * bgcolor：背景顏色 * width：寬度 * behavior="alternate"：左右來回移動 * behavior="slide"：只跑一次 * behavior="scroll"：捲動式。預設 * onmouseover="this.stop()" onmouseout="this.start()"：滑鼠移至時停下，滑鼠移開時繼續 * scroll amount：跑馬燈速度 #### 對齊方式 * &lt;center&gt;...&lt;/center&gt;：置中對齊 * &lt;right&gt;...&lt;/right&gt;：靠右對齊 * &lt;left&gt;...&lt;/left&gt;：靠左對齊 #### 空元素 (empty element)：無結束標籤 * &lt;hr /&gt;：水平線 (horizontal rules) 可加入屬性 size、 width、color、align * &lt;br /&gt;：換行 (break)