HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。
屬性總是以名稱/值對的形式出現，比如：name="value"。
屬性總是在 HTML 元素的開始標簽中規定。
屬性例子 1:
<h1> 定義標題的開始。
<h1 align="center"> 擁有關于對齊方式的附加信息。
屬性例子 2:
<body> 定義 HTML 文檔的主體。
<body bgcolor="yellow"> 擁有關于背景顏色的附加信息。
屬性例子 3:
<table> 定義 HTML 表格。
<table border="1"> 擁有關于表格邊框的附加信息。
完整的 HTML 參考手冊提供了每個 HTML 元素可使用的合法屬性的完整列表：
HTML參考手冊：http://www.w3school.com.cn/tags/index.asp
標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。<h1>
定義最大的標題。<h6> 定義最小的標題。
<hr /> 標簽在 HTML 頁面中創建水平線。可用于分割元素
段落是通過 <p> 標簽定義的。
① 使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br />
標簽代替它。
② 如果希望在不產生一個新段落的情況下進行換行（新行），使用 <br /> 標簽
style 屬性用于改變 HTML 元素的樣式。
style 屬性的作用是提供了一種改變所有 HTML 元素的樣式的通用方法。通過 HTML 樣式，
能夠通過使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨立的樣式表中
（CSS 文件）進行定義。
background-color 屬性為元素定義了背景顏色，如：<body style="background-color:yellow">
font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸。
text-align 屬性規定了元素中文本的水平對齊方式：<h1 style="text-align:center">This is a
heading</h1>,可將center改為left,rght實現不同的效果。
① HTML <q> 元素定義短的引用。瀏覽器通常會為 <q>
元素包圍引號。
<p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>
② 用于長引用的 HTML <blockquote>，HTML <blockquote> 元素定義被引用的節。
瀏覽器通常會對 <blockquote> 元素進行縮進處理。
<p>以下內容引用自 WWF 的網站：</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> 五十年來，WWF 一直致力于保護自然界的未來。 世界領先的環保組織，WWF 工作于 100 個國家， 并得到美國一百二十萬會員及全球近五百萬會員的支持。 </blockquote>
③ 用于縮略詞的 HTML <abbr> HTML <abbr> 元素定義縮寫或首字母縮略語。
對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜索引擎提供有用的信息。
有以下三種方式來插入樣式表：
① 外部：當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，
你就可以通過更改一個文件來改變整個站點的外觀。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
② 內部：當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過
<style> 標簽定義內部樣式表。
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
③ 內聯：當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。
使用內聯樣式的方法是在
相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。
以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。
點擊鏈接可以從一張頁面跳轉到另一張頁面。
我們通過使用 <a> 標簽在 HTML 中創建鏈接。
有兩種使用 <a> 標簽的方式：
① 使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。如果把鏈接的 target
屬性設置為 "_blank"，該鏈接會在新窗口中打開。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
② 鏈接到同一個頁面的不同位置：給該位置的標題加name屬性，然后添加鏈接，
注意在添加鏈接時要在name的值前面添加"#",如：
<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>
圖像標簽（<img>）和源屬性（Src）。在 HTML 中，圖像由 <img> 標簽定義。
<img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。要在頁面上顯示圖像，
你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
語法：
<img src="url" />
瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，
那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
① 替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，
瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，
這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
② 設置圖片背景
<body background="/i/eg_background.jpg">
③ align屬性可以設置圖片的位置，如：
<p> <img src ="/i/eg_cute.gif" align ="left"> 帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的左側。 </p>
④ height,width屬性設置圖片大小，如：
<img src="/i/eg_mouse.jpg" width="50" height="50">
⑤ 圖像鏈接：
<a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a>
⑥<area>使圖片不同區域鏈接不同網址：
map定義圖像地圖，將不同的區域量化
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map>
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），
每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），
即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
下面是一個兩行兩列的表格：
<table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
① 如果不定義邊框屬性，表格將不顯示邊框。使用屬性border來定義邊框，如：
<table border="1">
②表格的表頭使用 <th> 標簽進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文本。
<html> <body> <h4>表頭：</h4> <table border="1"> <tr> <th>姓名</th> <th>電話</th> <th>電話</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>垂直的表頭：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th>電話</th> <td>555 77 854</td> </tr> <tr> <th>電話</th> <td>555 77 855</td> </tr> </table> </body> </html>
③空單元格問題：在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格
是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。為了避免這種情況，
在空單元格中添加一個空格占位符，就可以將邊框顯示出來，如：
<td> </td>
HTML 支持無序、由序和定義列表
① 無序列表：
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始于 <ul> 標簽。每個列表項始于 <li>。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
② 有序列表：
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
③ 定義列表：
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt>
開始。每個自定義列表項的定義以 <dd> 開始。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
④ 可以用type來改變每個列表項前面的標記：
<ul type="disc"> 實心圓點 <ul type="circle"> 空心圓點 <ol type="A"> A,B,C... <ol type="i"> 小寫羅馬
大多數 HTML 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時，通常會以
新行來開始（和結束），內聯元素在顯示時通常不會以新行開始。
① <div>
HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。
使用 <table> 元素進行文檔布局不是表格的正確用法。<table>
元素的作用是顯示表格化的數據。
② <span>
HTML <span> 元素是內聯元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。
對 HTML 進行分類（設置類），使我們能夠為元素的類定義 CSS 樣式。
為相同的類設置相同的樣式，或者為不同的類設置不同的樣式。
① 分類塊級元素
HTML <div> 元素是塊級元素。它能夠用作其他 HTML 元素的容器。
設置 <div> 元素的類，使我們能夠為相同的 <div> 元素設置相同的類：
實例：
<!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </body> </html>
② 分類行內元素，HTML <span> 元素是行內元素，能夠用作文本的容器。
設置 <span> 元素的類，能夠為相同的 <span> 元素設置相同的樣式。
實例：
<!DOCTYPE html> <html> <head> <style> span.red {color:red;} </style> </head> <body> <h1>My <span class="red">Important</span> Heading</h1> </body> </html>
【 微信掃一掃 】
