一、基础
1、html,xhtml,shtml,htm分别是什么，有什么区别
2、!doctype声明，有哪几种，最好选严格型
3、开发环境和工具准备，sublime使用技巧
二、html主体三大结构
<!DOCTYPE html> #类型声明
<html> #html标签，大框架
<head> #head标签
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> #body标签
</body>
</html>
head中带有最基本必须的元素，比如可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。主要是给搜索引擎等看的
三、网页布局——body
1、使用
标签布局网页
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
网页分成了3块，但是什么都显示不出来
2、css使用
通过颜色显示出3个部分连在一起，分不开
3、通过给每个div命名来个性化定制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
height:100px;
background: blue;
}
#dage{
background: red;
}
#sandi{
background: yellow;
}
</style>
<body>
<div id="dage"></div>
<div id="erge"></div>
<div id="sandi"></div>
</body>
</html>
里的是公共属性，名字下规定的个私有属性
4、让两个div并排显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#dage{
height: 100px;
width: 100px;
background: red;
float: left;
}
#erge{
height: 100px;
width: 100px;
background: blue;
float: left;
}
#sandi{
background: yellow;
height: 300px;
width: 300px;
}
</style>
<body>
<div id="dage"></div>
<div id="erge"></div>
<div id="sandi"></div>
</body>
</html>
float漂浮属性
练习：画田字格
延伸：1、css有哪些引入方式
2、div除了用id之外还能用什么标识
5、清除浮动：
clear:left
也可换成right、both
6、div嵌套
（1）通常网站都有一个大的父div，这样修改统一属性方便
（2）如果父div中有且仅有两个漂浮子div，那么如果父div没有设置高度，那么父div的高度就为0，可能造成下面的div被覆盖
解决：1、设置父div高度
2、下一个div清除漂浮
简易首页布局：
四、注意事项
1、不加doctype：导致低版本IE解析效果不一样
2、id为数字：属性不能用数字！！
3、文件编码与charset编码一致
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
