HTML 文字型式
============
標籤
------------
* <b> 粗體字
* <strong> 粗體字，和 <b> 大同小異
* <i> 斜體字
* <em> 斜體字，和<i>大同小異
* <small> 小字
* <sup> 上標
* <sub> 下標
* <ins> 底線
* <del> 刪除線
* <mark> 螢光筆(黃色)
* <br/> 換行
* <pre> 維持文字的段落和格式
* <code> 程式碼
* printf(“Hello HTML!”)
* <kbd> 鍵盤輸入
* This is kbd format
* <samp> 電腦輸出
* <var> 變數
* <abbr> 首字母縮寫(+title)，但沒啥用處(?
* <address> 地址
* <bdo> 句子方向，rtl從右到左，ltr從左到右
* -<blockquote> 從別的網站引用文章
* <q> 引言，雙引號
屬性
-----------
* 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 數學運算式
n
∑
i
=
0
i
2
=
(
n
2
+
n
)
(
2
n
+
1
)
6
數學公式表示法
HTML 超連結
標籤
<a> 加入連結
屬性
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 : 找不到圖片時的置換文字
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%; 圖片大小
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 表格
標籤
<table> 定義一個表格
<th> 定義表格第一欄
<tr> 換列
<td> 換行
<caption> 定義表格標題
Example
<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>
飲料 金額
紅茶 20
綠茶 20
奶茶 30
屬性
border-collapse 界線是否留白?
text-align 文字位置
left - 置左
right - 置右
center - 置中
border-spacing 邊界是否留白?
colspan 合併欄
rowspan 合併列
id 辨識編號
HTML 清單
<li> 一項
<ul> 無編碼清單
HTML
CSS
JavaScript
<ol> 有編碼清單
HTML
CSS
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("標籤") 刪除暫存的資料
Sign in with Wallet
Connect another wallet