Skip to content

Latest commit

 

History

History
165 lines (147 loc) · 18.8 KB

README.md

File metadata and controls

165 lines (147 loc) · 18.8 KB

0成本0基礎DIY網路名片

目錄

  1. HTML教學
    1. 基本 HTML5 結構
    2. 常見 HTML 語義化元素
  2. CSS教學
    1. CSS 選擇器
    2. 常用 CSS 屬性
    3. 響應式設計
  3. 網路名片模板

HTML教學

HTML（HyperText Markup Language 超文本標記語言） 是一種描述語言，用來定義網頁結構。

HTML 文檔是包含多個 HTML 元素 的文本文檔。每個元素都用一對開始和結束 標籤 包裹。每個標籤以尖括號（ <> ）開始和結束。也有一部分標籤中不需要包含文本，這些標籤稱為空標籤，如 <br> 、 <hr> 和 <img> 。

你可以使用 屬性 來擴展 HTML 標籤。

<p class="greeting">Hello</p>

  • <p> 是標籤
  • class 是屬性， greeting 是屬性值
  • Hello 是文本內容

基本 HTML5 結構

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  ...
</body>
</html>
  • <!DOCTYPE> 是文件類型宣告，告知瀏覽器這個文件是用哪個版本的 HTML（或 XML）撰寫。<!DOCTYPE html> 代表 HTML5。
  • <html> ... </html> 中的文字描述了一個 HTML 文件
  • <head> ... </head> 中的文字提供了文件資訊
  • <body> ... </body> 中的文字描述了網頁中顯示的內容
  • lang 表示網頁的語言，可以加上地區指定地方方言，例如：
    • lang="en" 英文
    • lang="en-US" 美式英文
    • lang="en-GB" 英式英文
    • lang="zh" 中文
    • lang="zh-Hans" 簡體中文
    • lang="zh-CN" 中國簡體中文
    • lang="zh-Hant" 繁體中文
    • lang="zh-TW" 台灣繁體中文
    • lang="zh-HK" 香港繁體中文
  • <meta> 表示中繼資料
    • charset 代表字符編碼，一般使用 utf-8
    • content 包含 http-equiv 或 name 屬性的值
    • http-equiv 定義編譯指示指令，通常用來設定IE兼容模式
      • <meta http-equiv="X-UA-Compatible" content="IE=edge"> 代表標準模式
    • viewport 指網頁在瀏覽器上的可視範圍，與響應式網頁設計（Responsive Web Design, RWD）息息相關
      • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%
  • <title> 表示文件標題

常見 HTML 語義化元素

元素 說明 格式
<header> 頁首 <header>...</header>
<nav> 導覽 <nav>...</nav>
<main> 主體部分 <main>...</main>
<section> 獨立的部分 <section>...</section>
<article> 可重複使用的獨立結構 <article>...</article>
<figure> 附加內容，如圖片、表格 <figure><img src="圖片網址" alt="替代文字" /><figcaption>說明</figcaption></figure>
<figcaption> 說明/標題 <figure><img src="圖片網址" alt="替代文字" /><figcaption>說明</figcaption></figure>
<aside> 側欄 <aside>...</aside>
<footer> 頁尾 <footer>...</footer>

常見 HTML 元素

元素 說明 格式
<h1> - <h6> 標題1 - 標題6 <h1>大標題</h1>
<p> 段落 <p>我是段落</p>
<br> 斷行 第一行文字<br />第二行文字
<span> 短語 <span>我是短語</span>
<strong> 粗體 <strong>粗體文字</strong>
<em> 強調（常以斜體表示） <em>強調文字</em>
<a> 連結 <a href="連結">顯示文字</a>
<small> 把字體變小一號 <small>我是小字</small>
<img> 圖片 <img src="圖片網址" alt="替代文字" />
<div> 區塊容器 <div>內容</div>
<hr> 分隔線 <hr />
<ul> 項目符號列表 <ul><li>項目</li><li>項目</li></ul>
<ol> 編號列表 <ol><li>第一點</li><li>第二點</li></ol>
<table> 表格 <table><thead><tr><th>標題</th></tr></thead><tbody><tr><td>儲存格</td></tr></tbody></table>
<blockquote> 引文 <blockquote cite="來源網址"><p>引文</p></blockquote>

CSS教學

CSS （Cascading Style Sheets 層疊樣式表）是用來控制網頁在瀏覽器中的顯示外觀的聲明式語言。瀏覽器會根據 CSS 的樣式來顯示元素。一條 CSS 的樣式定義包括屬性和屬性值，它們共同決定網頁的外觀。

p {
  background: #f2f2f2;
}
  • p 是元素
  • background 是屬性， #f2f2f2 是屬性㥀

