javaweb期末考试自用

HTML

HTML 定义

• HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

• HTML 指的是超文本标记语言: HyperText Markup Language

• HTML 不是一种编程语言，而是一种标记语言

• 标记语言是一套标记标签 (markup tag)

• HTML 使用标记标签来描述网页

• HTML 文档包含了HTML 标签及文本内容

• HTML文档也叫做 web 页面

HTML标签

标题h1

 
这是标题 1
这是标题 2
这是标题 3
这是标题 4
这是标题 5
这是标题 6
 

段落p

 
这是一个段落。
这是一个段落。
这是一个段落。
 

链接a

 
这是一个链接使用了 href 属性
 

图像 img

表格table

• 表格标题

• 单元格合并

  • colspan:单元格占用表格列数

  • rowspan:单元格占用表格行数

  
    
    
  
  
    
    
  
表格标题
表格标题
表格数据
表格数据

列表

• 无序列表ul

    
项目
    
项目

• 有序列表

    
第一项
    
第二项

• 定义列表

表单 form

• 表单就是收集用户信息的，就是让用户填写的、选择的。

• 表单属性

• form是英语表单的意思，form中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容

 //设置单行文本域。
 //设置密码域。
//设置复选框。
//设置单选按钮，同名单选按钮只允许选择一个。
//设置提交按钮，每个表单都有的，
//设置重置按钮，
 //隐藏域，用于发送几个不用浏览者填写，但是处理程序需要的数据，比如一份调查问卷的期次。
//一般按钮。

苹果
香蕉
樱桃


 

实体

< //等同于 <
> //等同于 >
© //等同于 ©

链接

• href

  • 用于定位需要链接的文档

  • 设置要链接到的文档的URL

  • 可以使用相对路径或绝对路径★

  • 链接的目标可以为任何类型的文件（例如可以为音视频文件）

• target

  • 显示链接的窗口或框架，可取以下值：

    • blank在新窗口中打开超链接

    • self在本窗口或本框架中打开超链接（默认）

    • parent在上一级框架中打开超链接

    • top在整个浏览器窗口中打开超链接

• name设置超链接的定位点

字体font

• size设置文字的大小，可取1到7的整数值。

• color设置文字的颜色。

• face设置文字的字体列表，第一种字体是首选的，如果用户机器上没有第一种字体，就用第二种字体显示，依次类推。如果列表中的字体都没有，就用用户机器上的默认字体显示。

文档主体body

• bgcolor设置页面背景颜色。※

• background设置页面的背景图片的URL。

• bgproperties取fixed 值时设置背景不随滚动条滚动，不设此属性时背景随滚动条滚动。

• text设置页面非超链接文字基本颜色。

CSS

css定义

• CSS：层叠样式表（Cascading Style Sheet）

• CSS是一种用来表现HTML文件样式的计算机语言，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

• CSS不仅可以修饰静态网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

• CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

css优势

• 内容与表现分离

• 网页的表现统一，容易修改

• 减少网页的代码量，增加网页的浏览速度，节省网络带宽

css语法结构

css选择器

• 标签选择器

• 类选择器

• ID选择器

css引入方式

• 行内样式

• 内部样式表

• 外部样式表

css继承

• 子标签可以继承父标签的样式风格

• 子标签的样式不会影响父标签的样式风格

• ID选择器>类选择器>标签选择器

css文本样式

字体

• font-family 设置字体类型 font-family:"隶书";

• font-size 设置字体大小，单位：px（像素） font-size:12px;

• font-style 设置字体风格 normal、italic、oblique font-style:italic;

• font-weight 设置字体的粗细 font-weight:bold;

• font 在一个声明中设置所有字体属性

  • 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

  • font: italic bold 36px "宋体";

文本

• color 设置文本颜色

  • 十六进制方法表示颜色

  • color:#00C;

• text-align 设置元素水平对齐方式

  • left把文本排列到左边。默认值：由浏览器决定

  • right把文本排列到右边

  • center把文本排列到中间

  • text-align:right;

• text-indent 设置首行文本的缩进 text-indent:20px;

• line-height 设置文本的行高 line-height:25px;

• text-decoration 设置文本的装饰 text-decoration:underline;

网页背景

背景颜色background-color

CSS3新特性/大题？

• 强大的CSS选择器

• 新的颜色制式和透明设定

• 多栏布局的实现

• 多背景图效果

• 文字阴影效果

• 开放的网络字体类型

• 圆角

• 边框背景图片

• 盒子阴影

• 媒体查询

