書籍最完整跨平台網頁設計：HTML + CSS + JavaScript + jQuery + Bootst...

Ch0
網頁設計基礎知識

網頁設計流程
規劃網頁/設計介面/功能設計（含卡控）/實作/code review 發布
網站地圖 sitemap

發布網頁
1.取得網站空間
申請免費空間、承租主機（Google GitHub Word Press）、自行架網站
自己架網站要有一台電腦當主機，且24hr不斷電

參考【2022】如何架設網站？初學者架站完整攻略，8 大架站平台不藏私大公開！｜SHOPLINE 電商教室我想找github的來看看

Github不用懂git也能用GitHub Pages架設靜態網站並綁定網域. 用GitHub Pages架設靜態網...假設的網站只有http，沒有https 表示沒有加密

2.註冊網域網域名稱的意思？網域和網址有差別嗎？ - 將能數位行銷網域是指網站在網際網路上的識別名稱，可以理解成每個網站都有個獨一無二的IP，就像地標一樣，來定位和訪問的網路位址。但因為數字難以記憶，因此透過DNS 系統，轉換成現在看到的英文字母，稱為「網域。例如「Example Domain」。

而網址則是網站內特定頁面的位址，它是由網域名稱和頁面階層組成，例如「https://example.com/...

網域domain 是的一無二的ip
網址url 是特定的位址

3.把網頁上傳到網站

Server
DNS

Server
一個管理資源並為使用者提供服務的電腦軟體，通常分為檔案伺服器（能使使用者在其他電腦存取檔案），資料庫伺服器和應用程式伺服器。
執行以上需求的電腦稱為網路主機host

伺服器 - 維基百科，自由的百科全書

伺服器（硬體）：有較高性能的電腦
伺服器（軟體）：伺服器軟體工作在客戶端-伺服器或瀏覽器-伺服器的方式，有很多形式的伺服器

DNS（Domain Name System）
是一种用于将人类可读的域名（https://例如www.example.co...）映射到计算机网络中的IP地址（例如192.168.1.1）的分布式命名系统。DNS起到了互联网的"电话簿"的作用，它将域名转换为相应的IP地址，使计算机能够找到并连接到特定的网络服务或资源。ChatGPT: Get instant answers, find inspiration, lear...

User把網址傳給dns請求ip
Dns回傳ip
瀏覽器拿Ip向webserver連線

什麼是 DNS – DNS 簡介 – AWSDns介紹

正向代理:代理user發出的需求（像是中國的長城）
反向代理：代理server發出的需求CDN教學：不只是網站加速，資安不可缺！了解反向代理伺服器

網站架構如何架設網站？完整網頁設計＋製作流程教學（2023） | 犬哥網站Word Press假設網站的軟體

單工 雙工 半雙工
單工、雙工、半雙工、全雙工(時分雙工TDD、頻分雙工FDD) – 資安部落客

server website dns 關係搞清楚

Ch1
HTML（HyperText Markup Language，超文本標記語言）HTML：超文本標記語言 | MDN

Html 基礎
Html是由element組成HTML 基礎 - 學習該如何開發 Web | MDN

DebugDebugging HTML - Learn web development | MDN

Ch2
註解<！-abc->
Ch3
<pre></pre>保持原始文件樣式
<em>、<i>斜體
Ch4
url
Ch5
項目清單

Ch6表格
broder框線
thead表頭
th定義表頭內的儲存格
tbody表格本體
colspan橫向合併儲存格
rowspan直向合併儲存格
caption表格的標題
colgroup欄位的群組化

Ch7
鑲入圖片和文字
Ch8
影片鑲入字幕

看1/5了
果然有點壓力讀比較快

Angular待補

Ch9
Placehorder 提示文字
required 必填
multiple 設定輸入兩個以上的值
imput type="text","password"...
pattern 驗證欄位輸入格式是否符合規定
autocomplete 自動帶入
hidden 隱藏

type = ”date”
YYYY-MM-DD Thh:mm:ss
textarea多行輸入的文字框
label 把欄位名稱和表單元件之間產生關連
下拉選單
select
option
option如果有selected屬性代表選項被預選了