有3種方式加入CSS：

  1. Inline CSS，在標籤中定義 style，例：<p style="background: #f2f2f2;">段落</p>
  2. Internal CSS，在 <head> 中定義 <style>，例：<style>p { background: #f2f2f2; }</style>
  3. External CSS，在 <head> 中連結外部樣式表，例：<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">

CSS 選擇器

CSS 選擇器 例子
通配 * { ... } 選擇所有HTML元素
類型 p { ... } 選擇所有 <p> 元素
類名 p.title { ... } 選擇所有 <p class="title"> 的元素
ID p#one { ... } 選擇 <p id="one"> 的那一個元素
後代 p span { ... } 選擇所有在 <p> 元素中的 <span> 元素
子代 div > h2 { ... } 選擇所有直接在 <div> 元素之下的 <h2> 元素
通用兄弟 h2 ~ p { ... } 選擇所有和 <h2> 元素同層級的 <p> 元素
相鄰兄弟 h2 + p { ... } 選擇所有緊接著 <h2> 元素之後的 <p> 元素
屬性
  • a[target="_blank"] { ... } 選擇所有 <a target="_blank"> 的元素
  • a[href^="#"] { ... } 選擇所有 <a href="#..."> （開頭）的元素
  • [lang|="en"] { ... } 選擇所有 lang="en..." （屬性值開頭）的元素
  • a[href$=".pdf"] { ... } 選擇所有 <a href="...pdf"> （結尾）的元素
  • a[title~="word"] { ... } 選擇所有 <a title="... word ..."> （含有完整字眼）的元素
  • a[title*="substring"] { ... } 選擇所有 <a title="...substring..."> （含有字眼）的元素
反選 :not(p) { ... } 選擇所有不是 <p> 的元素
連結
次序
  • :first-child { ... } 選擇第一個元素
  • :last-child { ... } 選擇最後一個元素
  • :nth-child(even) { ... } 選擇排在雙數的元素，即第2, 4, 6, ... 個
  • :nth-child(odd) { ... } 選擇排在單數的元素，即第1, 3, 5, ... 個
  • :nth-child(3n+1) { ... } 選擇排在 3n+1 的元素，即第1, 4, 7, ... 個

常用 CSS 屬性

CSS 屬性 說明 值
background 背景 屬性有例：center / contain no-repeat url("圖片網址") 置中 全幅 不重複 背景圖
color 前景色 顏色如 #000
font-family 字體順序 以逗號 (,) 分隔字體，前面優先使用，如Georgia, serif
font-size 字體大小 長度如 1rem
font-style 字體傾斜 italic
font-weight 字體粗度 bold
text-align 文字對齊

left 靠左對齊

center 置中對齊

right 靠右對齊

justify 左右對齊，不包最後一行

justify-all 左右對齊，包括最後一行
text-decoration 文字裝飾 underline 底線
underline wavy 波浪底線
underline dashed 虛底線
overline 頂線
overline underline 頂低線
line-through 刪除線
letter-spacing 文字間距 長度如 1px
line-height 行距 數字如 1.75
text-shadow 文字陰影

屬性 offset-x offset-y blur-radius color，例

text-shadow: 1px 1px 10px rgba(0,0,0,0.5)
box-shadow 區塊陰影

屬性 offset-x offset-y blur-radius color，例

box-shadow: 1px 1px 10px rgba(0,0,0,0.5)
width 寬度 長度如 600px
max-width 最大寬度 長度如 100%
height 高度 長度如 100px
display 顯示佈局 inline 行文佈局
block 區塊佈局
flex 彈性佈局
grid 網格佈局
margin 外邊距 是 margin-top margin-right margin-bottom margin-left 的簡寫，以長度為值，例
  • 10px：四邊10px
  • 10px auto：上下10px，左右自動（置中）
  • 10px auto 20px：上邊10px，左右自動，下邊20px
  • 10px 20px 0 30px：上邊10px，右邊20px，下邊0，左邊30px
padding 內邊距 是 padding-top padding-right padding-bottom padding-left 的簡寫，用法跟margin一樣，以長度為值
border 邊框

是 border-top border-right border-bottom border-left 的簡寫，屬性有 border-width border-style border-color，例
border-bottom: 1px dotted #ff0000; 紅色3px底線

border-style：

  • none 無
  • hidden 隱藏
  • dotted 圓點
  • dashed 虛線
  • solid 實線
  • double 雙實線
  • groove 雕刻效果
  • ridge 浮雕效果
  • inset 陷入效果
  • outset 突出效果
border-radius 邊框圖角

長度如 3px、50%
box-sizing 區塊尺寸 content-box 預設值，以內容範圍計算總寬度及高度
border-box 以邊框範圍計算總寬度及高度
position 定位
  • static 正常佈局
  • relative 相對定位
  • absolute 絕對定位，以上一個相對定位為原點
  • fixed 固定定位，以視窗為原點
  • sticky 粘性定位
object-fit 指定可替換元素在元素框內的對齊方式
  • fill 預設值，完全填充
  • contain 全幅
  • cover 完全覆蓋
  • none 保持原尺寸
  • scale-down 取 none 或 contain 之間更小的一個
opacity 不透明度 0 到 1 之間的數字
  • 1.0 預設值，完全不透明
  • 0 是完全透明
overflow 溢出顯示
  • visible 預設值，內容不會被修剪，可以呈現在元素框之外
  • hidden 內容將被剪裁以適合填充框，無滾動條
  • scroll 內容將被剪裁以適合填充框，顯示滾動條
  • auto 取決於瀏覽器，如內容溢出，桌面瀏覽器會提供滾動條

響應式設計

Media Queries 幫助我們根據設備的大致類型（如打印設備與帶屏幕的設備）或者特定的特徵和設備參數（例如屏幕分辨率和瀏覽器視窗寬度）來修改網站或應用程序時。

@media 用法

@media screen and (min-width: 1200px) { ... } 瀏覽器視窗寬度最少 1200px 以上

網路名片模板

到 https://codepen.io/alyssachan/pen/LYxQrOW ，在右下角按 Fork 按鈕複製 Pen。