---
# System prepended metadata

title: html基本架構
tags: [html]

---

#  html基本架構
###### tags: `html`

```html
<!DOCTYPE html>
<html>
<head>
    <title>這是一個測試頁</title>
</head>
<body>
    <h1>標題</h1>
    <p>這是段落TTTTTTTTEEEESTTTTTTTTTTTTT，</p>
    <p>wjeriljwriwjeir;wje;irj;wiejri;wjeri;</p>
</body>
</html>

```

-   `<!DOCTYPE html>`：告訴瀏覽器這是一個 HTML 文件。
-   `<html>`：整個 HTML 文件的根元素。
-   `<head>`：文件的頭部分，包含了一些 metadata，例如這個文件的標題 (title)。
-   `<title>`：這個 HTML 文件的標題。
-   `<body>`：文件的主要內容區塊，所有要顯示的內容都應該放在這裡。
-   `<h1>`：標題，這個例子中是一個最高級別的標題。
-   `<p>`：段落，這個例子中有兩個段落，分別包含了一些文字。

瀏覽器讀取這個 HTML 文件，根據其中的標籤和內容，顯示出一個網頁。在這個例子中，網頁會顯示一個標題和兩個段落，段落中的內容是 "這是段落TTTTTTTTEEEESTTTTTTTTTTTTT" 和 "wjeriljwriwjeir;wje;irj;wiejri;wjeri;"。

### 補充

**如果不添加<html> </html>是可以的嗎?**

在 HTML5 中， `<html>` 元素是可選的，如果你不添加它，瀏覽器仍然可以顯示網頁內容，因為瀏覽器會自動將缺失的元素補齊。例如，以下是一個不包含 `<html>` 元素的 HTML 5 文件：

```html
<!DOCTYPE html>
<head>
  <title>這是一個測試頁</title>
</head>
<body>
  <h1>標題</h1>
  <p>這是段落TTTTTTTTEEEESTTTTTTTTTTTTT，</p>
  <p>wjeriljwriwjeir;wje;irj;wiejri;wjeri;</p>
</body>
```

在這個例子中，`<html>` 元素被省略了，但瀏覽器仍然可以正確顯示網頁內容。不過，為了確保你的 HTML 文件符合標準，建議還是包含 `<html>` 元素。

**那DocType也可以不需要嗎**

在 HTML 中， `<!DOCTYPE>` 被用來指定 HTML 的版本和文件類型。 `<!DOCTYPE>` 是必需的，如果沒有它，瀏覽器就無法確定正確的文件類型，進而可能導致顯示和解釋錯誤。因此，`<!DOCTYPE>` 是必須的元素，不能省略。

在 HTML5 中， `<!DOCTYPE html>` 是唯一的文件類型聲明，可以放在 HTML 文件的開頭。在 HTML5 中，可以簡化 `<!DOCTYPE>` 的格式，只需要指定 `<!DOCTYPE html>`，而不需要指定 DTD（文檔類型定義）或 URI（統一資源標識符）。

總結來說，`<!DOCTYPE>` 是必需的，不能省略，它指定了 HTML 的版本和文件類型。在 HTML5 中， `<!DOCTYPE html>` 是唯一的文件類型聲明，並且可以簡化格式，不需要指定 DTD 或 URI。

##  Emmet快速建構基本架構

只要在擁有Emmet功能的IDE下皆可快速建構基礎架構
以VScode為例，只要在基礎列打上`!` + `Tab`即可

