html+css21总结Word格式.docx
《html+css21总结Word格式.docx》由会员分享，可在线阅读，更多相关《html+css21总结Word格式.docx（14页珍藏版）》请在冰豆网上搜索。
li>
/li>
/ol>
无序列表<
ul>
/ul>
自定义列表<
dl>
dt>
/dt>
dd>
/dd>
/dl>
8）超链接
ahref=”#”>
空超链接<
/a>
ahref=”#”target=”_blank”title=”提示信息”>
在新窗口打开连接<
9）相对路径
当当前文件与目标文件在同一目录下直接写文件名+拓展名
当当前文件与目标文件所在文件夹在同一目录下文件夹名/文件名+拓展名
当前文件所在文件夹与目标文件所在文件夹在同一目录下../文件夹名/文件名+拓展名
10）插入图片
imgsrc=”图片路径”width=”宽度”height=”高度”/>
11）表格
table>
tr>
td>
/td>
/tr>
/table>
.border表格的边框
.bordercolor边框颜色
.cellspacing单元格与单元格之间的距离
.cellspadding内容与边框之间的距离
.align水平对齐方式（left、right、center、）
.valign垂直对齐方式（top、bottom、middle）
.colspan列合并
.rowspan行合并
12）表单
formname=”表单名称”method=”post/get”action=””>
/form>
Post和get的区别：
get是从服务器上获得数据，post是向服务器上传数据，从安全性考虑，我们使用post
13）表单控件
inputtype=”类型”name=”名称”value=”默认值”size=”宽度”maxlength=”最多输入的字符数”/>
文本框text
密码框password
单选按钮radio
复选框checkbox
下拉菜单<
select>
option>
/option>
/select>
多行文本<
textareacols=””rows=””>
/textarea>
提交按钮submit
按钮button
重置按钮reset
默认选中checked
禁用disabled
14）
二、CSS的基础
1）CSS是层叠样式表（CascadingStyleSheets）
2）CSS的三种样式表
A：
内部样式表
<
styletype=”text/css”>
Css的属性和属性值
/style>
B:
内联样式表
divstyle=”color:
#f00”>
/div>
C:
外部样式表
linkrel=”stylesheet”type=”text/css”href=”样式表的路径”>
@importurl（路径）;
3）Link与@import的区别
差别1：
老祖宗的差别：
link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
差别2：
加载顺序的差别：
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：
兼容性的差别。
：
@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
差别4：
使用dom控制样式时的差别：
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4）样式表的优先级
内联样式表最大内部样式表与外部样式表与顺序有关，谁在后边谁生效
5）选择器
A:
类型择器（元素选择器）直接是html的标签
id选择器#id名{属性：
属性值;
}
class选择器.class名{属性：
D:
通配符*{属性：
E:
群组选择器选择器1,选择器2,选择器3{属性：
F:
包含选择器选择器1选择器2{属性：
G:
伪类选择器
a:
link{属性：
visited{属性：
hover{属性：
active{属性：
H:
伪对象选择器选择符:
after{属性：
6）选择器的权重
Id100class10类型1内联样式1000伪对象10伪类10包含是权重之和
7）注释
—HTML注释-->
/*CSS注释*/
8）
三、CSS的核心属性
1）字体的属性font
字体类型font-family
如果是中文需要加””
如果是英文单词直接写
如果有多个单词组成一个字体需要加””
同时命名多个字体中间用逗号隔开，表示浏览器解析的时候先找第一，第一不存在找第二个，如果都不存在用系统默认字体
文字的大小font-size
大小的单位：
pxempt
1em=16px0.75em=12px
绝对大小xx-small=9x-small=11smal=13
文字的颜色color
可以用英文单词redgreen
用16进制数#ff0000
当两两相同时可以缩写：
#f00
用rgb（0,255，,255）
用rgba（0,255,255,0.2）a代表透明度取值范围是0到1
加粗font-weight
Bold加粗normal正常
倾斜font-style
Italic倾斜normal正常
是否大小写font-variant
Normal正常small-caps将小写字母变成小型的大写
字体的复合写法
.font:
stylevariantweightsizefamily
size/line-heightfamily
2）文本设置text
水平对齐方式：
text-align（left\right\center\justify）
垂直对齐方式：
vertical-align（top\bottom\middle）垂直对齐与图片连用才生效
行高：
line-height
当行高与容器的高度一致时，内容可以垂直居中
当行高小于容器的高度时，内容在垂直方向的靠上位置反之靠下位置
文本修饰text-decoration
下划线：
underline
上划线：
overline
中划线：
line-through
没有线：
none
闪烁：
blink
首行缩进：
text-indent（可以设置负值）
字符间距：
letter-spacing
词间距：
word-spacing
文本大小写：
text-transform
首字母大写：
capitalize
全都大写：
uppercase
全都小写：
lowercase
3）列表设置list
列表符号设置：
list-style-type
列表符号设置为图片：
list-style-image:
url（图片的路径）
列表符号的位置：
list-style-position
去掉列表符号：
list-style：
4）边框设置border:
1pxsolid#f00（三个值没有顺序要求）
实线：
solid虚线：
dashed点状线：
dotted双实线：
double
可以分方向去设置
Border-topborder-leftborder-rightborder-bottom
可以单独设置边框的颜色border-top-color
可以单独设置边框的粗细border-top-width
可以单独设置边框的线型border-top-style
5）背景的设置background
背景图片：
background-image:
url（图片路径）
背景颜色：
background-color：
背景是否重复：
background-repeat:
（repeat\no-repeat\repeat-x\repeat-y）默认情况是重复repeat
背景的固定：
background-attachment：
（fixed固定\scroll不固定默认值）
背景的位置：
background-position:
左右上下还可以是具体的数值
背景的复合写法
.background:
colorimagerepeatposition
6）浮动float（left\right\none）
浮动的元素会脱离正常的文档流
浮动的元素会紧随着上一个浮动元素
浮动元素会占据空间
7）清除浮动clear（left\right\both）
四、盒子模型
盒子的组成：
外边距（margin）边框（border）内填充（padding）内容（width/height）
盒子的实际大小
宽=左边距（margin-left）+左边框（border-left）+左填充（padding-left）+内容（width）+右填充（padding-right）+右边框（border-right）+右边距（margin-right）
高=上边距（margin-top）+上边框（border-top）+上填充（padding-top）+内容（height）+下填充（padding-bottom）+下边框（border-bottom）+下边距（margin-bottom）
内填充padding（不可以设置负值）外边距margin（可以设置负值）的四种写法：
四个值：
上右下左
三个值：
上左右下
两个值：
上下左右
一个值：
上下左右
设置水平居中：
margin:
0auto;
1）如果两个div处于上下结构且不浮动他们之间的距离取最大值
2）如果两个div都浮动且是上下排列他们之间的距离是两个之和
3）如果两个div都浮动且在一排显示他们左右直接的距离是两个之和
4）两个div是父子关系如果设置子元素的margin-top不生效的解决办法
一种：
给父元素添加边框
二种：
给自身设置浮动
5）如果两个div上一个浮动下一个清除浮动处于上下排列他们之间的距离是上边的margin-bottom
6）
五、文本溢出
容器溢出：
overflow（visible、hidden、scroll、auto、inherit）
.visible:
默认值，超出之后显示在容器的外边
.hidden:
超出之后隐藏，且超出的内容看不见
.scroll:
超出文本框以滚动条形式显示，内容可以看见
.auto:
自适应超出显示滚动条，不超出无滚动条
.inherit:
继承父元素的overflow的属性
空白空间white-space（pre、pre-wrap、pre-line、nowrap、normal、inherit（ie不支持次属性））
.pre:
保留空格，不换行
.pre-wrap:
保留空格，换行
.pre-line:
不保留空格，换行
.normal:
默认值
.nowrap:
强制文本在一行显示，知道遇到br才换行
继承父元素的white-space的属性
文本溢出：
text-overflow（clip、ellipsis）
.clip:
直接裁切
.ellipsis:
溢出后显示…
单行文本超出之后显示省略号的条件
例如：
超出300px宽的文字显示省略号该如何实现：
设置容器的宽度：
width：
300px；
强制在一行显示：
white-space：
nowrap；
溢出容器隐藏：
overflow：
hidden；
溢出文本显示省略号：
text-overflow：
ellipsis；
六、元素类型
块状元素内联元素可变元素
块元素与内联元素的区别（div与span的区别）
1、div是块状元素，span是内联元素
2、块状元素可以设置宽高，内联元素不可以
3、块状元素自上而下排列，内联元素在一行显示直到放不下才换行
4、他们都遵循盒子模型，但是内联元素的部分属性是不能正常显示的
元素类型之间的转化display（18个属性值）
1、block将元素变为块状元素
2、inline将元素变为内联元素
3、inline-block将元素变为行内块元素可以设置vertical-align（img和input）
4、list-item将元素转化为列表元素（li）
5、none隐藏元素
大多数块元素的默认元素类型是blockli的默认类型为list-item
大多数内联元素默认元素类型是inlineimginput的默认类型为inline-block
常见的块元素：
divdldddtulolh1-h6p…
常见的内联元素：
aspanbstrongIem
七、浏览器的兼容
最早的浏览器是网景领航者简称NN
五大浏览器内核以及他们的代表
常见的浏览器兼容问题
1、图片的间隙
A、div插入图片时的间隙
将<
与img写在同一行
将img转化成块状display：
block
B、dlli里的图片间隙
将img转化成块状元素display：
2、Ie6的双边距问题
给浮动元素添加display：
inline
3、Ie6的默认高度问题
A、给font-size：
B、Overflow：
hidden
4、表单行高不一致
给元素添加float：
left
5、按钮大小不一致
A、用a标签替代按钮
B、在元素的外边加一个标签，将按钮的样式清空
C、直接用图片替换按钮（给按钮添加背景图片value值清空value=“&
nbsp；
”）
6、百分百
当各占50%出现解决方式清除浮动clear
7、鼠标指针异常cursor：
pointer
8、透明
Filter：
alpha（opacity=透明度取值0-100）；
opacity：
透明度取值0-1；
9、在属性前边加上下划线ie6识别
10、在属性前边加上*ie6ie7识别
11、在属性前边添加加号ie6ie7识别
12、关键字！
important（ie6不识别）
八、网页制作
网页制作的思路
1、分类（images图片文件夹css文件夹js文件夹）
2、创建页面引用样式表（用link的方式）
3、将通用样式完成
4、写结构（按照网页是设计风格给页面分块）
5、添加内容
网页制作技巧：
先保证一个浏览器正常显示
写代码要添加注释
代码结构要清晰
取名要结构化语义化
写导航时如果a标签变成块状后要给他加浮动
如果两个元素在一行显示一左一右为了兼容ie6要将两个都设置浮动
是一条条的新闻就用列表
相似的模块能用同一个就用同一个如果仅仅是图片上的区别时可用直接在网页中插入图片；
如果利用背景插入图片，那么需要从新命名，里边的样式不变，只需改变背景图片即可。
当接到一个页面时你先分析一下，同样的地方可用一起写，或者直接设置一个，其他粘贴复制。
九、定位
定位position（static、absolute、relative、fixed）
固定宽度高度的div水平垂直居中的做法
#div{position:
absolute;
width:
300px;
height:
200px;
top:
50%;
left:
margin-top:
-100px;
margin-left:
-150px;
固定宽度高度的div永远水平垂直居中的做法
fixed;
如果想子元素根据父元素去定位：
给父元素设置绝对定位（margin:
0auto不生效）
给父元素设置相对定位（margin:
0auto可以生效）
设置定位后层叠属性z-index
z-index可以取负值值越大越在上面
锚点a标签里的href=“#id名称”
滚动条overflow-x、overflow-y
圆角border-radius
设置一个值：
指四个角都一样
设置两个值：
指的是对角一样
单独设置某个角border-top-left-radiusborder-top-right-radius
border-bottom-left-radiusborder-bottom-right-radius
flash动画
滚动字幕marquee
一十、图片整合background-position
图片整合的优势（好处）：
减少对服务器的请求次数，挺高访问速度
减小图片体积，避免空间浪费
一十一、宽高自适应
1、最小高度的自适应min-height：
value
A、min-height：
value；
_height:
value;
B、min-height:
auto!
important;
2、元素高度自适应窗口的高度
Html,boty{height:
100%}
元素本身设置height：
100%
3、浮动元素高度自适应（高度塌陷）
A、个父元素添加overflow：
B、在浮动元素的下边添加一个空div做如下设置
Clear：
both；
height：
0；
font-size：
C、万能清除法
父元素：
after{content:
”.”;
display:
block;
0;
visibility:
hidden;
clear:
both;
4、伪对象选择符
after在内容的后边添加content里的内容
before在内容的前边添加content里的内容
fisrt-letter改变内容的第一字
fisrt-line改变内容的第一行
（ie6以下版本不支持伪对象）
5、
一十二、表单表格的高级
表单的组成：
表单域（form）、表单控件（input）、提示信息（label）
表单字段集fieldset
表单字段集的标题legend
提示信息label（提高用户体验度）
表格：
合并单元格间距border-spacing
合并相邻边框border-collapse
单元格为空时隐藏empty-cells：
hide
显示单元格行、列的算法table-layout
表格按数据行分类：
表头thead表体tbody表尾tfoot
表格列标题th默认加粗居中
一十三、Css的统筹
文档的统筹将相同是css样式单独独立出来
文档可以按类型、功能、设备类型、页面的代码规模去分类
网页的优化（seo）
标题优化
Meta语句描述关键字其他
超链接的优化（不用、少用flash加上title属性alt属性不用图片热区）
图片优化（title属性alt属性）
为网站制作一个地图
交换友情链接
尽量用静态页面
结构清晰易于维护
CSS的命名
用小写英文字母、以英文字母开头，可以使用数字、下划线、特殊符号等，词必达意，语义化结构化
重置样式：
子选择符与后代选择符的区别：
写法不同子选择符中间是大于号，后代选择符是空格
作用范围不同子选择符只管子元素，后代只有是我包含都管
兼容性的不同子选择符在ie6、ie7、ie8不支持后代所有浏览器都好使
一十四、
升级会员 