Internet

• Internet - Wikipedia  網際網路 - 維基百科，自由的百科全書

• Transmission Control Protocol - Wikipedia

• 傳輸控制協定 - 維基百科，自由的百科全書

• IP位址 - 維基百科，自由的百科全書

• IP查詢工具 - 查IP位置,IP查國家,ISP來源,查網址IP,查詢自己IP位址

• IP Location Finder - Geolocation

• TWNIC 財團法人台灣網路資訊中心

• Domain name - Wikipedia

• 網域名稱

• 鳥哥的 Linux 私房菜 -- 基礎網路概念

• Matter (standard) | Wikipedia 是一個智能家居開源標準項目，由亞馬遜、蘋果、谷歌、ZigBee聯盟聯合發起，旨在開發、推廣一項免除專利費的新連接協議，以簡化智能家居設備商開發成本，提高產品之間兼容性。 

• 连接标准联盟、Matter 协议——它们的「前世今生」和「未来」 | 少數派.

• 乐鑫 Matter 系列博客 | 知呼

• 技術士技能檢定網頁設計職類規範  | 勞動力發展署技能檢定中心 

World wide web

• World Wide Web - Wikipedia  全球資訊網 - 維基百科

• World Wide Web Foundation 

• 全球資訊網 (World Wide Web) 介紹  a historical web pages about www

• google doodle games - Google 搜尋 interactive web

• An overview of HTTP | MDN

• Hypertext Transfer Protocol | Wikipedia 

• HTTPS - Wikipedia 

• HTTP request smuggling

• The HTTPS-Only Standard - The HTTPS-Only Standard (cio.gov) 

• Differences between HTTP and HTTPS protocols?

Web Cache and Proxy 快取

• • Web快取 - 維基百科  Web cache - Wikipedia

  • HTTP 快取  |  Web  |  Google Developers

  • A Tale of Four Caches (Weiss)

• • 循序漸進理解 HTTP Cache 機制 | TechBridge 技術共筆部落格

  • 深入理解浏览器的缓存机制 (浪里行舟)

  • HTTP Caching (Summer)

  • 代理伺服器 - 維基百科  Proxy server - Wikipedia

  • 內容傳遞網路 - 維基百科   Content delivery network - Wikipedia

• 突破網路審查 - 維基百科

• 破解地區限制 - Google 搜尋

Same-origin policy 同源政策

• Same-origin policy - Wikipedia 

• 同源政策 (Same-origin policy) - Web 安全 | MDN

• Cross-origin resource sharing - Wikipedia

• 跨來源資源共用（CORS） - HTTP | MDN

• 使用跨域代理伺服器(CORS PROXY)，解決讀取第三方網站資料問題﹍WFU BLOG

• CORS 是什麼? 如何設定 CORS? (shubo)

Browser 

• 浏览器工作原理 (杨溜溜) 

• 图解浏览器的基本工作原理 (zhangwang)

• 浏览器的工作原理：新式网络浏览器幕后揭秘 (Tali Garsiel and Paul Irish)
  How Browsers Work: Behind the scenes of modern web browsers (Tali Garsiel and Paul Irish )

• How the browser renders a web page? — DOM, CSSOM, and Rendering (Hiwarale)

• Populating the page: how browsers work | MDN

• How the browser renders a web page

• How does a Browser render a Webpage? (Aggarwal )

• How browser rendering works — behind the scenes (Emmanuel)

• Browser engine | Wikipedia  瀏覽器引擎 | 維基百科 

Dev Tools

• • Microsoft Edge DevTools documentation - Microsoft Edge Development | Microsoft Learn 

  • Chrome DevTools - Chrome Developers 

  • Chrome UX Report - Chrome Developers 

  • Firefox Developer Edition (mozilla.org) 

HTML

• HTML - Wikipedia  HTML - 維基百科

• 學習該如何開發 Web | MDN

• W3Schools Online Web Tutorials

• w3school 在线教程

