海兔
@wjgify
Wed, Sep 13, 2023 2:56 PM
Wed, Sep 13, 2023 3:41 PM
HTML、css、js、jQuery、bootstrap學習記錄
聊天歡迎
如果有錯也歡迎糾正，謝謝！
海兔
@wjgify
Wed, Sep 13, 2023 2:59 PM
書籍
最完整跨平台網頁設計：HTML + CSS + JavaScript + jQuery + Bootst...
海兔
@wjgify
Wed, Sep 13, 2023 3:00 PM
Ch0
網頁設計基礎知識
海兔
@wjgify
Wed, Sep 13, 2023 3:02 PM
網頁設計流程
規劃網頁/設計介面/功能設計（含卡控）/實作/code review 發布
網站地圖 sitemap
海兔
@wjgify
Wed, Sep 13, 2023 3:06 PM
發布網頁
1.取得網站空間
申請免費空間、承租主機（Google GitHub Word Press）、自行架網站
自己架網站要有一台電腦當主機，且24hr不斷電
海兔
@wjgify
Wed, Sep 13, 2023 3:08 PM
參考
【2022】如何架設網站？初學者架站完整攻略，8 大架站平台不藏私大公開！｜SHOPLINE 電商教室
我想找github的來看看
海兔
@wjgify
Wed, Sep 13, 2023 3:10 PM
Wed, Sep 13, 2023 3:14 PM
Github
不用懂git也能用GitHub Pages架設靜態網站並綁定網域. 用GitHub Pages架設靜態網...
假設的網站只有http，沒有https 表示沒有加密
海兔
@wjgify
Wed, Sep 13, 2023 3:15 PM
Wed, Sep 13, 2023 3:16 PM
2.註冊網域
網域名稱的意思？網域和網址有差別嗎？ - 將能數位行銷
網域是指網站在網際網路上的識別名稱，可以理解成每個網站都有個獨一無二的IP，就像地標一樣，來定位和訪問的網路位址。但因為數字難以記憶，因此透過DNS 系統，轉換成現在看到的英文字母，稱為「網域。例如「
Example Domain
」。
而網址則是網站內特定頁面的位址，它是由網域名稱和頁面階層組成，例如「
https://example.com/...
網域domain 是的一無二的ip
網址url 是特定的位址
海兔
@wjgify
Wed, Sep 13, 2023 3:17 PM
Wed, Sep 13, 2023 3:18 PM
3.把網頁上傳到網站
海兔
@wjgify
Wed, Sep 13, 2023 3:18 PM
Wed, Sep 13, 2023 3:19 PM
Server
DNS
海兔
@wjgify
Wed, Sep 13, 2023 3:25 PM
Server
一個管理資源並為使用者提供服務的電腦軟體，通常分為檔案伺服器（能使使用者在其他電腦存取檔案），資料庫伺服器和應用程式伺服器。
執行以上需求的電腦稱為網路主機host
伺服器 - 維基百科，自由的百科全書
海兔
@wjgify
Wed, Sep 13, 2023 3:26 PM
Wed, Sep 13, 2023 3:28 PM
伺服器（硬體）：有較高性能的電腦
伺服器（軟體）：伺服器軟體工作在客戶端-伺服器或瀏覽器-伺服器的方式，有很多形式的伺服器
海兔
@wjgify
Wed, Sep 13, 2023 3:31 PM
DNS（Domain Name System）
是一种用于将人类可读的域名（
https://例如www.example.com
）映射到计算机网络中的IP地址（例如192.168.1.1）的分布式命名系统。DNS起到了互联网的"电话簿"的作用，它将域名转换为相应的IP地址，使计算机能够找到并连接到特定的网络服务或资源。
ChatGPT: Get instant answers, find inspiration, lear...
海兔
@wjgify
Wed, Sep 13, 2023 3:36 PM
User把網址傳給dns請求ip
Dns回傳ip
瀏覽器拿Ip向webserver連線
海兔
@wjgify
Wed, Sep 13, 2023 3:37 PM
什麼是 DNS – DNS 簡介 – AWS
Dns介紹
海兔
@wjgify
Wed, Sep 13, 2023 3:40 PM
Wed, Sep 13, 2023 3:48 PM
正向代理:代理user發出的需求（像是中國的長城）
反向代理：代理server發出的需求
CDN教學：不只是網站加速，資安不可缺！了解反向代理伺服器
海兔
@wjgify
Wed, Sep 13, 2023 3:48 PM
Thu, Sep 14, 2023 5:19 AM
網站架構
如何架設網站？完整網頁設計＋製作流程教學（2023） | 犬哥網站
Word Press假設網站的軟體
海兔
@wjgify
Wed, Sep 13, 2023 5:17 PM
Thu, Sep 14, 2023 5:21 AM
單工 雙工 半雙工
單工、雙工、半雙工、全雙工(時分雙工TDD、頻分雙工FDD) – 資安部落客
海兔
@wjgify
Wed, Sep 13, 2023 5:18 PM
server website dns 關係搞清楚
海兔
@wjgify
Thu, Sep 14, 2023 5:33 AM
Thu, Sep 14, 2023 5:34 AM
Ch1
HTML（HyperText Markup Language，超文本標記語言）
HTML：超文本標記語言 | MDN
海兔
@wjgify
Thu, Sep 14, 2023 5:37 AM
Thu, Sep 14, 2023 5:37 AM
Html 基礎
Html是由element組成
HTML 基礎 - 學習該如何開發 Web | MDN
海兔
@wjgify
Thu, Sep 14, 2023 5:43 AM
Debug
Debugging HTML - Learn web development | MDN
海兔
@wjgify
Thu, Sep 14, 2023 1:28 PM
Thu, Sep 14, 2023 1:39 PM
Ch2
註解<！-abc->
Ch3
<pre></pre>保持原始文件樣式
<em>、<i>斜體
Ch4
url
Ch5
項目清單
海兔
@wjgify
Thu, Sep 14, 2023 1:53 PM
Ch6表格
broder框線
thead表頭
th定義表頭內的儲存格
tbody表格本體
colspan橫向合併儲存格
rowspan直向合併儲存格
caption表格的標題
colgroup欄位的群組化
海兔
@wjgify
Thu, Sep 14, 2023 1:55 PM
Thu, Sep 14, 2023 2:11 PM
Ch7
鑲入圖片和文字
Ch8
影片鑲入字幕
海兔
@wjgify
Thu, Sep 14, 2023 2:45 PM
看1/5了
果然有點壓力讀比較快
海兔
@wjgify
Thu, Sep 14, 2023 5:00 PM
Angular待補
海兔
@wjgify
Sat, Sep 16, 2023 2:19 AM
Ch9
Placehorder 提示文字
required 必填
multiple 設定輸入兩個以上的值
imput type="text","password"...
pattern 驗證欄位輸入格式是否符合規定
autocomplete 自動帶入
hidden 隱藏
海兔
@wjgify
Sat, Sep 16, 2023 2:23 AM
type = ”date”
YYYY-MM-DD Thh:mm:ss
textarea多行輸入的文字框
label 把欄位名稱和表單元件之間產生關連
下拉選單
select
option
option如果有selected屬性代表選項被預選了
海兔
@wjgify
Sat, Sep 16, 2023 2:25 AM
optgroup 選項群組化
就像
optgroup label=Asia
option label=台灣 value=Taiwan /option
option label=日本 value=Japan /option
optgroup label=Europe
option label=倫敦 value=London /option
海兔
@wjgify
Sat, Sep 16, 2023 2:27 AM
keygen 加密金鑰
<keygen keytype=“加密方法“>
海兔
@wjgify
Sat, Sep 16, 2023 2:27 AM
Ch10
海兔
@wjgify
Sat, Sep 16, 2023 2:37 AM
Sat, Sep 16, 2023 2:38 AM
我好喜歡這段
超愛的
看到好幾個常用的 js event
感謝作者，讚嘆作者
海兔
@wjgify
Sat, Sep 16, 2023 2:43 AM
onresize website視窗大小被改變會觸發的事件
onchange 元素被改變時觸發的事件
onfocus 元素獲得焦點時觸發的事件
onselect 元素被選取時觸發的事件
onkeydown 使用者按鍵盤觸發的事件
onkeypress 使用者按所建的按鈕時觸發的事件
onkeyup 使用者離開鍵盤觸發的事件
onclick 按下btn觸發的事件
海兔
@wjgify
Sat, Sep 16, 2023 2:46 AM
script的中文字義是腳本 第一次知道
屬性<script>主要是提供設計腳本
js的程式碼會放在<script>內
<script 屬性>
type設定script語言的類型，預設是JavaScript
海兔
@wjgify
Sat, Sep 16, 2023 2:49 AM
網頁載入時會觸發onload事件
span和div在語意上沒有特別的意義
但在網頁編排時常被使用
主要是把段落內的範圍內容設定和其他內容做區隔
海兔
@wjgify
Sat, Sep 16, 2023 3:17 AM
Sat, Sep 16, 2023 3:17 AM
Ch11 css
class 設定哪個區塊用什麼css
字型
顏色
<style>
[class=”Bluecolorfont”]{
color :blue;
}
</style>
海兔
@wjgify
Sat, Sep 16, 2023 3:20 AM
*{} 全域選擇，把樣式套用到所有元素
虛擬選擇器
:link尚未被點選時套用的樣式
:visable已被點選時套用的樣式
居然連網頁配色和意義也有講
好細心
海兔
@wjgify
Sun, Sep 17, 2023 12:44 PM
Ch12
文字設定
海兔
@wjgify
Sun, Sep 17, 2023 12:47 PM
Ch13 list 項目清單
不是那個程式的list
海兔
@wjgify
Sun, Sep 17, 2023 12:50 PM
Sun, Sep 17, 2023 12:51 PM
Ch14 backgroung img
repeat-x/y 向水平/垂直方向重複
background-size 圖片大小
background-attachment 背景圖片是否捲動
海兔
@wjgify
Sun, Sep 17, 2023 12:52 PM
Sun, Sep 17, 2023 12:56 PM
Ch15 Box Model
原來常看到的這個就是Box Model喔!
深入理解 CSS Box Model ( 盒子模型 )
海兔
@wjgify
Sun, Sep 17, 2023 1:03 PM
Ch16
海兔
@wjgify
Fri, Sep 22, 2023 5:36 PM
決定跳著看好了
明天要花點時間去實作
按下btn觸發條件，修改文字顏色
海兔
@wjgify
Mon, Oct 9, 2023 1:53 AM
Ch17 漸層設計
background settings
海兔
@wjgify
Mon, Oct 9, 2023 1:59 AM
Ch18 設定欄位和欄位之間的間距
column-count : 5 設定欄位數量
column-weight : 3px 設定欄位寬度
column-count column weight : auto 設定欄位數量
Line-height :1.5em
colums:3 150px
column-gap : 1.5em 設定欄和欄的間距
海兔
@wjgify
Mon, Oct 9, 2023 2:03 AM
Ch19 定位和網頁排版
Block setting
Display
Position
設定文繞圖
float
clear
海兔
@wjgify
Mon, Oct 9, 2023 2:28 AM
後面好像都是一些關於動畫和for 運算子的用法
海兔
@wjgify
Mon, Oct 9, 2023 2:29 AM
Mon, Oct 9, 2023 2:31 AM
Ch20-23 動畫相關 跳過
海兔
@wjgify
Mon, Oct 9, 2023 2:31 AM
Ch24 響應式網頁設計RWD
常見的基本語法
padding border
海兔
@wjgify
Mon, Oct 9, 2023 2:32 AM
Ch25 js基本知識
一些基本的運算方法
資料型態
變數
物件
運算子
海兔
@wjgify
Mon, Oct 9, 2023 2:34 AM
Ch26 js流程控制
If else
Switch
While
Array
foreach
海兔
@wjgify
Mon, Oct 9, 2023 2:35 AM
Ch27 js function
方法
海兔
@wjgify
Mon, Oct 9, 2023 2:36 AM
Ch28 Bom物件
視窗物件寫法
海兔
@wjgify
Mon, Oct 9, 2023 2:37 AM
Ch29 DOM
HTML的架構
Html的元素存取
GetElementById
海兔
@wjgify
Mon, Oct 9, 2023 2:38 AM
插入、建立、刪除節點
Css設定
海兔
@wjgify
Mon, Oct 9, 2023 2:39 AM
剩下10章了
海兔
@wjgify
Tue, Oct 10, 2023 12:09 PM
Ch30 JQuery基本語法
$(selector).action()
$(".t1test").hide() 隱藏所有class t1test
$("#t2test").hide() 隱藏所有id = t2test
$(function()){} // html載入後觸發的函數
海兔
@wjgify
Tue, Oct 10, 2023 12:11 PM
("*") 選取所有元素
(this) 選取目前的html元素
.css("color","red") 改顏色
海兔
@wjgify
Tue, Oct 10, 2023 12:15 PM
Tue, Oct 10, 2023 12:15 PM
jquery事件
滑鼠事件 click onclick mousedown mouseup
鍵盤事件keypress keydown keyup
表單事件submit change focus blur
視窗事件load realize scorll unload
海兔
@wjgify
Tue, Oct 10, 2023 12:17 PM
text() 設定或讀取所選html元素的內容
val() 設定或讀取所選表單欄位的內容
attr() 設定獲得屬性值
海兔
@wjgify
Sun, Oct 15, 2023 2:18 PM
Ch31 jquery mobile 行動網頁設計
jquery mobile css js安裝
頁面設定
data-role = "page"
海兔
@wjgify
Sun, Oct 15, 2023 2:29 PM
data-dialog = "true" 對話框
頁面切換
type = "button"
icon設定
popups彈出框設定
panel 面板
(額外增加顯示空間 有點類似側拉單的概念但不是冊拉單)
data-role = "panel"
海兔
@wjgify
Sun, Oct 15, 2023 2:43 PM
可折疊區塊
reflow表格
colum toggle表格
list顯示
radio checkbox
載入新的回覆
聊天歡迎
如果有錯也歡迎糾正，謝謝！
網頁設計基礎知識
規劃網頁/設計介面/功能設計（含卡控）/實作/code review 發布
網站地圖 sitemap
1.取得網站空間
申請免費空間、承租主機（Google GitHub Word Press）、自行架網站
自己架網站要有一台電腦當主機，且24hr不斷電
而網址則是網站內特定頁面的位址，它是由網域名稱和頁面階層組成，例如「https://example.com/...
網域domain 是的一無二的ip
網址url 是特定的位址
DNS
一個管理資源並為使用者提供服務的電腦軟體，通常分為檔案伺服器（能使使用者在其他電腦存取檔案），資料庫伺服器和應用程式伺服器。
執行以上需求的電腦稱為網路主機host
伺服器（軟體）：伺服器軟體工作在客戶端-伺服器或瀏覽器-伺服器的方式，有很多形式的伺服器
是一种用于将人类可读的域名（https://例如www.example.com）映射到计算机网络中的IP地址（例如192.168.1.1）的分布式命名系统。DNS起到了互联网的"电话簿"的作用，它将域名转换为相应的IP地址，使计算机能够找到并连接到特定的网络服务或资源。
Dns回傳ip
瀏覽器拿Ip向webserver連線
反向代理：代理server發出的需求
單工、雙工、半雙工、全雙工(時分雙工TDD、頻分雙工FDD) – 資安部落客
HTML（HyperText Markup Language，超文本標記語言）
Html是由element組成
註解<！-abc->
Ch3
<pre></pre>保持原始文件樣式
<em>、<i>斜體
Ch4
url
Ch5
項目清單
broder框線
thead表頭
th定義表頭內的儲存格
tbody表格本體
colspan橫向合併儲存格
rowspan直向合併儲存格
caption表格的標題
colgroup欄位的群組化
鑲入圖片和文字
Ch8
影片鑲入字幕
果然有點壓力讀比較快
Placehorder 提示文字
required 必填
multiple 設定輸入兩個以上的值
imput type="text","password"...
pattern 驗證欄位輸入格式是否符合規定
autocomplete 自動帶入
hidden 隱藏
YYYY-MM-DD Thh:mm:ss
textarea多行輸入的文字框
label 把欄位名稱和表單元件之間產生關連
下拉選單
select
option
option如果有selected屬性代表選項被預選了
就像
optgroup label=Asia
option label=台灣 value=Taiwan /option
option label=日本 value=Japan /option
optgroup label=Europe
option label=倫敦 value=London /option
<keygen keytype=“加密方法“>
超愛的
看到好幾個常用的 js event
感謝作者，讚嘆作者
onchange 元素被改變時觸發的事件
onfocus 元素獲得焦點時觸發的事件
onselect 元素被選取時觸發的事件
onkeydown 使用者按鍵盤觸發的事件
onkeypress 使用者按所建的按鈕時觸發的事件
onkeyup 使用者離開鍵盤觸發的事件
onclick 按下btn觸發的事件
屬性<script>主要是提供設計腳本
js的程式碼會放在<script>內
<script 屬性>
type設定script語言的類型，預設是JavaScript
span和div在語意上沒有特別的意義
但在網頁編排時常被使用
主要是把段落內的範圍內容設定和其他內容做區隔
class 設定哪個區塊用什麼css
字型
顏色
<style>
[class=”Bluecolorfont”]{
color :blue;
}
</style>
虛擬選擇器
:link尚未被點選時套用的樣式
:visable已被點選時套用的樣式
居然連網頁配色和意義也有講
好細心
文字設定
不是那個程式的list
repeat-x/y 向水平/垂直方向重複
background-size 圖片大小
background-attachment 背景圖片是否捲動
原來常看到的這個就是Box Model喔!
明天要花點時間去實作
按下btn觸發條件，修改文字顏色
background settings
column-count : 5 設定欄位數量
column-weight : 3px 設定欄位寬度
column-count column weight : auto 設定欄位數量
Line-height :1.5em
colums:3 150px
column-gap : 1.5em 設定欄和欄的間距
Block setting
Display
Position
設定文繞圖
float
clear
常見的基本語法
padding border
一些基本的運算方法
資料型態
變數
物件
運算子
If else
Switch
While
Array
foreach
方法
視窗物件寫法
HTML的架構
Html的元素存取
GetElementById
Css設定
$(selector).action()
$(".t1test").hide() 隱藏所有class t1test
$("#t2test").hide() 隱藏所有id = t2test
$(function()){} // html載入後觸發的函數
(this) 選取目前的html元素
.css("color","red") 改顏色
滑鼠事件 click onclick mousedown mouseup
鍵盤事件keypress keydown keyup
表單事件submit change focus blur
視窗事件load realize scorll unload
val() 設定或讀取所選表單欄位的內容
attr() 設定獲得屬性值
jquery mobile css js安裝
頁面設定
data-role = "page"
頁面切換
type = "button"
icon設定
popups彈出框設定
panel 面板
(額外增加顯示空間 有點類似側拉單的概念但不是冊拉單)
data-role = "panel"
reflow表格
colum toggle表格
list顯示
radio checkbox