本节课我继续带着大家学习html
上节课的话我们已经有了一个页面，大概长成这个样子：
<!DOCTYPE html> <html lang="en"> </html>
双击这个文件打开预览，什么都没有
好的，从现在开始我们给它加一些内容
根据html语法规定，html标签里的直系子标签有head body等
所以你的脑海中应该想着我们的页面变成了这样
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>
先来说说head吧
head里面又可以放title meta style link script标签
现在先记住
style里面放css代码
link可以将外部css代码链接进来
具体style里面的代码怎么写，以及为什么需要用link标签将外部代码链接进来，以及如何链接等等一系列问题 等我们讲到css的时候再详细说
script里面99.9%的情况下放的是Javascript代码 也等我们讲到Js的时候再详细说
至于meta标签的话，个人感觉在移动端自适应那一块威力比较大，web端的话基本上就是做一些标识等等，大家如果想了解的话可以自己百度一下
这个也没什么好说的
这样我们就只剩title了
title顾名思义 题目，对吧，但是千万不要把它和我们网页上那个大大的题目联系在一起
它们八竿子打不到
title里面放的内容是显示在标签上的，例如我们写了下面一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>title里面的内容显示在标签上</title>
</head>
<body>
</body>
</html>
ctrl+s保存之后双击该文件在浏览器中预览，我们就会发现标签上显示出了对应的文字：
chrome
FireFox
IE
当然，大家现在可能正在用自己用起来比较爽的编辑器写我们的代码
事实上，我们可以在编辑器中右击在浏览器中预览，这样就可以在浏览器中打开我们的网页了
而没有必要每次都去双击打开
从现在开始我们需要养成一个习惯就是写好了一段代码之后，要在IE FireFox(简称FF) chrome下分别预览效果
当然我们的教程里面在兼容性没什么问题的时候，为了方便就只在一个浏览器里面预览
如果遇到浏览器不一致的地方我们会特殊说明
title标签我们知道干什么了之后
head标签里面的东西我们大概有了一个了解了
接下来看body
body里面的东西才是我们真正要显示到页面当中的东西
body里面可以放很多东西
我先给出一段代码，让大家看一下
<body> <div style="width:100px; height:100px; background:red;"></div> </body>
在body中加入这段代码之后，我们在浏览器中预览，就会看到
好的，我们来解释一下上面这段代码的意义
大家可以先把style="width:100px;height:100px;background:red;"去掉，这样代码就只剩下了一个我们之前没有见过的标签
<div></div>
这个标签是什么含义呢？
div其实就是division的简写，那么division又是什么意思呢？
大家可以自己去有道、金山词霸啥的找找，我这里直接告诉大家了
直接翻译过来就是区域的意思，其实就是一块儿地方
所以一个div就代表了我们网页上的一块地方，那这个地方有何特点呢？
里面的style以及后面跟着的那一堆东西就派上用场了
style又是什么东西呢？
这个和词典上翻译的意思差不多，就是样式的意思，那到底是什么样式呢？
等于号后面就是对style的相关描述，也就是说
这段代码写在这里是想要往这里放一个这种样式(style)的div
那这种样式(style)到底是哪种样式呢？style等于号后面的内容将会告诉你答案，现在大家可以感性的认知一下这个东西
看起来好像是width:100px;宽度100px
height:100px;高度100px
background:red;背景red红色
认知到这里，就可以了，因为我们后面会花大力气讲这个东西
因为这个东西就是我们的css
好的，刚才扯远了点，欢迎回来
于是乎，计算机这帮科学家们就给div和style起了相对应的名字
div就叫标签元素，style叫元素的一种属性
很值得一提的是，后期学习Javascript操作标签元素的时候我们又会叫它标签对象，再后期学习Javascript中的DOM的时候我们会叫它DOM结点
叫法总是这样多变，没办法
不过指的都是同一个东西
关于标签元素刚才扯了几个专业的名字，接下来好好扯扯属性这个玩意儿
一说属性，大家一定有个想法就是这标签的属性只能有style这一个吗？
当然不是，也不能不是
为了说明这个问题，我们再给大家介绍一个新的标签
<a href="http://www.baidu.com" target="_blank" style="color:black">百度一下</a>
这次我拖家带口的全都给它搬出来了，不过还是老规矩
把a后面的东西，href="http:......."全部干掉，最后剩下了
<a>百度一下</a>
相信大家已经早就熟悉的不能再熟悉了，只不过是标签名字换成了a而已，还有就是标签里面放了些文字
而且这四个字红遍了中国的大江南北
我先告诉大家<a>标签的意思是链接的意思
接下来大家可以多少猜出来a标签里面的文字到底是干什么的了
没错，就是用来点击的，一点就调到百度了
但是大家想想，就<a>百度一下</a>这幅德行，能到百度才见鬼
要不我刚才写的里面的那些href啊，target啥的，都没用
不可能的
好的，有了上面div作铺垫，相信a不用我多说什么了
没错href，target，style都是a的属性，这也就说明了标签的属性是可以有多个的
大家稍微发挥一下自己的聪明才智，基本上就知道这三个属性是干嘛使的
href：hyperlink reference 大概就是链接的意思吧
target：翻译成了目标，好像有点抽象
style如果不知道是怎么回事的话，我觉得你记忆力超好奥
标签，就是这样，标签的属性的话，怎么说呢，每个标签常用的属性也就那么几个而已，也非常好记
其实，还有很多标签，比如p标签 img标签 span标签等等
这些标签就共同构成了我们的网页
从下节课开始好好说说这些标签