第一个程序
<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自带的文本编辑。
要在偏好设置中设置为“纯文本”。
并且在编辑中关闭“智能引号”功能。
第二章（主要讲的图片及超链接的引入方式）
<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之间的内容的变为链接。
相对路径：
为了找到html文件和图片。以你所在的文件的视角寻找目标。
../drinks.gif
".."表示去上一层路径。
