XHTML

更改有序號列表的序號

大家都知道<ol></ol>可以弄出有序號清單,不過其實前面的序號是可以改的。

 type可以更改序號種類,start則可以更改開始序號。

 像是

<ol type = "A" start = "3"></ol>

就會以C、D、E的順序排下去。

 

type

 1  阿拉伯數字  1 2 3 ...
 a  英文小寫  a b c ...
 A  英文大寫  A B C ...
 i  羅馬數字小寫  ⅰ ⅱ ⅲ ...
 I  羅馬數字大寫  Ⅰ Ⅱ Ⅲ...

跑馬燈文字

這語法似乎只有IE上有效。 

<MARQUEE
  ALIGN = left / center / right / top / bottom
  BEHAVIOR = scroll / slide / alternate
  BGCOLOR = colorvalue
  DIRECTION = left / right
  HEIGHT = lenght
  HSPACE = pixels
  LOOP = number / infinite
  SCROLLAMOUNT = pixels
  SCROLLDELAY = milliseconds
  VSPACE = pixels
  WIDTH = lenght>跑馬燈文字
</MARQUEE>

ALIGN : 用來指定文字對齊跑馬燈方框的位置,預設值是靠左(left) 。

BEHAVIOR : 指定捲動的方式。
 scroll會等文字整個捲出跑馬燈的一端後,再從另一端出現。(預設)
 slide是以展示幻燈片 的方式呈現文字 。
 alternate會讓文字在左右範圍之間來 回移動。

BGCOLOR : 指定跑馬燈的背景顏色,可用16進位RGB值或色彩名稱。

DIRECTION : 指定文字移動的方向,預設值是left,表示由右向左移動。

HEIGHT: 以像素值( 如HEIGHT=200)來設定跑馬燈的高度。

