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