1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
title: HTML：超文本標記語言
slug: Web/HTML
tags:
- HTML
- HTML元素
- 多媒體
- 影像
- 音樂
translation_of: Web/HTML
---
<div>{{HTMLSidebar}}</div>
<p class="summary"><span class="seoSummary"><strong>HTML</strong>（HyperText Markup Language，超文本標記語言）是打造網頁的基石。它表述並定義網頁的<em>內容</em>。伴隨 HTML 而來的技術還有描述網頁外觀（<a href="/zh-TW/docs/Web/CSS">CSS</a>）及功能性的程式語言（<a href="/zh-TW/docs/Web/JavaScript">JavaScript</a>）。</span></p>
<p>「超文本」（HyperText）是指從某個網頁連到其他網頁的連結，不管它連結到站內抑或站外。連結連結 Web 的核心概念。藉由撰寫與上載網頁到網際網路中，你就積極參與了全球資訊網（World Wide Web)。</p>
<p>HTML 使用「標記」（markup）來詮釋文字、圖像、或是其他能在瀏覽器裡面顯示的內容。HTML 標記還包括一些特殊「元素」（element），例如：{{HTMLElement("head")}}、{{HTMLElement("title")}}、{{HTMLElement("body")}}、{{HTMLElement("header")}}、{{HTMLElement("footer")}}、{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("p")}}、{{HTMLElement("div")}}、{{HTMLElement("span")}}、{{HTMLElement("img")}}……等等。</p>
<p>HTML 文件中的元素和其他內容文字不同的地方，在於元素名稱本身用「<」與「>」包圍，稱作「標籤」。HTML 標籤不分英文大小寫。也就是說，它們可以寫成英文全大寫、全小寫、或是混在一起。像是 <strong><title> </strong> 能寫成 <Title>,<TiTlE>……等等。</p>
<p>以下這些文章將幫助你理解 HTML。</p>
<section class="cleared" id="sect1">
<ul class="card-grid">
<li><span>HTML 介紹</span>
<p>如果是網站開發的新手，請先閱讀我們的 <a href="/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基礎</a>文章以理解 HTML 是什麼還有它怎麼使用。</p>
</li>
<li><span>HTML 教學</span>
<p>有關如何使用 HTML、教學、完整範例，請參考我們的 <a href="/zh-TW/docs/Learn/HTML">HTML 學習專區</a>。</p>
</li>
<li><span>HTML 參考資料</span>
<p>在我們廣泛的 <a href="/zh-TW/docs/Web/HTML/Reference">HTML 參考資料</a>章節，你可以找到構成 HTML 每個元素和屬性的細節。.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Tools" id="初學者教學">初學者教學</h2>
<p>我們的<a href="/zh-TW/docs/Learn/HTML">HTML 學習專區</a>提供數個從頭開始的 HTML 教學單元：你不需要任何先備知識。</p>
<dl>
<dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML介紹</a></dt>
<dd>本單元會為你打下基礎，帶你熟悉重要概念和語法，像是如何把 HTML 套用到文本、如何建立超連結、還有如何使用 HTML 構建網頁。</dd>
<dt><a href="/zh-TW/docs/Learn/HTML/Multimedia_and_embedding">多媒體與嵌入</a></dt>
<dd>本模塊探究如何使用HTML在你的網頁裡置入多媒體，包含多種不同載入圖片的方式，如何嵌入影音，甚至是另外一整個網頁。</dd>
<dt><a href="/zh-TW/docs/Learn/HTML/Tables">HTML 表格</a></dt>
<dd>要以簡單易懂的方式將表格式的資訊呈現在網頁上會是一件挑戰。本模組涵蓋了基本的表格使用與更複雜的功能，例如標題和總結。</dd>
<dt><a href="/zh-TW/docs/Learn/HTML/Forms">HTML 表單</a></dt>
<dd>表單是網頁相當重要的部分，能夠提供與網頁互動時所需的各式的功能性。例如：註冊和登入、發送回饋意見、購買產品以及更多實用的功能。這個單元將帶領你建立網頁端的表單功能。</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Howto">用 HTML 解決常見問題</a></dt>
<dd>提供部分內容註釋連結。 當你建立一個網頁時，如何解決 HTML 中常見問題，例如 : 處理標題、增加圖片或影片、強調內文、建立基本表單等。.</dd>
</dl>
<h2 id="進階部份">進階部份</h2>
<dl>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/CORS_enabled_image">CORS 圖像</a></dt>
<dd class="landingPageList"><code>當結合了一個適合的</code><a class="glossaryLink" href="/zh-TW/docs/Glossary/CORS">CORS</a>，<code><a href="/zh-TW/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code> 屬性允許 {{HTMLElement("img")}} 元素定義的圖像被從一個地方載入，並被使用於 {{HTMLElement("canvas")}}，即便載入的地方是原處也一樣。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/CORS_settings_attributes">設定 CORS 屬性</a></dt>
<dd class="landingPageList">有些 HTML 元素可以支援 <a href="/zh-TW/docs/HTTP/Access_control_CORS">CORS</a>,像 {{HTMLElement("img")}} 或者 {{HTMLElement("video")}},有著 <code>crossorigin</code> (<code>crossOrigin</code> property)的屬性, 讓你能直接使用CORS的元素。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Focus_management_in_HTML">管理 HTML 中的焦點</a></dt>
<dd class="landingPageList">The <code><a href="/zh-TW/docs/Web/API/Document/activeElement">activeElement</a></code> DOM attribute and the <code><a href="/zh-TW/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM method help you track and control a user's interactions with elements on a web page.</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Using_the_application_cache">使用 application cache</a></dt>
<dd class="landingPageList">Application caching lets web-based applications run offline. You can use the <strong>Application Cache</strong> (<em>AppCache</em>) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.</dd>
<dt class="landingPageList"><a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Preloading_content">使用 rel="preload" 來預載內容</a></dt>
<dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd>
</dl>
</div>
<div class="section">
<h2 class="Documentation" id="參考資料">參考資料</h2>
<dl>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Reference">HTML 參考資料</a></dt>
<dd class="landingPageList">HTML 包含<strong>元素</strong>，每個元素都可以被幾個<strong>屬性</strong>修飾。HTML 文件透過<a href="/zh-TW/docs/Web/HTML/Link_types">連結</a>把彼此連結在一起。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element">HTML 元素參考</a></dt>
<dd class="landingPageList">瀏覽 <a class="glossaryLink" href="/zh-TW/docs/Glossary/HTML">HTML</a> 所有<a class="glossaryLink" href="/zh-TW/docs/Glossary/Element">元素</a>的清單。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Attributes">HTML 屬性參考</a></dt>
<dd class="landingPageList">HTML 元素都有<strong>屬性</strong>。這些額外屬性能透過數種方法設定元素、調整行為。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a></dt>
<dd class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element">HTML 元素</a>能指定全域屬性，<em>就算它不是標準元素</em>。也就是說，即使是與 HTML5 標準不相容的非標準元素，依舊允許全域屬性。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Inline_elements">行內元素</a>與<a href="/zh-TW/docs/Web/HTML/Block-level_elements">塊級元素</a></dt>
<dd class="landingPageList">HTML 元素通常為<strong>行內</strong>或<strong>區塊</strong>。行內元素佔據由標籤所定義的其餘空白位置，區塊元素則占據母元素的所有空白位置。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Link_types">超連結類型</a></dt>
<dd class="landingPageList">在 HTML 中有多種超連結類型能夠使用，並解定義兩個頁面間的關係，超連結元素包含了<a href="/zh-TW/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/zh-TW/docs/Web/HTML/Element/area"><code><area></code></a>, <code><a href="/zh-TW/docs/Web/HTML/Element/link"><link></a></code></dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Supported_media_formats">HTML audio 及 video 元素對媒體的支援程度</a></dt>
<dd class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element/audio"><code><audio></code></a> 及 <a href="/zh-TW/docs/Web/HTML/Element/video"><code><video></code></a> 元素允許播放聲音和影像檔。這些元素提供了瀏覽器替代 Adobe Flash 和其它類似外掛功能的方案。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Kinds_of_HTML_content"> HTML 內容種類</a></dt>
<dd class="landingPageList">HTML 由多個不同類別的內容組合, 每種內容在特殊情況下在前後關係中有效，而在其它前後關系中無效。相似地，每一組內容，也指定了可以被包含在一起的類別，以及可以或不可以在其中使用的元素。此篇提供了這些類別的指南。</dd>
<dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">怪異模式與標準模式</a></dt>
<dd class="landingPageList">有關怪異模式與標準模式的歷史。</dd>
</dl>
<h2 class="landingPageList" id="相關焦點">相關焦點</h2>
<dl>
<dt><a href="/zh-TW/docs/Web/HTML/Applying_color">使用 CSS 把色彩套用到 HTML 元素</a></dt>
<dd>本文章概括了把 CSS 加到 HTML 內容的方法，列出 HTML 文件的哪些部份可以套用色彩、而 CSS 有哪些屬性搬到這種事。裡面有示範、色彩選擇器的連結......等等。</dd>
</dl>
</div>
</div>
<span class="alllinks"><a href="/zh-TW/docs/tag/HTML">View All...</a></span></section>
|
