HTML：修訂版本之間的差異
出自六年制學程
（→style (樣式屬性)） |
（→HTML語法） |
||
| 第 4 行： | 第 4 行： | ||
===HTML語法=== | ===HTML語法=== | ||
HTML 的標籤內容分為三個層級：標籤、屬性、樣式指示 | HTML 的標籤內容分為三個層級：標籤、屬性、樣式指示 | ||
| − | (一)標籤(標記) | + | ====(一)標籤(標記)==== |
*標籤必須成對：一般由開始標籤和結束標籤構成一對，如：＜×＞．．．．＜／×＞其中的×代表標籤命令。以上角括號及斜線均為英文半形。 | *標籤必須成對：一般由開始標籤和結束標籤構成一對，如：＜×＞．．．．＜／×＞其中的×代表標籤命令。以上角括號及斜線均為英文半形。 | ||
*開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成＜meta /＞、＜img /＞、＜br/＞、＜hr/＞ | *開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成＜meta /＞、＜img /＞、＜br/＞、＜hr/＞ | ||
| − | (二)屬性 | + | ====(二)屬性==== |
*開始標記命令可以用「屬性」加以修飾，例如 img 標記可以有： | *開始標記命令可以用「屬性」加以修飾，例如 img 標記可以有： | ||
*#src 屬性，指示圖的位置 | *#src 屬性，指示圖的位置 | ||
| 第 14 行： | 第 14 行： | ||
*屬性名後面是屬性值，屬性名與屬性值之間用「=」相連。同標記內兩組屬性是用空白相隔開。 | *屬性名後面是屬性值，屬性名與屬性值之間用「=」相連。同標記內兩組屬性是用空白相隔開。 | ||
*屬性值通常用一對單引號「'」或雙引號「"」包起來，如果屬性值當中不含空白，則引號通常可以省略；如果屬性值當中含空白，則引號絕對不可以省略。 | *屬性值通常用一對單引號「'」或雙引號「"」包起來，如果屬性值當中不含空白，則引號通常可以省略；如果屬性值當中含空白，則引號絕對不可以省略。 | ||
| − | + | *class 屬性：引用已經定義的樣式。 | |
| − | + | *style 樣式屬性：指示後面的內容應該長什麼樣子 | |
| − | ==== | + | ====(三)樣式指示==== |
| − | + | ||
| − | + | ||
| − | + | ||
*style 的值包含的常常超過一項以上的樣式指示 | *style 的值包含的常常超過一項以上的樣式指示 | ||
*兩組樣式指示以「;」間開 | *兩組樣式指示以「;」間開 | ||
2016年3月2日 (三) 15:54的修訂版本
目錄
HTML語法
HTML 的標籤內容分為三個層級：標籤、屬性、樣式指示
(一)標籤(標記)
- 標籤必須成對：一般由開始標籤和結束標籤構成一對，如：＜×＞．．．．＜／×＞其中的×代表標籤命令。以上角括號及斜線均為英文半形。
- 開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成＜meta /＞、＜img /＞、＜br/＞、＜hr/＞
(二)屬性
- 開始標記命令可以用「屬性」加以修飾，例如 img 標記可以有：
- src 屬性，指示圖的位置
- width 屬性，指示圖的寬度
- height 屬性，指示圖的高度
- 屬性名後面是屬性值，屬性名與屬性值之間用「=」相連。同標記內兩組屬性是用空白相隔開。
- 屬性值通常用一對單引號「'」或雙引號「"」包起來，如果屬性值當中不含空白，則引號通常可以省略；如果屬性值當中含空白，則引號絕對不可以省略。
- class 屬性：引用已經定義的樣式。
- style 樣式屬性：指示後面的內容應該長什麼樣子
(三)樣式指示
- style 的值包含的常常超過一項以上的樣式指示
- 兩組樣式指示以「;」間開
- 名與值以「:」相連
HTML重要的標記命令
標籤 ==== html 超文件(HyperText Markup Language) head 文件頭 title 標題 body 本文 a 超連結(anchor) img 圖(image) p 段(paragraph) br 跳行(break space) hr 水平線(Horizontal Rule) table 表 tr 表內之列(table row) td 表內之格(table diamond) th 表內之格(table head diamond) ol 有次序的列表(order list) ul 沒有次序的列表(unorder list) li 列表項目(list item) style 宣告樣式(修飾一個超文件) span 文字小片段 div 區塊(division) pre 保留原有斷行及排列之式(preserve) form 表單 屬性(用=連等號兩邊) ==== src= 圖照來源(source) href= 跳往那一個連結(hyper ref)(hyper reference) target= 跳往瀏覽器的那裡，預設值為本頁的本窗框，值_blank為新的空白頁。 style= 樣式屬性(修飾一個標籤) width= 寬度，可以用點(px,pt)或長度(cm)或百分比表示 height= 高度，可以用點(px,pt)或長度(cm)或百分比表示 border= 邊框。 樣式(用:連冒號兩邊) ==== font-family: 字體 font-size: 字的大小 font-weight: 字有多粗 text-align: 字的對齊方式 color: 字的顏色 width: 寬度 height: 高度 border: 邊框 border-collapse:collapse 合併框線
路徑
用於 img 的 src 屬性，以及 a 的 href 屬性。
- 資料夾分層用「/」半型右上左下斜線隔開。
- 相對路徑
- 不寫路徑，只寫檔名，代表和這個 html 同資料夾(同路徑)
- 「.」代表目前的資料夾(路徑)，也就是這個 html 所在的資料夾(路徑)，寫作「./」
- 「..」代表上一層資料夾(路徑)，寫作「../」
- 上一層資料夾的再上一層資料用「../../」表示，依此類推。
- 絕對路徑
- 同網站路徑：以「/」做為路徑的開頭，代表網站的「根目錄」
- 其他網站的檔名：如「http://xxxx/yyyy/zzzz/abc.jpg」
- http:是協定
- //是網際網路
- xxxx是機器名稱，如 jendo.org
- /yyyy/zzzz/abc.jpg的第一個「/」是機器上面的文件根資料夾，後面的路徑是從文件根資料夾算起。
使用時機
| 相對路徑 | 絕對路徑 | |
|---|---|---|
| 本機 | 可 | 可 |
| 其他機器 | 不可 | 可 |
圖例
| 文件根資料夾：j | ||||||
|
c.jpg
|
|
|||||
練習題(相對路徑與絕對路徑)
- 標籤在ppp.html需要a.jpg
- 標籤在rrr.html需要a.jpg
- 標籤在ppp.html需要e.jpg
- 標籤在qqq.html需要c.jpg
- 標籤在rrr.html需要b.jpg
- 標籤在rrr.html需要c.jpg
- 標籤在rrr.html需要b.jpg
- 標籤在qqq.html需要d.jpg
- 標籤在ppp.html需要my lover.jpg
- 標籤在qqq.html需要my lover.jpg
其他
- http 超文件傳輸協定(HyperText Transfer Protocol)
- 柏納李：HTTP 的發明人，在 1990年12月25日 實現第一次的 HTTP 傳輸，1991年8月6日第一個網頁伺服器上線。1994年柏納-李宣布全球資訊網完全免費的，不申請專利權，不徵收專利費，因此，人人都能輕易用上全球資訊網。
- 從 wiki 頁複製 HTML 段落
