起始標籤 | 結束標籤 |
---|---|
需要 | 不需要 |
<link> 有幾個屬性
屬性 | 值 | Deprecated or Obsolete |
---|---|---|
charset | 文件編碼,預設為 ISO-8859-1 | Obsolete |
href | 資源網址 | |
hreflang | 資源網址的語言 | |
media | 媒體型態,通常是指樣式表 | |
rel | 資源文件與目前文件的關係 | |
rev | 同 rel | Obsolete |
type | text/html text/css |
例如我們有以下的 CSS 檔案
p { background-color: black; color: white; } /* 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:example09.css 功能:示範 HTML 4.01 標記語言的使用 作者:張凱慶 時間:西元 2011 年 5 月 */
CSS 檔案的副檔名為 .css ,註釋標記與 C 語言相同。
下面的 example09.html 連結到 example09.css
<html> <head> <title>網頁標題</title> <link type="text/css" rel="stylesheet" href="example09.css" /> </head> <body> <p>You ever have that feeling where you're not sure if you're awake or still dreaming?</p> <p>A prison for your mind.</p> <p>Free your mind.</p> <p>Believe the unbelievable.</p> <p>There is no spoon.</p> <p>I can only show you the door, you have to walk through it.</p> <p>Choice. The problem is choice.</p> <p>Then tomorrow we may all be dead, but how would that be different from any other day?</p> <p>I have dreamed a dream, but now that dream has gone from me.</p> <p>Choice is an illusion, created between those with power, and those without.</p> <p>Because I choose to.</p> <p>Everything that has a beginning has an end.</p> </body> </html> <!-- 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:example09.html 功能:示範 HTML 4.01 標記語言的使用 作者:張凱慶 時間:西元 2011 年 5 月 -->
用瀏覽器 (broswer) 開啟,如下
其中 <link /> 這一行
<link type="text/css" rel="stylesheet" href="example09.css" />
type 屬性 (attribute) 設定為 text/css , rel 為 stylesheet ,這是對 CSS 檔案的設定值, href 則是設定成 CSS 檔案的路徑,這裡,由於 example09.html 與 example09.css 在相同資料夾內,所以直接寫 example09.css 的檔名。
如果是連到外部伺服器的樣式表,就得寫完整的連結路徑了,例如本站所使用的 SyntaxHighlighter 語法高亮度系統
<html> <head> <title網頁標題</title> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script> <script type="text/javascript"> SyntaxHighlighter.all(); </script> </head> <body> 以下為 Java 程式 <pre name="code" class="brush: java;">class DemoApp { public static void main(String[] args) { Demo d = new Demo(); d.printMessage(); } } class Demo { String message = "^_^ 哈囉"; public void printMessage() { System.out.println(message); } } /* 《程式語言:教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:DemoApp.java 功能:簡單的 Java 範例 作者:張凱慶 時間:西元 2010 年 10 月 */</pre> </body> </html> <!-- 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:example10.html 功能:示範 HTML 4.01 標記語言的使用 作者:張凱慶 時間:西元 2011 年 5 月 -->
用瀏覽器開啟如下
中英文術語對照 | |
---|---|
標籤 | tag |
樣式表 | style sheet |
瀏覽器 | broswer |
屬性 | attribute |
您可以繼續參考
HTML 基本概念
- 元素與屬性
- 絕對路徑與相對路徑
- 度量與單位
- 網頁顏色
- 網頁字元索引
- 文件型態定義
- <html> - 文件標籤
- <head> - 文件標頭
- <title> - 標題
- <meta /> - 資訊
- <link /> - 外連樣式表
- <script> - 腳本程式
- <style> - 樣式
- <base> - 基本路徑
- <body> - 文件主體
- <address> - 作者資訊
相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁
參考資料
沒有留言:
張貼留言