CSS3新增选择器/大题？

• 层次选择器

• 伪类选择器

• 属性选择器

• 伪元素选择器

盒子模型div

• div 不像 h1，p标签，没有任何默认样式，其主要作用是标识网页上的某块区域。

• 常见做法是通过给div元素加上id或class，然后通过css选中某个div，对其进行样式美化。

• 每个div可以看成一个盒子一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：

  • width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。

  • 盒子的宽度=内容宽度+padding+border

  • height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。

  • 盒子的高度=内容高度+padding+border

  • padding：内边距。

  • border：边框。

  • margin：外边距。

  • 盒子模型总尺寸=border-width+padding+margin+内容宽度

• border-top-color上边框颜色border-top-color:#369;

• border-right-color右边框颜色border-right-color:#369;

• border-bottom-color下边框颜色border-bottom-color:#fae45b;

• border-left-color左边框颜色border-left-color:#efcd56;

• border-color 上、右、下、左边框颜色：#369、#000、#f00、#00f

• 元素分类

  • 行级（内联）元素

  • 块级元素

  • 内联块元素

• 设置背景图像

  • 背景图像background-image属性

  • 背景重复方式background-repeat属性

  • 背景定位background-position属性

定位

• position属性

  • static：默认值，没有定位

  • relative：相对定位

    • 相对自身原来位置进行偏移偏移设置：top、left、right、bottom

    • 可以用left来描述盒子向右移动；

    • 可以用right来描述盒子向左的移动；

    • 可以用top来描述盒子向下的移动；

    • 可以用bottom来描述盒子的向上的移动

  • absolute：绝对定位

  • fixed：固定定位

• 标准文档流

  • 标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式

  • 一般在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素，块级元素是从上到下一行一行的排列；

  • 默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列；

  • 行内元素是在一行中水平布置，从前到后的排列；span,strong等属于行内元素。

浮动

• float属性

  • left元素向左浮动

  • right元素向右浮动

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

• 浮动的特性

  • 浮动元素支持所有的css样式

  • 内容撑开宽高

  • 多个元素设置浮动，宽度足够的话，会排在一行

  • 脱离文档流

  • 提升层级半级

• overflow属性

  • visible默认值。内容不会被修剪，会呈现在盒子之外

  • hidden内容会被修剪，并且其余内容是不可见的

  • scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

  • auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

JavaScript

JavaScript简介

JavaScript/问答题？

• 基于对象的脚本语言

• 解释执行

• 代码以纯文本形式存储

• 类型宽松

• Netscape公司和Sun公司联手完成

JavaScript功能/问答题？

• 表单确认

• 页面修饰以及特殊效果

• 导航系统

• 基本数学运算

• 动态文档生成

JavaScript特点

• 脚本编写

• 基于对象

• 简单

• 安全

• 动态

• 跨平台

程序题/？

程序题/？

JavaScript语法基础

• JavaScript语法

  • 区分大小写

    • 变量 myTest、myTEST是不同的变量

    • 变量是弱类型

    • 行结尾加分号

    • 括号表明代码块

    • 注释通用简单

  • 在浏览器中逐条解释执行，如果某条语句出现错误，后面的语句将不能执行。

• 注释

  • 单行：//

  • 块注释：/+* +*+/

• 常量

  • JavaScript中没有常量概念

  • 提供了几个默认系统常量供开发使用

  • 这些系统常量只要是数学和数值常量，方便数学运算和特殊值引用

• 变量

  • 保存程序中的临时值，可被后面的脚本使用

  • 弱类型

  • 命名

    • 以字母、下划线（_）或美元符号（$）开头

    • 余下的字符可以是下划线、美元符号或任何的字母、数字

    • 最长为255个字符

    • 不能有空格，大小写敏感

    • 不能使用JavaScript中的关键字或保留字命名

• 数据类型

  • 简单类型/原始类型

    • Undefined-未定义类型未被赋值的变量，值为undefined

    • Null-空类型值为null，尚不存在的对象

    • Boolean-布尔类型值为true/false

    • Number-数字类型任何数字（NaN也是number类型，表示“非数”）

    • String-字符串类型值用引号（单引号或者双引号）括起来

  • 复杂类型

    • Object

• typeof 操作符：typeof操作符是用来检测变量的数据类型

流程控制

JavaScript语言构成

• 主要由控制语句、函数、对象、方法、属性等来实现编程

• 选择语句if语句 、if-else语句 、if-else-if语句、switch语句

• 循环语句for语句 、while语句 、do-while语句 、for-in语句、break和continue语句

