HTML+CSS+JavaScript复习

HTML+CSS+JavaScript复习

HTML第一节课-3.7

前端和后端：

前端，用户看到的视图逻辑，在浏览器上运行的，炫酷的震撼的页面效果。

后端：显示动态数据，需要从数据库中取出

B/S架构原理:

在浏览器地址栏上输入网址

点击回车，向服务器发送一个请求

服务器向浏览器返回一个HTML代码，浏览器对代码进行解析。

开发工具：HBuilder，Dreamweaver（可视化更丰富一些）

一、常见标签

1. table：

2. table属性：单元格对齐方式，border单元格表框，width宽50%占浏览器的百分比，缩小也会随之改变。

3. tr表示行，td表示普通列，th也是列，但是自动加粗居中，可做标题栏

4. img标签：width=200px，高度会等比例缩放，若设置高度，图片可能失真。

5. a标签：target属性表示网址打开在哪个页面。也可以嵌套img标签

6. ul无序列表:

7. 表示一项，可以嵌套无须标签，type显示圈还是方框

9. ol有序列表:

10. 表示一项，可以嵌套。type设置显示编号样式

12. form表单：收集用户信息，区别于网址向服务器请求。。。。单选复选下拉用户只能选择额需要设置value值，会返回给服务器，但是输入框不需要，默认填充

    action属性：相当于a标签的href。

    所能能够提交的表单按钮，type必须是submit

    input可以是输入框，按钮，单选，复选，file

    radio单选框：name值一样，属于一组，做到单选效果，需要设置value值，提交服务器时显示在地址栏，可以设置默认单选框checked

9.input标签：文本字段、复选框、掩码后的文本控件、单选按钮、按钮。可以是按钮

​ 重点：表单项的name属性非常重要，没有name不会包装数据

10.下拉菜单select：需要设置name属性，列表项为《option》需要设置value

11.span和div：图层=盒子。div默认情况独占一行，span不会独自占行

CSS第一节课-3.8

1、三种调用方式=**内联定义（**在标签内部使用style=‘属性名：属性值’进行设置）两个样式名：样式值之间用；分割。+定义内部样式块方式+引入外部独立样式表文件（使用link标签，href指定css文件位置）

2、具体属性，采用查表，css样式表帮助文档。

3、选择器=id选择器/类选择器/标签选择器

1. ​ id选择器：#id{}
2. ​ class选择器：.class{}
3. ​ 标签选择器：div{}

JavaScript第一二节课-3.8+3.9+3.10

（一）、概述

1. 简称JS，一种脚本语言，属于编译型语言。。是一门语言。。与java的区别，目标程序java以普通文本打开不能打开（编译型语言）。js用记事本可以打开（脚本语言，不需要编译）。。。与java没有任何关系，JavaScript运行在浏览器中，浏览器中有执行js代码的内核。。。。功能：js主要用来操作HTML节点，产生动态效果。

2. js包括三大块：ECMScript、DOM（文档对象模型）、BOM。

3. 1. ​ ECMA是核心，是js开发标准
   2. ​ DOM对HTML中节点进行操作，是W3C制定的
   3. ​ BOM对浏览器本身操作，前进后退，关闭窗口

4. js是一种事件驱动型，每个事件对应的事件对应事件句柄，以属性的方式存在.<input type="button" onclick=""></input>'

5. 使用JS弹窗：在js中有一个内置BOM对象，直接拿来使用，全部小写：window，aler方法<input type="button" onclick="window.alet()"></input>

6. 三种使用方法：

7. 1. 脚本块方式使用，在页面打开时执行。
   2. <script type='text/javascript'>位置任意</script>
   3. 引入外部独立的js文件，但是在引入外部文件的标签中再写js代码，不会起作用。
   4. 在标签中使用时间句柄

（二）、编码基础

1. 变量：java变量是强类型变量，js是一种弱类型语言，不需指定类型，赋什么值就是什么值，并且可变。var a,b,c;

2. 函数：function 函数名（a,b）{return 3.14} 或者 函数名=fuction（a，b）{return 3.14}不需要指定返回值类型，形式参数变量类型。

3. 类：与函数命名方法一致，就是调用方式不一样 this.属性名=属性值。this.方法名=fuction（）{}

4. F12控制台很重要，调试js代码。首选方案，是alert弹出变量值。其次是F12.

5. 局部变量与全局变量：如果不带var，默认全局变量，所以必须赋初值。

6. typeof运算符：获取当前对象的数据类型。结果可以是undifinded、number、string、boolean、object、function，null。if(type x=="number)"

   变量其他略

7. object类型：var o=new Object（）掌握prototype属性，动态的为object添加属性和方法。var o=new Object(); Object.prototype.dosome=function (){ };o.dosome();

（三）、JS的常用事件

1、每个事件都有对应的句柄。on+事件名。自己编写回调函数。事件注册两种方式，on+事件或者通过document获取id，再获得的对象名.on+事件名=定义的函数名。mybtn.οnclick=sum； 或者写一个匿名函数，mybtn.οnclick=function(){balabala}；

2、内置document对象：BOM的顶级对象是window，DOM的顶级对象是document。·var mybt=document.getElementById("mybtn");

3、事件执行顺序：getid放在id定义的上方，会报错，显示找不到标签。

4、处理事件的完美案例：

window.onlode=function(){

js代码

}如果想过getElementById就需要在加载完页面之后再加载js，使用上面的方式。如果直接是回调函数，直接定义函数即可。

注：在页面加载后触发lode执行，也就是ID的获取在页面加载之后，所以不会报错，然后事件发生时触发onclick

5、捕捉回车键：onkeydown，回车的keycode=12，esc=27

6、void运算符：使用方法，void（表达式），执行但不返回结果。在href=“javascript：void(0)”。JavaScript不可省。代表是一个js代码。当前超链接样式在，但是不跳转。如果路径什么也不写。就会跳转至当前页面。

7、控制语句： 与java相似，只是声明变量时var，数组元素类型任意。

8、 将当前窗口升级为顶级窗口。window.top.location=window.self.location

9、历史记录：window.history.back()

10、eval函数：window.eval(“字符串”)，可以把字符串当成一段js代码解释执行。
11、常用标准js案例：

（四）、JSON

1. JavaScript Object Notation（JavaScript标记对象）简称JSON。一种轻量级数据交换格式（数据交换：JavaScript和java之间、C语言和java之间）

2. 定于JSON对象，语法格式：var jsonObj={“属性名”：属性值，“属性名”：属性值}注意是**【】是{}后者是json对象，前者是数组对象**

(五)、正则表达式

不是一门独立的学科，每个语言都支持。不是JS专属的，不过在JS中使用居多。

使用正则表达式进行字符串格式匹配。。。例如：邮箱地址表达式验证
表达式进行字符串格式匹配。。。例如：邮箱地址表达式验证。
常用匹配：