Html Note

本網頁以打造無障礙閱讀為目標,可以用任何瀏覽器來觀看本網頁


XHTML摘要

<!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" lang="zh_TW" xml:lang="zh_TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Hello World</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

名詞

一般觀念

  縮排示範縮排示範縮排示範縮排
縮排示範縮排示範縮排示範縮排示範縮排
可利用表格來作出垂直線段
111
111

大小寫

註解

HTML : <!-- -->

ASP : '

CSS : /* */

HTML的基本標籤

<html>......</html>

<head>......</head>

<title>......</title>

<body>......</body>

良好的標記與屬性

開頭的<與i之間不能有空白,等號前後也不要有空白,屬性以雙引號括起來,如 <img src="hello.gif">

宣告所使用的HTML格式如下(寫在<html>......</html>的上面)

meta的使用

供瀏覽器或搜尋引擎的"robot"或"spider"的代理程式查詢之用(通常寫在<head>......</head>裡面)

link標籤的屬性

html標籤的屬性

body標籤的屬性

指定字型樣式

影像,色彩

與段落,區塊有關的標籤

文字段落,後有空行

<p></p>

區塊標示,前後空行

<div></div>

區塊標示,前後無空行

<span></span>

form表單

form(設定表單範圍)

name/id 表單的名稱

<form name="login" id="login" method="post" action="newsedit.asp">


</form>

action 接收表單的程式
method 資料傳送的方式,有2種
post get
 

input(建立表單欄位)

name/id 欄位的名稱

<form name="login" id="login" method="post" action="newsedit.asp">
帳號:<input type="text" name="id" size=10 maxlength=10/>
密碼:<input type="password" name="pass" size=10 maxlength=10/>
   <input type="hidden" name="hiddenField" />
   <input type="checkbox" name="checkbox" value="checkbox" />
   <input type="radio" name="radiobutton" value="radiobutton" />
   <input type="image" name="imagebutton"
    src="image/go.gif" width="100" height="30"/>
   <input type="button" name="button" value="button" onclick="fun(s)"/>
   <input type="submit" name="submit" value="Submit" />
   <input type="reset" name="reset" value="Reset" />
   <input type="file" name="filename" />
</form>

<form enctype="multipart/form-data">
   <input type="file" name="filename" />
</form>

value 初值
size 顯示的字元寬度
maxlength 可輸入的字元寬度
onclick 按下button後會做的檢查
src 製作圖形按鈕所需的圖檔路徑
type text
password
hidden
checkbox
radio
image
button
sumit
reset
file
文字欄位
密碼欄位
隱藏欄位
多選欄位
單選欄位
圖形按鈕
一般按鈕
送出按鈕
重設按鈕
附加檔案按鈕

textarea(多行輸入)

name/id 文字區域的名稱 <form name="login" id="login" method="post" action="newsedit.asp">
<textarea name="textarea" cols="20" rows="20" wrap="VIRTUAL">
請發表各人意見
</textarea>
</form>
rows 高度
cols 寬度
wrap 是否自動換行,常用的有 off, hard,virtual,physical

select(選單,預設為只可單選)

需搭配 option 標籤才可使用

name/id 選單的名稱 <select name="select" size="3" multiple >
   <option selected="selected">請點選...</option>
   <option value="1">電腦</option>
   <option value="2">羽毛球</option>
   <option value="3">桌球</option>
   <option value="4">看電影</option>
</select>
multiple 宣告為可複選的選單
size

size=1時為下拉式選單
size>1時為選擇清單

anchor 超連結標籤 <a href=" 連結的網址 "> 連結的網頁名稱 </a>

本文超連結

設定跳躍點 <a name="chapter1"><a>
設定連結點 <a href="#chapter1">第一章<a>

各種URL

http <a href="http://www.pchome.com.tw">pchome</a> pchome
ftp <a href="ftp://ftp.peterju.idv.tw">Peter Ju's FTP</a> Peter Ju's FTP
email <a href="mailto:peterju@pchome.com.tw">寄信給我</a> 寄信給我
telnet <a href="telnet://bbs.kimo.com.tw">kimo BBS</a> kimo BBS
gopher <a href="gopher://gopher.edu.tw">教育部gopher系統</a> 教育部gopher系統
news <a href="news:news.edu.tw">教育部news系統</a> 教育部news系統

超連結的視窗開啟方式

開新視窗 <a href="http://www.pchome.com.tw" title="網路家庭" target="_blank" >pchome</a> pchome
本身開啟 <a href="http://www.pchome.com.tw" title="網路家庭" target="_parent" >pchome</a> pchome
本身開啟 <a href="http://www.pchome.com.tw" title="網路家庭" target="_self" >pchome</a> pchome
本身開啟 <a href="http://www.pchome.com.tw" title="網路家庭" target="_top" >pchome</a> pchome

