HTML 標籤整理

tags: `網頁` `HTML`

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

HTML 文字型式

屬性

style="background-color:#F0F8FF;"

更換背景顏色

style="color:Tomato;"

更換文字顏色

style="border:2px solid Tomato;"

更換邊框顏色、寬度

style="text-align:center;"

規定文本的對齊方式，center置中

HTML 註解

HTML 顏色

點這裡就有已經整理好的140種顏色，需要再查就好

HTML 符號

符號實在太多了，就不全部放上來了，這邊只貼連結，需要再找
如果想使用表情符號，請宣告<meta charset="UTF-8">
數學運算子
 貨幣符號
 箭頭符號
 表情符號
 各種圖示

HTML 數學運算式

\sum_{i = 0}^{n} i^{2} = \frac{(n^{2} + n) (2 n + 1)}{6}

數學公式表示法

HTML 超連結

屬性

href 定義網址
target="_blank" 設定開啟模式
_blank 在新分頁開啟
_self 在原分頁開啟
寫在head的style中
a:link 狀態:連結
a:visited 狀態:已參訪過
a:hover 狀態:滑鼠游標經過
a:active 狀態:點擊時
Example






















<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 : 找不到圖片時的置換文字

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

圖片地圖

<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%; 圖片大小
Example











<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 表格

飲料	金額
紅茶	20
綠茶	20
奶茶	30

屬性

border-collapse 界線是否留白?
text-align 文字位置
left - 置左
right - 置右
center - 置中
border-spacing 邊界是否留白?
colspan 合併欄
rowspan 合併列
id 辨識編號

HTML 清單

<li> 一項
<ul> 無編碼清單
- HTML
- CSS
- JavaScript
<ol> 有編碼清單
1. HTML
2. CSS
3. JavaScript
<dl> 描述清單
- <dt>
- <dd>
HTML

網站主架構

CSS

排版

屬性

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




<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>

London

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.

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>

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)"
呼叫漸層

HTML Web Storage Objects

window.localStorage 瀏覽器關了以後，資料不會消失
window.sessionStorage 瀏覽器關了以後，資料會消失
- localStorage.setItem("標籤","儲存值") 存入資料，輸入對應的標籤和資料
- localStorage.removeItem("標籤") 刪除暫存的資料