我學習HTML和CSS的入門書籍是《HTML和CSS入門經典（第七版）》（這里不是在做廣告哦，嘿嘿）由於每天要上課，還要去做實驗，每天大概只有一個多小時的時間學習<br />這些內容，前前后后大概用了兩個星期的時間。好了廢話不多說，這一篇寫HTML的學習記錄，下一篇寫CSS的學習記錄。
<?xml version = "1.0" encording = "UTF-8"?> <!-- 表明網頁時xml文檔，版本為1.0，字符編碼類型為UTF-8 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/1999/xhtml11/DTD/xhtml.dtd"> <!-- 指出該文檔為XNTML1.1文檔，允許網頁瀏覽器檢查文檔，保證代碼滿足XHTML1.1的要求 --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!-- 這個沒說 --> <head> <title>My First Page</title> </head> <body> <p>Hello World!</p> </body> </html>
一個網頁的有的標簽：<html>,<head>,<title>,<body>。可以用標題標簽突出文本，如<h1>,<h2>,<h3>等。下面一些總結:
1.鏈接
鏈接到另一個頁面：
<a href = "url">click here!</a>
這里的下划線是以帶下划線的藍色字體顯示，單擊之后變為紅色。可用CSS修改這些屬性：
a:link{/*鏈接尚未訪問過*/ color:#19619A; /*淡藍色*/ font-weight:bold; /*將鏈接的字體設置為粗體*/ text-decoration:none; /*刪除下划線*/ } a:hover{/*鼠標指向鏈接*/ background-color:gold; font-weight:bold; text-decoration:none; } a:active{/*鏈接被激活，如用鼠標單擊*/ color:red; text-decoration:none; } a:visited{/*鏈接已訪問*/ color:red; font-weight:bold; text-decoration:none; }
可用相對地址鏈接到另一個文件夾的網頁，如：
<a href = "another.html"> click here!</a> <!-- 鏈接到同一個文件夾的網頁 --> <a href = "document/another.html">click here!</a> <!-- 鏈接到另一個文件夾的網頁 --> <a href = "../another.html">click here!</a> <!-- 鏈接到父文件夾下的網頁 -->
在新瀏覽器窗口中打開鏈接：
<a href = "url", target = "_blank">click here!</a> <!-- W3C在XHTML中刪除了target = "_blank" --> <head> <title>My Page</title> <script type = "text/javascript" src = "external.js"></script> </head><!-- 用Javascript來實現 -->
鏈接到網頁內部：
<a href = "#anchor"> click here!</a> <p id = "anchor">I am here</p> <a href = "another.html#anchor">click here!</a> <!-- 鏈接到另一個網頁的特定位置 -->
在網頁中鏈接Email地址：
<a href = "mailto:example@example.com?subject = Question$amp;body = May I ask you a qusetion?">send message to me </a> <!-- subject表示郵件的主題，body表示郵件的內容。這兩個屬性郵件地址之間用“?"隔開，屬性之間用"&"隔開--> <a href = "mailto:example@exaple.com">send message to me</a> <!-- 可用ASCII碼代替字符"a"，可以減少垃圾郵件 -->
2.文本對齊和列表
文本對齊:
<p style = "text-align:center">text</p> <!--text-align樣式規則的默認值為left，可選值有left，center，right--> <div style = "text-align:center">block</div> <!-- 可為塊設置對齊方式 -->
列表：
<ol><!-- 有序列表，自動添加編號，自動縮進和分行--> <li>order one</li> <li>order two</li> <li>order three</li> </ol> <ul><!-- 無序列表，自動添加項目符號，自動縮進和分行--> <li>item</li> <li>item</li> <li>item</li> </ul> <dl><!--自動縮進和分行--> <dt>term</dt> <dd>defination</dd> </dl>
另外，可在<ul>,<ol>,<li>標簽中使用"list-style-type"指定項目符號類型。
<pre>可將文本格式化為等寬字體，並且在<pre>中使用的空格和分行將被保留。
3.圖像
將圖像放到網頁中：
<img src = "myimage.gif" alt = "My Image" title = "My Image" /> <!-- "src"標識圖像的位置； "alt"指定圖像的描述性文本，當圖像不可見時，可看到該屬性指定的文本； "title"提供在圖像可見時對圖像的描述；圖像可以是GIF，PNG，JPEG格式的圖像文件-->
對齊圖像：
<img src = "MyImage.gif" alt = "My Image" style = "float:left"/> <!--文本與圖像的水平對齊，left表示圖像左對齊，文本圍繞在圖像的右邊；right與之相反，沒有center對齊--> <img src = "MyImage.gif" alt = "My Image" style = "vertical-align:text-top"/> <!-- 文本與圖像的垂直對齊: "text-top"表示圖像的頂部與同一行中最高的圖像或文本的頂部對齊，"middle"圖像的中心與同一行中其他內容的中心對齊； "text-bottom"表示圖像的底部與文本的底部對齊；"baseline"表示圖像的底部與文本的基線對齊-->
將圖像變為鏈接：
<a href = "MyImage.gif"><img src = "MyImage.gif" alt = "My image" style = "My image" style = "border-style:none"/></a> <!--通常，網頁瀏覽器會在圖片鏈接的周圍繪制一個彩色矩形，如果不希望顯示之隔邊框，可在<img>中包含style = "borde-style:none"-->
圖像映射：
<map id = "MyImage"> <area shape = "rect" coords = "0,0,100,100" href = "MyImage_1.gif" alt = "MyImage_1" /> <!--"rect"表示該區域是矩形，"0,0,100,100"表示左上角的坐標和右下角的坐標--> <area shape = "cricle" coords = "10,10,5" href = "MyImage_1.gif" alt = "MyImage_2" /> <!--"circle"表示該區域為圓形，"10,10,5"表示圓心坐標和半徑--> <area shape = "poly" coords = "0,0,100,100,234,234,123,123,245,245" href = "MyImage_1.gif" alt = "MyImage_3" /> <!--"poly"表示多邊形，"0,0,100,100,234,234,123,123,245,245"表示所有頂點的坐標--> </map> <img src = "MyImage.gif" alt = "My image" title = "My image" usemap = "#MyImage" style = "border-style:none"/> <!--usemap屬性的值為<map>標簽id的值-->
4.自定義背景和顏色
背景顏色和文本顏色：
<body style = "background-color:green;color:#FF0000"> <!--將背景設置為綠色，文本顏色設定為紅色。<body>中的顏色應用於網頁中所有的文本，但可以在<span>修改color樣式屬性，改變特定單詞或段落的顏色-->
背景圖像：
<body style = "background-image:url(backimage.jpg)"> <!--若要使用透明圖像，由於JPEG不支持透明，GIF支持一種透明色，PNG可以指定范圍，所以最好用PNG格式的圖像-->
好了，這就是我最近學習HTML的簡要總結，謝謝大家的瀏覽。