owned this note
owned this note
Published
Linked with GitHub
# HTML 標籤整理
###### tags: `網頁` `HTML`
[]()
### HTML 文字型式
#### 標籤
- `<b>` <b>粗體字</b>
- `<strong>` <strong>粗體字，和 `<b>` 大同小異</strong>
- `<i>` <i>斜體字</i>
- `<em>` <em>斜體字，和`<i>`大同小異</em>
- `<small>` <small>小字</small>
- `<sup>` <sup>上標</sup>
- `<sub>` <sub>下標</sub>
- `<ins>` <ins>底線</ins>
- `<del>` <del>刪除線</del>
- `<mark>` <mark>螢光筆(黃色)</mark>
- `<br/>` 換行
- `<pre>` 維持文字的段落和格式
- `<code>` 程式碼
<code>printf("Hello HTML!")</code>
- `<kbd>` 鍵盤輸入
<kbd>This is kbd format</kbd>
- `<samp>` 電腦輸出
- `<var>` 變數
- `<abbr>` 首字母縮寫(+title)，但沒啥用處(?
- `<address>` 地址
- `<bdo>` 句子方向，rtl從右到左，ltr從左到右
-`<blockquote>` 從別的網站引用文章
- `<q>` 引言，雙引號
#### 屬性
- `style="background-color:#F0F8FF;"`
<p style="background-color:#F0F8FF;">更換背景顏色</p>
- `style="color:Tomato;"`
<p style="color:Tomato;">更換文字顏色</p>
- `style="border:2px solid Tomato;"`
<p style="border:2px solid Tomato;">更換邊框顏色、寬度</p>
- `style="text-align:center;"`
<p style="text-align:center;">規定文本的對齊方式，center置中</p>
### HTML 註解
`<!-- 註解寫在這裡 -->`
### HTML 顏色
點[這裡](https://www.w3schools.com/colors/colors_names.asp "w3schoolColor")就有已經整理好的140種顏色，需要再查就好
### HTML 符號
符號實在太多了，就不全部放上來了，這邊只貼連結，需要再找
如果想使用表情符號，請宣告`<meta charset="UTF-8">`
[數學運算子](https://www.w3schools.com/charsets/ref_utf_math.asp)
[貨幣符號](https://www.w3schools.com/charsets/ref_utf_currency.asp)
[箭頭符號](https://www.w3schools.com/charsets/ref_utf_arrows.asp)
[表情符號](https://www.w3schools.com/html/html_emojis.asp)
[各種圖示](https://www.w3schools.com/charsets/ref_utf_symbols.asp)
### HTML 數學運算式
$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$
[數學公式表示法](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference "mathjex")
### HTML 超連結
##### 標籤
- `<a>` 加入連結
##### 屬性
- `href` 定義網址
- `target="_blank"` 設定開啟模式
_blank 在新分頁開啟
_self 在原分頁開啟
- 寫在head的style中
a:link 狀態:連結
a:visited 狀態:已參訪過
a:hover 狀態:滑鼠游標經過
a:active 狀態:點擊時
- Example
``` HTML=1
<head>
<style>
a:link
{
background-color: #008B8B;
color: white;
padding: 20px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:visited
{
background-color: #FFD700;
color: white;
}
a:hover, a:active
{
background-color: #20B2AA;
}
</style>
</head>
```
##### 書籤
- `<a href="#C4">` 傳送至書籤"#C4"
- `<h2 id="C4">` 設定書籤"#C4"
### HTML 圖片
##### 圖片
- `<img src="https://i.imgur.com/sxUS3aI.jpg" alt="Ocean">`
src : 圖片來源
alt : 找不到圖片時的置換文字
<img src="https://i.imgur.com/sxUS3aI.jpg" alt="Ocean">
##### 圖片地圖
- `<img src="https://i.imgur.com/sxUS3aI.jpg"
usemap="Ocean">` 讓圖片成為地圖
- `<map name="Ocean"></map>` 定義對應名稱地圖
- `<area shape="rect">` 感應區域
rect - 正方形
circle - 圓形
poly - 多邊形
default - 整個區域
- `<area coords="10,10,50,30">`區域座標
- `<img src=" " align="bottom">` 圖片在文字中對齊方式
bottom-底部
middle-置中
top-頂
##### 背景圖片
寫在head的style中
- `background-image: url('ocean.jpg');` 背景圖片
- `background-repeat: no-repeat;` 圖片是否重複?
repeat 會直到填滿整個網頁為止
- `background-attachment: fixed;` 圖片比例是否固定?
fixed 固定
nfixed 不固定
- `background-size: 100%;` 圖片大小
[](https://i.imgur.com/iZS9Jsm.jpg)
[](https://i.imgur.com/JF9XBpB.jpg)
- Example
``` HTML=1
<head>
<style>
body
{
background-image:url('https://i.imgur.com/JF9XBpB.jpg');
background-repeat: no-repeat;
background-attachment: nfixed;
background-size: 100% 500%;
}
</style>
</head>
```
##### gif
### HTML 表格
##### 標籤
- `<table>` 定義一個表格
- `<th>` 定義表格第一欄
- `<tr>` 換列
- `<td>` 換行
- `<caption>` 定義表格標題
- Example
``` HTML=1
<table>
<tr>
<th>飲料</th>
<th>金額</th>
</tr>
<tr>
<td>紅茶</td>
<td>20</td>
</tr>
<tr>
<td>綠茶</td>
<td>20</td>
</tr>
<tr>
<td>奶茶</td>
<td>30</td>
</tr>
</table>
```
<table>
<tr>
<th>飲料</th>
<th>金額</th>
</tr>
<tr>
<td>紅茶</td>
<td>20</td>
</tr>
<tr>
<td>綠茶</td>
<td>20</td>
</tr>
<tr>
<td>奶茶</td>
<td>30</td>
</tr>
</table>
##### 屬性
- `border-collapse` 界線是否留白?
- `text-align` 文字位置
left - 置左
right - 置右
center - 置中
- `border-spacing` 邊界是否留白?
- `colspan` 合併欄
- `rowspan` 合併列
- `id` 辨識編號
### HTML 清單
- `<li>` 一項
- `<ul>` 無編碼清單
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
- `<ol>` 有編碼清單
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
- `<dl>` 描述清單
- `<dt>`
- `<dd>`
<dl>
<dt>HTML</dt>
<dd>網站主架構</dd>
<dt>CSS</dt>
<dd>排版</dd>
</dl>
##### 屬性
- `type=" "` 有編碼風格
disc - 實心圓
circle - 空心圓
square - 正方形
none - 無
1 - 數字
A - 大寫字母
a - 小寫字母
I - 大寫羅馬數字
i - 小寫羅馬數字
- `start="50"`設定起始點，從50開始數
- `float:left` 橫向清單
- `display:block` 留上下空間
### HTML 區塊
- `<div>` 區塊(block-level)，用於一開始設定，可容納多元素
- `<span>` 區塊(inline)，用於段落內、`<h><p>`中
- Example
``` HTML=1
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
```
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
### HTML 類別
可編寫多個Classes，並合併使用，類似JAVA多重繼承的概念
- `<div classes="XXX">`
提前設定後，方便引用所設定之格式
XXX 為格式之名稱
開頭設定為 .XXX
- `<span classes"EEE">`
用於段落文字內
開頭設定須為span.EEE
### HTML 標題元件
metadata放在head底下，網站上前台是看不到的!
- `<head>` 元素都要包在這個裡面
- `<style>` 常用
- `<meta>`
這串程式會讓格式更好看(RWD響應式網頁)
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
- `<title>`
- `<base>`
- `<link>`
- `<script>`
### HTML 輸入
- `<form>` 建立表單
- `<input>` 輸入
<input type="OOO"> OOO為輸入元件
- `"text"` 文字框
- `"radio"` 單選欄
- `"submit"` 有點像按鈕
- `"checkbox"` 勾選
- `"color"` 選顏色
- `"password"` 密碼
- `"time"` 時間
- `"month"` 月
- `"week"` 周
- `"date"` 天
- `"datetime-local"` 日期+時間
- `"file"` 檔案
- `"tel"` 電話號碼
- `"url"` 連結
- `"reset"` 回歸預設值
- `<select>` 下拉式選單
- `<option value="OOO">` 選項
size="3" 高度
multiple 多選
- `<textarea>` 文字框(多行)
- `<fieldset>` 表單外框
- `<legend>` 表單名稱
- `<datalist>` 資料搜尋欄
必須放在form裡面，前須加上<input list="OOO">
- `<output>` 輸出
`oninput="x.value=parseInt(a.value)+parseInt(b.value)"`
在form裡面宣告
`<input type="range" id="a" name="a" value="50">`
滑條
`<input type="number" id="b" name="b" value="50">`
數字調整欄
### HTML 多媒體
HTML5僅支援MP4, WebM, Ogg video檔案
影片推薦使用MP4
音樂推薦使用MP3
- `<video>`
`<source src="movie.mp4" type="video/mp4">`
片源:movie.mp4
檔案類型必須是MP4
- `controls` 手動播放、暫停、調整音量
- `autoplay` 自動撥放
- `<audio>`
`<source src="music.mp3" type="audio/mp3">`
片源:music.mp3
檔案類型必須是MP3
- `controls` 手動播放、暫停、調整音量
### HTML 匯入框架
```
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=mpDldu2VUDU" alt="no">
</iframe>
```
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=mpDldu2VUDU" alt="no">
</iframe>
### HTML SVG畫布
- `<svg width=”100” height=”100”>` 類似畫布(定義長&寬)
- `<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow">`
畫圓
cx - 圓中心的X座標
cy - 圓中心的Y座標
r - 圓的半徑
strock - 外框顏色
strock-width - 外框粗度
fill - 填滿顏色
- `<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)">`
畫長方形
width:寬
height:高
rx:圓角
ry:圓角
- `<defs>
<linearGradient id="OOO" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>`
畫漸層
`fill="url(#OOO)"`
呼叫漸層
<defs>
<linearGradient id="draw" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<svg width=”1000” height=”1000”>
<rect width="100" height="100" fill="url(#OOO)">
</svg>
畫長方形
### HTML Web Storage Objects
* `window.localStorage` 瀏覽器關了以後，資料不會消失
* `window.sessionStorage` 瀏覽器關了以後，資料會消失
* `localStorage.setItem("標籤","儲存值")` 存入資料，輸入對應的標籤和資料
* `localStorage.removeItem("標籤")` 刪除暫存的資料
---
#### HTML學完囉，接下來繼續學[CSS](/FlcMQiyVQO2F5WgAH2bKUQ)和[JavaScript](/1KVixIIBRrOxkul9m7F_Rw)吧
Google Drive
Gist
Clipboard
Sign in with Wallet
