---
# System prepended metadata

title: HTML 簡單介紹
tags: [網頁, html, 講義, 教學]

---

---
title: HTML 簡單介紹
description: 是一種用於建立網頁的標記語言，它是一種標準化的語言，用來描述網頁上的結構和內容。這份講義將針對HTML做最入門的介紹
tags: html,網頁,講義,教學
langs: zh-tw
---
# HTML 簡單介紹
###### tags: `html` `創客社講義` 
*作者:陳宥端* @2023/03/26
### 介紹
>HTML (HyperText Markup Language) 是一種用於建立網頁的標記語言，它是一種標準化的語言，用來描述網頁上的結構和內容。
>
>與其他程式語言不同的是，HTML屬於一種標記性的語言，學習它的重點是要如何用**最恰當**的方式來描述一個事我們想要呈現的東西，當我們試著描述的越精準，最後出現的成品就會越接近我們所想像的樣子。

## 基本標號
---
HTML 語言的基本單位是元素 (element)，元素可以是文字、圖片、影片等等，它們用標籤 (tag) 來定義。HTML 標籤是由一對尖括號 (<>) 包圍的關鍵字，通常由起始標籤和結束標籤組成，例如 `<p>` 是段落起始標籤，`</p>` 是段落結束標籤，我們可以在每一個起始標籤中為這些標籤設定屬性。
```html
<element_name attribute>index</element_name>
<元素名稱 屬性>內容</元素內容>
<!--舉例-->
<a href="https://www.google.com">前往google</a>
```

當然有一些元件式單一元素的，就不需要有結束標籤，這種元件通常沒有屬性也沒有內容。

```HTML
<element_name>
<元素名稱>
<!--舉例-->
<hr>
<br>
```

### 註解
--- 
若要用在HTML的文本中插入註解，可以使用`<!--  -->`的標籤來插入註解內容。
```HTML
<!--comment index-->
<!--註解內容-->
```
## HTML 的基本結構
---
HTML有一個標準的起手式，以下列出的範例程式是最基本的HTML文件的結構，請一定要**詳記**以下的內容，在 ` head ` 的標籤中我們可以為網頁設定標題，這個標題並不會出現在網站的內頁中，而是出現在網頁的標籤上面(如下圖)。
![[Pasted image 20230326164415.png]]

當然，我們還可以設定許多的東西，但這將在進階的內容中才會提到。
我們可以在body的內容中放入我們要在網站上面呈現的內容，我們在後面會提到這些元素的功能。

```HTML
	<!DOCTYPE html>
	<html>
	  <head>
		<meta charset="UTF-8"><!--UTF-8編碼-->
	    <title>這是一個HTML文檔</title><!--標籤名稱-->
	  </head>
	  <body>
		<!--在這裡可以放入內容-->
	    <h1>歡迎來到我的網站</h1>
	    <p>這是一個示例HTML文檔。</p>
	  </body>
	</html>
```

寫完檔案之後，我們將其副檔名存成.html 的檔案，例如說，我就會將這篇網站儲存為 `hello.html`，若要開啟`.html` 的檔案，我們只需要點擊檔案兩下，電腦就會預設以瀏覽器開啟，如下圖


![[Pasted image 20230326165742.png]]