• HTML 教程 | 菜鸟教程

• HTML CSS JavaScript - Tools and Resources

• Learn HTML - Free Interactive HTML Tutorial

• HTML Fundamentals | SoloLearn: Learn to code for FREE!

• HTML Tutorial | .TutorialRepublic

• HTML5、CSS、JavaScript網頁程式設計與MCSD 70-480認證教材(電子書) - MIS2000 Lab. 周棟祥/吳進魯 - Google 圖書

• Catalog | Codecademy

  • Learn HTML | Codecademy

• freeCodeCamp 包含 Responsive web design,  JavaScript ,  Front-end libraries, APIs  等免費課程及認證

• HTML For Beginners The Easy Way | html.com

• HTML Tutorial | https://html-css-js.com

• web.dev 帮助开发人员在任何浏览器上构建网络体验

• HTML CheatSheet

• Can I use 檢查Browser 對 HTML, CSS、JavaScript的支援。

• Chrome 開發者工具  |  Tools for Web Developers  |  Google Developers

  • Mastering The Developer Tools Console | Treehouse Blog

• Firefox 開發者工具

• Firefox Developer Edition - Mozilla

• Interop 2022 Dashboard 網頁顯示相容性測試

線上HTML編輯程式

• • 11 Best WYSIWYG HTML Editors for Your Site

  • The 10 Best WYSIWYG HTML Editors - 1stWebDesigner

    • Online HTML Editor Lists (http://www.quackit.com/)  

  • Top 5 JavaScript Online Code Editors

  • 11 Best WYSIWYG HTML Editors In 2022

  • 15+ BEST JavaScript IDE And Online Code Editors In 2022

  • 幾種所見所得的線上編輯器 | 程式前沿

  • Tryit Editor v3.5

  • ArcGIS API for JavaScript Sandbox

  • JS Bin - Collaborative JavaScript Debugging

  • CodePen  is a HTML, CSS, and JavaScript editor in the browser 

  • JSFiddle online JavaScript development

  • Gitpod 使用Visual Studio Code功能，和github 連結

  • StackBlitz  Online IDE for Angular & React powered by Visual Studio Code

  • CodeSandbox onlnVS Online IDE powered by Visual Studio Code

  • playcode.io javascript playground 

• Microsoft Power pages 微軟中企業網站架設，需付費

  • Liveweave- HTML, CSS and JavaScript demo

  • Online HTML Viewer, Editor, Formatter, Beautify, Minify, Test Output 

  • Online HTML Editor (http://www.quackit.com/) WYSIWYG 編輯器

  • Online HTML Editor  (html-online.com) 同時顯示html源碼編輯及WYSIWYG 編輯器

  • HTML Editor - Web Content Composer  同時顯示html源碼編輯及WYSIWYG 編輯器

• Rendera - Online HTML5 Editor 編輯功能不強，但有範例用以學習網頁用html編輯器

免費桌板 HTML 編輯程式

• • Download Microsoft Expression Web 4 (Free Version) from Official Microsoft Download Center

  • KompoZer - Easy web authoring Google Web Designer

  • Brackets - A modern, open source code editor that understands web design.

CSS Cascade Style Sheet

•   Cascading Style Sheets - Wikipedia 階層式樣式表 - 維基百科

• State Of CSS CSS 使用的調查

• CSS Tutorial

  • • W3 school CSS demo- 展示 CSS對網頁外觀的影響 

• CSS 教程 | 菜鸟教程

  • • 菜鳥教程CSS效果的示範：製作導航欄

• Learn to style HTML using CSS - MDN 原理介紹詳細，部分有中文翻譯

  • Introduction to CSS

  • Styling text

  • Styling boxes

  • CSS layout

• Learn to Code HTML & CSS 偏重視覺效果的HTML與CSS 教學

• The State of CSS Survey

• CSS Tutorial | TutorialRepublic

CSS fonts

• Web typography|Wikipedia

  • Web字型排印|維基百科

• CSS Fonts|W3Schools 

• CSS font-family 詳細介紹 (oxxo )

• The Web Open Font Format (WOFF) | MDN

• WOFF File Format 2.0

• 繁體中文 Webfont 網頁字型推薦 (林育正)

• Google Fonts

• 文鼎雲字庫

CSS 排版

•  Learn CSS Layout   學習 CSS 版面配置  為流傳的CSS排版教學，以各國文字，但稍舊。

• Getting Started With CSS Layout — Smashing Magazine 較新的CSS排版介紹

• 聊聊 CSS 中的布局模式 介紹CSS 排版方式的演變

• Complete Guide to Flexbox | CSS-Tricks 介紹 Flexbox 排版方式

• Flexbox Playground

• Flexbox playground (Code Pen)

• A Complete Guide to Grid | CSS-Tricks   介紹 GRID 排版方式

• CSS Grid Playground    [原始碼及說明] 

CSS 繪圖

• How to make a penguin using CSS

• Creating graphics with CSS (nikolisan)

• A Beginner’s Guide to Pure CSS Images (Michael Mangialardi)

• 7 days of CSS graphics and animations (Shanakay Hall)

CSS 工具

• CSS-Tricks

• CSS CheatSheet interactive CSS Cheat sheet and generator

• CSS 語法教學 - 1Keydata

• cssmatic 互動展示一些CSS效果

• CSS3.0 Maker

• css 3 tools - HTML Lion

HTML 繪圖

• Scalable Vector Graphics|Wikipedia 是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。

  • W3C SVG page 

  • SVG Tutorial|W3Schools

  • HTML5 内联 SVG|w3school 在线教程

  • HTML5 内联 SVG | 菜鸟教程

  • SVG: Scalable Vector Graphics|MDN

• Canvas element|Wikipedia 元素是HTML5的一部分，允許手稿語言（scripting languages）動態彩現點陣圖像

  • HTML Canvas|W3Schools

  • HTML5 Canvas|w3school 在线教程

  • HTML5 Canvas | 菜鸟教程

  • Canvas API|MDN

  • HTML 5 Canvas vs. SVG|w3school 在线教程

• WebGL|Wikipedia 是一種JavaScript API，用於在不使用外掛程式的情況下在任何相容的網頁瀏覽器中呈現互動式2D和3D圖形。WebGL完全整合到瀏覽器的所有網頁標準中，可將影像處理和效果的GPU加速使用方式當做網頁Canvas的一部分

  • WebGL Wiki 

  • WebGL: 2D and 3D graphics for the web|MDN

  • WebGL Fundamentals

  • WebGL2 Fundamentals

  • Google Maps Platform WebGL-powered Maps 

  • Google Maps Platform WebGL-powered Maps Features

JavaScript

• The State of JavaScript Survey

• Learn JavaScript for Free: 13 Online Resources for Every Level of Expertise

• JavaScript Tutorial W3Cschool的 Javascript 教學，有互動線上編寫，測試功能。 

• JavaScript 教程 | 菜鸟教程

• JavaScript - 学习 Web 开发 | MDN

  • JavaScript 第一步 - 学习 Web 开发 | MDN

• Try JavaScript  互動教學 

• JavaScript | Codecademy

• freeCodeCamp 小測驗方式，學習 html, CSS 及 JavaScript 

• The Modern Javascript Tutorial

  • html中文网 从html、css到 js，WEB前端开发在线学习视频教程 

• JavaScript教程 - 廖雪峰的官方网站

• JavaScript 教程 - 网道 阮一峰 觀念清晰，解說仔細

  • ECMAScript 6 入门 阮一峰

  • 分类：JavaScript - 阮一峰的网络日志 給有基礎，實務人員參考

• Eloquent JavaScript  很好的JavaScript 教學書，網上免費，並有互動範例。

• JavaScript 完全手册（2018版）-WEB前端开发 深入解說JavaScript

• ECMAScript Essence JavaScript 一些特性的深入解說。

  • JavaScript 語言核心 舊版JavaScript 一些特性的深入解說

• You-Dont-Know-JS 系列 仔細介紹一些容易混淆的觀念

• JavaScript Garden 解釋 Javascript 一些比較容易受到誤解的特性

  • Online Interactive JavaScript (JS) Cheat Sheet 快速查看JavaScript語法

  • Modern JavaScript Cheatsheet 繁體中文版 ES6 JavaScript語法簡潔介紹

  • Web  |  Google Developers google 網頁進階實務開發教學，需有基礎。

• The State of CSS JavaScript Survey

• JS CheatSheet

DOM

• • DOM

  • DOM Visualizer (bioub.github.io) 

  • DOM|CSS Visualizer (fritscher.ch) 

  • DOM Visualizer (0xedward.github.io) 

JavaScript 線上編輯器

• • Online JavaScript Interpreter 單純的JavaScript編輯器，無html,css

  • HTML/CSS/JS 在线工具 | 菜鸟工具

  • Tryit Editor v3.5

  • ArcGIS API for JavaScript Sandbox

  • JS Bin - Collaborative JavaScript Debugging

    • Liveweave- HTML, CSS and JavaScript demo 有CSS的展示工具

    • CodePen  is a HTML, CSS, and JavaScript editor in the browser 

  • JSFiddle online JavaScript development

    • HTML CSS JavaScript - Tools and Resources html, CSS, JavaScript編輯及有用工具。

  • Glitch 是一個簡單的構建與分享 Javascript web 程式網站

API

• Application programming interface - Wikipedia, the free encyclopedia

• 應用程式介面 - 維基百科，自由的百科全書

• ProgrammableWeb - Mashups, APIs, and the Web as Platform

WebAssembly

• WebAssembly

• WebAssembly - 維基百科，自由的百科全書

  • WebAssembly 官方網站

• WebAssembly | MDN

• WasmFiddle 線上將C語言編譯為WebAssembly

• 從 C 到 WebAssembly

• WebAssembly Explorer 

• WebAssembly正式成為W3C推薦的網頁應用標準 | iThome

  • Google Earth開始支援Firefox、Edge跟Opera | iThome

PyScript

• • Github - pyscript/pyscript

  • PyScript: Python in the Browser (Yang)

  • PyScript — unleash the power of Python in your browser (Lewinson )

  • PyScript-Use Python Code in HTML (Senthil)

Markdown

• Markdown | Wikipedia

• Markdown Guide

• CommonMark

• Dillinger online Markdown editors. 

• GitHub Pages

  • Writing on GitHub - GitHub Docs 

    • 在 GitHub 上写入 - GitHub 文档 

  • GitHub Flavored Markdown Spec

  • Github Pages Tutorial (Laderas et al. 2018)

• R Markdown: The Definitive Guide (bookdown.org) 

• BOOKDOWN Write HTML, PDF, ePub, and Kindle books with R Markdown

  • rstudio4edu A Handbook for Teaching and Learning with R and RStudio

• Online Markdown Editor - Dillinger 

• New Document (jbt.github.io) Online Markdown

• Jupyter Book publication-quality books and documents from computational content

• nbviewer is a web application that lets you enter the URL of a Jupyter Notebook file, renders that notebook as a static HTML web page 

• Quarto is an open-source scientific and technical publishing system built on Pandoc

API

• API是什麼？認識 Web API、HTTP 和 JSON 資料交換格式｜ALPHA Camp Blog

• Application programming interface - Wikipedia

• Web API - Wikipedia

• Introduction to web APIs - Learn web development | MDN

• Representational state transfer - Wikipedia

• ProgrammableWeb - APIs, Mashups and the Web as Platform

  • API Directory | ProgrammableWeb

• API List: A public list of free APIs for programmers

• AnyAPI

• Google APIs Explorer  |  Google Developers

• RapidAPI Free Public & Open Rest APIs | (有程式範例)