web前端基础复习整理

考试题型:

单项选择题:30分(15题)

多项选择题:10分(5题)

简答题:30分(5题，每题6分)

编程题:30分(3题，每题10分)

第1章课程简介

1.1课程主要内容

1.2课程的重要性

1.3课程中用到的工具

了解

第2章 Web导论

2.1WEB的定义、表现形式和特点

网络，互联网等领域

超文本，超媒体，超文本传输协议HTTP

动态的，图形化，分布式，交互式 ，平台无关性，

第3章HTML基础

3.1浏览器相关知识

显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互

3.2 HTML 简介

超文本标记语言，特定符号，显示方式，不是编程语言，扩展名html或htm

3.3HTML基本结构

3.4HTML基本标签

<h1-h6>标题大到小 <br>换行 <hr>水平线

<p>段落标签 <strong>加粗 <em>斜体

3.5HTML注释-

<!--****-->

3.6HTML转义字符

&bnsq 空格 > >   < < &quto ”  &&

3.7 HTML属性

属性为HTML提供附加信息 大小写不敏感 属性值加“”/’’

属性总是以明称/值对的形式出现

Size 字体大小 color字体颜色 face字体(face 属性用于指定HTML文档文本默认使用的字体，该属性可以包含多个字体名称，取值时使用浏览器支持的首个字体)

背景颜色bgcolor 背景图片background 背景音乐<bgsound src=”**.mid”loop=-1>

只读属性：把disabled=”disabled”改成readonly=”readonly”

3.8HTML图片标签

<img src=”path”  alt=’’提示’’title=”标题” width=’’宽’’ height=”高”/>

重点:

html基本结构

图片标签、超链接和列表

<a href=”path”target=”目标窗口位置”>连接文本或图像</a>

无序<ul> 有序<ol>

<li>***</li>     <li>***</li>

<li>***</li> <li>***</li>

</ul> </ol>

能够绘制较复杂的表格(代码实现)

能够创建较复杂的表单(代码实现)

form标签中method的取值，不同方式的区别是什么

get :提交方法不安全 ，而且信息量有限制

post 提交更安全 ，而且信息量无限制

第4章CSS基础

4.1为什么要学习CSS

4.2CSS简介

4.3HTML中CSS的引入

4.4 CSS 选择器

CSS选择器优先级

（1）CSS选择器都有权重值，权重值越大优先级越高。

内联样式表的权重值最高，值为1000。

id选择器的权重值为100。

class选择器的权值为10。

类型（元素）选择器的优先级为1。

通配符选择器的优先级为0。

（2）当权值相等时，后定义的样式表要优于先定义的样式表。

（3）在同一组属性设置中表有**“!important"**规则的优先级最大。

（4）外部样式表文件可以由以下哪个标签导入（ ）。A、 link B、 import D、 form

4.5DIV和SPAN标签

4.6字体样式、文本样式、鼠标形状、背景样式和列表样式

front-family  字体类型  front-family:”隶书”

front-size 字体大小  front-size:12px

Front-style    字体风格  front-style:italic

Front-weight   字体粗细  front-weight:bold

Front 在一个声明中设置所有字体属性 front:italic bold 36px “宋体”

4.7盒子模型

4.8浮动和定位

重点:

盒子模型(几种方式，具体是什么)

一、标准盒模型（W3C）1.给标签添加：box-sizing:content-box；(元素默认)2.这个标签就转换为了标准盒模型3.标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度

二、IE盒模型（怪异）1.给标签添加：box-sizing:border-box；2.这个标签就转换为了怪异盒模型3.标签得实际宽度 = 设置的宽度4.如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。

主要区别：对于宽高的二者定义不同

标准盒模型：设置的宽度就等于内容的宽度IE盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

常见的块级元素和行内元素，区别是什么

块级元素：（以下列举比较常用的块级元素，详情可在w3cschool查询）

<div>定义文档中的分区或节 <h1>定义最大的标题 <h2>定义副标题 <h3>定义标题

<h4>定义标题 <h5>定义标题 <h6>定义最小的标题 <ul>定义无序列表

<ol>定义有序列表 <li>定义有序列表或无序列表的列表项目 <dl>定义自定义列表

<dd>定义自定义列表中的条目 <dt>定义自定义列表中的项目 <hr>创建一条水平线

<p>定义段落 <table>定义表格 <td>表格中的标准单元格 <th>定义表头单元格

<thead>标签定义表格的表头 <tr>定义表格中的行

行内元素：（以下列举比较常用的行内元素，详情可在w3cschool查询）

<a>定义超链接

<b>字体加粗

<span>定义在文档中的行内元素

<img>向网页中插入题图像

<input>输入框

<small>小号字体效果

<br>换行

<big>字体加大加粗

<strong>强调的语气

<select>创建单选或多选菜单

