前端學習筆記part3
CSS基礎
層疊樣式表(CSS)，用來美化網頁的，做到結構(HTML)與表現(CSS)分離，方便維護。
CSS的使用
使用CSS可以讓結構(HTML)與表現(CSS)分離，方便維護。
基本語法
CSS語法有三個部分組成:選擇器、屬性、屬性值。
123selector { property: value;}
selector選擇器通常是需要改變樣式的HTML元素。
每條聲明由一個屬性(property)和一個屬性值(value)組成。
屬性和屬性值之間用冒號(:)隔開。
屬性(property)是希望設置的樣式屬性(style attribute)。每個屬性有一個屬性值(value)。
CSS的四種引用方式
在html樣式中有四種引用css的方式:行間樣式、內部樣式、外部樣式、導入外部樣式。
行間樣式:直接在標籤上書寫樣式。
內部樣式:在文件的內部書寫樣式。
外部樣式:
先創建一個CSS文件
再用link標籤引入這個文件
導入外部樣式:
先創建一個CSS文件
在style標籤中用import引入這個文件
以上四種CSS引用方式的區別:
行間 ...
前端學習筆記part2
整理我在自學前端的課程內容、筆記，以及一些實作的內容，不僅方便複習，也順道可以練習markdown語法的使用，期許可以幫助到更多的人。
HTML標籤屬性
HTML除了基本的佈局標籤以外，還有部分標籤具有強大的交互功能，比如表單標籤，可以實現基本的登陸註冊操作。再者，各種標籤通過設置不同的屬性，也可以實現一些交互效果。
標籤由標簽名、標籤屬性和文本內容三部分組成(注意:單標籤沒有文本內容)。
標籤屬性是對標籤的一種描述方式。
標籤屬性分為:通用、自有和自定義屬性。
通用屬性:所有標籤都具有的屬性(除 <br/> 標籤外)。
通用屬性有:
id:用來給標籤取一個唯一的名稱，在一個網頁中必須是唯一。
class:用來給標籤取一個類名。
style:用來設置該標籤的行內樣式。
title:當游標移動到該標籤上時，所顯示的提示內容。
12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta ...
前端學習筆記part1
整理我在自學前端的課程內容、筆記，以及一些實作的內容，不僅方便複習，也順道可以練習markdown語法的使用，期許可以幫助到更多的人。
HTML概述
HTML:超文本標記語言，是一種標誌性的語言，非編程語言，不能使用邏輯運算。通過標籤將網路上的文檔格式進行統一，使分散網路資源連結為一個邏輯整體。
超文本，是一種組織信息的方法，通過超連結將多種媒介關聯起來。
標籤:用<>包裹的具有一定含義的內容，比如:1<strong>...</strong>
此為一組標籤。
HTML功能
展示在線的文檔，其中包含標題、文本、表格、列表以及照片等內容
通過超連結檢索在線的信息。
為獲取遠程服務而設計表單，可用於檢索信息、訂購產品等。
在文檔中直接包含電子表格，影片剪輯，聲音剪輯以及其他的一些應用。
動態網頁與靜態網頁
靜態網頁 :HTML代碼和內容書寫完畢後，頁面的內容和顯示效果舊基本上不會發生變化了── 除非你修改頁面程式碼
動態網頁 :頁面程式碼雖然沒有變，但顯示的內容可以 隨著時間、環境或者數據庫操作的結果而發生改變的。
注意 :請勿將動 ...
HEXO基本指令與檔案結構總攬
Hexo是一款快速、簡單且功能豐富的框架，通常用於架設部落格或個人網站，此篇文章涵蓋了絕大部分使用hexo架設個人網站時，常用的指令、功能，工作流程，以及各個資料夾所代表的含義。
安裝 Hexo
請先確保已經安裝了 Node.js 和 Git。接著，你可以使用以下指令安裝 Hexo：
1npm install -g hexo-cli
建立新專案
使用 Hexo 建立一個新的專案目錄：
1hexo init my-blog
這個指令會在 my-blog 資料夾內建立一個新的 Hexo 專案。接著進入該目錄並安裝所需的依賴：
12cd my-blognpm install
本地伺服器預覽
要在本地啟動伺服器以預覽你的網站，可使用以下指令：
1hexo server
這在預設情況下會於 http://localhost:4000 啟動一個伺服器，並讓你可以在瀏覽器中查看你的網站。
建立新文章
要新增一篇文章，可以使用以下指令：
1hexo new post "文章標題"
這會在 source/_posts 資料夾中建立一個新的 Markdown 檔案，讓你可以編輯 ...
解決使用hexo-asset-image，執行hexo-g卻無法獲取正確圖片位址的問題。
相信很多架設hexo部落格的新手們，都曾經碰到這種狀況，在跟著各大教學資源使用hexo-asset-image後，執行hexo g卻無法獲取正確圖片位址，總是會輸出錯誤圖片位址，無法正確顯示圖片，所以我整理了幾種方法，希望能夠提供一點幫助，讓新手們不要重蹈覆轍(笑)。
問題概況
執行hexo g後，轉換為以下錯誤的圖片位址:
1<p><img src="/.io//example.jpg" alt="img"></p>
解決方法
修改node_modules/hexo-asset-image/index.js的內容:
123456789101112// 其餘內容不變if(/.*\/index\.html$/.test(link)) { // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html // image in xxtitle/ will go to xxtitle/index/ ...
【博音】EP137 | 被多少人罵才算炎上？ft. JIM心得
聽完博恩跟jim的podcast，感觸良多。
非常認同博恩所期望的，就事論事，真理越辯越明的世界。
但同時也覺得jim提的，「我們活在一個感性的世界，絕大部分的人並不是在討論事情本身，只是想要獲得快樂(按讚、留言、分享)」很有道理。
threads就是一個很好的例子，作為一個幾乎擁有絕對言論自由的社交平台，上面的內容，從最開始的人人理性討論、就事論事的傾向，後來變成人人都想藉著演算法一炮而紅，平台充斥著各式各樣聳動標題、爭議言論、情緒化的現狀，彷彿又再一次證明了「我們活在一個感性的世界」。
社群平台，給人們帶來了非常多的便利，也帶來了非常大的焦慮跟衝突。
把所有人跨越時間、地點的連結在一起，不但沒有達成一片和諧世界大同，反而降低了開闢戰場的成本。
我覺得，可以做到互不侵犯的同溫層，未必會比整天打來打去的戰場來的差。
畢竟我們知道，真理越辯越明的世界並沒有發生，那些戰場，真的只是打來打去而已，完全沒有意義。
這樣看來，社群媒體也不是什麼多優秀的發明嘛。
Markdown 語法
此文整理了個人在撰寫文章時，常用的markdown語法，希望能夠提供對使用hexo架設網站，或是使用markdown製作筆記的人一些幫助。
標題
1234# h1 //一級標題## h2 //二級標題### h3 //三級標題...以次類推
一級標題
二級標題
三級標題
分隔線
1--- 或 ***
粗體和斜體
123**粗體文字***斜體文字****粗斜體文字***
粗體文字
斜體文字
粗斜體文字
列表
123456789- 無序列表項目1- 無序列表項目2 - 子項目A - 子項目B1. 有序列表項目12. 有序列表項目2 1. 子項目A 2. 子項目B
無序列表項目1
無序列表項目2
子項目A
子項目B
有序列表項目1
有序列表項目2
子項目A
子項目B
連結
1[連結文字](https://www.example.com)
連結文字
圖片
1![圖片替代文字](https://img.technews.tw/wp-content/uploads/2020/03/20114613/640px-Markdown-mark. ...