• 异常处理语句try-catch语句 、try-catch-finally语句 、throw语句

函数

函数的功能

• 函数的主要功能是将代码组织为可复用的单位，可以完成特定的任务并返回数据

函数/程序题

• 在网页上用javascript函数，在网页上打印出乘法九九表。

• 
  
  
      
      
      
      
  
  
  ​
  
  ​
  
  
  ​

• 使用prompt(””,””)获取用户输入的字符串，直到实现输入“STOP”时停止。并打印所有的输入：其他字符使用红色，“STOP”使用蓝色。

  • Prompt()的使用参见下面写法：var inputStr=prompt("请输入一串字符，当输入‘STOP’时停止","");

  
  
  
      
      
      
      
  
  
  ​
  User Input
  获取用户输入
  
  ​
  
  
  ​

• 完成showImg() 能够动态根据下拉列表的选项变化，更新图片的显示/程序题一定考

  //第一种
    function showImg(oSel){
           document.getElementById("pic").src=document.getElementById("sel").value;
      }
  //第二种
  function showImg(oSel){        
                     var pic=document.getElementById('pic');
                         pic.src=oSel.options[oSel.selectedIndex].value;
                         console.log(pic.src);     
                  };
  ​
  ​
   
      
          
          
          
      
  ​

数组

• 数组元素：是指存储在数组中并赋予唯一索引号的数据段 。

  • 与其它程序语言不同的是，JavaScript的数组元素的数据类型可以不相同

  • 各元素的数据类型可以是任意有效的JavaScript数据类型，元素按添加进数组的顺序存储于数组中。

• 创建数组

  var Obj = new Array();

• Array对象的常用方法

  • concat

    • 返回一个新数组；由两个或者更多数组组合而成

    • var newArray=tmpArray.concat(tmpArray)

  • join

    • 返回字符串；由数组中的所有元素连接到一起，元素间的间隔符由参数指定，省略参数则用逗号

    • 分隔var newString=tmpArray.join(“.”)

  • reverse

    • 返回一个新数组；由原来的数组反转而成

    • var newArray=tmpArray.reverse();

  • toString

    • 返回将Array中的元素转为由逗号分隔的字符串

    • var newString=tmpArray.toString()

• 程序题

  • 定义一个长度为5的数组遍历上面定义的数组逆序输出所有值

  
  
  
      
      
      
      
  
  
  ​
  Reverse Array
  逆序输出数组
  ​
  
  
  ​

  • 定义两个数组，进行连接操作

对象

• String对象

  • charAt(i)返回指定索引位置处的字符

  • charCodeAt(i)返回一个整数，代表指定位置上字符的Unicode编码

  • concat(str)连接字符串

  • indexOf(str)返回String对象内第一次出现子字符串的字符位置（注意：从左至右查找，返回整数值）

  • lastIndexOf(str)返回String对象中子字符串最后出现的位置

  • replace(str1,str2)返回将str1替换为str2后的字符串

正则表达式

• 创建正则表达式 new运算符 字面量方式

  • varbox=newRegExp('box');//第一个参数字符串

  • varbox=newRegExp('box','ig');//第二个参数可选模式修饰符

  • varbox=/box/;//直接用两个反斜杠

  • varbox=/box/ig;//在第二个斜杠后面加上模式修饰符

操作DOM

window

• 程序题

  • 在原来页面的基础上打开新窗口，不要菜单栏和状态栏，大小默认（500，300）；然后在原页面中设置4个按钮，分别可以控制新窗口改变大小和移动（前面的4个方法）

  
  
  
      
      
      
      
  
  
  ​
  Window Manipulation
  打开新窗口
  改变大小
  移动
  恢复默认
  ​
  
  
  ​

  • 分别使用setTimeout()和setInterval()函数实现如下功能在文本框中每隔一秒显示一个数字，即从1到9。第10秒时，提示“10秒钟已到”

    
    
    
    


​
Countdown with setTimeout

开始
​
Countdown with setInterval

开始
​


​

document

操作DOM

遍历DOM

元素节点方法

程序题

• 结果：

  • 这个程序的主要结果是在页面中创建了一个带有红色文本的 div 元素。在运行时，会弹出两个警报框，分别显示子节点的数量和第一个子节点的值。

  • 在这个修复后的程序中，element.childNodes.length 将输出 2，因为创建了两个文本节点并附加到 div 元素中。

  • 而 element.firstChild.nodeValue 将输出第一个子节点的文本值，即 "Hello"。