HTML:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
(一)HTML5 宣告
(三)各標籤適用版本
 
(未顯示同用戶所作出之11次版本)
第 1 行: 第 1 行:
 
[[分類:HTML]]
 
[[分類:HTML]]
 
*[[HTML/英文單字|用到的英文單字]]
 
*[[HTML/英文單字|用到的英文單字]]
 +
*[[HTML/簡介與基本規則|簡介與基本規則]]
 
*[http://jendo.org/files/doc/Demo/ 撰寫範例]
 
*[http://jendo.org/files/doc/Demo/ 撰寫範例]
===文件類型宣告===
+
===文件類型宣告與HTML版本===
 
<!DOCTYPE>聲明位於位於 HTML 原始碼中的第一行,優先於 <html> 標籤
 
<!DOCTYPE>聲明位於位於 HTML 原始碼中的第一行,優先於 <html> 標籤
 
====(一)HTML5 宣告====
 
====(一)HTML5 宣告====
第 13 行: 第 14 行:
 
#可以使用一些不被W3C推薦的標籤(如:font、b等),可以使用框架:<pre><!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'></pre>或<pre><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd'></pre>
 
#可以使用一些不被W3C推薦的標籤(如:font、b等),可以使用框架:<pre><!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'></pre>或<pre><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd'></pre>
  
===HTML語法===
+
HTML4.01基於SGML,所以需要對DTD進行引用,才能告知瀏覽器檔案所使用的檔案類型。
HTML 的標籤內容分為三個層級:標籤、屬性、樣式指示
+
====(一)標籤(標記)====
+
*標籤必須成對:一般由開始標籤和結束標籤構成一對,如:<×>....</×>其中的×代表標籤命令。以上角括號及斜線均為英文半形。
+
*開始與結束標籤合體:meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的,寫成<meta />、<img />、<br/>、<hr/>
+
====(二)屬性====
+
*開始標記命令可以用「屬性」加以修飾,例如 img 標記可以有:
+
*#src 屬性,指示圖的位置
+
*#width 屬性,指示圖的寬度
+
*#height 屬性,指示圖的高度
+
*屬性名後面是屬性值,屬性名與屬性值之間用「=」相連。同標記內兩組屬性是用空白相隔開。
+
*屬性值通常用一對單引號「'」或雙引號「"」包起來,如果屬性值當中不含空白,則引號通常可以省略;如果屬性值當中含空白,則引號絕對不可以省略。
+
*class 屬性:引用已經定義的樣式。
+
*style 樣式屬性:指示後面的內容應該長什麼樣子
+
====(三)樣式指示====
+
*style 的值包含的常常超過一項以上的樣式指示
+
*兩組樣式指示以「;」間開
+
*名與值以「:」相連
+
  
===HTML重要的標記命令===
+
宣告中,聲明了檔案的根元素是 html ,它在「公共標識符被定義為“-//W3C//DTD XHTML 1.0 Strict//EN” 的DTD」中進行了定義。瀏覽器將明白如何尋找匹配此公共標識符的DTD。如果找不到,瀏覽器將使用公共標識符後面的 URL 來尋找 DTD 的位置。
<pre>
+
*-:表示組織名稱未註冊。 Internet 工程任務組(IETF)和萬維網協會(W3C)並非註冊的 ISO 組織。+為預設值,表示組織名稱已註冊。
標籤
+
*DTD:指定公開文本類型,即所引用的對象類型。預設為DTD。
====
+
*HTML:指定公開文本描述,即對所引用的公開文本的唯一描述性名稱。後面可附帶版本號。預設為HTML。
html     超文件(HyperText Markup Language)
+
*URL:指定所引用對象的位置。
head    文件頭
+
*Strict:排除所有 W3C 專家希望逐步淘汰的代表性屬性和元素。
title    標題
+
body    本文
+
  
a        超連結(anchor)
+
====()各標籤適用版本====
img      圖(image)
+
<table class=nicetable>
p        段(paragraph)
+
<tr>
br      跳行(break space)
+
<th rowspan='2' style='width:20%;'>標籤</th>
hr      水平線(Horizontal Rule)
+
<th rowspan='2' style='width:15%;'>HTML5</th>
 +
<th colspan='3' style='width:45%;'>HTML 4.01 / XHTML 1.0</th>
 +
<th rowspan='2' style='width:20%;'>XHTML 1.1</th>
 +
</tr>
  
table    表
+
<tr>
tr       表內之列(table row)
+
<th width='15%'>Transitional</th>
td      表內之格(table diamond)
+
<th width='15%'>Strict</th>
th       表內之格(table head diamond)
+
<th width='15%'>Frameset</th>
 +
</tr>
  
ol      有次序的列表(order list)
+
<tr>
ul      沒有次序的列表(unorder list)
+
<td>&lt;a&gt;</td>
li      列表項目(list item)
+
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
  
style    宣告樣式(修飾一個超文件)
+
<tr>
span    文字小片段
+
<td>&lt;abbr&gt;</td>
div      區塊(division)
+
<td>Yes</td>
pre      保留原有斷行及排列之式(preserve)
+
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
  
form    表單
+
<tr>
 +
<td>&lt;acronym&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
  
屬性(用=連等號兩邊)
+
<tr>
====
+
<td>&lt;address&gt;</td>
src=      圖照來源(source)
+
<td>Yes</td>
href=    跳往那一個連結(hyper ref)(hyper reference)
+
<td>Yes</td>
target=  跳往瀏覽器的那裡,預設值為本頁的本窗框,值_blank為新的空白頁。
+
<td>Yes</td>
style=    樣式屬性(修飾一個標籤)
+
<td>Yes</td>
width=    寬度,可以用點(px,pt)或長度(cm)或百分比表示
+
<td>Yes</td>
height=  高度,可以用點(px,pt)或長度(cm)或百分比表示
+
</tr>
border=  邊框。
+
  
樣式(用:連冒號兩邊)
+
<tr>
====
+
<td>&lt;applet&gt;</td>
font-family: 字體
+
<td><span style='color:red;'>No</span></td>
font-size:   字的大小
+
<td>Yes</td>
font-weight: 字有多粗
+
<td><span style='color:red;'>No</span></td>
text-align: 字的對齊方式
+
<td>Yes</td>
color:       字的顏色
+
<td><span style='color:red;'>No</span></td>
width:       寬度
+
</tr>
height:     高度
+
 
border:     邊框
+
<tr>
border-collapse:collapse 合併框線
+
<td>&lt;area&gt;</td>
</pre>
+
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;article&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;aside&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;audio&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;b&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;base&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;basefont&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;bdi&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;bdo&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;big&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;blockquote&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;body&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;br&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;button&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;canvas&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;caption&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;center&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;cite&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;code&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;col&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;colgroup&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;command&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;datalist&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;dd&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;del&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;details&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;dfn&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;dir&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;div&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;dl&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;dt&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;em&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;embed&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;fieldset&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;figcaption&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;figure&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;font&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;footer&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;form&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;frame&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;frameset&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;head&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;header&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;h1&gt; to &lt;h6&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;hr&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;html&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;i&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;iframe&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;img&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;input&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;ins&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;keygen&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;kbd&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;label&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;legend&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;li&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;link&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;map&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;mark&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;menu&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;meta&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;meter&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;nav&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;noframes&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;noscript&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;object&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;ol&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;optgroup&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;option&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;output&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;p&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;param&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;pre&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;progress&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;q&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;rp&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;rt&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;ruby&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;s&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;samp&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;script&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;section&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;select&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;small&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;source&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;span&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;strike&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;strong&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;style&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;sub&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;summary&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;sup&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;table&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;tbody&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;td&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;textarea&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;tfoot&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;th&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;thead&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;time&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;title&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;tr&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;track&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;tt&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;u&gt;</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;ul&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;var&gt;</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
<td>Yes</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;[https://ithelp.ithome.com.tw/articles/10205387 video]&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>&lt;wbr&gt;</td>
 +
<td>Yes</td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
<td><span style='color:red;'>No</span></td>
 +
</tr>
 +
</table>
 +
 
 +
===HTML重要的標記命令===
 +
{{:HTML/重要的標記、屬性、樣式}}
  
 
===路徑===
 
===路徑===
 
{{:HTML/路徑}}
 
{{:HTML/路徑}}
 
===其他===
 
*http 超文件傳輸協定(HyperText Transfer Protocol)
 
*柏納李:HTTP 的發明人,在 1990年12月25日 實現第一次的 HTTP 傳輸,1991年8月6日第一個網頁伺服器上線。1994年柏納-李宣布全球資訊網完全免費的,不申請專利權,不徵收專利費,因此,人人都能輕易用上全球資訊網。
 
*從 wiki 頁複製 HTML 段落
 

2020年10月14日 (三) 10:39的最新修訂版本

文件類型宣告與HTML版本

<!DOCTYPE>聲明位於位於 HTML 原始碼中的第一行,優先於 <html> 標籤

(一)HTML5 宣告

<!DOCTYPE html>

HTML5 不基於 SGML ,因此不需要對DTD進行引用,但是需要 doctype 來規範瀏覽器的行為。

(二)HTML4 宣告

  1. HTML4.01和XHTML1.0寬鬆過渡等同XHTML1.1嚴格,可以使用一些不被W3C推薦的標籤(如:font、b等),不可以使用框架:
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
  2. HTML4.01和XHTML1.0嚴格,不可以使用一些不被W3C推薦的標籤(如:font、b等),不可以使用框架:
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  3. 可以使用一些不被W3C推薦的標籤(如:font、b等),可以使用框架:
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd'>

HTML4.01基於SGML,所以需要對DTD進行引用,才能告知瀏覽器檔案所使用的檔案類型。

宣告中,聲明了檔案的根元素是 html ,它在「公共標識符被定義為“-//W3C//DTD XHTML 1.0 Strict//EN” 的DTD」中進行了定義。瀏覽器將明白如何尋找匹配此公共標識符的DTD。如果找不到,瀏覽器將使用公共標識符後面的 URL 來尋找 DTD 的位置。

  • -:表示組織名稱未註冊。 Internet 工程任務組(IETF)和萬維網協會(W3C)並非註冊的 ISO 組織。+為預設值,表示組織名稱已註冊。
  • DTD:指定公開文本類型,即所引用的對象類型。預設為DTD。
  • HTML:指定公開文本描述,即對所引用的公開文本的唯一描述性名稱。後面可附帶版本號。預設為HTML。
  • URL:指定所引用對象的位置。
  • Strict:排除所有 W3C 專家希望逐步淘汰的代表性屬性和元素。

(三)各標籤適用版本

標籤 HTML5 HTML 4.01 / XHTML 1.0 XHTML 1.1
Transitional Strict Frameset
<a> Yes Yes Yes Yes Yes
<abbr> Yes Yes Yes Yes Yes
<acronym> No Yes Yes Yes Yes
<address> Yes Yes Yes Yes Yes
<applet> No Yes No Yes No
<area> Yes Yes Yes Yes No
<article> Yes No No No No
<aside> Yes No No No No
<audio> Yes No No No No
<b> Yes Yes Yes Yes Yes
<base> Yes Yes Yes Yes Yes
<basefont> No Yes No Yes No
<bdi> Yes No No No No
<bdo> Yes Yes Yes Yes No
<big> No Yes Yes Yes Yes
<blockquote> Yes Yes Yes Yes Yes
<body> Yes Yes Yes Yes Yes
<br> Yes Yes Yes Yes Yes
<button> Yes Yes Yes Yes Yes
<canvas> Yes No No No No
<caption> Yes Yes Yes Yes Yes
<center> No Yes No Yes No
<cite> Yes Yes Yes Yes Yes
<code> Yes Yes Yes Yes Yes
<col> Yes Yes Yes Yes No
<colgroup> Yes Yes Yes Yes No
<command> Yes No No No No
<datalist> Yes No No No No
<dd> Yes Yes Yes Yes Yes
<del> Yes Yes Yes Yes No
<details> Yes No No No No
<dfn> Yes Yes Yes Yes Yes
<dir> No Yes No Yes No
<div> Yes Yes Yes Yes Yes
<dl> Yes Yes Yes Yes Yes
<dt> Yes Yes Yes Yes Yes
<em> Yes Yes Yes Yes Yes
<embed> Yes No No No No
<fieldset> Yes Yes Yes Yes Yes
<figcaption> Yes No No No No
<figure> Yes No No No No
<font> No Yes No Yes No
<footer> Yes No No No No
<form> Yes Yes Yes Yes Yes
<frame> No No No Yes No
<frameset> No No No Yes No
<head> Yes Yes Yes Yes Yes
<header> Yes No No No No
<h1> to <h6> Yes Yes Yes Yes Yes
<hr> Yes Yes Yes Yes Yes
<html> Yes Yes Yes Yes Yes
<i> Yes Yes Yes Yes Yes
<iframe> Yes Yes No Yes No
<img> Yes Yes Yes Yes Yes
<input> Yes Yes Yes Yes Yes
<ins> Yes Yes Yes Yes No
<keygen> Yes No No No No
<kbd> Yes Yes Yes Yes Yes
<label> Yes Yes Yes Yes Yes
<legend> Yes Yes Yes Yes Yes
<li> Yes Yes Yes Yes Yes
<link> Yes Yes Yes Yes Yes
<map> Yes Yes Yes Yes No
<mark> Yes No No No No
<menu> Yes Yes No Yes No
<meta> Yes Yes Yes Yes Yes
<meter> Yes No No No No
<nav> Yes No No No No
<noframes> No Yes No Yes No
<noscript> Yes Yes Yes Yes Yes
<object> Yes Yes Yes Yes Yes
<ol> Yes Yes Yes Yes Yes
<optgroup> Yes Yes Yes Yes Yes
<option> Yes Yes Yes Yes Yes
<output> Yes No No No No
<p> Yes Yes Yes Yes Yes
<param> Yes Yes Yes Yes Yes
<pre> Yes Yes Yes Yes Yes
<progress> Yes No No No No
<q> Yes Yes Yes Yes Yes
<rp> Yes No No No No
<rt> Yes No No No No
<ruby> Yes No No No No
<s> Yes Yes No Yes No
<samp> Yes Yes Yes Yes Yes
<script> Yes Yes Yes Yes Yes
<section> Yes No No No No
<select> Yes Yes Yes Yes Yes
<small> Yes Yes Yes Yes Yes
<source> Yes No No No No
<span> Yes Yes Yes Yes Yes
<strike> No Yes No Yes No
<strong> Yes Yes Yes Yes Yes
<style> Yes Yes Yes Yes Yes
<sub> Yes Yes Yes Yes Yes
<summary> Yes No No No No
<sup> Yes Yes Yes Yes Yes
<table> Yes Yes Yes Yes Yes
<tbody> Yes Yes Yes Yes No
<td> Yes Yes Yes Yes Yes
<textarea> Yes Yes Yes Yes Yes
<tfoot> Yes Yes Yes Yes No
<th> Yes Yes Yes Yes Yes
<thead> Yes Yes Yes Yes No
<time> Yes No No No No
<title> Yes Yes Yes Yes Yes
<tr> Yes Yes Yes Yes Yes
<track> Yes No No No No
<tt> No Yes Yes Yes Yes
<u> No Yes No Yes No
<ul> Yes Yes Yes Yes Yes
<var> Yes Yes Yes Yes Yes
<video> Yes No No No No
<wbr> Yes No No No No

HTML重要的標記命令

標籤
====
html     超文件(HyperText Markup Language)
head     文件頭
meta     對自身的描述
title    標題
body     本文

h1~h6    標題一級到六級(head)
a        超連結(anchor)
img      圖(image)
p        段(paragraph)
br       跳行(break space)
hr       水平線(Horizontal Rule)

table    表
tr       表內之列(table row)
td       放數據的表內之格(table data)
th       放標題或欄名的表內之格(table header)

ol       有次序的列表(order list)
ul       沒有次序的列表(unorder list)
li       列表項目(list item)

b        字加粗(bold)
u        字畫底線(under)
i        斜體字(italic)

style    宣告樣式(修飾一個超文件)
link     載入另一個檔,如 CSS 檔
span     文字小片段
div      區塊(division)
pre      保留原有斷行及排列之式(preserve)

form     表單

屬性(用=連等號兩邊)
====
http-equiv= http項目
src=      圖照來源(source)
href=     跳往那一個連結(hyper ref)(hyper reference)
target=   跳往瀏覽器的那裡,預設值為本頁的本窗框,值_blank為新的空白頁。
style=    樣式屬性(修飾一個標籤)
width=    寬度,可以用點(px,pt)或長度(cm)或百分比表示
height=   高度,可以用點(px,pt)或長度(cm)或百分比表示
border=   邊框。
align=    靠左或調中或靠右
class=    引用 CSS 類別
id=       賦予標籤惟一的名字
xmlns=    指出 xml 的名字空間
type=     指示檔案的類別
content=  指示 http-equiv 屬性代表項目的值

樣式(用:連冒號兩邊)
====
font-family: 字體
font-size:   字的大小
font-weight: 字有多粗
text-align:  字的對齊方式
color:       字的顏色
width:       寬度
height:      高度
border:      邊框
border-collapse:collapse 合併框線

路徑

用於 img 的 src 屬性,以及 a 的 href 屬性。

  • 資料夾分層用「/」半型右上左下斜線隔開。
  • 相對路徑
    1. 不寫路徑,只寫檔名,代表和這個 html 同資料夾(同路徑)
    2. 「.」代表目前的資料夾(路徑),也就是這個 html 所在的資料夾(路徑),寫作「./」
    3. 「..」代表上一層資料夾(路徑),寫作「../」
    4. 上一層資料夾的再上一層資料用「../../」表示,依此類推。
  • 絕對路徑
    1. 同網站路徑:以「/」做為路徑的開頭,代表網站的「根目錄」
    2. 其他網站的檔名:如「http://xxxx/yyyy/zzzz/abc.jpg」
      • http:是協定
      • //是網際網路
      • xxxx是機器名稱,如 jendo.org
      • /yyyy/zzzz/abc.jpg的第一個「/」是機器上面的文件根資料夾,後面的路徑是從文件根資料夾算起。

使用時機

相對路徑絕對路徑
本機
其他機器不可

圖例

文件根資料夾:j

c.jpg

jj資料夾有:
b.jpg
qqq.html

jjj資料夾有:
a.jpg
ppp.html

kk資料夾有:
d.jpg


ii資料夾有:
e.jpg

iii資料夾有:
my lover.jpg
rrr.html

練習題(相對路徑與絕對路徑)

  1. 標籤在ppp.html需要a.jpg
  2. 標籤在rrr.html需要a.jpg
  3. 標籤在ppp.html需要e.jpg
  4. 標籤在qqq.html需要c.jpg
  5. 標籤在rrr.html需要b.jpg
  6. 標籤在rrr.html需要c.jpg
  7. 標籤在rrr.html需要b.jpg
  8. 標籤在qqq.html需要d.jpg
  9. 標籤在ppp.html需要my lover.jpg
  10. 標籤在qqq.html需要my lover.jpg