HTML CheatSheet 中文

# HTML Cheatsheet ## ==Basic Tags== - `<html> </html>`：建立HTML文件。 - `<head> </head>`：包含標題和其他不顯示的信息。 - `<body> </body>`：包含文檔的可見部分。 - `<title> </title>`：將文檔名稱顯示在標題欄中，書籤時使用的名稱。 --- ## ==Body attributes (only used in email newsletters)== - `<body bgcolor=?>`：設置背景顏色，使用名稱或十六進位值 - `<body text=?>`：設置文本顏色，使用名稱或十六進位值 - `<body link=?>`：設置鏈接顏色，使用名稱或十六進位值 - `<body vlink=?>`：設置訪問過的鏈接顏色，使用名稱或十六進位值 - `<body alink=?>`：設置活動鏈接的顏色（鼠標點擊時） --- ## ==Text Tags== - `<pre> </pre>`：創建預格式化文本 - `<h1> </h1>` 到 `<h6> </h6>`：創建標題 - H1最大，H6最小 - `<b> </b>`：創建粗體文本（應使用 `<strong>`） - `<i> </i>`：創建斜體文本（應使用 `<em>`） - `<tt> </tt>`：創建打字機風格文本 - `<code> </code>`：用於定義源代碼，通常是等寬字型 - `<cite> </cite>`：創建引用，通常以斜體形式顯示 - `<address> </address>`：創建地址部分，通常以斜體形式顯示 - `<em> </em>`：強調一個單詞（通常以斜體形式顯示） - `<strong> </strong>`：強調一個單詞（通常以粗體形式顯示） - `<font size=?> </font>`：設置字體大小 - 1到7（應使用CSS） - `<font color=?> </font>`：設置字體顏色（應使用CSS） - `<font face=?> </font>`：定義使用的字體（應使用CSS） --- ## ==Links== - `<a href="URL">可點擊的文本</a>`：創建到統一資源定位符的超鏈接 - `<a href="mailto:EMAIL_ADDRESS">可點擊的文本</a>`：創建到電子郵件地址的超鏈接 - `<a name="NAME">`：創建文檔內的目標位置 - `<a href="#NAME">可點擊的文本</a>`：創建到該目標位置的鏈接 --- ## ==Formatting== - `<p> </p>`：創建新的段落 - `<br>`：插入換行符（回車） - `<blockquote> </blockquote>`：將內容放在引用中 - 使文本兩側縮進 - `<div> </div>`：用於使用CSS格式化塊內容 - `<span> </span>`：用於使用CSS格式化內聯內容 --- ## ==Lists== - `<ul> </ul>`：創建無序列表 - `<ol start=?> </ol>`：創建有序列表（start=xx，其中xx是計數數字） - `<li> </li>`：包圍每個列表項目 - `<dl> </dl>`：創建定義列表 - `<dt>`：在每個定義詞的前面 - `<dd>`：在每個定義的前面 --- ## ==Graphical elements== - `<hr>`：插入水平線 - `<hr size=?>`：設置水平線的大小（高度） - `<hr width=?>`：設置線的寬度（作為百分比或絕對像素長度） - `<hr noshade>`：創建沒有陰影的水平線 - `<img src="URL" align=? border=? height=? width=? alt=?>`：添加圖像；它是位於URL的單獨文件 - 將圖像對齊到左側/右側/中心/底部/頂部/中部（使用CSS） - 設置圖像周圍的邊框的大小（使用CSS） - 設置圖像的高度，以像素為單位 - 設置圖像的寬度，以像素為單位 - 為無法處理圖像的瀏覽器設置替代文本（ADA要求） --- ## ==Forms== - `<form> </form>`：定義表單 - `<select multiple name=? size=?> </select>`：創建一個滾動菜單。Size設置可見菜單項目的數量，用戶需要滾動。 - `<select name=?> </select>`：創建下拉菜單 - `<option>`：設置每個菜單項目 - `<textarea name=? cols="x" rows="y"></textarea>`：創建文本框區域。列設置寬度；行設置高度。 - `<input type="checkbox" name=? value=?>`：創建複選框。 - `<input type="checkbox" name=? value=? checked>`：創建預先選中的複選框。 - `<input type="radio" name=? value=?>`：創建單選按鈕。 - `<input type="radio" name=? value=? checked>`：創建預先選中的單選按鈕。 - `<input type="text" name=? size=?>`：創建一行文本區域。Size設置長度，以字符為單位。 - `<input type="submit" value=?>`：創建提交按鈕。Value設置提交按鈕上的文本。 - `<input type="image" name=? src=? border=? alt=?>`：使用圖像創建提交按鈕。 - `<input type="reset">`：創建重置按鈕 --- ## ==Tables (use only for data layout - use CSS for page layout)== - `<table> </table>`：創建表格 - `<tr> </tr>`：設置表格中每行 - `<td> </td>`：設置行中的每個單元格 - `<th> </th>`：設置表頭（正常單元格，加粗，居中文本） --- ## ==HTML5 input tag attributes== （不是所有瀏覽器都支持; 請訪問http://caniuse.com了解詳情） - `<input type="email" name=?>`：設置電子郵件地址的單行文本框 - `<input type="url" name=?>`：設置URL的單行文本框 - `<input type="number" name=?>`：設置數字的單行文本框 - `<input type="range" name=?>`：設置一系列數字的單行文本框 - `<input type="date/month/week/time" name=?>`：顯示包含日期/月份/周/時間的日曆的單行文本框 - `<input type="search" name=?>`：用於搜索的單行文本框 - `<input type="color" name=?>`：用於選擇顏色的單行文本框 --- ## ==Table attributes (only use for email newsletters)== - `<table border=?>`：設置表格單元格周圍的邊框寬度 - `<table cellspacing=?>`：設置表格單元格之間的空間量 - `<table cellpadding=?>`：設置單元格邊框和其內容之間的空間量 - `<table width=?>`：設置表格的寬度，以像素或百分比為單位 - `<tr align=?>`：設置行內的單元格對齊（左/中/右） - `<td align=?>`：設置單元格對齊（左/中/右） - `<tr valign=?>`：設置行內的單元格垂直對齊（頂部/中部/底部） - `<td valign=?>`：設置單元格的垂直對齊（頂部/中部/底部） - `<td rowspan=?>`：設置單元格應跨越的行數（默認=1） - `<td colspan=?>`：設置單元格應跨越的列數 - `<td nowrap>`：防止單元格內的行被打破以適應

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.