一、基础
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编码一致