# HTML Introduction
## stands for Hyper Text Markup Language
1. describes the structure of Web page
2. consists of a series of elements
3. tell the browser how to display the content
4. label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
```javascript=
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
```
The <!DOCTYPE html> declaration defines that this document is an HTML5 document , represents the document type, and helps browsers to display web pages correctly.
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading , <h6> defines the least important heading
The <p> element defines a paragraph
```
## HTML Page Structure
### HTML Pararaphs : < p >
### HTML Links : < a href="xxx.com">
### HTML Images : <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
#### The source file (src), alternative text (alt), width, and height are provided as attributes
---
```css=
<strong>加粗文字</strong>
<em> 斜體</em>
<ins> 底線</ins>
<del>cancel Line</del>
<hr>
<b>加粗文字</b>
<i>斜體</i>
<u>底線</u>
<s>cancel Lin</s>
<br>
雙標籤：一對出現
單標籤：沒有結束：<br> 換行 <hr>水平線
<html>
<head>
網頁頭:比broswer睇既：.css
<title> 網頁標題</title>
</head>
<body>
網頁主體：用戶睇：圖片，文字
</body>
</html>
VS Code , 一個感嘆號一次出晒
<p>
段落標籤，段落之間存在間隙
</p>
<hr>
插入圖片
<img src="url">
<alt> 替換文本，圖片無法顯示時，顯示的文字</alt>
<title>提示文本，滑鼠停留時顯示的文字</title>
<width></width>
<height></height>
=> <img src="url" alt="sth" title="sth">
<hr>
hyperLink
<a href="url">跳去邊度？</a>
<a href="url" target="_blank">加target="_blank" 作用開新頁</a>
<a href="#">#係空連接，乜都唔跳</a>
#### 音頻標籤
<audio src="url" controls loop muted autoplay> controls 用黎show control panel , loop 循環play, autoplay配合muted先 自動play</audio>
<hr>
### 列表
1.無序列表
2.有序列表
3.自定義列表
#### 無序列表
ul 無序列表，li 列表條目
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
#### 有序列表
ol 無序列表，li 列表條目
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
#### 自定義列表
<dl>
<dt>Title</dt>
<dd>content</dd>
</dl>
<hr>
### 表格
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2">2 , row合拼</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<!-- <td>6</td> -->
<td>7</td>
<td>8</td>
</tr>
<tr>
<td colspan="4">4 ，column 合拼</td>
</tr>
</table>
### 表單
入乜show乜
文本框：
<input type="text" placeholder="提示信息">
<br>
入乜都出點點
密碼框：
<input type="password">
<br>
單選框：
<input type="radio" name="gender" checked>
name:分組用，同組只選一個 ，checked 默許選擇
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<br>
多選框：<input type="checkbox" checked> 1
<input type="checkbox"> 2
<input type="checkbox"> 3
<br>
上傳文件：<input type="file" multiple>multiple:
<br>
下拉選單
<select>
<option>1.</option>
<option>2.</option>
<option>3.</option>
<option>4.</option>
<option selected>1.</option>
</select>
### 輸入文字
<textarea>please input</textarea>
#### label標籤，增加點擊範圍
App1:
<input type="radio" id="man">
<label for="man">男</label>
for同id要相同
<br>
App2:
<label><input type="radio">女</label>
### button
pass data to back-end
<button type="sumit">click</button>
<br>
reset到默許值
<button type="reset">click</button>
<br>
simple button
<button type="button">click</button>
要用到button，要under<form action="">action : send data 既url</form
<hr>
<div>獨佔一行</div>
<span>不換行</span>
show 空格：
show > : >
show < : <
```
Google Drive
Gist
Clipboard
Sign in with Wallet
