MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

翻譯不完整。請協助 翻譯此英文文件

本質上來說,HTML 是一個由元素所組成的語言,我們在文件中給予不同的文字代表著不同的意義(是一個段落? 是一個項目清單? 抑或是一部分的表格?),我們架構出一份具有邏輯區塊的文件(它具有標頭嗎? 三個欄位的內容? 一個導覽目錄?) 並在其中嵌入圖片或影片...等內容。這裡我們將介紹前面兩項,並介紹基本概念以及句法以讓你了解HTML。

預備知識

在開始閱讀本章之前,你不需要具備任何HTML知識,但是你必須對電腦有基礎了解,而且能夠「被動地」上網(只是上網瀏覽、消費)。你需要建立一個基礎工作環境,並且了解如何建立與管理檔案──這些都屬於我們Web 入門的一部分。

提示: 如果您是在某些 電腦/平板/其他 裝置上,使得您無法在裝置上建立自己的檔案。您可以試著在一些線上coding program如:JSBinThimble 來運行程式碼範例。

指南

本章包含以下幾個子題,將帶你了解所有HTML的基礎理論,並且提供充足的機會讓你測試所習得的技能。

開始HTML吧!
包含HTML最基礎的部分──我們定義元素(elements)、屬性(attributes)、以及你可能聽過的所有其他重要術語,還有適合它們的位置。我們還展示了如何組織HTML元素、典型的HTML頁面的結構,以及解釋其他重要的基本特性。我們會玩一些HTML,讓你感興趣!
在head中有什麼? HTML的Metadata
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and metadata (which is data about the HTML, such as who wrote it, and important keywords that describe the document.)
HTML 文字的基石
One of HTML's main jobs is to give text meaning (also know as semantics,) so that the browser knows how to display it correctly. This article looks at how to use HTML to break a block of text up into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
使用超連結
超連結非常的重要 — 它使得網路得以成為我們現今所知的網路. 這篇文章介紹使用超連結所需要的句法,並且探討最佳的實作方法。
進階文字格式
There are many other elements in HTML for formatting text, which we didn't get to in the HTML text fundamentals article. The elements in here are less well-known, but still useful to know about. In here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
文件與網站架構
As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header", "the navigation menu", "the main content column".) This article looks into how to plan a basic website structure, and write the HTML to represent this structure.
HTML除錯
Writing HTML is fine, but what if something is going wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you.

評量

下面的評量將測試您對於以上的HTML基礎是否已經了解。

Marking up a letter
We all learn to write a letter sooner or later; it is also a useful example to test out our text formatting skills! So in this assessment you'll be given a letter to mark up.
Structuring a page of content
This assessment tests your ability to use HTML to structure a simple page of content, containing a header, footer, navigation menu, main content, and sidebar.

另外請見

Web literacy basics 1
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to HTML module. Learners get familiar with reading, writing and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.

文件標籤與貢獻者

 此頁面的貢獻者: jackblackevo, akccakcctw, SecondSpirit
 最近更新: akccakcctw,