一、认识HTML
1、Web语言
-
HTML（Hypertext Markup Language）：超文本标记语言（HT：超文本；ML：用来描述网页的结构）
-
在HTML中想要加入自己的注释可
采用<!--和-->之间。例如：<!-- here is the beginning of the lounge content -->,"<！-- -->"之间放置的所有内容都会被浏览器忽略
2、编写HTML
-
编写HTML时要把首部和页面主体分开，首部包括
<head>和</head>标记以及它们之间的所有内容，页面主体包括<body>和</body>标记以及它们之间的所有内容。 -
元素 = 开始标记 + 内容 + 结束标记
1、用<html>和</html>标记包围自己的HTML，这会告诉浏览器文件的内容是HTML；
2、增加<head>和</head>标记，其中包含web页面的有关信息，如页面标题（title），在head标记中放入title标记，title总出现在浏览器窗口的顶部；
3、页面主体包含web页面的所有内容和结构，是在浏览器中看到的部分，使用<h1></h1>标记标题，<h2></h2>标记子标题，<p></p>标记包围一个文本块，是一个段落，其中可以有一个或多个句子。
示例：
<html>
<head>
<title>Starbuzz Coffee</title>
</head>
<body>
<h1>Starbuzz Coffee Beverages</h1>
<h2>House Blend, $1.49</h2>
<p>smooth, mild blend of coffees from Mexicco, Bolivia and Guatemala.</p>
<h2>Cafe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, $1.89</h2>
<p>mixture of espresso, steamed milk and foam.</p>
<h2>Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.
</p>
</body>
</html>
- CSS：层叠样式表（Cascading Style Sheets）
style元素：要增加样式，需要在页面中增加一个新的element，即<style>元素
如：<style type="text/css">//使用css来指定"text/css"类型
//在这里定义页面的样式
</style>
- 元素由3部分组成：一个开始标记、内容和一个结束标记，但有些元素有所例外，如
<img> - 所有页面都要有一个
<html>元素，其中要有一个<head>元素和一个<body>元素，网页的信息放在<head>元素里，<body>元素里的内容是在浏览器里看到的东西 - 大多数空白符（制表符、回车、空格）都会被浏览器忽略，不过可以利用空白符让HTML更有可读性
- 可以在
<style>元素中写CSS规则，为HTML网页增加CSS,<style>元素总要放在<head>元素里，headings
二、深入了解超文本
-
<a>元素：链接文本，用于创建指向另一个页面的链接，在浏览器中，链接文本会显示有下划线，指示这是可单击的。 -
<style type="text/css">:type属性指定使用哪一种样式语言，即CSS -
<a href="irule.html">:href属性告诉我们一个超链接的目标文件 -
<img src="sweetphoto.gif">:src属性指定一个img标记显示的图像文件名 -
属性写法：先属性名，后面一个等于号，然后用双引号括起来的属性值
三、web页面建设：构建模块
-<q>元素：标记引用，用于短引用，作为现有段落的一部分，代替双引号，可以使页面更结构化，更有意义。
-<blockquote>元素：用于较长的引用，需要单独显示，自成一段。
-内联(inline)元素：在页面文本流中总在“行内”出现，显示在所在的段落中，如<q>,<a>,<em>
-块（block）元素:显示时就好像前后各有一个换行,将内容分块显示，如<h1>...<h6>,<p>,<blockquote>
-<br>元素：换行，在希望换行的地方增加一个<br>元素，即插入一个“换行符”
-空元素（void元素）：没有任何内容的元素，使用简写来表示这个元素，可提高效率，如<br>,<img>
-<li>（list item）元素：列表项
-用<ol>（ordered list）或<ul>（unordered list）元素包围列表项，若用<ol>元素包围列表项，则这些列表项将作为一个有序列表显示，若使用<ul>,则列表将显示为一个无序列表，列表项放在元素中间，成为它的内容，<ol>,<ul>元素设计为只能包含<li>元素
-在列表中可以嵌入另一个列表，即嵌套列表
<ol>
<li>Charge Segway</li>
<li>Pack for trip
<ul>
<li>cell phone</li>
<li>iPod</li>
<li>a protein bar</li>
</ul>
</li>
<li>Call mom</li>
</ol
-特殊字符：>字符的缩写为>；<字符的缩写为<；&字符：&
-<code>元素用来显示计算机程序代码
-<em>:用来标记想用不同方式展示的文本，比如想强调一个要点
-<time>:告诉浏览器这个内容是一个日期或时间，或同时包含日期和时间
-<strong>:用来标记希望特别强调的文本
-<pre>:希望浏览器按输入的方式原样显示文本时，使用这个元素来指定文本的格式
-title属性：创建工具提示，如<a href="http://wickedlysmart.com/buzz/#Coffee"title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.为“Caffeine Buzz”增加了“Read all about caffeine on the Buzz”的内容，即鼠标放在“Caffeine Buzz”上时会显示“Read all about caffeine on the Buzz”，可以为任何元素增加title属性
<html>
<head>
<title>My Trip Around the USA on a Segway</title>
</head>
<body>
<h1>Segway'n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2012</h2>
<img src="images/segway2.jpg">
<p>
Well I made it 1200 miles already, and I passed
through some interesting places on the way:
</p>
<ol>
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Truth or Consequences, NM</li>
<li>Why, AZ</li>
</ol>
<h2>July 14, 2012</h2>
<p>
I saw some Burma Shave style signs on the side of the
road today:
</p>
<blockquote>
Passing cars, <br>
When you can't see, <br>
May get you, <br>
A glimpse, <br>
Of eternity. <br>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2>June 2, 2012</h2>
<img src="images/segway1.jpg">
<p>
My first day of the trip! I can't believe I finally got
everything packed and ready to go. Because I'm on a Segway,
I wasn't able to bring a whole lot with me:
</p>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
<p>
Just the essentials. As
Lao Tzu would have said, <q>A journey of a
thousand miles begins with one Segway.</q>
</p>
</body>
</html>
四、连接
-http: :超文本传输协议（HyperText Transfer Protocol），是在web上传输超文本文档的公认的一种方法（协议）
-网站名：www.starbuzzcoffee.com
-域名：starbuzzcoffee.com
-index.html：从根文件夹到资源的绝对路径
-统一资源定位符（Uniform Resource Locator，URL）：在浏览器中输入的web地址，是一个全局地址，可以用来定位web上的任意资源，包括HTML页面、音频、视频和很多其他形式的web内容
-使用target打开新窗口：要在一个新窗口中打开一个页面，需要告诉浏览器要打开的窗口名，若未告诉浏览器要使用哪个特定的窗口，浏览器就会在同一个窗口中打开这个页面，可以为<a>元素增加一个target属性，告诉浏览器使用一个不同的窗口，若使用“_blank”作为目标，浏览器就总是打开一个新窗口显示页面
<html>
<head>
<title>Starbuzz Coffee</title>
<style type="text/css">
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, mild blend of coffees 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 id="Chai">Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
<p><a href="mission.html">Read about our Mission</a>.<br>
Read the <a target=" _blank" href="http://wickedlysmart.com/buzz/#Coffee"
title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.
</p>
</body>
</html>
五、为页面增加图像
-JPEG：最适合连续色调图像，如照片，可以包含多达1600万中不同颜色的图像，是一种“有损”格式，因为缩小文件大小时会丢掉图像的一些信息，不支持透明度，文件比较小，以便web页面更高效的显示，不支持动画
-PNG：最适合单色图像和线条构成的图像（如logo、剪切画和图像中的小文本），PNG可以表示包含上百万钟不同颜色的图像，PNG有三种：PNG-8、PNG-24、PNG-32，取决于需要表示多少种颜色，PNG会压缩文件来缩小文件大小，不过不会丢掉信息，所以是一种“无损”格式，允许将颜色设置为“透明”，使图像下面的东西可以显示出来，与JPEG文件相比，PNG文件更大一些，不过取决于使用的颜色数，可能比相应的GIF文件小，也可能更大
-GIF：可以表示最多256种不同颜色的图像，是一种“无损”格式，支持透明度，不过只允许一种颜色设置为“透明”，是web最早的图像格式，往往比相应的JPEG文件大，支持动画
-照片和复杂图像使用JPEG，单色图像、logo和几何图形使用PNG或GIF
-<img src="images/drinks.gif">
<img>元素是一个内联元素，不会在前面或后面插入换行，是一个void元素
src属性指定了在web页面上显示的图像文件位置
src属性不只是用于相对链接，还可以在src属性中放入URL，如
`<img src="www.starbuzzcoffee.com/images/corp…"
alt="The typical new pencil can draw a line 35miles long.">`
alt属性需要指定描述这个图像的一些文本，如果图像未能显示，就会使用这个文本来取代它，显示alt属性，如通过电话为某个人读一个web页面，读到图像时，会读出alt文本来代替图像
-调整图像大小：<img src="images/drinks.gif"width="48" height="100">宽度和高度都使用像素指定，若未指定，浏览器在页面中显示这个图像之前会自动确定图像的大小
<html>
<head>
<title>myPod</title>
<style type="text/css">
body {
background-color: #eaf3da;
}
</style>
</head>
<body>
<p><img src="logo/mypod.png" alt="myPod logo"></p>
<h1>Welcome to myPod</h1>
<p>
Welcome to the place to show off your iPod, wherever you might be.
Wanna join the fun? All you need is any iPod, from the early classic
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest
iPod Video, and a digital camera. Just take a snapshot of your iPod in
your favorite location and we'll be glad to post it on myPod. So, what
are you waiting for?
</p>
<h2>Seattle, Washington</h2>
<p>
Me and my iPod in Seattle! You can see the
Space Needle. You can't see the 628 coffee shops.
</p>
<p>
<a href="html/seattle_video_med.html">
<img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA">
</a>
<a href="html/seattle_classic.html">
<img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
</a>
<a href="html/seattle_shuffle.html">
<img src="thumbnails/seattle_shuffle.jpg" alt="A iPod Shuffle in Seattle, WA">
</a>
<a href="html/seattle_downtown.html">
<img src="thumbnails/seattle_downtown.jpg" alt="An iPod in downtown Seattle, WA">
</a>
</p>
<h2>Birmingham, England</h2>
<p>
Here are some iPod photos around Birmingham. We've obviously got some
passionate folks over here who love their iPods. Check out the classic
red British telephone box!
</p>
<p>
<a href="html/britain.html">
<img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box">
</a>
<a href="html/applestore.html">
<img src="thumbnails/applestore.jpg" alt="An iPod at the Birmingham Apple store">
</a>
</p>
</body>
</html>
六、标准及其他
-HTML5是当前的HTML标准，万维网协会（world wide web consortium W3C）是定义HTML标准的标准组织
-文档类型定义（doctype）用来告诉浏览器使用的HTML版本
-<meta>标记：字符编码，告诉浏览器页面使用了哪一种字符，为服务器提供的文件的编码要与<meta>一致，放在<head>元素中，在<head>元素中所有其他元素上面（<title>元素上面）
-<meta charset="utf-8">
charset属性：指定字符编码，属性值是使用的字符编码类型
utf-8:是Unicode系列中的一个编码，web页面中使用的就是“utf-8”
alt属性是<img>元素中的必要属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src="images/drinks.gif" alt="Drinks">
<p>
Join us any evening for refreshing
<a href="beverages/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 out our
<a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
七、css入门
-要为HTML直接增加css样式，需要在<head>元素中增加开始和结束style标记，css规则放在<style>,</style>之间
如:
<style>
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
</style>
-我们只能对body中的元素增加样式
-link元素：链接到外部样式表，是一个void元素，没有结束标记
如：<link type="text/css" rel="stylesheet" href="lounge.css">
rel属性指定了HTML文件与所链接的文件之间的关系，stylesheet为样式表
-注意：使用link元素则不再需要style元素
font-family：改变字体样式属性
-要在css中写注释，只需要把注释包围在/*和*/之间
css编程：
body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p.greentea {
color: green;
}
引用css：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge Elixirs</title>
<link type="text/css" rel="stylesheet" href="../lounge.css">
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Green Tea Cooler</h2>
<p class="greentea">
<img src="../images/green.jpg" alt="Green Tea Cooler">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
<h2>Raspberry Ice Concentration</h2>
<p class="raspberry">
<img src="../images/lightblue.jpg" alt="Raspberry Ice Concentration">
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<p class="blueberry">
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir">
Blueberries and cherry essence mixed into a base
of elderflower herb tea will put you in a relaxed
state of bliss in no time.
</p>
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast">
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
<p>
<a href="../lounge.html">Back to the Lounge</a>
</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css">
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<p>
<img src="images/drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing
<a href="beverages/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 out our
<a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
css属性：
color：使用color来设置文本元素的字体颜色
font-weight:控制文本的粗细，可以用它设置粗体
left：指定一个元素的左边所在位置
line-height:设置一个文本元素的行间距
top：控制元素顶部的位置
background-color:控制元素的背景颜色
border：在一个元素周围加边框，可以有一个实体边框、凸起边框、虚线边框。。。
padding：如果在一个元素边缘和它的内容之间需要有空间，可以使用padding（内边距）
font-size:让文本更大或更小
text-align:使用这个属性将文本左对齐、居中或右对齐
letter-spacing:能够在字母之间设置间距，如：Like this
font-style:设置斜体文本
list-style:允许改变列表中列表项的外观
background-image:用这个属性在元素后面放置一个图像
八、增加字体和颜色样式
-用font-family属性定制页面中使用的字体：
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
-用font-size属性控制字体大小
body {
font-size: 14px;
}
-用color属性为文本设置颜色
body {
color: silver;
}
-用font-weight属性影响字体的粗细
body {
font-weight: bold;
}
-用text-decoration属性为文本增加更多风格,包括上划线、下划线、删除线
body {
text-decoration: underline;
}
-倾斜文本：font-style: oblique
css：
@font-face {
font-family: "Emblema One";
src: url("./EmblemaOne-Regular.woff"),
url("./EmblemaOne-Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, h2 {
color: #cc6600;
border-bottom: thin dotted #888888;
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Trip Around the USA on a Segway</title>
<link type="text/css" rel="stylesheet" href="journal.css">
</head>
<body>
<h1>Segway'n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2012</h2>
<p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico"></p>
<p>
Well I made it 1200 miles already, and I passed
through some interesting places on the way:
</p>
<ol>
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Truth or Consequences, NM</li>
<li>Why, AZ</li>
</ol>
<h2>July 14, 2012</h2>
<p>
I saw some Burma Shave style signs on the side of the
road today:
</p>
<blockquote>
<p>
Passing cars, <br>
When you can't see, <br>
May get you, <br>
A glimpse, <br>
Of eternity. <br>
</p>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2>June 2, 2012</h2>
<p><img src="images/segway1.jpg" alt="The first day of the trip"></p>
<p>
My first day of the trip! I can't believe I finally got
everything packed and ready to go. Because I'm on a Segway,
I wasn't able to bring a whole lot with me:
</p>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
<p>
Just the essentials. As
Lao Tzu would have said, <q>A journey of a
thousand miles begins with one Segway.</q>
</p>
<p>
To do list:
</p>
<ul>
<li>Charge Segway</li>
<li>Pack for trip
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>a protein bar</li>
</ul>
</li>
</ul>
</body>
</html>
九、盒模型
border-style：边框样式
-solid：实线
-double：双线
-groove：槽线
-outset：外凸
-dotted：虚线
-dashed：破折线
-inset：内凹
-ridge：脊线
-border-width:边框宽度
-border-color:边框颜色
-指定某一边边框：border-top-color
-border-radius:15px;（指定边框圆角）
body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}
h1, h2 {
color: #007e7e;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 130%;
}
#guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #444444;
border-color: white;
border-width: 1px;
border-style: dashed;
background-color: #a7cece;
padding: 25px;/*在内容的四周（上、下、左、右）增加25像素的内边距*/
padding-left: 80px;
margin: 30px;/*在内容四周增加30像素的外边距*/
margin-right: 250px;/*右外边距为250像素*/
background-image: url(images/background.gif);
border-radius: 15px;
background-repeat: no-repeat;/*图像显示一次，不重复*/
background-position: top left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css"
media="screen and (min-width: 481px)">
<link type="text/css" rel="stylesheet" href="lounge-mobile.css"
media="screen and (max-width: 480px)">
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">
</head>
<body>
<p><img src="images/logo.gif" alt="Head First Lounge"></p>
<h1>Welcome to the Head First Lounge</h1>
<p>
The Head First Lounge is, no doubt, the biggest trendsetter in Webville.
Stop in to sample the eclectic offering of elixirs, teas, and coffees,
or, stay a bit longer and enjoy the multicultural culinary menu that
combines a harmony of taste, texture, and color with the best in fresh
and healthy ingredients.
</p>
<p>
During your stay at the lounge, you'll enjoy a smooth mixture of
ambient and mystic sounds, filling the lounge and adding an extra dimension
to your dining experience. The decor surrounds you with the relaxing sentiments
of sights from eras past. And, don't forget, the lounge offers free wireless
access to the Internet, so bring your laptop.
</p>
<p id="guarantee">
Our guarantee: at the lounge, we're committed to providing you,
our guest, with an exceptional experience every time you visit.
Whether you're just stopping by to check in on email over an
elixir, or are here for an out-of-the-ordinary dinner, you'll
find our knowledgeable service staff pay attention to every detail.
If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
<p>
But that's not all; at night, join us in the backroom as our resident
DJ spins a choice selection of trance and drum&bass beats across
our spacious tiki-themed dance floor. Or just hang out in one of our
comfy white vinyl booths at the dance bar. You can have your elixirs
delivered from the main lounge right to the dance floor. If you've
had enough of the beat, just head back to the lounge area to relax.
And, no matter where you find yourself in the lounge, you'll always be
connected with our wireless Internet access.
</p>
<p>
Now that you've experienced the lounge <em>virtually</em>, isn't
it time to check us out <em>for real</em>? We're located right
in the heart of Webville, and we've created some
<a href="about/directions.html"
title="Detailed Directions to the Lounge">detailed directions</a>
to get you here in record time. No reservations necessary;
come and join us anytime.
</p>
<h2>Weekly Elixir Specials</h2>
<p>
<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
</p>
<h3>Lemon Breeze</h3>
<p>
The ultimate healthy drink, this elixir combines
herbal botanicals, minerals, and vitamins with
a twist of lemon into a smooth citrus wonder
that will keep your immune system going all
day and all night.
</p>
<p>
<img src="images/chai.gif" alt="Chai Chiller Elixir">
</p>
<h3>Chai Chiller</h3>
<p>
Not your traditional chai, this elixir mixes maté
with chai spices and adds an extra chocolate kick for
a caffeinated taste sensation on ice.
</p>
<p>
<img src="images/black.gif" alt="Black Brain Brew Elixir">
</p>
<h3>Black Brain Brew</h3>
<p>
Want to boost your memory? Try our Black Brain Brew
elixir, made with black oolong tea and just a touch
of espresso. Your brain will thank you for the boost.
</p>
<p>
Join us any evening for these and all our
other wonderful
<a href="beverages/elixir.html"
title="Head First Lounge Elixirs">elixirs</a>.
</p>
<h2>What's playing at the Lounge</h2>
<p>
We're frequently asked about the music we play at the lounge, and no wonder,
it's great stuff. Just for you, we keep a list here on the site, updated weekly.
Enjoy.
</p>
<ul>
<li>Buddha Bar, Claude Challe</li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
<p>
© 2012, Head First Lounge<br>
All trademarks and registered trademarks appearing on this site are
the property of their respective owners.
</p>
</body>
</html>
