资源描述

Web前端期末复习超实用.docx

《Web前端期末复习超实用.docx》由会员分享，可在线阅读，更多相关《Web前端期末复习超实用.docx（27页珍藏版）》请在冰豆网上搜索。

Web前端期末复习超实用.docx

Web前端期末复习超实用

Web前端期末复习【超实用】

这本书的HTML内容完完整整总结如下（书上有些属性已过时）

DOCTYPEhtml>

HTML学习总结

AllRightsReserved">

--每隔3秒刷新一次-->

--自动跳转-->

--"--><

--<-->©

--©-->™

--™-->

--&-->>

-->-->®

--®-->

字号默认为3

粗体

斜体

^上标_下标大号字小号字下划线

~~删除线~~

单标记只跟上文产生一空行间隔，双标记则与上下文都产生

两个
等效于一个

单标记

预格式化标记

居中标记

缩排标记

水平线

有序列表

无序列表

名词一: 解释一; 解释二

滚动字幕

嵌入视频

//www..."src=""type="application/x-shockwave-flash">

--专门针对Netscape网景-->

--默认播放一次-->

Java小程序

--嵌套分割窗口-->

若要使浮动框架在水平居中，需在外嵌套一个

--http:

//——www进入万维网

mailto:

收件人邮址?

subject=主题名&cc=抄送邮址&bcc=暗抄送邮址——E-mail启动邮件发送系统

ftp:

//——FTP进入文件传输服务器

telnet:

//——Telnet启动远程登录方式

news:

//——News启动新闻讨论组-->

--图像映射-->

表格标题

声明一行

声明一单元格

选择列表

--html（HypertextMarkupLanguage）超文本传输语言

http（HypertextTransferProtocol）超文本传输协议

URL（UniformResourceLocator）统一资源定位符

W3C（WorldWideWebConsortium）万维网联盟

CSS（CascadingStyleSheet）层叠样式表-->

这本书的CSS内容总结（书本只列举最常用的东西）

一、标记选择器★

二、字体属性

font-size（绝对大小、相对大小、百分数、具体值pt、px、in）

font-family

font-weight（normal、lighter、bold、bolder）

font-style（normal、italic=oblique）

三、文本属性

text-indent首行缩进，常用单位是pt

line-height行间距，常用单位是pt

letter-spacing字间距，常用单位是pt

text-decoration（underline、overline、line-through、none）

text-align（left、center、right、justify两端对齐）

四、列表属性

list-style-image用图像作为列表项的引导符号

list-style-position决定缩进程度（outside列表贴近左侧边框显示、inside列表缩进显示）

list-style-type（none、disc●、circle○、square■、decimal普通数字、lower-roman小写罗马字、upper-roman大写罗马字、lower-alpha小写英文、upper-alpha大写英文）

五、颜色和背景

color

background-color

background-image

background-repeat（repeat-x横向重复、repeat-y纵向、repeat、no-repeat）

background-position（left、right、center、top、bottom）

六、区块

width、height、float让文字环绕周围、clear禁止浮动元素出现在所属对象旁边、padding内边距、margin外边距（top、bottom、left、right）

七、层属性（允许盒子重叠）

top（单位px）、left、width、height、Z-index包含正负数，决定层的先后顺序和覆盖关系，值高的覆盖较低的

clip限定只显示裁切出来的区域，该区域是矩形。

只要设置两点即可（矩形左上角顶点由top和left设置、右下角由bottom和right设置）

overflow（visible当层内的内容超出层所能容纳的范围时可见、hidden、scroll、auto）

★定位流position（static静态定位、relative相对定位、absolute绝对定位、fixed固定定位）

①static：

默认属性值，盒子按照标准流（包括浮动方式）进行布局。

②relative：

相对于自己以前在标准流中的位置偏移指定距离。

通过left、right、top、bottom指定偏移量。

在相对定位中同一方向上的定位属性只能使用一个；

∵相对定位是不脱离标准流的，会继续在标准流中占用空间∴区分块级元素、行内元素、行内块级元素且设margin、padding等属性会影响标准流的布局。

一般用于盒子位置的微调。

③absolute：

相对于body或某定位流（非static属性）中的祖先元素来偏移。

默认是相对于body定位的，会随着页面的滚动而滚动。

∵脱离标准流，不会占用标准流的位置∴不区分~

绝对定位元素会忽略祖先元素的padding

一般配合相对定位来使用，不会单独出现eg.做覆盖效果

