第一個程序
<html>
<head>
<title>Starbuzz Coffee Beverages</title>
<style>
body{
background-color:#d2b48c;
margin-left:20%;
margin-right:20%;
border:2px dotted black;
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,milm blend of coffee from Mexico,Bolivia and Guatemala.</p>
<h2>Mocha Cafe Latte,$2.35</h2>
<p>Espresso,steamed milk and chocolate syrup.</p>
<h2>Cappuccino,$1.89</h2>
<p>A mixture of espresso,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>
效果：
Paste_Image.png
- 沒有使用編輯器軟件，用的MAC自帶的文本編輯。
要在偏好設(shè)置中設(shè)置為“純文本”。
并且在編輯中關(guān)閉“智能引號”功能。
第二章（主要講的圖片及超鏈接的引入方式）
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<a href="directions.html"><img src="2/drinks.gif"></a>
<p>
Join us any evening for refreshing elixirs,
refreshing <a href="1/elixir.html">elixirs</a>,
conversation 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>Directions</h2>
<p>
You'll find us right in the center
of downtown Webville.
If you need help finding us,check our
<a href="1/directions.html">detailed directions</a>
Come join us!
</p>
</body>
</html>
一個例子就可以說明：
<a href="directions.html"><img src="2/drinks.gif"></a>
效果為點擊圖片，就可以打開連接。
被夾在a 和/a之間的內(nèi)容的變?yōu)殒溄印?/p>
相對路徑：
為了找到html文件和圖片。以你所在的文件的視角尋找目標(biāo)。
../drinks.gif
".."表示去上一層路徑。
