Html分类:
1.基本标签:
<html>,<head>,<body>
<title>,<meta>,<a>
<h1>...<h6>:标题
<p></p>:字段
<ul>,<ol>:无序、有序
<font>:字体
<img>:图片
<hr>:横线
<b>后面结合CSS圆角
2.布局
framset(微软,不符合W3C的规范)
table:用于涨势有排列格式的数据(一般用于后台管理系统布局)
colspan:行扩充
rowspan:列扩充
div span:(一般用与门户网站布局)
3.用户交互
<form>系列
-<input>
text/password/radio/checkbox/file/hidden
-<select><option></option></select>下拉列表
-<textarea></textarea>
css:
1.存放形式
1).存放在某一属性<td style=""></td>
2).存放在页面<head></head>中的<style></style>
3).外部.css文档,<link rel="stylesheet" stye="text/css" href="css1.css">
优先级是:1最高,2,3同级别(不过用谁取决于位置的先后,使用摆放在后面的)
2.选择符
1).标签选择符:对同一种标签使用相同的样式(如:body/table/div/span)
2).id选择符:指定对某一标签使用某种样式(如:<div id="div2"> #div2{})
3).class选择符:指定对某一标签使用某种样式(如:<div class="div3"> .div3{})
4).群选择符:多个标签用同一样式,用“,”隔开(如:img,.div2,#div3{})
5).包含选择符:设置路径,“ (空格)”隔开(如:.div td p span {};ID为div的 里面的td 中的p中的span设置)
优先级:id选择符 > class选择符 > 标签选择符
3.控制
1 总体控制
1.1 透明效果
filter:alpha(opacity=100);
注意:只支持IE;
2 文字控制
2.1 字体
body {
font-family: 黑体, 幼园;
}
2.2 大小
body {
font-family: 黑体, 幼园;
font-size: 24pt;
}
2.3 颜色
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
}
2.4 粗细
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
font-weight: bold;
}
2.5 斜体
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
font-weight: bold;
font-style: italic;
}
2.6 线条
2.6.1 下划线
text-decoration: underline;
2.6.2 顶画线
text-decoration: overline;
2.6.3 删除线
text-decoration: line-through;
2.7 字母
2.7.1 单词首字母大写
text-transform: capitalize;
2.7.2 单词所有字母大写
text-transform: uppercase;
2.7.3 单词所有字母小写
text-transform: lowercase;
2.7.4 字母间距
letter-spacing: 10px;
2.8 与右边的距离
padding-right: 10px;
2.9 首字下沉
2.9.0.1 HTML
<p><span>首</span>好阿斗发缩短发送毒发</p>
2.9.0.2 CSS
p span {
float: left;
font-size: 80pt;
}
3 图片
3.1 背景图片
3.1.1 显示背景图片
background-image: url(User.jpg);
3.1.2 背景图片的重复
background-repeat: repeat-x; 横向排列
background-repeat: repeat-y; 纵向排列
background-repeat: no-repeat; 不重复
background-repeat: repeat; 平铺
3.1.3 背景图片的位置
background-repeat: no-repeat;
background-position: center;
3.1.4 固定背景图片的位置比例
background-attachment: fixed;
4 DI
4.2 相对定位
float: left;
4.3 绝对定位
position: absolute;
left: 100px;
top: 30px;
4.4 取消定位
clear: both;
4.5 固定宽度且居中
4.5.1 HTML
<body>
<div class="container">
<div>
<div class="d1">Hello </div>
<div class="d1">Eric </div>
<div class="d2">Eric </div>
<div class="d3">Eric </div>
</div>
</div>
</body>
4.5.2 CSS
body {
text-align: center;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 600px;
}
5 Table
5.1 位置
5.1.1 靠顶对齐方式
5.1.1.1 HTML
<tr>
<td class="a">Hello</td>
<td class="a">
Hello<br>
Eric
</td>
</tr>
5.1.1.2 CSS
.a {
vertical-align: top;
}
5.1.2 靠底对齐方式
5.1.2.1 HTML
<tr>
<td class="a">Hello</td>
<td class="a">
Hello<br>
Eric
</td>
</tr>
5.1.2.2 CSS
.a {
vertical-align: bottom;
}
5.1.3 居中对齐方式
5.1.3.1 HTML
<tr>
<td class="a">Hello</td>
<td class="a">
Hello<br>
Eric
</td>
</tr>
5.1.3.2 CSS
.a {
vertical-align: middle;
}
5.2 边框
5.2.1 设定分隔形边框
5.2.1.1 HTML
<table class="testTable">
<tr class="title">
<td class="cell">a</td>
<td class="cell">b</td>
</tr>
</table>
5.2.1.2 CSS
.testTable {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}
.title {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}
.cell {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}
注意,各个<table><tr><td>的各个属性都要设置,才看得见边框和分隔