optgroup 選項群組化
就像
optgroup label=Asia
option label=台灣 value=Taiwan /option
option label=日本 value=Japan /option
optgroup label=Europe
option label=倫敦 value=London /option

keygen 加密金鑰
<keygen keytype=“加密方法“>

Ch10

我好喜歡這段
超愛的
看到好幾個常用的 js event
感謝作者，讚嘆作者

onresize website視窗大小被改變會觸發的事件
onchange 元素被改變時觸發的事件
onfocus 元素獲得焦點時觸發的事件
onselect 元素被選取時觸發的事件
onkeydown 使用者按鍵盤觸發的事件
onkeypress 使用者按所建的按鈕時觸發的事件
onkeyup 使用者離開鍵盤觸發的事件
onclick 按下btn觸發的事件

script的中文字義是腳本 第一次知道
屬性<script>主要是提供設計腳本
js的程式碼會放在<script>內
<script 屬性>
type設定script語言的類型，預設是JavaScript

網頁載入時會觸發onload事件
span和div在語意上沒有特別的意義
但在網頁編排時常被使用
主要是把段落內的範圍內容設定和其他內容做區隔

Ch11 css
class 設定哪個區塊用什麼css
字型
顏色
<style>
[class=”Bluecolorfont”]{
color :blue;
}
</style>

*{} 全域選擇，把樣式套用到所有元素
虛擬選擇器
:link尚未被點選時套用的樣式
:visable已被點選時套用的樣式
居然連網頁配色和意義也有講
好細心

Ch12
文字設定

Ch13 list 項目清單
不是那個程式的list

Ch14 backgroung img
repeat-x/y 向水平/垂直方向重複
background-size 圖片大小
background-attachment 背景圖片是否捲動

Ch15 Box Model
原來常看到的這個就是Box Model喔! 深入理解 CSS Box Model ( 盒子模型 )

Ch16

決定跳著看好了
明天要花點時間去實作
按下btn觸發條件，修改文字顏色

Ch17 漸層設計
background settings

Ch18 設定欄位和欄位之間的間距
column-count : 5 設定欄位數量
column-weight : 3px 設定欄位寬度
column-count column weight : auto 設定欄位數量
Line-height :1.5em
colums:3 150px
column-gap : 1.5em 設定欄和欄的間距

Ch19 定位和網頁排版
Block setting
Display
Position
設定文繞圖
float
clear

後面好像都是一些關於動畫和for 運算子的用法

Ch20-23 動畫相關 跳過

Ch24 響應式網頁設計RWD
常見的基本語法
padding border

Ch25 js基本知識
一些基本的運算方法
資料型態
變數
物件
運算子

Ch26 js流程控制
If else
Switch
While
Array
foreach

Ch27 js function
方法

Ch28 Bom物件
視窗物件寫法

Ch29 DOM
HTML的架構
Html的元素存取
GetElementById

插入、建立、刪除節點
Css設定

剩下10章了

Ch30 JQuery基本語法
$(selector).action()
$(".t1test").hide() 隱藏所有class t1test
$("#t2test").hide() 隱藏所有id = t2test
$(function()){} // html載入後觸發的函數

("*") 選取所有元素
(this) 選取目前的html元素
.css("color","red") 改顏色

jquery事件
滑鼠事件 click onclick mousedown mouseup
鍵盤事件keypress keydown keyup
表單事件submit change focus blur
視窗事件load realize scorll unload

text() 設定或讀取所選html元素的內容
val() 設定或讀取所選表單欄位的內容
attr() 設定獲得屬性值

Ch31 jquery mobile 行動網頁設計
jquery mobile css js安裝
頁面設定
data-role = "page"

data-dialog = "true" 對話框
頁面切換
type = "button"
icon設定
popups彈出框設定
panel 面板
(額外增加顯示空間 有點類似側拉單的概念但不是冊拉單)
data-role = "panel"

可折疊區塊
reflow表格
colum toggle表格
list顯示
radio checkbox