HTML學習筆記2
HTML計算機代碼元素
HTML顯示計算機代碼時不適用可變的字母尺寸和間距，<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和間距。
HTML鍵盤格式
<kbd>定義鍵盤輸入。
HTML 樣本格式
HTML <samp> 元素定義計算機輸出示例。
HTML 代碼格式
HTML <code> 元素定義編程代碼示例。<code>不保留多余的空格和折行。如果想要保留空格和折行，可增加<pre>
<code> <pre> var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }</pre> </code>
這樣輸出的將保留文本格式。
HTML 變量格式化
HTML <var> 元素定義數學變量：
<p>愛因斯坦公式：</p> <p><var>E</var>=<var>m</var><var>c</var><sup>2</sup>
HTML 計算機代碼元素
| 標簽 | 描述 |
|---|---|
| <code> | 定義計算機代碼文本 |
| <kbd> | 定義鍵盤文本 |
| <samp> | 定義計算機代碼示例 |
| <var> | 定義變量 |
| <pre> | 定義預格式化文本 |
HTML 註釋
HTML使用<!--註釋-->來添加註釋。瀏覽器不會顯示註釋內容。註釋可以折行使用，可將一整句HTML語句註釋掉。
條件註釋：
<!--[if IE 8]> .... some HTML here .... <![endif]-->
條件註釋定義只有 Internet Explorer 執行的 HTML 標簽。
軟件程序標簽
各種 HTML 軟件程序也能夠生成 HTML 註釋。
例如 <!--webbot bot--> 標簽會被包圍在由 FrontPage 和 Expression Web 創建的 HTML 註釋中。
作為一項規則，這些標簽的存在，有助於對創建這些標簽的軟件的支持。
HTML CSS
例1：本例演示如何使用添加到 <head> 部分的樣式信息對 HTML 進行格式化。
<html> <head> <style type="text/css"> h1{color:red} p{color:blue} </style> </head> <body> <h1>header1</h1> <p>A paragraph.</p> </body> </html>
效果如下：
例2：不帶下劃線的鏈接
<html> <body> <a href="/example/html/lastpage.html" style="text-decoration:none">這是一個鏈接！</a> </body> </html>
這將產生一個沒有橫線的鏈接
例3：本例演示如何 <link> 標簽鏈接到一個外部樣式表。
<html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css"> </head> <body> <h1>我通過外部樣式表進行格式化。</h1> <p>我也一樣！</p> </body> </html>
其結果如下：
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：
外部樣式表
如例3所示，這樣的插入方式可以通過改變樣式表中的值來改變整個站點的外觀。
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。如例1所示。
內聯樣式
當要對個別元素進行格式設置時，可使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。
<p style="color:red;margin-left:20px"> A paragraph. </p>
上述代碼改變了段落的顏色和左頁邊距。
| 標簽 | 描述 |
|---|---|
| <style> | 定義樣式定義。 |
| <link> | 定義資源引用。 |
| <div> | 定義文檔中的節或區域（塊級）。 |
| <span> | 定義文檔中的行內的小塊或區域。 |
| <font> | 規定文本的字體、字體尺寸、字體顏色。不贊成使用。請使用樣式。 |
| <basefont> | 定義基準字體。不贊成使用。請使用樣式。 |
| <center> | 對文本進行水平居中。不贊成使用。請使用樣式。 |
HTML鏈接
HTML用<a>來添加超鏈接，
有兩種使用 <a> 標簽的方式：
- 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
- 通過使用 name 屬性 - 創建文檔內的書簽
超鏈接形式可以為文字，也可以為圖片。以下是使用圖片作為鏈接的例子：
<p><a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a></p>
超鏈接內容為文字則直接將定義圖片的部分改成文字即可。
target屬性
使用target屬性設置超鏈接文本的顯示位置，如設置target為_blank，超鏈接將會在新窗口打開文本：
<p><a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a></p>
HTML鏈接-name屬性
name 屬性規定錨（anchor）的名稱。
使用 name 屬性創建 HTML 頁面中的書簽。
書簽不會以任何特殊方式顯示，它對讀者是不可見的。
當使用命名錨（named anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
錨的命名方式：
<a name="label">錨（要顯示在頁面上的文本）</a>
示例如下：
首先使用name屬性創建命名錨：
<a name="tips">基本的註意事項 - 有用的提示</a>
然後在同一文檔中創建對錨的鏈接
<a href="#tips">有用的提示</a>
也可在其他頁面中創建指向該錨的鏈接，只要在URL末尾加上#錨名稱即可直接鏈接到這個命名錨：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
註釋：請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href="http://www.w3school.com.cn/html"，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然後創建一個新的請求，就像這樣：href="http://www.w3school.com.cn/html/"。
提示：命名錨經常用於在大型文檔開始位置上創建目錄。可以為每個章節賦予一個命名錨，然後把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科，您會發現其中幾乎每個詞條都采用這樣的導航方式。
提示：假如瀏覽器找不到已定義的命名錨，那麽就會定位到文檔的頂端。不會有錯誤發生。
創建電子郵件鏈接
<p>這是郵件鏈接：<a href="mailto:[email protected]?subject=Hello%20again">發送郵件</a></p>
結果為：這是郵件鏈接： 發送郵件
註意：應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。
另一個創建電子鏈接的方式：
<p>這是另一個郵件鏈接<a href="mailto:[email protected][email protected]&[email protected]
&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發送郵件！</a></p>
HTML學習筆記2