这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
〇
为什么要学HTML和CSS呢？因为它们是我们创造网页时需要用到的语言工具。
用HTML和CSS写完网页以后，把网页放到服务器上。之后浏览器就可以检索到相应的网页，并且基于其中的HTML和CSS所对应的结构和样式来呈现其中的内容。
HTML tells the browser all about the content and structure of the page.
CSS gives your web pages great style. : )
一、重点
- HTML是什么 + element（元素）
- HTML的基本结构
- style -- basic CSS
二、具体知识点
MDN的HTML介绍是不错的。直接去看就可以了，这里只做简单的总结。
HTML(HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit.
CSS(Cascading Style Sheets) is used to control the presentation/style of your web page.
- HTML不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言
HTML由一系列元素（elements）组成。一个元素 = 开标签 + 内容 + 闭标签。 一对标签（tags）可以为一段文字或者一张图片添加超链接/将文字设置为斜体或加粗etc，总之是使标签中包围的内容以某种想要的方式呈现或工作。当浏览器读取我的HTML时，它会解读包围着文本的标签们——这些标签告诉浏览器该用怎样的结构来展示我的文本内容。
- HTML的基本结构
<!-- Here's my comment. -->
<html>
<head>
<meta charset="utf-8">
<title>my title</title>
</head>
<body>
<h1>my page title</h1>
<h2>my h2 title</h2>
<p>aaaaaaaaaaaaaaaa</p>
</body>
</html>
- 增加一点样式
When the browser displays your HTML, it uses its own built-in default style to present this structure.但这些默认的样式不一定是你想要的。That's where CSS comes in. CSS gives you a way to describe how your content should be presented.
为了增添一点样式，我们需要在HTML中加入一个新的元素 —— the style element.
<!-- Here's my comment. -->
<html>
<head>
<meta charset="utf-8">
<title>my title</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>my page title</h1>
<h2>my h2 title</h2>
<p>aaaaaaaaaaaaaaaa</p>
</body>
</html>
<style type="text/css"> type是style的属性。元素可以有很多属性，可以认为这些属性提供了有关元素的额外信息。
CSS中的body表示这些CSS样式作用于HTML中<body>元素中的内容。
三、总结
一些可以注意的点：
- 浏览器会忽略HTML文档中的tabs, returns, and most spaces。Instead, they rely on your markup to determine where line and paragraph breaks occur.
- 区分HTML和CSS。HTML is all about structure. CSS gives web pages great style.
四、参考
- MDN的HTML介绍
- Head First HTML & CSS C1
