HTML基礎學習02
HTML CSS
如何使用樣式
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式：
外部樣式表
當樣式需要被應用到多個頁面的時候，外部樣式表將是最理想的選擇，使用外部樣式表可以通過更改一個文件來改變整個網站的外觀。
<head><link rel="stylesheet" type="text/css" href="mystle.css"></head>
內部樣式表
當單個文件需要特別的樣式時，就可以使用內部樣式表。可以在head部分通過<style>標簽定義內部樣式表。
<head> <styletype="text/css"> body { background-color:yellow; color:red; } p{margin-left:20px} </style> </head>
內聯樣式
當特殊的樣式需要應用到個別元素時，可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何css屬性。
<p style="font-family:幼圓;font-size:40px;color:red">這是一個段落</p>
HTML 鏈接
HTML 超鏈接（鏈接）
超鏈接可以是一個字、一個詞或一組詞，也可以是一幅圖片，你可以點擊這些內容來跳轉到新的文檔或者當前文檔的某個部分。當你吧鼠標指針移動到網頁中的某個鏈接上時，箭頭會變成一只小手。
我們通過使用 <a> 標簽在 HTML 中創建鏈接。
有兩種使用 <a> 標簽的方式：
- 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
- 通過使用 name 屬性 - 創建文檔內的書簽
HTML 鏈接 - target 屬性
使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔：
<a href="http://www.baidu.com">百度一下</a><!--默認在當前頁面內部打開一個網頁--> <a href="http://www.baidu.com" target="_blank">百度一下</a><!--如果把鏈接的 target 屬性設置為 "_blank"，該鏈接會在新窗口中打開。--> <a href="http"//www.baidu.com"><img src="/image/01.gif"/></a><!--使用圖像來作鏈接-->
HTML 鏈接 - name 屬性
name 屬性規定錨（anchor）的名稱。
您可以使用 name 屬性創建 HTML 頁面中的書簽。
書簽不會以任何特殊方式顯示，它對讀者是不可見的。
當使用命名錨（named anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
命名錨的語法：
<a name="label">錨（顯示在頁面上的文本）</a>
提示：錨的名稱可以是任何你喜歡的名字。
提示：您可以使用 id 屬性來替代 name 屬性，命名錨同樣有效。
實例
首先，我們在HTML文檔中對錨進行命名（創建一個書簽）
<a href name="tips">基本註意事項 - 有用的提示</a>
然後，我們在同一個文檔中創建指向該錨的鏈接：
<a href="#tips">有用的提示</a>
也可以在其他頁面中創建指向向該錨鏈接：
<a href="http://www.baidu.com#tips">有用提示</a>
創建電子郵件鏈接：
<html> <body> <p>這是郵件鏈接： <a href="mailto:[email protected]?subject=Hello%20again"></a> <p> <b>註意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。 </p> </body> </html>
鏈接到同一個頁面的不同位置
<html> <body> <p> <a href="#C4">查看 Chapter 4。</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p> </body> </html>
HTML 圖像
圖像標簽（<img>）和源屬性（Src）
在HTML中，圖像油<img>標簽定義。<img>是空標簽和<br/>折行標簽一樣它只包含屬性，並且沒有閉合標簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src指“source”。源屬性的值是圖像的URL地址。
定義圖像的語法是：
<img src="url"/><!--URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位於 www.w3school.com.cn 的 images 目錄中，那麽其 URL 為 http://www.w3school.com.cn/images/boat.gif。-->
替換文本屬性（Alt）
alt屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat"/><!--alt屬性用於當圖片不能正常顯示的替換文本-->
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。
背景圖片：
<html> <boby background="../images/QQ圖片20170615160333.jpg"> <h3>背景圖片</h3> <p>gif和jpg文件都可用作HTML背景</p> <p>如果圖像小於頁面，圖像就會進行重復</p> </body> </html>
HTML基礎學習02