Mais conteúdo relacionado Semelhante a HTML Basic (20) HTML Basic2. 行動開發學院 http://MobileDev.TW
HTML Basic 2
大綱
1. 簡介
2. 結構
3. 元件
4. 屬性
5. 標題
6. 水平線
7. 註解
8. 段落
9. 斷行
10. 保留原編排
11. 文字格式
12. 超連結
13. 影像
14. 表格
15. 清單
16. 表單
17. 顏色
18. 框架
19. 特殊字元
20. 表頭
21. 文件宣告
3. 行動開發學院 http://MobileDev.TW
HTML Basic 3
第1章:簡介
l HTML
l 網頁描述語言
l HyperText Markup Language 超文字標記語言
l HTML不是程式語言,而是一種標記語言
l 標記語言是標記標籤的集合
l HTML使用標記語言來描述網頁
l HTML Tag 標籤
l 由角型括弧所包圍 xxx
l 通常成對 x ......./x
x:開始標籤
/x:結束標籤
l 瀏覽器不會顯示出標籤,會透過這些標籤來表達一個網頁
9. 行動開發學院 http://MobileDev.TW
HTML Basic 9
l 元件 = 開始標籤+內容 +結束標籤
開始標籤
內容
結束標籤
p
這是一個段落
/p
a href=default.htm
這是一個連結
/a
br /
l 有些HTML元件沒有內容(empty element)
l 沒有內容的HTML元件會在開始標籤中結束
l 多數HTML元件可擁有屬性
l 元件可以巢狀方式出現(pbhello/b/p)
第3章:元件 element
10. 行動開發學院 http://MobileDev.TW
HTML Basic 10
第4章: 屬性
l 指定於開始標籤中的附加資訊
l table border=1
l a href=http://www.iii.org.tw/
l body bgcolor=yellow Deprecated
l 屬性值以雙引號標示,值內若包含雙引號可使用單
引號標示 name='John ShotGun Nelson'
l 屬性名稱=屬性值
a href=http://www.iii.org.twThis is a link/a
11. 行動開發學院 http://MobileDev.TW
HTML Basic 11
第5章:標題
h1This is a heading/h1
h2This is a heading/h2
h3This is a heading/h3
h4This is a heading/h4
h5This is a heading/h5
h6This is a heading/h6
l h1最大,h6最小
l 不要為了把字放大而使用標題標籤
l 標題前後會自動有一行空行
l 提供搜尋引擎網頁內容資訊結構
12. 行動開發學院 http://MobileDev.TW
HTML Basic 12
第6章:水平線hr
l 產生一條水平線 hr
l 五個屬性
l size 決定水平線的粗細 Deprecated
hr size=5
l width 決定水平線的長度 Deprecated
hr width=100
l align 決定水平線的對齊 left / center / right Deprecated
hr align=left Deprecated
l noshade 無陰影線
hr noshade=noshade Deprecated
l color 決定水平線的顏色
hr color=red Deprecated
14. 行動開發學院 http://MobileDev.TW
HTML Basic 14
第7章:註解
l 註解會被瀏覽器忽略而不顯示
l !-- This is a comment --
l 常見註解方式
l 單行註解 Inline comments
// C, C++, Java, JavaScript, PHP
l 區塊註解 Block comments
/* */ C, C++, Java, JavaScript, PHP, CSS
!-- -- HTML, XML
http://en.wikipedia.org/wiki/Comparison_of_programming_languages_%28syntax%29#Comments
17. 行動開發學院 http://MobileDev.TW
HTML Basic 17
第10章: 保留原編排
l 保留原本編排
pre
for i = 1 to 10
print i
next i
/pre
l 屬性:width 指定每行最大字元數
pre width=8
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
/pre
18. 行動開發學院 http://MobileDev.TW
HTML Basic 18
第11章:文字格式
l 看似相同但意義不同(1)
l 粗體b/b
l 強化strong/strong
l 看似相同但意義不同(2)
l 斜體i/i
l 強調em/em
l 放大與縮小
l 放大big/big
l 縮小small/small
l 上標與下標
l 上標sup/sup
l 下標sub/sub
l 其他花樣
l 刪除線del/del
l 底線ins/ins
建議採用CSS來
決定樣式
19. 行動開發學院 http://MobileDev.TW
HTML Basic 19
第12章:超連結
l 外部連結
l 網頁、檔案
a href=''http://www.yahoo.com.tw''Yahoo!奇摩/a
a href=''1.pdf''第一章文件/a
l 郵件(預設主旨,多人,附本,內容)
l 內部連結
l 文章的指定位置
• 先設定數個連結目標 a name=''Ch12''Ch12/a
• 再進行連結 a href=''#Ch12''Goto Ch12/a
23. 行動開發學院 http://MobileDev.TW
HTML Basic 23
第13章: 影像 1/2
l 插入圖片至網頁中
l 標籤:img /
l 屬性:
- src:圖片位置
- width:圖片寬度
- height:圖片高度
- alt:圖片註解
- align:對齊 Deprecated
top、bottom、middle、left、right
- border:邊框 Deprecated
0~n
範例
img src=''pic.jpg'' width=''200'' height=''100'' /
img src=goleft.gif alt=Go Left width=32 height=32 /
25. 行動開發學院 http://MobileDev.TW
HTML Basic 25
第14章: 表格 1/5
• Row data cell
table border=1
tr
tdData1/td
tdData2/td
/tr
/table
• 標題
table border=1
tr
thName/th
thTelephone/th
/tr
tr
tdBill Gates/td
td555 77 854/td
/tr
/table
Data1 Data2
Name Telephone
Bill Gates 555 77 854
27. 行動開發學院 http://MobileDev.TW
HTML Basic 27
第14章: 表格 2/5
• 邊框
table border=x..../table
• 表外標題
標籤:caption/caption
屬性:align Deprecated
值:left,right,top,bottom
Name Telephone
Bill Gates 555 77 854
My Caption
28. 行動開發學院 http://MobileDev.TW
HTML Basic 28
第14章: 表格 3/5
• 儲存格合併
l colspan →
l rowpan ↓
table border=1
tr
thName/th
th colspan=2Telephone/th
/tr
tr
tdBill Gates/td
td555 77 854/td
td555 77 855/td
/tr
/table
Name Telephone
Bill Gates 555 77 854 555 77 855
table border=1
tr
thFirst Name:/th
tdBill Gates/td
/tr
tr
th rowspan=2Telephone:/th
td555 77 854/td
/tr
tr
td555 77 855/td
/tr
/table
First Name: Bill Gates
Telephone:
555 77 854
555 77 855
30. 行動開發學院 http://MobileDev.TW
HTML Basic 30
第14章: 表格 5/5
• 表格顏色與背景
顏色:bgcolor Deprecated
背景圖片:background
• 儲存格顏色與背景 (亦可套用在整列)
顏色:bgcolor Deprecated
背景圖片:background
• 儲存格文字對齊 Deprecated
left, center, right, justify
32. 行動開發學院 http://MobileDev.TW
HTML Basic 32
第15章:清單
• 無序(3種)
l circle
l disc
l square
• 有序(5種)
l 1
l A
l a
l I
l i
• 階層
ul type=disc
liApples/li
liBananas/li
liLemons/li
liOranges/li
/ul
ol type=A
liApples/li
liBananas/li
liLemons/li
liOranges/li
/ol
start:決定起始值 - 置於ol tag
value:改變該數值 - 置於 li tag
35. 行動開發學院 http://MobileDev.TW
常見表單一覽
HTML Basic 35
名稱
語法
外觀
文字
input type=text name=firstname
input type=password name=pwd
單選
input type=radio name=sex value=maleMalebr
input type=radio name=sex value=femaleFemale
複選
input type=checkbox name=vehicle value=Bike
I have a bike br
input type=checkbox name=vehicle value=Car
I have a car
下拉
select name=cars
option value=volvoVolvo/option
option value=saabSaab/option
option value=audiAudi/option
/select
文章
textarea rows=10 cols=30 placeholder=comment...
/textarea
36. 行動開發學院 http://MobileDev.TW
HTML Basic 36
第16章: 表單
l 一個含有表單元件的區域
l 表單元件:允許使用者輸入資訊
l form/form
l input
l type
- text
l size:顯示長度
l value:預設輸入文字
l maxlength:可輸入字元數
- radio
l 設定預選屬性:checked=checked
l 同一組radio的name屬性一定要相同
- checkbox
l 設定預選屬性:checked=checked
- reset 回復表單預設資料
l value:按鈕上面的文字
- submit 送出表單資料
l value:按鈕上面的文字
39. 行動開發學院 http://MobileDev.TW
HTML Basic 39
下拉式選單與文字輸入區塊
l dropdown
l 標籤:selectoption/option/select
l 設定預選屬性:selected=selected
l textarea
l 標籤:textarea/textarea
l 屬性:
- name:變數名稱
- rows:列數
- cols:每列字元數
42. 行動開發學院 http://MobileDev.TW
HTML Basic 42
第17章: 顏色
l HEX
l #000000 ~ #FFFFFF
l #2AB - #22AABB
l RGB
l rgb(0,0,0) ~ rgb(255,255,255)
l Name
l Black、Green、Pink、.........
http://www.colorschemer.com/online.html
43. 行動開發學院 http://MobileDev.TW
HTML Basic 43
第18章: 框架
l 分割種類
l 垂直分割
l 水平分割
l 巢狀使用
l hyperlink – target屬性
l framename 特定frame名稱
l _blank 新視窗
l _top 目前整個視窗
l _parent 父frameset
HTML網頁設計
關於我們
產品介紹
聯絡我們
44. 行動開發學院 http://MobileDev.TW
HTML Basic 44
第18章: 框架
l frame屬性
l src:指定框架顯示網頁
- src=1.html
l frameborder:框線大小
- 1 有框線(預設值)
- 0 無框線
l noresize:是否允許變更大小
- noresize=noresize
l scrolling:是否允許捲動
- yes
- no
- auto (預設值)
l marginheight:內容與上下邊界的距離
l marginwidth:內容與左右邊界的距離
47. 行動開發學院 http://MobileDev.TW
HTML Basic 47
第19章: 特殊字元
Result Description Entity Name Entity Number
non-breaking space nbsp; #160;
less than lt; #60;
greater than gt; #62;
ampersand amp; #38;
¢ cent cent; #162;
£ pound pound; #163;
¥ yen yen; #165;
€ euro euro; #8364;
§ section sect; #167;
© copyright copy; #169;
® registered trademark reg; #174;
48. 行動開發學院 http://MobileDev.TW
HTML Basic 48
第20章: Head
l 與整個頁面相關的資訊
l title標題
l base target=_blank
l 將本頁所有link的目標框架預設為在新頁開啟
l meta相關資訊(元、後設)
l 關鍵字
meta name=description content=HTML examples /
meta name=keywords content=HTML,CSS,JavaScript /
l 轉向
meta http-equiv=Refresh content=5;url=http://MobileDev.tw /
l 編碼指定
meta http-equiv=Content-Type content=text/html;charset=UTF-8 /
meta charset=UTF-8
51. 行動開發學院 http://MobileDev.TW
HTML Basic 51
第21章: 文件宣告
l !DOCTYPE 非HTML的一部分,告訴browser以下這個
HTML是什麼版本
1. HTML 4.01 Strict:無樣式元件、無frame
2. HTML 4.01 Transitional:無frame
3. HTML 4.01 Frameset
4. XHTML 1.0 Strict = 1+well-formed XML
5. XHTML 1.0 Transitional = 2+well-formed XML
6. XHTML 1.0 Frameset = 3+well-formed XML
7. XHTML 1.1
l Why !DOCTYPE?
l 透過版本的指定,可提高在不同瀏覽器中網頁呈現的一致性。
52. 行動開發學院 http://MobileDev.TW
HTML Basic 52
第21章: 文件宣告
l HTML 4.01 Transitional Rules
l DOCTYPE宣告
l 編碼宣告
l 圖片要有ALT
l HTML 4.01 Strict Rules
l 不使用已淘汰的樣式元件與屬性
body text=black/body
font face=arial/font
center/center
l 行內(inline)元素必須放在區塊(block)元素內
l html必須是第一個元素、並且用/html結束頁面
l head/head裡一定要有title/title
l body裡必須先放區塊元素,再將其他元素放進區塊元素中
l ul與ol裡面只能有li
l 巢狀使用必須清楚,不可混亂
Notas do Editor 1. 語言的分類: Markup Language – HTML, XML Script Language – JavaScript, VBScript Programming Language – Java, C, C++ 2. 標記語言三要件: 標籤 Tag 屬性 Attribute 值 Value