--- title: 快速了解HTML與各tag的用途 tags: 網頁排版編輯 --- 快速了解 === 1. HyperText Markup Language(超文本標記性語言)，是標記性語言，不是程式語言。 2. 搭配CSS跟JavaScript一起用 3. 如果是.html .htm那就是靜態網頁；如果是.php之類的就是動態網頁。 4. 基本結構: ![](https://i.imgur.com/70qKFpG.png) 5. tag通常都會需要成對 6. 空元素沒有結束標籤 7. 一個比較漂亮、易讀的body ![](https://i.imgur.com/5gOSkgh.png) 5. 各tag的用途: header:標題 nav:網站選單、導覽 main:主要內容 article:獨立的區塊，通常包含一篇文章或是一個區塊之類的。 section:內含有意義且帶標題的內容。有點像article。 aside:側欄、附註等。 figure:可放圖片或code進去。 footer:結尾，可能會包含作者、版權、聯絡方式等等。 ***語意標籤不帶預設樣式，跟用div一樣，但用它能增加HTML給他人閱讀時的可讀性 Head的tag === ### head head的最外層 ```htmlembedded= <head> </head> ``` ### title 中間放的網頁標題是會顯示的內容 ```htmlembedded= <title> 網頁標題 </title> ``` ### meta 1. 設定網頁編碼 ```htmlembedded= <meta charset=''> ``` 2. 自己填關於網頁的描述 ```htmlembedded= <meta name='description' content=''> ``` 3. 定時重新整理(單位是秒) ```htmlembedded= <meta http-equiv='refresh' content=''> ``` ### link 1. 加網頁的icon ```htmlmixed= <link rel='icon' href='' [sizes=''] type=''> ``` 2. 引入CSS ```htmlmixed= <link rel='stylesheet' href=''> ``` ### script 放JS的路徑 ```htmlmixed= <script src=''></script> ``` ### style 直接設定CSS樣式 ```htmlmixed= <style> </style> ``` --- Body的tag === ### h1~hn 各種size的標籤 ```htmlmixed= <h1> </h1> ``` ### p 段落 裡面放文字 ```htmlmixed= <p> </p> ``` ### pre 文本 固定寬度的字體 ```htmlembedded= <pre></pre> ``` pre跟p的差別 ![](https://i.imgur.com/J3XwILK.png) ### hr 水平線(分隔線) ```htmlmixed= <hr> ``` ### br 換行 ```htmlmixed= <br> ``` ### span 一段文字,不占行 ```htmlmixed= <span> </span> ``` ### div 一段文字,占掉整行 ```htmlmixed= <div> </div> ``` ### a 超連結 ```htmlmixed= <a href='' [target=''] [download]> </a> ``` ### img 加入圖片 ```htmlmixed= <img src='' alt='' height='' weight=''> ``` ### auido 引入音訊 ```htmlmixed= <audio src='' controls autoplay loop muted></audio> ``` ### video 加入影片 ```htmlmixed= <video src='' height='' width='' controls autoplay loop muted></video> ``` ### iframe 設定一個框架嵌入外部的東西當內容 ```htmlmixed= <iframe src='' width='' height='' frameborder='' scrolling=''></iframe> ``` --- Body的巢狀tag === ### ul > li 黑點開頭的列表 ```htmlmixed= <ul> <li> </li> <li> </li> </ul> ``` ### ol > li 變化的列表 type='a':a、b、c type='A':A、B、C... type='1':1、2、3... type='i':i、ii、iii... type='I':I、II、III... ```htmlmixed= <ol type=''> <li> </li> <li> </li> </ol> ``` ### dl > dt . dd 清單 ??????????? ### table 表格 可不含其他屬性 但一定要tr跟td style主要的設定值是td <caption> </caption>:表格的名稱。 <thead> </thead>:表格的頭。 <tbody> </tbody>:身體部分。 <tfoot> </tfoot>:尾部。 但我必須說我蠻懶得用這三個，雖然這是壞習慣。 <tr> </tr>:定義一橫行的表格。 <th> </th>:標籤名稱。 <td> </td>:標籤內容。