舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

「HTML-Structure」修訂間的差異

出自 MozTW Wiki

(add to HTML catagory & misc. changes)
(完善條目)
 
(未顯示由 3 位使用者於中間所作的 4 次修訂)
行 25: 行 25:
 
<html>
 
<html>
 
<head>
 
<head>
     <title> hello world!!<title>
+
     <title> hello world!!</title>
 
</head>
 
</head>
 
<body>
 
<body>
行 43: 行 43:
 
== 定義文件的類別 ==
 
== 定義文件的類別 ==
 
*文件類別的宣告,代表了指明你所使用的 html 規格,最常用的文件類別有以下三種 DTD(Document Type Definition)。<strong>這是一份標準的 html 文件一定要放在開頭的。</strong>
 
*文件類別的宣告,代表了指明你所使用的 html 規格,最常用的文件類別有以下三種 DTD(Document Type Definition)。<strong>這是一份標準的 html 文件一定要放在開頭的。</strong>
*Strict: 對於文件語法的要求較為嚴謹的規格。
+
<dl>
 +
<dt>Strict</dt><dd>對於文件語法的要求較為嚴謹的規格。</dd>
 
<pre>
 
<pre>
 
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 
             "http://www.w3.org/TR/html4/strict.dtd">
 
             "http://www.w3.org/TR/html4/strict.dtd">
 
</pre>
 
</pre>
*Transitional: 這是比較鬆散的規格,對於語法的嚴謹度要求比較寬鬆。
+
<dt>Transitional</dt><dd>這是比較鬆散的規格,對於語法的嚴謹度要求比較寬鬆。<dd>
 
<pre>
 
<pre>
 
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 
             "http://www.w3.org/TR/html4/loose.dtd">
 
             "http://www.w3.org/TR/html4/loose.dtd">
 
</pre>
 
</pre>
*Frameset: 這個規格是專門用在含有框架頁的網頁上。
+
<dt>Frameset</dt><dd>這個規格是專門用在含有框架頁的網頁上。</dd>
 
<pre>
 
<pre>
 
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 
             "http://www.w3.org/TR/html4/frameset.dtd">
 
             "http://www.w3.org/TR/html4/frameset.dtd">
 
</pre>
 
</pre>
 +
</dl>
  
 
== head (標頭) ==
 
== head (標頭) ==
行 81: 行 83:
 
*<title>...</title>: 這個 tag 用來定義網頁的標題,這個標題會顯示在你的瀏覽視窗的標題列哦!
 
*<title>...</title>: 這個 tag 用來定義網頁的標題,這個標題會顯示在你的瀏覽視窗的標題列哦!
 
*<meta>: 這個 tag 定義了一些要傳給瀏覽器的資訊,以我們目前所看到的例子來看
 
*<meta>: 這個 tag 定義了一些要傳給瀏覽器的資訊,以我們目前所看到的例子來看
** context: 代表了這個文件是什麼格式的檔案,此例中設為 text/html。
+
** content: 代表了這個文件是什麼格式的檔案,此例中設為 text/html。
 
** charset: 代表了這個文件的預設編碼,此例中設為 utf8
 
** charset: 代表了這個文件的預設編碼,此例中設為 utf8
 
*<link>: 當你需要從外部引入一些檔案內容時就可以用這個 tag,此例中會引入一個 hello.css 檔。
 
*<link>: 當你需要從外部引入一些檔案內容時就可以用這個 tag,此例中會引入一個 hello.css 檔。
行 95: 行 97:
 
** 有頭就有尾,例如: <body>...</body>
 
** 有頭就有尾,例如: <body>...</body>
 
** 空元素,這種的就不用有結尾的 tag 來表示,例如: <img src="xxx.gif"> 不寫成 <img src="xxx.gif">...</img>
 
** 空元素,這種的就不用有結尾的 tag 來表示,例如: <img src="xxx.gif"> 不寫成 <img src="xxx.gif">...</img>
 +
* [[HTML]]
  
[[Category:HTML]]
+
{{link|HTML|HTML Guide 首頁}}
{{link|推廣專案|HTML}}
 

於 2007年4月29日 (日) 05:13 的最新修訂

一個基本的 HTML 文件結構

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
(定義文件的類別)

<html>
<head>

    (head 標頭撰寫區)

</head>
<body>

    (body 本文撰寫區,這裡就是顯示網頁的主要內容)

</body>
</html>

範例:

(你可以將以下原始碼 copy 起來,另存成一個 example.html 檔案,然後用 Firefox 觀看)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title> hello world!!</title>
</head>
<body>
    hello world!!
</body>
</html>
  • 用< >包起來的文字,我們稱為 tag (標籤)。結尾的部份一定要加上 "/",ex:</html>
  • 你可以注意到,HTML 的標籤一般都是「成對的」,有頭就有尾,而文字內容就擺在中間。
  • 如果出現交錯的寫法,那是錯誤的寫法,這種語法會造成維護困難,也會使瀏覽器誤判,例如:
<tr><td></tr></td>
(有些網頁編輯器會生出這類的語法,請小心!)

定義文件的類別

  • 文件類別的宣告,代表了指明你所使用的 html 規格,最常用的文件類別有以下三種 DTD(Document Type Definition)。這是一份標準的 html 文件一定要放在開頭的。
Strict
對於文件語法的要求較為嚴謹的規格。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
Transitional
這是比較鬆散的規格,對於語法的嚴謹度要求比較寬鬆。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
Frameset
這個規格是專門用在含有框架頁的網頁上。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "http://www.w3.org/TR/html4/frameset.dtd">

head (標頭)

先來看一個例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>Say Hello!!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <link rel="stylesheet" type="text/css" href="hello.css">
</head>

<body>
Hello world!!
</body>
</html>

這裡我們可以看到 <head>...</head> 裡頭包含了幾個 tag:<title>, <meta>, <link>,這些 tag 都描述了這個網頁的各類資訊。也就是說 <head>...</head> 這個區域是專門用來定義一些有關網頁的資訊和屬性。

我們來簡單的介紹一下這裡所提到的 tag:

  • <title>...</title>: 這個 tag 用來定義網頁的標題,這個標題會顯示在你的瀏覽視窗的標題列哦!
  • <meta>: 這個 tag 定義了一些要傳給瀏覽器的資訊,以我們目前所看到的例子來看
    • content: 代表了這個文件是什麼格式的檔案,此例中設為 text/html。
    • charset: 代表了這個文件的預設編碼,此例中設為 utf8
  • <link>: 當你需要從外部引入一些檔案內容時就可以用這個 tag,此例中會引入一個 hello.css 檔。

對一個標準網頁而言,我們建議你至少要有 title、meta,將文件格式和編碼定義清楚,這樣才不能會造某些瀏覽器無法正常讀取。

body (主體)

這個區域就是用來放置主要內容的地方,而瀏覽器所呈現出來的頁面內容就是 <body>...</body> 之間的內容,如果想要讓網頁更漂亮可以再加上 css 的支援。

HTML 的語法

  • html 的 tag 有兩種類型:
    • 有頭就有尾,例如: <body>...</body>
    • 空元素,這種的就不用有結尾的 tag 來表示,例如: <img src="xxx.gif"> 不寫成 <img src="xxx.gif">...</img>
  • HTML
個人工具