教材：Head First HTML與CSS、XHTML（中文版）
HTML實例分析：
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the Head First Lounge</h1>
<img src="drinks.gif>
<p>
Join us an evening for refreshing elixirs,
coversation and maybe a game or
two of <em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS(Bring your own web server).
</p>
<h2>Directins</h2>
<p>
You'll find us right in the center of
downtown Webville.Come join us!
</p>
</body>
</html>在HTML中註釋可以採用<!--和-->，任何寫在<!--和\-->之間的內容都會被瀏覽器忽略。
<html>HTML從這裏開始
<head>頁面“頭”開始
<title>標籤給頁面一個標題
<body>主體開始
<h1>告訴瀏覽器這是標題
<img src="drinks.gif">在這裏放置圖片drinks.gif
<p>開始一個段落
<h2>子標題第一個HTML：
<html>
<head>
<title>Starbuzz Coffee</title>
</head>
<body>
<h1><Starbuzz Coffee Beverages</h1>
<h2>House Blend,$1.49</h2>
<p>A smooth,mild blend of coffees from Mexico,
Bolivia and Guatemala.</p>
<h2>Mocha Cafe Latte,$2.35</h2>
<p>Expresso,steamed milk and chocolate syrup.</p>
<h2>Cappuccino,$1.89</h2>
<p>A mixture of expresso,steamed milk and foam.</p>
<h2>Chai Tea,$1.85</h2>
<p>A spicy drink made with black tea,spices,
milk and honey.</p>
</body>
</html>tips:寫HTML時把頭部和主體分開。
<h1> Starbuzz Coffee Beverages</h1>整個語句稱爲一個元素，一個元素由閉合標記及它們之間的內容組成。稱一對開始標記和結束標記爲匹配標記。
元素=開始標記+內容+結束標記
CSS：Cascading Style Sheets 級聯樣式表
在上述代碼中加入樣式元素<style>：
<html>
<head>
<title>Starbuzz Coffee</title>
<style type="text/css">
body{
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family:sans-serif;
}
</style>
</head>
<body>
<h1><Starbuzz Coffee Beverages</h1>
<h2>House Blend,$1.49</h2>
<p>A smooth,mild blend of coffees from Mexico,
Bolivia and Guatemala.</p>
<h2>Mocha Cafe Latte,$2.35</h2>
<p>Expresso,steamed milk and chocolate syrup.</p>
<h2>Cappuccino,$1.89</h2>
<p>A mixture of expresso,steamed milk and foam.</p>
<h2>Chai Tea,$1.85</h2>
<p>A spicy drink made with black tea,spices,
milk and honey.</p>
</body>
</html><style>樣式元素中有一個名爲type的屬性，用來告訴瀏覽器所使用樣式的種類，由於即將使用CSS，因此指定爲“text/css”類型：
<style type="text/css">
body{
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family:sans-serif;
}
</style>樣式元素中的屬性用來爲一個元素提供附加信息
background-color：指定背景顏色
margin-left：20% 左邊界設置爲每邊佔頁面的20%
border：1px dotted gray 指定主體周圍邊框線爲點式且顏色爲灰色
padding：10px 10px 10px 10px 在頁面主體周圍創建某種填充
font-family：指定文本使用的字體
CSS含有的body代表“｛“和“｝”之間的所有CSS將應用於HTML<body> 元素中的內容