--- title: 教學 slug: Web/Tutorials tags: - Beginner - CSS - Guide - HTML - JavaScript - Tutorial translation_of: Web/Tutorials ---

這個頁面提供了許多關於網路相關技術的說明及學習文件。無論你是正在打基礎的新手或有經驗的老手,相信在這個頁面你都能找到許多有用的資源。這些開發資源是由具有前瞻思維的公司及擁抱開放標準的開發者所提供,允許任何人翻譯它並以 Creative Commons 的條款釋出。

Web 完全新手

Web 新手上路
本系列文章簡介 web 開發 (web development) 是怎麼一回事。你將會設置所需要的工具、製作一個簡易的網頁,然後發表你的程式碼。

HTML 教學

初級

HTML入門
此單元,為了孰悉重要的概念和語法,思考將 HTML 轉為文字, 如何建立超連鏈接, 以及如何使用 HTML 架構建立網站做好準備。
MDN HTML 元素引用
HTML 元素綜合參考。以及在不同瀏覽器的支援程度。
使用 HTML 建立一個簡易網站 (The Blog Starter)
適用於 HTML 初學者的指南,其中包含常見的標籤( tag ), 其中包括利用編碼範例步驟,一步步指導建立一個基本網頁。
初學者 HTML 指南 (Website Setup)
此指南將指導你如何使用 HTML 和 HTML5 標籤 (tags) 建立基礎網站。 簡易的步驟教學,以及包含可用於提升編碼技巧的圖像和資源。
HTML 挑戰  (Wikiversity)
使用這些挑戰來磨練你的 HTML 技能 (例如 :  "Should I use an <h2> element or a <strong> element?"), 注意這些含有意義的標籤。

中級

多媒體及崁入
此單元探討包含如何使用 HTML 崁入多媒體於網頁之中,包括使用不同方式讓崁入圖片,影片,聲音檔,甚至是其他整個網頁。
HTML 表格
將資料以可理解的方式使用表格呈現在網頁上 {{glossary("Accessibility", "accessible")}} 方法可能是一個挑戰。本文涵蓋基礎的表格標記,以及更複雜的功能,例如實現說明標題及概述。

高級

HTML 表單
表單是網際網路一個非常重要的部分 - 這些涵蓋了網站互動所需的大部分功能,例如 : 註冊、登入、發送回饋,購買產品等。本文將幫助你開始創建客戶回饋表單。
 給程式創作者快速載入 HTML 網頁的提示 
優化網頁,為使用者提供響應式網站,減少 web 服務器和 Internet 連線的負擔。

CSS 教學

初級

CSS 基本概念
CSS(層疊樣式表)是用於設置網頁樣式的編碼。 CSS Basics將帶領你了解入門所需的內容。 我們將回答以下問題,例如:如何將文字設為黑色或紅色? 如何讓我的內容顯示在螢幕上的這些地方? 如何用背景圖片和顏色布置我的網頁?
 介紹 CSS
本單元深入介紹CSS應用,包括選擇器和屬性,編寫CSS規則,將CSS應用於HTML,如何指定CSS中的長度,顏色和其他單位,並列和繼承,框框模組基本知識和CSS除錯。
樣式框
接下來,我們來看看樣式框,這是建立網頁的基本步驟之一。 在本單元中,我們回顧一下框框模組,通過設置邊框和邊距,自定義背景顏色,圖像和其它以及酷炫的功能(如陰影和框上的濾鏡)來查看樣式框佈局。
樣式文本
在此,我們看看文本樣式基礎,包括設置字體,粗體和斜體,線條和字母間距以及陰影和其他文本功能。 我們通過查看將自定義字體應用於頁面以及樣式列表和鏈接來完善模組。
常見的CSS問題
初學者的常見問題及解答。

中級

CSS 布局
此時,我們已看過CSS基礎知識,如何設置文本樣式,以及如何設置和操作內容所在的框框。 現在是時候看看如何將框框放在彼此之間相對位置上的正確位置。 我們已經涵蓋了必要的先決條件,因此現在可以深入了解CSS佈局,查看不同的顯示設置,包含浮動和定位的傳統佈局方法,以及Flexbox等新的佈局工具。
CSS 參考
完整參考CSS,詳細介紹Firefox和其他瀏覽器的支援度。
流變格線框架 (A List Apart)
在瀏流器視窗大小調整的同時,能夠流暢地調整內容大小的設計佈局,同時使用字體排版格線。
CSS 挑戰 (Wikiversity)
提高你的CSS技能,並了解需多加練習的地方。

高級

Using CSS transforms
Apply rotation, skewing, scaling, and translation using CSS.
CSS transitions
CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.
Quick Guide to Implement Web Fonts with @font-face (HTML5 Rocks)
The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.
Starting to Write CSS (David Walsh)
An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.
Canvas tutorial
Learn how to draw graphics using scripting using the canvas element.
HTML5 Doctor
Articles about using HTML5 right now.

JavaScript 教學

初級

JavaScript first steps
In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.
JavaScript building blocks
In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.
Getting started with JavaScript
What is JavaScript and how can it help you?
Codecademy (Codecademy)
Codecademy is a easy way to learn how to code JavaScript. It's interactive and you can do it with your friends.

中級

Introducing JavaScript objects
In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.
Client-side web APIs
When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.
A re-Introduction to JavaScript
A recap of the JavaScript programming language aimed at intermediate-level developers.
Eloquent JavaScript
A comprehensive guide to intermediate and advanced JavaScript methodologies.
Speaking JavaScript (Dr. Axel Rauschmayer)
For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.
Essential JavaScript Design Patterns (Addy Osmani)
An introduction to essential JavaScript design patterns.

高級

JavaScript Guide
A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.
You Don't Know JS (Kyle Simpson)
A series of books diving deep into the core mechanisms of the JavaScript language.
JavaScript Garden
Documentation of the most quirky parts of JavaScript.
Exploring ES6 (Dr. Axel Rauschmayer)
Reliable and in-depth information on ECMAScript 2015.
Javascipt Patterns
A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.
How browsers work
A detailed research article describing different modern browsers, their engines, page rendering etc.
JavaScript Videos (GitHub)
A collection of JavaScript videos to watch.

Extension Development

WebExtensions
WebExtensions is a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.