使用表格<table></table>对网站首页进行布局有缺陷，不能拖动版块，不灵活。
DIV
Div是一个html的标签，单独使用没有意义，必须结合CSS使用；
是一个块级元素，单独占一行；
它主要用于页面的布局；
Span
Div是一个html的标签，单独使用没有意义，必须结合CSS使用；
是一个内联元素，显示一行；
它主要用于对括起来的内容进行样式的修饰；
CSS
层叠样式表：同一元素，同一属性，设置不同值；
解决内容与表现分离的问题（html只能将元素展现出来，内容样式无法展示出来），对内容进行修饰；
语法和规范：
设置样式：
<style></style>
*第一种写法：写在<head></head>内部
<style></style> 内部：
（选择器：用于快速查找需要设置样式的元素）
选择器{
属性名1:属性值1；
属性名2:属性值2(；)
}
*冒号是英文输入法的
*最后一个分号可以省略
基本选择器：(3种)
- 元素选择器：对整体设置样式（div）
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<!--对整体设置样式-->
<style type="text/css">
div{
font-size:50px;
color:pink;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
哈哈哈哈哈44
</div>
<div>
哈哈哈哈哈55
</div>
</body>
</html>
结果：
- 类选择机器：部分设置样式（. class名字）
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!--部分设置样式-->
<style>
.div2{
font-size: 30px;
color:gold
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div class="div2">
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div class="div2">
哈哈哈哈哈44
</div>
<div>
哈哈哈哈哈55
</div>
</body>
</html>
结果：
- id选择器：单个设置样式（# id名）
*注意：虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<!--单个设置样式-->
<style>
#div5 {
font-size: : 30px;
color: yellow;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div class="div2">
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<!--虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。-->
<div class="div2" id="div5">
哈哈哈哈哈44
</div>
<div id="div5">
哈哈哈哈哈55
</div>
</body>
</html>
结果：
其他选择器
- 层级选择器：层次选择样式(div p)
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
font-size:30px;;
color:green;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
<p>
哈哈哈哈哈55
</p>
</div>
<div>
哈哈哈哈哈55
</div>
</body>
</html>
结果：
- 属性选择器：属性选择样式( input[type='..' ] )
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>
</head>
<body>
用户名：<Input type="text" name="username"/><br />
密码：<input type="password" name="password" />
</body>
</html>
结果：
