# Front End -- HTML
###### tags: `web develope`
HTML, Hypertext Markup Language，是標記語言，不是程式語言。
## 最基本的 HTML 網頁結構範例
```htmlembedded=
<!DOCTYPE html> <!--宣告-->
<html>
<head>
<!-- 網頁的資訊 -->
</head>
<body>
<!-- 網頁的內容 -->
</body>
</html>
```
### <!DOCTYPE>
第一行是一個「宣告」： **<!DOCTYPE html> 告訴瀏覽器這份文件是一個 HTML5** 的網頁，瀏覽器因而知道要怎麼用正確的方式來展示你的網頁。請注意宣告要寫在第一行，因為瀏覽器是一行一行讀取文件的，想愈早告訴他的資訊，請寫在愈上面。
### <html></html>
包住了整個網頁，表示這是一份 HTML 文件。被 <html> </html>包圍的內容，我們稱為網頁「元素」(element)。一份完整的 HTML 文件，必然會在 <html> </html>裡包含 <head></head> 和 <body> </body>兩個網頁元素。
### <head></head>
包圍的資訊稱為「標頭」，<head></head> 裡宣告各種網頁資訊，**這些資訊不會顯示給使用者看**，因為它們的**溝通對象是瀏覽器與其他的網路服務**，如 Google 搜索引擎，Facebook 等。<head></head> 宣告的資訊包括網頁標題、外部連結、網頁樣式、JavaScript 腳本、meta tag⋯⋯等。我們在以後的章節會有更詳細的介紹。
```htmlembedded=
<head>
<title>歡迎來到 ALPHA CAMP！</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
```
加入上述< meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 在 <head>標籤內，表示要適應各種網路瀏覽器的編碼問題，如：IE瀏覽器預設文字編碼是BIG-5，我們在這邊先宣告統一使用utf-8編碼，解決使用不同瀏覽器會看到亂碼的問題。</head>
### <body></body>
包圍的內容是會直接顯示給使用者看的內容，也是這個網頁的核心。需要 CSS 來定義樣式的內容，也都會放在 body 裡面：
### <!-- -->
「註解」(Comment) 裡的東西會被機器直接跳過，通常是工程師協作時交流的注意事項，或是自己的備忘。例如：
<!-- 在這裡我們會埋 Facebook 廣告的追蹤碼 Here we will put Facebook ad pixel -->
HTML 與 Markup
其實他是一個「標記」 (markup) 的概念。HTML 的繪寫是 "Hypertext Markup Language." 而 "markup" 的意思跟用螢光筆劃記的感覺很像，把文字標記起來，賦予某種特性。
請你試試在編輯器寫出以下的五段文字，再用瀏覽器去看看：
```htmlembedded=
Results
<h1>Results</h1> are impressive!
<h4>Results</h4> are impressive!
<p>Results</p> are impressive!
<strong>Results</strong> are impressive!
```
## 語法
### 快速攻略 HTML 標籤 基本網頁元素
下面會先介紹最基本的標籤，隨著學習HTML的進展，你會陸續認識新的標籤：
標題：h1, h2, h3, h4, h5, h6
文字段落：p
清單：ul, ol, li
強調語氣：em, strong
換行：br
水平線：hr
超連結：a
圖片：img
區域：div, span
表格：table, tr, th, td
表單：form, label, input
除了 img 標籤外，header、nav、main 和 section 是語義元素 (semantic element)，也就是「有意義的元素」，能讓搜尋引擎辨識出正確的網頁內容。
常見的 HTML elements
上圖轉換成html格式：
```htmlembedded=
<h1></h1>我要學會HTML！
<p></p>動手做是最好的學習方法。<p></p>
<h2></h2>清單 Lists
<p></p>這是沒有順序的項目符號清單<p></p>
<ul></ul><!-- unordered list -->
<li></li>這是沒有順序的清單
<li></li>以 ul 元來定義清單的範圍
<li></li>用 li 標示各別項目
<p></p>這是有數字順序的清單<p></p>
<ol></ol><!-- ordered list -->
<li></li>這是有順序的清單
<li></li>以 ol 元來定義清單的範圍
<li></li>一樣用 li 標示各別項目
<h2></h2>行內元素
<p></p>校長說：Coding 哪裡都可以學，真正重要的是你的 <em></em>Mindset！<p></p>
<p></p>再說一次：Coding 哪裡都可以學，真正重要的是你的 <strong></strong>Mindset！<p></p>
<p><em><strong></strong></em></p>You need to get it done！<p></p>
<h2></h2>空元素
<p></p>祝你在大航道學習愉快！<br>
ALPHA Camp<p></p>
<hr>
<p></p>恭喜你學完了 HTML 基本元素，就是這麼簡單！<p></p>
```
:::success
請注意 \<li> 元素必然被放在 \<ul> 或 \<ol> 的下一層，這是 Mozilla Developer Network (MDN) 制定的標準。
清單的巢狀特性，讓他們特別適合被改造成網站的導覽選單 (navigation)，學會 CSS 以後，你將會知道怎麼做。
:::
在 HTML 我們一般會用兩種方法來強調需要強調的內容
Emphasis (斜體)： <em></em>
Strong (粗體)： <strong></strong>
有別於一次佔一行的叫「區塊元素」(block elements)，此為「行內元素」(inline elements)，在後面的 CSS 章節你會深入認識兩者的區分。
:::info
空元素 (Empty elements)
絕大多數的 HTML 標籤都是成對出現，具有開始與結束，以巢狀結構包圍內容，定義出一個區塊。
但某些元素無法包圍任何內容，因此他們被稱為「空元素」(empty element)。最常見的空元素是**斷行**以及**水平線**。
:::
## 詳細的 HTML 標籤
**格式化**
|标签| 描述|
|-----|------|
|\<acronym>| 定义只取首字母的缩写。HTML5 中不支持。请使用 \<abbr> 代替。|
|\<abbr>| 定义缩写。|
|\<address>| 定义文档作者或拥有者的联系信息。|
|\<b>| 定义粗体文本。|
|\<bdi>| 定义文本的文本方向，使其脱离其周围文本的方向设置。|
|\<bdo>| 定义文字方向。|
|\<big>| 定义大号文本。HTML5 中不支持。请使用 CSS 代替。|
|\<blockquote>| 定义长的引用。|
|\<center>| 定义大号文本。HTML5 中不支持。请使用 CSS 代替。|
|\<cite>| 定义引用(citation)。|
|\<code>| 定义计算机代码文本。|
|\<del>| 定义被删除文本。|
|\<dfn>| 定义定义项目。|
|\<em>| 定义强调文本。|
|\<font>| 定义大号文本。HTML5 中不支持。请使用 CSS 代替。|
|\<i>| 定义斜体文本。|
|\<ins>| 定义被插入文本。|
|\<kbd>| 定义键盘文本。|
|\<mark>| 定义有记号的文本。|
|\<meter>| 定义预定义范围内的度量。|
|\<pre>| 定义预格式文本。|
|\<progress>| 定义任何类型的任务的进度。|
|\<q>| 定义短的引用。|
|\<rp>| 定义若浏览器不支持 ruby 元素显示的内容。|
|\<rt>| 定义 ruby 注释的解释。|
|\<ruby>| 定义 ruby 注释。|
|\<s>| 定义加删除线的文本。|
|\<samp>| 定义计算机代码样本。|
|\<small>| 定义小号文本。|
|\<strike>| 定义加删除线文本。HTML5 中不支持。请使用 \<del> 或 \<s> 代替。|
|\<strong>| 定义语气更为强烈的强调文本。|
|\<sup>| 定义上标文本。|
|\<sub>| 定义下标文本。|
|\<template>| 定义用作容纳页面加载时隐藏内容的容器。|
|\<time>| 定义日期/时间。|
|\<tt>| 定义打字机文本。HTML5 中不支持。请使用 CSS 代替。|
|\<u>| 定义下划线文本。|
|\<var>| 定义文本的变量部分。|
|\<wbr>| 定义可能的换行符。|
**表单和输入**
|标签| 描述|
|-----|------|
|\<form>| 定义供用户输入的 HTML 表单。|
|\<input>| 定义输入控件。|
|\<textarea>| 定义多行的文本输入控件。|
|\<button>| 定义按钮。|
|\<select>| 定义选择列表（下拉列表）。|
|\<optgroup>| 定义选择列表中相关选项的组合。|
|\<option>| 定义选择列表中的选项。|
|\<label>| 定义 input 元素的标注。|
|\<fieldset>| 定义围绕表单中元素的边框。|
|\<legend>| 定义 fieldset 元素的标题。|
|\<isindex>| 定义与文档相关的可搜索索引。HTML5 中不支持。|
|\<datalist>| 定义下拉列表。|
|\<keygen>| 定义生成密钥。|
|\<output>| 定义输出的一些类型。|
**框架**
|标签| 描述|
|-----|------|
|\<frame>| 定义框架集的窗口或框架。HTML5 中不支持。|
|\<frameset>| 定义框架集。HTML5 中不支持。|
|\<noframes>| 定义针对不支持框架的用户的替代内容。HTML5 中不支持。|
|\<iframe>| 定义内联框架。|
**图像**
|标签| 描述|
|-----|------|
|\<img>| 定义图像。|
|\<map>| 定义图像映射。|
|\<area>| 定义图像地图内部的区域。|
|\<canvas>| 定义图形。|
|\<figcaption>| 定义 figure 元素的标题。|
|\<figure>| 定义媒介内容的分组，以及它们的标题。|
|\<svg>| 定义 SVG 图形的容器。|
**音频/视频**
|标签| 描述|
|-----|------|
|\<audio>| 定义声音内容。|
|\<source>| 定义媒介源。|
|\<track>| 定义用在媒体播放器中的文本轨道。|
|\<video>| 定义视频。|
**链接**
|标签| 描述|
|-----|------|
|\<a>| 定义锚。|
|\<link>| 定义文档与外部资源的关系。|
|\<nav>| 定义导航链接。|
**列表**
|标签| 描述|
|-----|------|
|\<ul>| 定义无序列表。|
|\<ol>| 定义有序列表。|
|\<li>| 定义列表的项目。|
|\<dir>| 定义大号文本。HTML5 中不支持。请使用 CSS 代替。|
|\<dl>| 定义定义列表。|
|\<dt>| 定义定义列表中的项目。|
|\<dd>| 定义定义列表中项目的描述。|
|\<menu>| 定义命令的菜单/列表。|
|\<menuitem>| 定义用户可以从弹出菜单调用的命令/菜单项目。|
|\<command>| 定义命令按钮。|
**表格**
|标签| 描述|
|-----|------|
|\<table>| 定义表格
|\<caption>| 定义表格标题。|
|\<th>| 定义表格中的表头单元格。|
|\<tr>| 定义表格中的行。|
|\<td>| 定义表格中的单元。|
|\<thead>| 定义表格中的表头内容。|
|\<tbody>| 定义表格中的主体内容。|
|\<tfoot>| 定义表格中的表注内容（脚注）。|
|\<col>| 定义表格中一个或多个列的属性值。|
|\<colgroup>| 定义表格中供格式化的列组。|
**样式和语义**
|标签| 描述|
|-----|------|
|\<style>| 定义文档的样式信息。|
|\<div>| 定义文档中的节。|
|\<span>| 定义文档中的节。|
|\<header>| 定义 section 或 page 的页眉。|
|\<footer>| 定义 section 或 page 的页脚。|
|\<main>| 定义文档的主要内容。|
|\<section>| 定义 section。|
|\<article>| 定义文章。|
|\<aside>| 定义页面内容之外的内容。|
|\<details>| 定义元素的细节。|
|\<dialog>| 定义对话框或窗口。|
|\<summary>| 为 \<details> 元素定义可见的标题。|
|\<data>| 添加给定内容的机器可读翻译。|
**元信息**
|标签| 描述|
|-----|------|
|\<head>| 定义关于文档的信息。|
|\<meta>| 定义关于 HTML 文档的元信息。|
|\<base>| 定义页面中所有链接的默认地址或默认目标。|
|\<basefont>| 定义页面中文本的默认字体、颜色或尺寸。HTML5 中不支持。请使用 CSS 代替。|
**编程**
|标签| 描述|
|-----|------|
|\<script>| 定义客户端脚本。|
|\<noscript>| 定义针对不支持客户端脚本的用户的替代内容。|
|\<applet>| 定义嵌入的 applet。HTML5 中不支持。请使用 \<embed> 和 \<object> 代替。|
|\<embed>| 为外部应用程序（非 HTML）定义容器。|
|\<object>| 定义嵌入的对象。|
|\<param>| 定义对象的参数。|
### Source & Material
https://tw.alphacamp.co/blog/html-guide
https://www.w3school.com
Sign in with Wallet
Connect another wallet