④fixed：

盒子位置固定在浏览器窗口上。

∵脱离标准流，不占位∴不区分

当给一个元素设置的宽高无效时，可以通过display将模式转换：

块↔行内；块、行内→行内块

块级元素display="block"：

独占一行。

可任意设置其大小、内外边距（宽度默认为所在容器的100%），是用于搭建网页布局的必须部分，使网页结构更紧凑。

常见的块级元素有

、

~

、
、
、等，其中
是最常用最典型的。
可容纳行内元素和其他块元素。
特殊：
文字类的块级元素不能放块元素，例如
/
~
/
。
行内/内联元素display="inline"：
和相邻的行内元素在同一行上。
设置宽高无效（默认宽高是他自身内容的宽高）。
水平方向的padding和margin属性可以设置，但垂直方向上的无效。
行内元素只能容纳其他行内元素或者文本。
特殊：
可以放块级元素，但是链接里面不能再放链接。
行内块级元素display="inline-block"：
和相邻行内元素在同一行，但是之间会有空白缝隙。
默认宽度是他本身内容的宽度。
宽度、高度、行高、内外边距和对齐模式都可以手动设置。
如、、
。
八、盒子模型★
border-color
border-width
border-style：
none、hidden、dotted、dashed、solid、double
padding设置1个属性值：
表示上下左右4个内边距。
padding设置2个属性值：
前者表示上下内边距，后者表示左右内边距。
padding设置3个属性值：
前者表示上内边距，中间者表示左右内边距，后者表示下边距。
padding设置4个属性值：
依次表示上、右、下、左内边距（顺时针）。
padding是内边距，不会影响盒子的外部，而margin是外边距，直接影响。
★两个行内元素间的水平间距=左边元素的右外边距+右边元素的左外边距
★两个块级元素间垂直间距=Max（上边元素的下外边距，下边元素的上外边距）称为margin的"塌陷"现象，即较小margin塌陷到较大margin中了的块级元素间的垂直定位。
★父子盒子嵌套，当子div的margin为正值时：
父盒子宽度随浏览器自由延伸，子盒子宽度随父盒子之变而变
当子div的margin为负值时：
①子盒子本身没有宽度，会增加元素宽度②子盒子本身有宽度，会产生位移
③margin-top=-100px却产生了向上50px的位移（挠头疑惑！
float：
none、left、right，非none的属性值将所有对象视作“块对象block-level”，忽略它原有的display值，并脱离标准流。
默认情况下，根据对象内容来决定其宽、高。
非浮动对象会代替浮动对象在标准流中的位置，且其文字内容会围绕浮动对象。
九、Div标记&Span标记
是区块容器标记，块级元素，
内的元素会自动换行，这是与的区别所在。
容器装的是内容，CSS作为装饰内容的样式。
是相对
较小的容器，行内元素，在它前后不会自动换行，没有结构意义，纯粹应用CSS。
DIV+CSS布局&表格布局の比较：
●通过
各个单元格可轻松划分模块，制作简单；CSS通过
来划分模块，同时需要调整各模块间的位置及排列。
●各模块放在
内，会随着单元格的大小自动调整，背景颜色等设置比较简单；DIV+CSS的模块层层嵌套，背景颜色等样式属性设置比较复杂。
●单元格可加入CSS的margin和padding等属性控制效果。
●表格布局比DIV+CSS布局维护要困难。
eg.要对换left和right的内容，表格布局的工作量与制作新的页面相当，而DIV+CSS布局只需修改位置即可。
十、鼠标属性
cursor：
default、pointer手形状、crosshair十字交叉、text文本选择、wait为Windows的沙漏形、help问号、e-resize指向东的箭头、ne-resize东北、n-resize北、nw-resize西北、w-resize西、sw-resize西南、s-resize南、se-resize东南）
十一、滤镜属性
filter：
mark为对象建立一个覆盖于表面的膜、blur模糊效果、chroma设对象中指定的颜色为透明色、dropShadow阴影效果、flipH水平翻转、flipV垂直翻转、glow光晕、invert对象的可视化属性全部翻转，包括色彩、饱和度和亮度、shadow在指定方向建立物体投影、wave把对象按垂直波纹样式打乱、xray使对象产生X光片效果、alpha设透明度
十二、在HTML中用CSS★
解决CSS冲突：
●优先级：
内联式（直接在标签里写style="..."）>内嵌式（写在里的