顯示滑鼠游標所在位置的說明

html碼 樣式
<a href="http://www.pchome.com.tw" title="網路家庭" >pchome</a> pchome

Frame

遇到不支援Frame的瀏覽器時顯示的訊息 :<noframes></noframes>
指定連結的Frame: <a href="content.htm" target="mainframe">
預設連結所指向的Frame:<base target="mainframe">

工具的使用

FireFox

Web設計相關套件介紹

Web Developer
Web開發者必備的工具。
Aardvark
把滑鼠游標移到網頁組件上時,Aardvark 會用紅色框框標示出該組件的範圍,並在框框左下角以小標籤顯示該組件為何、其 class 或 id 又為何。這個時候透過鍵盤操作,還可以有一些額外的功能: W 可以讓該組件的範圍變寬而 N 則是變窄, Q 是離開 Aardvark 而 U 是還原最後一次操作, R 是刪除所選的組件而 I 則是刪除所有環繞著所選組件的其他組件然後 E 會刪除該組件的內容, B 是把組件內一律設為白底黑字而 C 都是隨機設定組件的底色, V 是檢視所選組件的原始碼,然後 D 則是移除任何該組件的固定寬度值。
ColorZilla
用滑鼠在 Firefox 畫面左下角的滴管圖示上點一下,這時候滑鼠游標就會變成十字形(準星),然後當你把滑鼠游標移動到任何地方時, ColorZilla 就會顯示出游標所在位置的色彩資訊(包括 RGB HEX 值以及顏色代碼等)提示:在滴管圖示上按滑鼠右鍵,會發現很多東西喔……。
Document Map
藉由網頁內的標題組件(也就是 h1, h2, h3, h4, h5 等),來建立所謂的「文件地圖」。使用 Document Map 的時候,要先從檢視選單堨s出 Document Map 這個資訊方塊列,然後在左方的資訊方塊列中,就會按照網頁的結構層次,把所有的標題組件列出來。用滑鼠點一下被列出來的標題組件,瀏覽視窗中的位置也會跟著跳過去
Fangs
把網頁模擬成純文字瀏覽器所會看到的樣子,所以當你特別專注於網頁親和力的話,這個工具可能會有些幫助。 (尚未支援FireFox 1.5)
HTML Validator
隨時檢驗目前網頁是否為有效的 HTML ,並且以圖示顯示驗證結果,如果把滑鼠游標移到驗證結果圖示上,還會顯示更詳細的數據。 HTML Validator 除了驗證 HTML 之外,也能做一點簡單的親和力驗證,而且由於這個擴充套件係根據 HTML Tidy (HTML 美容程式) 所寫成的,所以它還兼具了幫你替網頁原始檔「整型美容」的功效
Live HTTP Headers
直接監視伺服器傳來的 HTTP 標頭。因為有的時候,網頁設計師們會遭遇無法解決的奇怪問題,例如明明指定了語言為中文,可是頁面總是被當作英文開啟,許多這種問題,其實都來自於伺服器沒有正確組態所致,而這個擴充套件正可以幫助你釐清這種冤屈。
MeasureIt
度量螢幕上各種東西的長度。在使用上也跟 ColorZilla 很像,首先就是以滑鼠點一下左下角的尺標圖示,這時候網頁的色彩會變淡,彷彿蓋上了一層薄紗,然後你可以用滑鼠任意畫出方框,而這個擴充套件則會告訴你這個方框的長度與寬度。
mozCC
Firefox 的右下角會出現辨識並顯示出網頁堛熙苭 CC 授權圖示,如果你用滑鼠點擊這個圖示,就會出現一個視窗,告訴你更多細節。
Platypus
動態地建立 greasemonkey 腳本,讓你可以用「所見即所得」的方式,編輯任何你看到的網頁!
View formatted source
利用這個擴充套件來檢視網頁原始碼時,可以看到被整理得相當整齊的結果,這個源碼檢視不但會把連結的其他檔案(例如 JavaScript 和 CSS 等)給放進來,而且也可以把成對的標籤「折疊」起來,非常方便。

Dreamweaver

Dreamweaver是由 Macromedia 公司所研發出來的 所見即所得 的網頁編輯軟體

參考書目

網路資源

主 網 站:http://peterju.notlong.com (目前轉址至 http://irw.ncut.edu.tw/peterju/) Sitetag Logo

Level Triple-A conformance icon | [歡迎使用任何作業系統、瀏覽器觀看!] | Valid XHTML 1.0 Transitional | Valid CSS! | [Valid RSS] | [創意公眾許可証]
This work is licensed under a Creative Commons License