静态页面制作:3HTML标签和属性
Don’t be evil 一直是谷歌谷歌广为人知的口号，但是现在这个口号要换了，新的口号是“让世界变得更美好”。
我们在学习标签和属性之前，首先要说一下Chrome浏览器，
在上一个博客中，我们就已经说过选择谷歌浏览器的原因有两个，第一是因为市场占有率，
第二就是因为有强大的开发者工具，那么今天我们首先来看一下，谷歌浏览器可以给我们带来的便捷！
怎样打开开发者工具，首先我们使用Chrome打开index.html文件
打开方式1：视图-开发者-开发者工具
打开方式2：在网页上点击右键-检查
介绍面板
透过上图，我们隆重的介绍一下Chrome开发者工具，整图是调出面板的界面。
我们着重看一下使用红线框起来的部分。
看标记1，这一行是标签栏，我们这里就使用第一个标签Elements。
看标记2,也就是网页源代码。
标记3，实际上是跟当前选中的元素有关。
现在我们着重看一下标记2，也就是我们的源代码。
我们看着图片回顾我们sublime中写的代码，有没有感觉多了很多。
我们在sublime中只写了<div><h1>Hello World!</h1></div>, 但现在标记2的面板中，明显多了好多。
我们把多出来的挑选出来，然后分析一下。
一共有三个，第一个是<html></html>,第二个是<head></head>,第三个是<body></body>, 这三个不速之客到底是谁。
这三个不速之客，即使我们在sublime中不写，但是浏览器也会帮助我们渲染出来。可见有多么的重要。那么我们首先来说一下html标签。
html其实很简单，就是告诉浏览器，这是html文档。html文档其实跟我们写的论文差不多，分为两个部分。
有摘要部分和正文部分，我们先说一下正文部分。
正文部分，其实就是body标签围起来的部分，也就是用户可以看到的部分。
比如说div、h1、Hello World! 这些都属于正文部分，就在body里面。
摘要部分
摘要部分就是head标签中的，用户可能看不到，但是非常重要。
大家是否还记得我们在第一天的时候埋下了一个伏笔，就是只能写英文，例如Hello World！
一定不能写中文，那么现在我们来解决一下这个问题。
如果有人测试写中文，应该就发现，当在sublime中输入中文的时候，
在浏览器中显示出来的并不是中文，也不是某国的语言，而是乱码。
这种乱码是需要我们为浏览器指定一本字典才可以解决的。
那么为浏览器指定一本字典这个事就需要在<head></head>标签之中去写。
那么如何去为浏览器指定字典，我们来分下一下。
我在这里呢，起来个名字叫做标签又见标签。其实在html里面很多很多东西，都需要从标签开始。
我们之前已经接触过好几种标签了，比如下面这几种：
上面我们列举的这几种标签都是双标签，也就是有首标签，有尾标签。
首尾标签之间就是我们的内容区域。那么现在我们需要引入一个新的标签。
首先我们需要考虑的一个事是，给浏览器加字典这个事，好像不需要给围住。
给它指定字典就好了，也不需要用户看到，也不需要给与什么反馈。
那么我们现在就需要引入一个新的知识，那就是在html中，有成双成对出现的标签，叫做双标签，
还有一种标签，不需要成双成对的来，那就是单标签。
单标签是不需要成对出现就可以表达含义的标签。
接下来就说说我们遇到的第一个单标签，meta!
meta标签是HTML语言head区的一个辅助性标签。
在html中指的是基础信息的意思，很泛指。
如果直接将meta写上去，实际上是不会产生任何效果的。
如果希望它有效果，就需要为这个标签添加一些新的东西。
并且无论在哪个html文件中都可以见到它，那单标签该怎么写呢？
单标签写法很简单，就是没有尾标签，和首标签的写法是一样的。
写法我们知道了，那么我们现在还有清楚一个东西，那就是在HTML中标签起到的作用是非常重要的。
我们说HTML是超文本标签语言，标签是HTML世界里的一等公民，
那么现在我们需要引入一个新的东西，是配合标签使用的，那就是属性！
我们刚刚说过，meta单标签如果写出来是没有任何作用的，如果想要起到效果就需要属性的配合，
有了属性就可以为标签添加更多丰富的信息。
那么接下来，我们就要为meta标签添加属性。
现在标签有了，属性也知道了。那么怎么写呢，现在我们来介绍一下。
写法其实很简单，我们只需要把meta标签撑开一点，然后协上一个属性名称 = “属性值”，
那么如果我们想要给浏览器添加一本字典属性的话，该怎么弄呢。
其实就是<meta charset=“urt-8”>，这就是属性=“属性值”。
这里需要强调的一点是，属性值是用两个英文的双引号引起来的，这点非常重要，
如果没有，那就不对，非常敏感。那么我们来解释一下这行代码。
charset全拼就是character(字符) set（集）的缩写。
UTF-8的全拼是8-bit Unicode Transformation Format。
翻译过来就是万国字典，有了它浏览器就可以正确的显示中文了。
那么现在我们需要回到sublime将万国字典加上，同时我们还需要把浏览器给我们加上的那三个标签写上，
能不劳烦浏览器干的，就一定要自己干。
为了测试我们的万国字典可以正常的显示中文，这里我们将首标签写上中文“课后帮”。
这样我们就把该写的代码写上了，并且可以正常的显示中文。
那么现在我们还需要做一件事，就是加一个p标签，其实之前我们就有提到，但是一直没有用。那么现在我们用一下。
在h1标签下面写一段p标签，里面内容写homework Helper。
现在我们已经为课后帮添加了一个h1标签，也添加了一个p标签，但是其实和我们最终的效果还相差甚远。我们来对比一下！
左侧是我们现在完成的，右侧是我们最终的效果图。 我们发现内容现在是一样了，但是样式还是相差太多了。
最终效果中的课后帮的颜色是偏红色的，而且HomeWord Helper在课后帮的右上角，那么这种样式该如何实现呢。
首先我们还是利用谷歌的开发者工具，来看看到底如何才能够达到我们想要的效果。
当我们打开面板的时候，点击到课后帮这行代码，然后我们它进行调试。
要想内容有样式，我们通过面板来解释一下样式是什么东西。
看一下数字1，这个我们前面提到过，elements是元素的意思，也就是我们html源代码中所包含的元素。
数字2,就是我们写的具体元素内容。
数字3，styles是样式的意思。看到这个我们应该是找到关键的地方了，
然后继续看数字4，element.style：element(元素) .（的）style（样式），也就是元素的样式。
就它了！如果我们想要改变标签中内容的样式，就通过它。
找到它了我们就需要往里面填写具体内容了！
那么具体该如何添加样式，我们利用下一节的内容进行讲解。
