「HTML-Structure」修訂間的差異
出自 MozTW Wiki
Danielwang（對話 | 貢獻） 小 （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> | ||
| − | + | <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> | ||
| − | + | <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> | ||
| − | + | <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 定義了一些要傳給瀏覽器的資訊，以我們目前所看到的例子來看 | ||
| − | ** | + | ** 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]] | ||
| − | + | {{link|HTML|HTML Guide 首頁}} | |
| − | {{link| | ||
於 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
- 對於文件語法的要求較為嚴謹的規格。
- 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//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!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
‧返回上一頁: HTML Guide 首頁
