--- 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]]