理解ML（标记语言） - zilongxuan001/LearnFreecode GitHub Wiki
存储并提供由HTML和CSS创建的网页，浏览器获取页面，并根据HTML和CSS显示网页内容。
超文本标记语言（HyperText Markup Language）的缩写，用来建立网页的结构。
层叠样式表（Cascading Style Sheets）的缩写，用来控制HTML的表现。
通过HTML，我们利用标记来表示内容提供结构。我们把匹配标记以及标记包围的内容，成为元素。 元素=开始标记+内容+结束标记
<p> Chiina </p>
属性提供一个元素的附件信息。比如
<style>元素的type可以指定是什么类型的样式（比如text/CSS） 可以写成
<style type="text/css">
属性名="属性值"
一个给定元素只能使用某些特定的属性。
参考书《HTML & XHTML: The Definitive Guide》(O' Relly)
所有页面都要有一个
<html>元素，内含一个<head>元素和<body>元素。
放置网页的信息，比如
<title>,<style>，<meta>,<link>等元素。
放的是你在浏览器里看到的东西。
用于放入CSS规则
- 来源：《Head First HTML 与 CSS》(中文第二版)P36，51,52
- 将文字输入到notepad中，【编码】选择【以utf-8格式编码】，保存为
index.html。
Starbuzz Coffee Beverages
House Blend, $1.49
A smooth, mild blend of coffees from Mexico, Bolivia and Guatemela.
Mocha Cafe Latte, $2.35
Espresso, steamed milk and chocolate syrup.
Cappuccino, $1.89
A mixture of expresso, steamed milk and foam.
Chai Tea, $1.85
A spicy drink made with black tea, spices, milk and honey.
2.双击打开index.html，在浏览器中显示如下
添加<h>``<p>元素
添加<html>、<head>、<title>、<body>元素
<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 Guatemela.
</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 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>
效果如下
资料来源：
《Head+First+HTML与CSS（第2版）》，P23
制作一个mission页面，保存为mission.html
<html>
<head>
<title>Starbuzz Coffee's Mission</title>
</head>
<body>
<h1>Starbuzz Coffee's Mission</h1>
<p>To provide all the caffeine that you need to power your life.</p>
<p>Just drink it.</p>
</body>
</html>
浏览器显示如下
资料来源
《Head+First+HTML与CSS（第2版）》，P29
在style里加上body的属性。
<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 Guatemela.
</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 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>
结果如下
资料来源：
《Head+First+HTML与CSS（第2版）》，P31
在mission.html里添加css的body属性。
<html>
<head>
<title>Starbuzz Coffee's Mission</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's Mission</h1>
<p>To provide all the caffeine that you need to power your life.</p>
<p>Just drink it.</p>
</body>
</html>
效果如下
20180608 修改题目，增加"概念"