---
# System prepended metadata

title: 快速了解HTML與各tag的用途
tags: [網頁排版編輯]

---

---
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>:標籤內容。
