Web课程总结

2019-2020-2学期《Web程序设计》课程总结

1 课程知识点总结

1.1页面布局编程单元

CSS背景设置：

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。背景不能被继承。
图像背景：
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。
颜色背景：
CSS 允许应用纯色作为背景，参数可以采用十六进制，如："#ff0000"；RGB，如：“rgb(255,0,0)”；或直接使用颜色名称，如：“red”。
背景重复：
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。属性值 repeat 导致图像在水平垂直方向上都平铺。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
背景定位：
可以利用 background-position 属性改变图像在背景中的位置。为 background-position 属性提供值有很多方法。可以使用一些关键字：top、bottom、left、right 和 center。还可以使用长度值，如 100px 或 5cm，也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

CSS选择器：

3种基本类型选择器：
1.标签选择器：根据指定标签名称，在当前界面中找到所有该名称的标签，并设置属性。标签选择器选中的是当前界面所有同名标签，不能单独选中。只要是HTML中的标签都可以作为标签选择器。举例：
p{
color:red;
}
2.id选择器：根据指定标签的id，在当前界面中找到该id的标签，并设置属性。每个HTML标签都有id属性，且同一界面不能重复。编写id选择器必须要在id前面加上一个“#”。id的名称不能与HTML标签同名，名称有一定的规范，只能由字母数字和下划线组成。举例：
#id{
color:red;
}
3.类选择器：根据指定标签的类（class），在当前界面中找到该类的标签，并设置属性。同一个界面中class属性是可以重复。编写class选择器必须要在class名称前面加上一个“.”。class就是专门给某一类标签设置样式的，一个标签可以同时绑定多个class属性。举例：
.class{
color:red;
}
派生选择器：
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。它们依赖于上下文关系来应用或者避免某项规则。
子元素选择器：
子元素选择器只能选择作为某元素子元素的元素。该类选择器可以缩小范围，只选择某个元素的子元素。选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
伪类选择器：
伪类用于向某些选择器添加特殊的效果。
属性选择器：
属性选择器可以根据元素的属性及属性值来选择元素。除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
盒模型：
margin：围绕在元素边框的空白区域
padding：元素边框与元素内容之间的空白区域
border：围绕元素内容和内边距的一条或多条线，可以设置样式、宽度和颜色。
width：元素的宽度
box-sizing：content-box（宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框；）/border-box（为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制）/inherit（规定应从父元素继承box-sizing属性的值）。

CSS定位：

position（绝对定位：absolute;和相对定位：relative，默认为static）、left、top、z-index。

CSS浮动：

float属性定义元素在哪个方向浮动。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

CSS块内元素和行内元素的显示：

display属性：设置一个元素应如何显示。
设置块/行内元素：块元素是一个元素，占用了全部宽度，在前后都是换行符，常见的有

、

、

；行元素只需要必要的宽度，不强制换行，常见的有、。通过设置display：inline;可以把元素改为行元素；display：block则改为块状元素。
设置隐藏：隐藏一个元素可以通过把display属性设置为"none"。

1.2页面行为编程单元

DOM模型的理解：

在DOM中，节点的类型一共有7种，Document（整个文档树的顶层节点）、DocumentType（dotype标签比如：）、Element（网页的各种HTML标签比如

）、Attribute（网页元素的属性id、class等）、Text（标签之间或标签包含的文本）、Comment（注释）、DocumentFragment（文档片段）。

JS编程基础：

数据类型、变量和对象：

简单数据类型有：string, symbol, number, boolean, undefined, null。
变量：首先要声明变量（通过var, const,let），其次是通过”=“赋值。如果声明变量时没有赋予初值，那么默认值为undefined。
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。对象是拥有属性和方法的数据。
语句、表达式、运算符：
在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。JavaScript 使用 var 关键词来声明变量。用“=”为变量赋值。JavaScript 使用算数运算符（+ - * /）来计算值。表达式是值、变量和运算符的组合，计算结果是值。表达式也可包含变量值，值可以是多种类型，比如数值和字符串。

函数与闭包：

JavaScript 函数是通过 function 关键词定义的，可以根据需要使用函数声明或函数表达式。被声明的函数不会直接执行，只有调用后才会执行。函数也可以使用表达式来定义，在变量中保存函数表达式之后，此变量可用作函数，这就是匿名函数。JavaScript 函数定义不会为参数规定数据类型，不会对所传递的参数实行类型检查，不会检查所接收参数的数量。在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。this 的值，在函数中使用时，是“拥有”该函数的对象。 this 并不是变量，它属于关键词，无法改变 this 的值。JavaScript 变量属于本地或全局作用域。全局变量能够通过闭包实现私有。

事件：

能够对HTML事件作出反应，常见的事件有onclick,onload,onmouseup等。

jQuery编程基础：

jQuery 是一个 JavaScript 库。jQuery库包含以下功能：HTML元素选取、HTML元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX等。

jQuery选择器：

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。所有选择器都以美元符号开头：$()。

jQuery事件处理：

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。例如：$("p").click();是页面中指定一个点击事件，那么可以通过一个事件函数实现在什么事件触发该事件：$(“p”).click(function(){
// 动作触发后执行的代码
});

动画效果：

jQuery animate() 方法用于创建自定义动画。 jQuery fadeIn() 方法可以得到淡入效果，fadeOut() 方法可以得到淡出效果。
jQuery回调函数：
回调函数就是一个通过函数指针调用的函数。如果把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，这就是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，才会真正的执行回调函数内部的方法。很多jQuery函数会涉及动画，由于 JavaScript 语句是按照次序逐一执行的，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，就可以以参数的形式添加 Callback 函数。Callback 函数在当前动画 100% 完成之后执行。

Ajax：

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。通过在