若需要添加某些標籤(ex.`<p>`標籤需要建構3個，可使用`p*3`
可快速添加三個段落

```html
<!--!+Tab快速生成結構-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--這是註解的方式-->
    <!--以下段落使用p*3 + Tab來快速生成3個段落-->
<p></p>
<p></p>
<p></p>
    
</body>
</html>
```

### 補充
**如果我想快速生成`<div class="item">`標籤該如何做?**

可以使用`.item`快速生成，"."預設為`<div>`標籤

以下為範例:
```html
<!--.item*3-->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

```
以下是Emmet的相關指令:
[Cheat Sheet (emmet.io)](https://docs.emmet.io/cheat-sheet/)



    


## 如何在網頁中嵌入圖檔

在`<body>`階層中加入`img` + `Tab`產生架構
並在`src`的部分裝入與html同資料夾的圖檔，即可插入

- `<img>` 標籤用於添加圖像，`src` 屬性指定圖像的 URL，`alt` 屬性為圖像添加一個替代文字描述，當圖像無法顯示時，替代文字會顯示在網頁上。在這個例子中，`alt` 屬性設置為「鯊魚翻頁」，當圖像無法顯示時，就會顯示這段文字。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是測試頁面</title>
</head>
<body>
    <!--這是註解的方式-->
    
    <h1>這是標題</h1>
<p>J是段落</p>
<p>UIQJEQWOIJEQOIEJQWIO</p>
<p>jeqilejqiljeqiljeilqwejql</p>
    <!--添加圖檔的方式打上img + Tab產生結構，並將同層資料夾內的檔案名稱置入-->

<!--在與htlm同層資料夾可直接輸入檔名-->    
<img src="1_9-Il_nJ8_lgeJreXTkxLsw.gif" alt="鯊魚翻頁">
<!--在與htlm同層資料夾內的資料夾內的檔案，則需輸入資料夾名稱/檔名-->
<img src="img/logo_gmail_lockup_dark_2x_r5.png" alt="Gmail LOGO">
<!--若是外部資料，則可以直接輸入其網址-->
<img src="https://www.udemy.com/staticx/udemy/images/v7/logo-udemy.svg" alt="Udemy LOGO">
    
</body>
</html>
</html>
```
完成後:
![](https://hackmd.io/_uploads/H1r1kD8mn.png)


這邊針對`meta`標籤做一下補充，meta類似於屬性的添加，用於提供有關文檔的元數據（metadata），例如頁面的描述、作者、關鍵字等。`<meta>` 元素中的屬性（例如 `charset`、`http-equiv`、`name`、`content` 等）可以用來指定文檔的編碼方式、重定向網頁、設置視口大小等。`<meta>` 元素中的屬性對網站的搜索引擎優化（SEO）也非常重要。因此，`<meta>` 元素通常用於在不可見的方式提供有關文檔的信息，而不會對頁面的外觀或交互造成影響。

-   `<meta charset="UTF-8">` 設置了頁面使用的字符集為 UTF-8。
    
-   `<meta http-equiv="X-UA-Compatible" content="IE=edge">` 告訴瀏覽器使用最新的渲染模式。
    
-   `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 用於定義頁面的視口，以便在不同設備上呈現適當的大小。

**meta通常都只放置於head標籤嗎**

是的，`<meta>` 元素通常被放置在 `<head>` 元素內，用於提供有關文檔的元數據（metadata），例如頁面的描述、作者、關鍵字等。`<meta>` 元素中的屬性（例如 `charset`、`http-equiv`、`name`、`content` 等）可以用來指定文檔的編碼方式、重定向網頁、設置視口大小等。`<meta>` 元素中的屬性對網站的搜索引擎優化（SEO）也非常重要。因此，`<meta>` 元素通常用於在不可見的方式提供有關文檔的信息，而不會對頁面的外觀或交互造成影響。

## 如何在網頁中加上連結(標籤`<a>`)

網頁中添加超連結在`<body>`標籤中加入`<a herf="網址"> 提示字元 <a>` 即可以下為範例，其中我添加了yahoo及google的連結至網頁內
並在後面分別寫上"這是yahoo/google連結"以示標記

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是測試頁面</title>
</head>
<body>
    <!--這是註解的方式-->
    <!--以下段落使用p*3 + Tab來快速生成3個段落-->
    <h1>這是標題</h1>
    <!--輸入a herf 並輸入網址及其提示字元-->
    <a href = "https://www.yahoo.com">這是yahoo連結</a>
    <!--若在網址後面添加 target = "_blank"則點擊網址後往只會開出新分頁-->
    <!--若在網址後面添加title = " " 則在滑鼠游標移過去時顯示提示字元-->
    <a href="https://www.google.com" target="_blank" title = "是沒看過逆">這是google連結</a>
    
<p>J是段落</p>
<p>UIQJEQWOIJEQOIEJQWIO</p>
<p>jeqilejqiljeqiljeilqwejql</p>
    <!--添加圖檔的方式打上img + Tab產生結構，並將同層資料夾內的檔案名稱置入-->

<!--在與htlm同層資料夾可直接輸入檔名-->    
<img src="1_9-Il_nJ8_lgeJreXTkxLsw.gif" alt="鯊魚翻頁">
<!--在與htlm同層資料夾內的資料夾內的檔案，則需輸入資料夾名稱/檔名-->
<img src="img/logo_gmail_lockup_dark_2x_r5.png" alt="Gmail LOGO">
<!--若是外部資料，則可以直接輸入其網址-->
<img src="https://www.udemy.com/staticx/udemy/images/v7/logo-udemy.svg" alt="Udemy LOGO">
    
</body>
</html>
```
- `target = _blank`:加上這段則點開後的網址會以開新分頁的方式呈現，而不是直接移動至該網址
- `title = " "`:加上這段可在滑鼠移動至連結時產生提示字元

![](https://hackmd.io/_uploads/B1cU08873.png)


### 補充

這邊可以探討一下標籤`<a></a>`
通常在前段`<a>`中可以添加相對應屬性來對a標籤做制定

像是:

`<a href ="https://ww.google.com" title="gooooogle">google page</a>`
其中就添加了`href`及 `title`屬性

`<a></a>`標籤很常應用在網頁設計，常見就像新聞頁面中會在內文(p段落標籤)中添加連結，算是很常使用的標籤種類



## `<ul> <li>`標籤

網頁中時常可以碰到網站以條列式擺放，其方法是以`<ul>`作為外框，而`<li>`則為內部選項
![](https://hackmd.io/_uploads/rkox9w8X2.png)

以下為基礎範例:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是測試頁面</title>
</head>
<body>
    <h1>這是標題</h1>
    <!--輸入a herf 並輸入網址及其提示字元-->
    <a href = "https://www.yahoo.com">這是yahoo連結</a>
    <!--若在網址後面添加 target = "_blank"則點擊網址後往只會開出新分頁-->
    <!--若在網址後面添加title = " " 則在滑鼠游標移過去時顯示提示字元-->
    <a href="https://www.google.com" target="_blank" title = "是沒看過逆">這是google連結</a>

    <!--添加圖檔的方式打上img + Tab產生結構，並將同層資料夾內的檔案名稱置入-->
<!--在與htlm同層資料夾可直接輸入檔名-->    
<img src="1_9-Il_nJ8_lgeJreXTkxLsw.gif" alt="鯊魚翻頁">
<!--在與htlm同層資料夾內的資料夾內的檔案，則需輸入資料夾名稱/檔名-->
<img src="img/logo_gmail_lockup_dark_2x_r5.png" alt="Gmail LOGO">
<!--若是外部資料，則可以直接輸入其網址-->
<img src="https://www.udemy.com/staticx/udemy/images/v7/logo-udemy.svg" alt="Udemy LOGO">

<!--在ul外殼中添加li標籤來新增項目，可產生條列式效果-->
<ul>    
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>
<!--若想要將標記改為數字，則使用ol-->
<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>
    
</body>
</html>
```

效果如下
![](https://hackmd.io/_uploads/SJmGoPLQ3.png)







