HeadFirstHTML与CSS（第⼆版）学习笔记
第⼀个聊天室⽂件
<!DOCTYPE html>
<html lang="en"><!-- 告诉浏览器HTML从这⾥开始 -->
<head>页⾯head开始
<meta charset="UTF-8">
<title>Head First Lounge</title>为页⾯指定⼀个标题
</head>head结束
<body>页⾯主体开始
<h1>Welcome to the Head First Lounge</h1>告诉浏览器这是⼀个标题
<img src="../images/drinks.gif">在这⾥插⼊⼀个图⽚
<p>开始⼀个段落
Join us any evening for refreshing elixirs,
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
html和css书籍推荐
downtown Webville. Come join us!
</p>段落结束
</body>页⾯主体结束
</html>告诉浏览器HTML在这⾥结束
效果图：
浏览器会忽略掉HTML⽂档中的空⽩符，制表符，回车和⼤部分空格。实际上浏览器会根据你标记来确定在哪⾥换⾏或分段。
浏览器通常显⽰的标题⼀共有6级。<h1>-<h6>，字体由⼤到⼩。⼀般不会⽤到<h3>以后的标题。HTML⽤<!-- -->来增加注释，将要注释的语句放在它们之间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StarBUzz</title>
</head>
<body>
<h1>StarBuzz Coffee Beverages</h1>
<h2>House Blend, $1.4</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, steamd 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>
简单的StarBuzz⽂件。效果图：
要告诉浏览器页⾯的结构，需要⽤成对的标记包围页⾯内容。
元素=开始标记+内容+结束标记
匹配标记没必要在同⼀⾏上。有些元素采取⼀种简写记法，只有⼀个标记。
认识style元素
<style>元素放在HTML的⾸部⾥，与其他元素类似，<style>有⼀个开始标记和⼀个结束标记。
<style>标记还有⼀个可选的属性：type，告诉浏览器使⽤什么样类型的样式，如CSS或Javascript。
<style type="text/css">
body {
background-color: #d2b48c；设置背景⾊为⼟黄⾊
margin-left: 20%；设置左右外边距分别占页⾯的20%
margin-right: 20%;
border: 2px dotted black；定义页⾯主题周围的边框是虚线，颜⾊为⿊⾊
padding: 10px 10px 10px 10px；在页⾯周围创建⼀些内边距
font-family: sans-serif定义⽂本使⽤的字体
}
</style>
添加的css属性。效果图：
BULLET POINTS
HTML和CSS是我们⽤来创建⽹页的语⾔。
Web服务器存储并提供由HTML和CSS创建的⽹页。浏览器获取页⾯，并根据HTML和CSS显⽰⽹页的内容。HTML是超⽂本标记语⾔的缩写，⽤来建⽴⽹页的结构。
CSS是层叠样式表的缩写，⽤来控制HTML的表现。
通过HTML，我们利⽤标记来标识内容提供结构。把标记和内容称为元素。
元素=开始标记+内容+结束标记
开始标记可以有属性。
结束标记在左尖括号后⾯，标记名前有⼀个/。
⽹页的信息放在<head>元素⾥。
<body>元素⾥的内容就是你在浏览器⾥看到的东西。
⼤多数空⽩符都会被浏览器忽略，不过可以利⽤空⽩符使HTML更有可读性。
可以在<style>元素中写CSS规则，<style>元素总要放在<head>⾥。
可以使⽤css在HTML中指定元素的特性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。