| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.

View
 

XHTML

Page history last edited by Reder 13 years, 8 months ago


參考:

 

XHTML基本規則

  • 在網頁的開頭加入適當的 DOCTYPE 與名稱領域。
  • 使用 META Content 元素,宣告網頁所使用的字元編碼。
  • 所有元素與屬性的名稱皆必須為小寫字母。
  • 所有的屬性值都必須加上引號。
  • 所有的屬性皆必須有屬性值。Note! 沒有屬性值的屬性,則加上與屬性名稱完全相同的屬性值。
  • 所有的標記都必須有結束部分。
  • 對於不含內容的標記,必須在結尾處加上空白字元與"/"。如 <br /> <img src="..." />,需在標記結尾處加上/。而在/前則必須插入空白字元以免舊瀏覽器誤讀。
  • 註解內不可以使用連續的破折號。
  • < 必須使用 < 來編碼;& 必須使用 & 來編碼。建議 > 使用 > 來編碼,以取得對稱性。

 

DOCTYPE

  • 告知瀏覽器如何解譯文件。
  • 用來宣告文件所使用的XHTML或HTML版本。必須全部都是大寫字母

 

3種DTD:

  • Transiitonal:相容性最高,略嫌不夠嚴謹(本書作者推薦使用)
  • Strcit:嚴格的DTD,禁止使用傳統的格式標記
  • Frameset:老式規格,可以使用框架

 

XHTML 1.0 Transitional 的 DOCTYPE 宣告如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

名稱領域(namespace)

  • 與特定DTD有關的元素類型與屬性名稱的集合。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

三部分:

  • 指定名稱領域所在的線上位置
  • XML語言版本
  • 指定文件的語言

 

宣告內文類型

XML宣告

<?xml version="1.0" encoding="UTF-8"?>

 

Note!有些瀏覽器無法正確處理XML宣告,如IE6/Win。解決方式如下:

在網頁的中插入 Content-Type 元素:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>SOME TITLES HERE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
</head>

 

結構化標記

根據文意來使用標記

 

基本元素

標籤

  • 開放標籤 eg.<br />
    • <head>:開頭
    • <title>:標題
    • <p>:段落
    • <strong>:粗體
    • <em>:斜體
    • :標題(#=1~6)
    • 列表:
      • 無序

 

<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>

 

***有序

 

<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>

 

    • <a href="/連結網址">連結</a>
    • <img src="圖片位置" width="圖片寬度" height="圖片高度" alt="替代描述" />
    • <span>:搭配id或class,包裹數行文字。
    • <div>:搭配id或class,包裹一個區塊。
  • 封閉標籤 eg.<foo>...</foo>
    • <br />:換行

 

屬性

元素

eg.<foo>ELEMENTS</foo>

 

回到最上面

 

Movable Type

現用模版清單 | Jedi's BLOG

Comments (0)

You don't have permission to comment on this page.