<textarea>定义文本域，多行的文本输入控件

行内元素与块级元素的区别：

1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；

　块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；

　块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；

　行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

常见的CSS选择器

1.元素选择器

语法 : 标签名{}

作用 : 选中对应标签中的内容

例:p{} , div{} , span{} , ol{} , ul{} ......

2.类选择器(class选择器)

语法 : .class属性值{}

作用 : 选中对应class属性值的元素

例子 : <p class="A">段落1</p>

          <p class="B">段落1</p>

          <p class="C">段落1</p>

          .A{} , .B{} , .C{} ......

注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值

3.id选择器

语法 : #id属性值{}

作用 : 选中对应id属性值的元素

例子 : <p id="A">段落1</p>

          <p id="B">段落1</p>

          <p id="C">段落1</p>

          #A{} , #B{} , #C{} ......

注意 : id的属性值只能给1个,可以重复利用,不能以数字开头

4.通配符选择器

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

例子 : *{

       margin: 0;  //外间距

             padding: 0;  //内间距

}

二、群组选择器

语法 : 选择器1,选择器2,选择器3...{}

作用 : 同时选中对应选择器的元素

浮动和定位(几种方式，区别是什么

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative 生成相对定位的元素，相对于其正常位置进行定位。

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值

浮动：float：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

值 描述

left 元素向左浮动。

right 元素向右浮动。

none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

inherit 规定应该从父元素继承 float 属性的值。

postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。

如何实现元素在水平和垂直方向都居中

对于行内元素，CSS实现水平居中的方法如下：

text-align:center;

对于块级元素，CSS实现水平居中的方法主要有以下几种：

1、通过绝对定位

对于父元素和子元素的宽度都确定的情况,可以通过设置父元素position:absolute，子元素给剩余宽度一半的margin-left实现CSS水平居中。

2.通过 display:table-cell 和 margin-left

                如果父元素和子元素的宽度都确定的情况，也可以使用display:table-cell和margin-left实现CSS水平居中；此时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。

第5章JavaScript 基础

5.1JavaScript 简介

5.2JavaScript 核心语法

Math.floor()函数用于返回小于或等于指定数字的最大整数，一般称为向下取整

Math对象的ceil()方法用于将它的参数向上舍入到最接近的整数，即它返回大于或等于该参数的最小整数。”

5.3JavaScript 对象

5.4浏览器对象模型(BOM)

5.5文档对象模型(DOM)

重点:“

变量声明的几种方式，什么是变量声明提前?如何使用!

函数定义的几种方式，什么是函数声明提前?如何使用!

小结：函数声明提前的原理和变量声明提前类似；但需要注意的是：只有函数声明格式的函数才会声明提前（像函数表达式、构造函数不会声明提前）

1、定义

声明提前：是指当我们声明一个变量或是一个函数的时候，会在所有代码块之前就进行变量或者函数的声明。

2、变量的声明提前

使用var关键字声明变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不使用var关键字，则变量不会被声明提前。

 3、函数的声明提前

使用函数声明形式创建的函数function(){ } 它会在所有的代码执行之前就被创建，所以我们在可以函数声明前调用函数，使用函数表达式创建函数不会被声明提前。

JavaScript的内置对象和本地对象有哪些，并举例说明其常用的属性和方法

http://t.csdn.cn/JrnmI

JavaScript数据类型有哪几种，用typeof查询返回值的数据类型分别是什么

number,string,boolean,object,function,undefined

一、对于数字类型的操作数而言， typeof 返回的值是 number。比如说：typeof(1)，返回的值就是number。

上面是举的常规数字，对于非常规的数字类型而言，其结果返回的也是number。比如typeof(NaN)，NaN在

JavaScript中代表的是特殊非数字值，虽然它本身是一个数字类型。

在JavaScript中，特殊的数字类型还有几种：

Infinity 表示无穷大特殊值

NaN　　　　　　　　　　　　特殊的非数字值

Number.MAX_VALUE　　　　　可表示的最大数字

Number.MIN_VALUE　　　　　可表示的最小数字（与零最接近）

Number.NaN　　　　　 　　　特殊的非数字值

Number.POSITIVE_INFINITY　表示正无穷大的特殊值

Number.NEGATIVE_INFINITY  表 示负无穷大的特殊值

以上特殊类型，在用typeof进行运算进，其结果都将是number。

二、对于字符串类型， typeof 返回的值是 string。比如typeof("123")返回的值是string。

三、对于布尔类型， typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。

四、对于对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。

五、 对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。

六、如 果运算数是没有定义的（比如说不存在的变量、函数或者undefined），将返回undefined。比如：typeof(sss)、typeof(undefined)都返回undefined。

if和switch两种方法判断一定范围内的成绩，并进行输出(代码实现)判断一个数是否为质数，

输出一定范围内所有的质数。(代码实现)