HTML 學習札記

目次

建立錨點/書簽

心得雜錄

HTML 資源

blogger 水平線不顯示? 顏色問題被吃掉？(改藍色無用)

---

"撰寫模式" 水平線顯示

建立錨點/書簽

• 用全域的 id 屬性，不用 name。
    <a>: The Anchor element#deprecated_attributes name
   #deprecated_attributes超連結只跳至Anchor element，無法跳至deprecated_attributes?
• 名稱可用中文

1. 一般的語法：

  <a name=eternal_alice>　　</a>

2. 也可以加上括號（引號）：

  <a name="eternal_alice">　　</a>

3. 也可以使用 CSS 那種 ID 與 class 的方式（ID 是 # ， class 是 . ）：

  <a id="eternal_alice">　　</a>

使用錨點/超連結錨點

href=#錨點名稱；引號可省？

超連結的位置是預設原始網頁 http://smallwu36.pixnet.net/blog/post/41562106

後面加上＃與關鍵字

變成 http://smallwu36.pixnet.net/blog/post/41562106#eternal_alice

CLASS叫用書簽？

<a CLASS="Toc" target="_self" href="#TheTheory">The theory</a>

→ <h1 id="TheTheory">The theory</a></h1>

→1. 此例是網內自叫(WordMVP)。2. CLASS有Toc, Author...。3. 網內自叫可省全網名？Yes!

參見 HTML 書籤(錨點)的寫法

https://smallwu36.pixnet.net/blog/post/1100093-html-書籤%28錨點%29的寫法

心得雜錄

• <u> </u> 底線不用為宜，以免和超連結混淆。
• h1 一篇只用一個
• div就是group著一些Element，而span就是group著一堆字？→容器，一次套用所有屬性至內部所有 Element。div 結束分行(p)，span 結束不分行。

HTML 資源

• HTML 基礎- 學習該如何開發Web | MDN

1. MDN Web Docs is an open-source, collaborative project documenting Web platform technologies, including CSS, HTML, JavaScript, and Web APIs.
   We also provide an extensive set of learning resources for beginning developers and students.
2. MDN 的 HTML 參考文件的主要入口，包括詳細的元素和屬性參考-例如，如果您想知道元素具有哪些屬性或屬性具有什麼值，那麼這是一個很好的起點。
3. 內容豐富--部份中文譯本，基本是入門或標題有中譯。
4. 英文為主。
5. 進度：
   https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics#how_does_a_table_work

• GrandmaCan -我阿嬤都會_HTML教學課程

1.  YouTube 教學
2.  有多種語言教學，(Excel數據分析、動態儀表板)
3. 【html】1 小時初學者教學
   小白 https://www.youtube.com/watch?v=CLUPkcLQm64  
1. 各小節時間段目錄, ⭐️ 目錄 ⭐️
2. 33:06 連結(a, 含檔案)和圖片(img, 42:50)
3. 影片(類 img)及嵌入(iframe)
4. (0:52:31) 列表(ol, ul)、表格(table, td, tr)
5. (0:58:39) 容器 div、span
6. (1:15:35) meta 標籤→告訴搜尋引擎。
7. (1:21:46) 查看網頁html架構→模仿他人。
4. 【css】2 小時初學者教學
   小白 https://www.youtube.com/watch?v=Ml78vnNTBLw; t=2697s
⭐️ 目錄 ⭐️
⌨️ (0:00:00) 如何撰寫css ⌨️ (0:08:00) color 顏色 ⌨️ (0:13:51) padding & margin ⌨️ (0:21:39) float & display ⌨️ (0:32:12) position 定位
⌨️ (0:44:51) opacity & border-radius ⌨️ (0:49:27) style 標籤 ⌨️ (0:53:38) 引入外部css檔案 ⌨️ (0:59:17) class & id ⌨️ (1:06:17) css選擇器 ⌨️ (1:14:36) flex 介紹 ⌨️ (1:36:56) animation 動畫 ⌨️ (1:48:05) 查看網頁架構
5. 【javascript】3 小時初學者教學
   小白 https://www.youtube.com/watch?v=yZwlW5INhgk
⭐️ 目錄 ⭐️
⌨️ (0:00:00​) 如何撰寫js ⌨️ (0:05:04) 基本資料型態 & 變數 ⌨️ (0:23:16) 如何使用字串、字串用法 ⌨️ (0:33:36) 如何使用數字、數字用法 ⌨️ (0:42:05) 製作一個基本計算機 ⌨️ (0:50:53) 陣列 array ⌨️ (0:58:32) 函式 function ⌨️ (1:12:37) if 判斷 ⌨️ (1:34:27) 物件 object ⌨️ (1:40:37) 真實世界物件 ⌨️ (1:44:45) while 迴圈 ⌨️ (1:50:12) 密碼檢驗程式 ⌨️ (1:58:44) for 迴圈 ⌨️ (2:10:04) 二維陣列、巢狀迴圈 ⌨️ (2:19:34) class 模板 ⌨️ (2:26:23) 取得html元素 ⌨️ (2:38:54) event listener ⌨️ (2:53:36) 製作一個部落格

• W3 School
1. HTML https://www.w3schools.com/html/default.asp
2. 英文