WIDTH : 以像素值( 如WIDTH=500)或視窗的百分比值(如WIDTH="80%) 來設定跑馬燈的寬度。

LOOP : 指定跑馬燈捲動的次數,譬如LOOP=s可捲動五次,LOOP=infinite, ( 或LOOP=-1) 則會永不停止 。

SCROLLAMOUNT : 設定跑馬燈文字每次更新畫面時的位移距離,以像素值為單位。

SCORLLDELEY : 設定跑馬燈每次更新畫面之間的暫停時間,以千分之一秒為單位。

XHTML

XHTML ( The eXtensible Hypertext Markup Language ) 1.0 建議規格已於公元 2000 年一月二十六日由 W3C ( World Wide Web Consortium )所宣佈。 XHTML1.0 是將 HTML4 修改為符合 XML1.0 語法的規格。 故我們可以簡單地說,XHTML 是以 XML 技術 為基礎的 HTML,其使得 Web 世界朝向模組化( Modular )及可擴 展化,邁出了第一步。

現今 W3C 網站的首頁,就是以 XHTML1.0 的格式所編排,因此目 前的 HTML 瀏覽器及 XML 的工具都可以處理這個網頁。

HTML 是目前在 Web 上製作超連結文件( Hypertext )的通用格 式,其在將來會以符合 XML 規格的方式來製作。XML 語法帶領 Web 發展符合不同參與者更好的作業環境, 它促使網頁內容製作者編製 結構化的資料( Structured data ),這樣的資料可以針對不同使 用者之需求及形形色色的資料擷取設備,將之轉換為不同型態。

制訂 XHTML 規格時, 曾遭遇到許多問題的挑戰, 其中之一便是 XHTML 規格可以增強 Web, 但也可能破壞 Web。 因而如何設計供 Web 文件使用的新一代標示語言,而不需要廢止現存的 HTML,將是 一重大課題。 解決之道,就是根據 HTML 4.0 規格,將其改寫成為 一個 XML 的應用。 W3C 主任 Tim Berners-Lee 說:「 XHTML 1.0 將帶領現存的 Web 世界通往未來,它是網頁及網站製作者通往 XML 結構化資料的橋樑, 其同時保留了使用 HTML 4.0 的瀏覽器的互通性」。

XHTML-筆記

XHTML也可省略為HTML(Extensible HyperType Markup Language)

檔案名稱必須有意義
ex:favorite,lab

<html>*****</html>
文件的起始與結束

<i----******----->
說明斷落大意(註解)

<title>*****</title>
主題,顯示在視窗上

<body>*****</body>
文件主要部分

<p>*****</p>
一個段落(換行)

<變數名稱 = value>******</變數名稱>
將指定範圍內文章的屬性變更

<!DOCTYPE html PUBLIC "*****">
文件內容的定義位置
(屬性框-雙引號一定要加)

<html xmlns = "*****">

TAB鍵用於縮排時會被當作字元,避免使用

<h1(~6)>*****</h1(~6)>
改變字體大小

127.0.0.1
可用於充當SERVER & CLIENT端的功能

href(Hyperlink reference)
<a href = "*****">******</a>
屬性列可以用於放置網址相關位址
ex:電子郵件,網址,影音
img-圖片{
    src-圖片位置
    alt-無法顯示圖片實用以代替的文字
    width-寬
    heigh-高

<屬性>*****</屬性>
B-粗體
ul-秩序化
li-表單
sup-偏高
sub-偏低
del-刪除線

XHTML筆記

XHTML

angle brackets: e.g.<html> </html>

comment: <!--comment-->

paragraph: <p> you can write somthing between these tags </p>

six headings: h1 ~ h6 //重要性&字體大小依序遞減,讓使用者了解每頁的目的

bold: <strong> 在這裡的字都會變粗體 </strong>

delete line: <del> 這裡字會被槓掉 </del>

次方: <sup> 數字 </sup>

斜體: <em> 斜體字 </em>

hyperlink: <a href = "http://www.google.com"> google首頁 </a>
//a的意思是anchor

mailto: <a href = "mailto:email address"> email address </a> //自動導向outlook

image: <img src="圖檔" width="設寬" heigh="設高" alt="此圖無法出現的原因" />
//若圖無法出現,則出現alt的內容

hyperlinked image: <img src="URL/圖檔" />

italic: <em>這是斜體字</em>

list: <li> 目錄 </li> //就是字前會有一個黑圈圈

unorder list: <ul> 目錄不排序 </ul>

order list: <ol> 目錄排序(有編號) </ol>

特殊保留字

& : &amp
&#38(decimal)
&#x26((hexadecimal)

seperate line: <hr /> //分隔線

form: 裡頭可包含text,label,size,maxlength,submit,reset等東西
//通常都拿來放輸入的表格

textarea: 可以設行數,就是一般text的好幾行

input type: password,radio,checkbox

select: 下拉式選單,裡面放的是option

內頁連結: href=#欲跳至位置的id

meta: 在原始碼中註記一些對code的敘述之類的,在browser那邊不會show出來,通常放在
head裡面

HTML相比XHTML有什麼特點?

1、什麼是是XHTML?

HTML是一種基本的WEB網頁設計語言,XHTML是一個基於XML的置標語言,看起來與HTML有些相象,只有一些小的但重要的區別,XHTML就是一個扮演著類似HTML的角色的XML,所以,本質上說,XHTML是一個過渡技術,結合了XML(有幾分)的強大功能及HTML(大多數)的簡單特性。

2000年底,國際W3C(World Wide Web Consortium)組織公佈發行了XHTML 1.0版本。XHTML 1.0是一種在HTML 4.0基礎上優化和改進的的新語言,目的是基於XML應用。XHTML是一種增強了的HTML,它的可擴展性和靈活性將適應未來網路應用更多的需求。下面是W3C的HTML工作組主席Steven Pemberton回答的關於XHTML的常見基礎問題。

問:什麼是XHTML?
答:XHTML是一種為適應XML而重新改造的HTML。當XML越來越成為一種趨勢,就出現了這樣一個問題:如果我們有了XML,我們是否依然需要HTML?為了回答這個問題,1998年5月我們在舊金山開了兩天的工作會議,會議的結論是:需要。我們依然需要使用HTML。因為大量的人們已經習慣使用HTML來作為他們的設計語言,而且,已經有數以百萬計的頁面是採用HTML編寫的。

問:為什麼XHTML 1.0相對HTML 4.0獨立發展?
答:並不是這樣。XHTML恰恰就是HTML 4.0的重新組織,(確切的說它是HTML 4.01,是一個修正版本的HTML 4.0,只不過以XHTML 1.0命名發行。) 它們在XML裡的解釋會有一些必要的差別,但另一方面,它們依然非常相似,我們可以把XHTML的工作看作是HTML 4.0基礎上的延續。

 問:XHTML 1.0如何實現XML標準?
 答:XHTML就是一種XML應用。它採用XML的DTD文件格式定義,並營運在支持XML的系統上。這裡要感謝XML的Namespaces功能,瀏覽器製造商不需要再創造新的私有標籤(tags),他們只需要在XHTML代碼裡包含XML代碼片段,或者XML代碼裡包含XHTML代碼片段。

 2、與HTML相比XHTML有什麼特點?
(1)XHTML解決HTML語言所存在的嚴重制約其發展的問題。HTML發展到今天存在三個主要缺點:不能適應現下越多的網路設備和應用的需要,比如手機、PDA、訊息家電都不能直接顯示HTML;由於HTML代碼不規範、臃腫,瀏覽器需要足夠智能和龐大才能夠正確顯示HTML;數據與表現混雜,這樣你的頁面要改變顯示,就必須重新製作HTML。因此HTML需要發展才能解決這個問題,於是W3C又製定了XHTML,XHTML是HTML向XML過度的一個橋樑。

 (2)XML是web發展的趨勢,所以人們急切的希望加入XML的潮流中。XHTML是當前替代HTML4標記語言的標準,使用XHTML 1.0,只要你小心遵守一些簡單規則,就可以設計出既適合XML系統,又適合當前大部分HTML瀏覽器的頁面。這個意思就是說,你可以立刻設計使用XML,而不需要等到人們都使用支持XML的瀏覽器。這個指導方針可以使web平滑的過渡到XML。

(3)使用XHTML的另一個優勢是:它非常嚴密。當前網路上的HTML的糟糕情況讓人震驚,早期的瀏覽器接受私有的HTML標籤,所以人們在頁面設計完畢后必須使用各種瀏覽器來檢測頁面,看是否兼容,往往會有許多莫名其妙的差異,人們不得不修改設計以便適應不同的瀏覽器。
(4)XHTML是能與其它基於XML的標記語言、應用程式及協議進行良好的交互工作。。
 (5)XHTML是Web標準家族的一部分,能很好在無線設備等其它用戶代理上。
 (6)在網站設計方面,XHTML可助你去掉表現層代碼的惡習,幫助你養成標記校驗來測試頁面工作的習慣。

[課程參與]-XHTML筆記3

Forms

<form>標籤:可以用來設定一個表單

   name 屬性:設定表單名稱
  
   method 屬性:有get和post二種傳送表單的方法
  
   action 屬性:指定表單傳送後,該由那一支程式來處裡表單內所傳送的資料


<input> 標籤:表單元件中最常使用的標籤,以下舉幾個<input> 標籤

ex:

<input type="checkbox"> 標籤:可以提供複選功能的表單元件

<input type="radio"> 標籤:可以提供單選功能的表單元件

<input type="text"> 標籤:可以輸入單行文字的表單元件
                    其中可以用 size 屬性 來設定文字輸入長度  

<input type="password"> 標籤:可以用來輸入密碼的表單元件,
                      輸入文字會以 * 顯示 

<input type="submit"> 標籤:用來傳送資料按鈕的表單元件

<input type="reset"> 標籤:用來清除表單資料按鈕的表單元件

<input type="hidden"> 標籤:一個可以隱藏不見的表單元件


<textarea> 標籤:可以用來輸入多行文字的表單元件

<select> 標籤:可以用來建立下拉式選單的標籤

<label> 標籤:可以替表單一開始設定初值

 

Meta

<meta> 標籤:可以讓網頁產生特殊的效果

ex:<meta http-equiv="refresh" content="10; url=test.html">

可以用來自動換網頁的功能,上面代表10秒後自動換到test.html檔


ex:<meta name="KeyWords" content="xhtml,css,php,html,xml">

可以用來指定指定關於網頁內容的關鍵字

 

[課程參與]-XHTML筆記2

List


<ol>標籤(ordered lists):有順序的編排方式

ex:<ol>
      <li>test1</li>
      <li>test2</li>
   </ol>

印出結果:1. test1
            2. test2


其中還可以設定屬性: type 屬性 和 start 屬性


type 屬性:設定數字的型態

   type=1 屬性 : 以(1,2,3,4,...)顯示

   type=A 屬性 : 以(A,B,C,D,....)顯示

   type=a 屬性 : 以(a,b,c,d,....)顯示

   type=I 屬性 : 以(I,II,III,IV,....)顯示

   type=i 屬性 : 以(i,ii,iii,iv,....)顯示

start 屬性 : 表示要開始的編號值

 

<ul>標籤(unordered lists):沒有順序的編排方式

ex:<ul>
         <li>test1</li>
         <li>test2</li>
      </ul>

印出結果:● test1
            ● test2


其中也可以設定屬性: type 屬性

type 屬性 : 設定符號型態

   type=disk   屬性:以一個實心圓(●)顯示

   type=square 屬性:以一個實方塊(▓)顯示

   type=circle 屬性:以一個空心圓(○)顯示

 

<li>標籤 : 表示各子項目的內容

 

Table

<table>標籤:可以用來宣告ㄧ個表格

設定屬性:

   width 屬性:可以設定表格寬度,可直接用百分比或是指定大小

   height 屬性:可以設定表格高度,可直接用百分比或是指定大小

   border 屬性:可以設定表格框線的粗細

 

<caption> 標籤:通常用來敘述表格內容的一段文字

<tr> 標籤:用來設定表格的一個橫列,
          必須放在 <table> 與 </table> 標籤中才有意義

<th> 標籤:標題儲存格標籤,通常都用來設定表格的最上列或是最左行

<td> 標籤:表格儲存格標籤,用來設定儲存格的內容

 

[課程參與]-XHTML筆記1


XHTML (全名:eXtensible HyperText Markup Language)

表示方式類似HTML,只是XHTML是將XML再附加於HTML上,

讓網頁的延展性和彈性度都來得更高,

可從中文意思(可擴展超文本置標語言)看出

 

Heading

標題文字標籤 <h> 共有 6 組,分別是標籤 <h1>、標籤 <h2>、標籤 <h3>、標籤 <h4>、
標籤 <h5>、標籤 <h6> 等,分別用來顯示 6 種大小不同的標題文字,

標題文字標籤會將文字以加粗加黑的方式來顯示且會自動換行,

並成為一個段落,讓文字看起來就是醒目的標題一樣,

其中最大的標題文字是 <h1>,最小的標題文字是 <h6>。


<h> 標籤也有對齊的屬性:

    1.  align="left" : 文字靠左對齊

    2.  align="center" : 文字置中對齊

    3.  align="right" : 文字靠右對齊


Linking

超連結標籤 <a> 可以建立一個超連結

ex: <a href="http://www.yahoo.com.tw">奇摩</a>

這樣可以建立一個超連結,讓我們點選直接進入奇摩首頁

 

Images

插入圖片標籤<img>可以插入一個圖片檔,

常用的圖片檔有bmp、gif、jpeg、png 格式

ex:<img src="cpphtp6.jpg" width="92" height="120"
    alt="C++ How to Program book cover">

這樣表示插入一張圖片檔為cpphtp6.jpg,格式為jpeg,寬度92,高度120,

其中 alt 表示圖片的提示文字


Special Characters and Horizontal Rules

水平線標籤<hr> 表示可以在網頁上顯示水平線,作為分隔網頁用

ex:<hr />


其中也可以設定顏色、對齊方式、長度、粗細

ex:<hr color="顏色" align="對齊方式" width="長度" size="粗細">


上標字標籤<sup> : 表示方法在水平線之上,常用在數學的次方表示上

ex:3.14*10<sup>2</sup>  其中2可以代表10的次方


下標字標籤<sub> : 表示方法在水平線之下,可用在矩陣表示上


 

課程參予-筆記05

[XHTML]-Images

1.The img element's src attribute specifies an
image's location

2.Every img element must have an alt attribute,
which contains text that is displayed if the client
cannot render the image
– The alt(圖顯示不出來時,則會顯示文字) attribute makes web pages more accessible to
users with disabilities, especially vision impairments
– Width and height are optional attributes

3.If omitted, the browser uses the image’s actual width and
height

4.Images are measured in pixels

訂閱文章