想寫網頁，就從HTML開始

###### tags:`前端技能樹` # 想寫網頁，就從HTML開始 HTML（HyperText Markup Language，超文本標記語言），是一種用來建立網站結構的語言，**透過包含標籤(Tag) 與內容(Content) 的元素(Element) 告訴瀏覽器該如何呈現網頁**，所以想寫網頁就要從HTML開始學習。 ## HTML 架構 ### 元素(Element) 的組成 **元素就是標記(Markup)的概念，將一段內容利用標籤標記起來，賦予內容特定的特性**。通常元素架構會長成這樣： ```html <tag attribute="value">我是元素內容</tag> ``` - **開始標籤 ```<tag>```、結束標籤 ```</tag>```：** 元素通常就是由成對的標籤組成，標籤的意義在於將網頁以結構化來呈現。 - **元素的內容：** 兩個標籤之間是元素的內容，也就是會呈現在網頁中的文字。 - **屬性(Attribute)：** 用來定義標籤的各種資訊 ### HTML的文件長什麼樣子？直接開啟 [CodeSandbox](https://codesandbox.io/) 的 Static Template，看一看 HTML 的文件要素有哪些。 ![](https://i.imgur.com/i6QlEva.gif) 在 index.html 裡你會看到： ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Static Template</title> </head> <body> <h1>This is a static template, there is no bundler or bundling involved!</h1> </body> </html> ``` - **```<!DOCTYPE html>```**：告訴瀏覽器文件屬於什麼類型 - **```<html></html>```**：包住網頁的所有內容 - **```<meta charset="UTF-8">```**：指定文件的編碼格式 - **```<title></title>```**：指定網頁的標題 - **```<head></head>```**：宣告一些不會讓使用者看到的網頁資訊，比如：標題、外部連結、腳本等等。 - **```<body></body>```**：呈現給使用者的網頁內容，也是主要進行網頁編輯的區塊。 ## 開始寫網頁吧！了解 HTML 文件的架構後，就讓我們直接在 ```<body></body>``` 內依序新增幾個常用的元素標籤來編輯網頁。 ### 標題 ```<h1>~<h6>``` ```html= <h1>我是標題h1</h1> <h2>我是標題h2</h2> <h3>我是標題h3</h3> ``` ### 段落文字 ```<p>``` ```html <p>我是是段落文字段落文字段落文字</p> ``` ### 超連結 ```<a>``` ```html <a href="https://www.youtube.com/" >Youtube連結</a> ``` ### 清單 ```<ul>/<ol>/<li>``` - **無序清單（Unordered lists）：**```<ul>``` - **有序清單（Ordered lists）：**```<ol>``` - **清單項目（List item）：**```<li>``` ```html= <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <ol> <li>one</li> <li>two</li> <li>three</li> </ol> ``` ### 圖片 ```<img>``` ```html <img src="圖片連結" alt="替代文字"> ``` ![](https://i.imgur.com/SlmUGuA.png) >是不是很簡單！只要針對網頁的內容去活用各種標籤，你就能做出網頁囉  ## 區塊元素除了能用標籤劃分單獨的文字內容，HTML 提供區塊元素，讓網頁的內容可以以區塊作區分，清楚的劃分網頁的結構。 ### ```<div>``` 基本上只是一個用來包裹內容的容器元素，本身不代表任何意義。 ```html= <div> <h1>我是標題h1</h1> <p>我是是段落文字段落文字段落文字</p> </div> ``` ### 語意化標籤所以為了能清楚表示區塊的意義，HTML5 還提供了語意化的標籤，賦予標籤意義，加強文件的結構化。分析一下[Notion官網](https://www.notion.so/desktop)的結構： ![](https://i.imgur.com/zupZnF5.png) - **頁首標籤 — ```<header>```**：表示頁面或區塊內的首要部分 - **導覽列 — ```<nav>```**：網站的導航列 - **主要區塊 — ```<main>```**：頁面的主要區塊，一個頁面只能有一個。 - **區塊 — ```<section>```**：單獨區塊，通常裡面含有標題。 - **頁尾 — ```<footer>```**：頁面的結尾，通常會用來表示一些網站資訊或導覽、連結。 ## 小結這個章節提到一些 HTML 的基本知識，當然除了文章裡面提到的各種元素和標籤，HTML 還提供了很多樣式的元素，讓我們能夠呈現更多不同的網頁資訊。如果你想要踏入前端這個領域，就一定一定要去學習更多標籤的使用！ > 想了解更多 HTML 元素可參考：[HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 目前但只有白底黑字的網頁一點都不好看！所以明天就讓我們來會一會讓網站變漂亮變美的 — CSS 魔術大師。 👉 如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️ ### 參考資料 - [MDN Web Docs - HTML](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.