前端复习
HTML
-
HTML是一种描述性标记语言，用来描述页面内容的显示方式
-
HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。
-
HTML的基本组成单位是元素，语法结构如下：
<标签> 内容 <标签> -
HTML文档结构是由、和这三大元素组成：
- html元素：文档以标签开始，以标签结束，所有内容都需要放在这两个标签之间。
- head元素：页面头部信息，用于向浏览器提供整个页面的基本信息，但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示，标题元素（
标签的内容）除外，会显示在浏览器窗口的左上角。 - body元素：网页的正文，是用户在浏览器主窗口中看到的信息，包括图片、表格、段落、图片、视频等内容，且需位于标签之内；但并不是所有的内部标签都是可见的。
-
HTML文档的元素包含很多标签，用于向浏览器提供整个页面的基本信息。
-
head标签中可以包含以下子元素：
、、、、</link></base></meta>
-
表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素，除多行文本框和列表选择框外，大部分表单域使用标签来创建。
- 单行文本框，通常用来输入一些简单的内容。通过将标签的type属性设为text方式来创建一个单行文本框。
- 密码框与文本框相似，但在框中输入内容时，显示的不是当前输入的内容而是掩码形式（星号“*”或其他符号）
- 单选按钮是指在一组数据中只能选择其中一个选项，通过将标签的type属性设为radio方式来创建一个单选按钮选项。当表单中有多个单选按钮时，浏览器会根据单选按钮的name属性进行分组。
- 复选框是指在一组数据中允许用户选择一项或多项，各项之间并不互斥，通过将标签的type属性设为checkbox方式来创建一个复选框，当复选框有多项数据时，浏览器会根据复选框的name属性进行分组，分组前后在页面显示方面并没有差别，但在使用JavaScript特效或向服务器提交数据时，需要对复选框进行合理分组，以便对数据的处理。
- 文件选择框是用户通过表单上传文件时，需要使用文件选择框来选择上传文件，通过将标签的type属性设为file方式来创建一个文件选择框，使用文件选择框时，form表单的enctype属性应设为multipart/form-data类型，method属性应为post类型。
- 隐藏域是在网页之间传递数据时，有些数据不希望用户在页面中看到，可以通过隐藏域来实现，通过将标签的type属性设为hidden来创建一个隐藏域。
- 多行文本框是用来输入较长内容的文本输入控件，通过将标签创建一个多行文本框，标签之间的内容会在页面加载时显示出来。
- 列表选择框允许用户从列表中选择一项或多项。在HTML中，可以通过和标签来创建一个列表框。
-
表单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，甚至用于触发客户端脚本程序。按钮分为提交按钮、重置按钮、图片按钮和普通按钮，可以通过标签或标签来创建按钮。
CSS
-
CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。
- 内嵌样式（Inline Style Sheet）又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。
- 内部样式表（Internal Style Sheet）将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。
- 外部样式表是将CSS样式以独立的文件进行存放，然后在页面中引入该样式文件。
-
样式表的优先级
- 内联样式表的权值最高 1000；
- ID 选择器的权值为 100；
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
- 内嵌>内部>外部>浏览器缺省默认
- ！important最大
-
css选择器
-
基本选择器
- 通用选择器：是一个星号（*），功能类似于通配符，用于匹配文档中所有的元素类型。通用选择器可以使页面中所有的元素都使用该规则。
- 标签选择器：是指任意的HTML标签名作为一个CSS的选择器，用于将HTML中的某种标签来统一设置样式。
- 类选择器：指同一样式的元素定义为一类，在类名前有一个点号（.）
- ID选择器：使用井号（#）进行定义，是唯一的，通过ID来识别页面中的元素。通过ID选择器可以对元素单独的设置样式。
-
组合选择器
- 多元素选择器：允许一次定义多个选择器的样式，选择器之间使用逗号（，）隔开。
- 后代选择器：用于选取某个元素的所有后代元素；后代元素之间用空格隔开。
- 子选择器：用于选取某个元素的直接子元素（间接子元素不适用）；子选择器元素之间使用大于号（>）隔开。
- 相邻兄弟选择器：用于选择紧接在某元素之后的兄弟元素。相邻兄弟选择器元素之间使用加号（+）隔开。
- 普通兄弟选择器：是指拥有相同父元素的元素；元素与元素之间不必直接紧随；选择器之间使用波浪号（~）隔开。
-
属性选择器
- 存在选择器
- 相等选择器
- 包含选择器
- 连字符选择器
-
-
常用的CSS样式的属性有文本、字体、背景、表格、列表及定位等属性。
-
cursor属性用于指定用户鼠标的指针类型。在设计表单过程中，使用图片作为提交按钮，当鼠标移到图片上时，通常将鼠标指针由箭头改成手的形状，从而进一步对用户进行提示。
-
通过display属性可以将页面元素隐藏或显示出来；通过display属性可以将元素强制改成块级元素或内联元素。
-
通过display属性可以将页面元素隐藏或显示出来；通过display属性可以将元素强制改成块级元素或内联元素。
-
伪类选择器
- 处于特殊状态的元素称为伪类，而伪元素是指元素中特别的内容（元素的一部分）。伪类以冒号（：）开始，在类型选择符与冒号之间不能出现空白，冒号之后也不能出现空白。
- :link、:visited、:active、:link、:visited和:active等伪类
-
盒子模型
- 在页面布局中，为了将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范，称为盒子模型。
- 页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，通过盒子之间的嵌套、叠加或并列，最终形成了页面。
- 盒子模型是由内容（content）、边框（border）、内边距(padding)和外边距(margin)四部分组成。
JavaScript
-
JavaScript是一种脚本语言，可以直接嵌入HTML页面之中，当用户在浏览器中预览该页面时，浏览器会解释并执行其中的JavaScript脚本，随着HTML 5的出现，JavaScript的重要性更加凸显，在Canvas绘图、本地存储、离线应用和客户端通信等方面都需要结合JavaScript脚本来实现。
-
JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的客户端脚本语言，其特点如下：解释性、嵌套在HTML中、弱数据类型、跨平台、基于对象、基于事件驱动。
-
JavaScript脚本不仅能嵌入到HTML页面中，还能以独立文件的形式进行存放。在页面中使用JavaScript脚本的形式有以下三种：行内JavaScript脚本、内部JavaScript脚本、外部JavaScript脚本。
-
标识符：用来命名变量、函数或循环中的标签。命名规范：
- 标识第一个字母必须是字母、下划线、或美元符号
- 标识符区分字母的大小写，推荐使用小写形式或骆驼命名法
- 标识符由数字、字母、下划线（_）、美元符号（$）构成
- 标识符不能与JavaScript中的关键字相同
-
关键字（Reserved Words）是指JavaScript中预先定义的、有特别意义的标识符。而保留关键字是指一些关键字在JavaScript中暂时未用到，可能会在后期扩展时使用。关键字或保留关键字都不能用作标识符（包括变量名、函数名等）。
-
常见的数据类型有String、Boolean、Array、Number和Undefinded等类型。
-
在JavaScript中，变量的类型可以改变，但某一时刻的类型是确定的。
-
变量是程序存储数据的基本单位，用来保存程序中的数据。
-
变量名是标识符中的一种，应遵循标识符的命名规范。
-
变量的定义
var 变量1[,变量2,...]; -
JavaScript中的变量是弱数据类型，在声明变量时不需要指明变量的数据类型，通过关键字var进行声明；在变量的使用过程中，变量的类型可以动态改变，类型由所赋值的类型来确定。通过typeof运算符或typeof()函数来获得变量的当前数据类型。
-
变量的作用域是指变量的有效范围，根据作用域变量可分为全局变量和局部变量。
- 全局变量是指定义在函数之外的变量或者未定义直接使用的变量
- 局部变量是指在函数内部声明变量，仅对当前函数体有效。
-
注释用于提高代码的可读性，其本身是用于提示，而注释的内容是不会被执行的。在JavaScript中，注释分为两种形式：单行注释和多行注释。
- 单行注释使用双斜线“//”符号进行标识，斜线后面的文字内容不会被解释执行，单行注释可以在一行代码的后面，也可以独立成行。
- 多行注释是使用“/* … */”进行标识，其中的文字部分同样不会被解释执行。
-
常用运算符：
- 赋值运算符：用于对变量进行赋值，在JavaScript中使用等号（=）进行赋值。
- 算术运算符
- 比较运算符：用于判断两个变量（或常量）的大小，比较的结果是布尔类型
- 逻辑运算符：用于对布尔类型的变量（或常量）进行操作；
- 三元运算符
-
流程控制
- 分支结构(if和switch)
- 循环结构(while、do while、for等)
- break、continue、return等转移语句
-
for in循环是JavaScript提供的一种特殊循环，可以对字符串、数组、对象集合、对象属性等进行遍历
-
函数是一组延迟动作集的定义，可以通过事件触发或在其他脚本中进行调用，在JavaScript中，函数可分为预定义函数和用户自定义函数。预定义函数是指在JavaScript引擎中预先定义的内建函数，用户无需定义便可直接使用。
-
JavaScript中除了可以使用预定义函数外，还可以使用自定义函数，在自定义函数时既不需要声明函数的参数类型，也不需要声明函数的返回类型，JavaScript目前支持的自定义方式有命名函数、匿名函数、对象函数和自调用函数。
-
命名函数的定义：由函数定义和函数调用两部分组成。在使用函数时，应先定义函数，然后再进行调用。完成函数的定义后，函数并不会自动执行，只有通过事件或脚本调用时才会执行。
-
匿名函数，是网页前端设计者经常使用的一种函数形式，通过表达式的形式来定义一个函数。匿名函数的定义格式与命名函数基本相同，只是没有提供函数的名称，且在函数结束位置以分号（；）结束。由于没有函数名字，所以需要使用变量对匿名函数进行接收，方便后面函数的调用。
-
对象函数：JavaScript还提供了Function类，用于定义函数，参数都是字符串，前面传参 ，最后为函数体。
-
自调用函数：函数本身不会自动执行，只有调用时才会被执行。在JavaScript中，提供了一种自调用函数，将函数的定义与调用一并实现。
JavaScript对象
-
JavaScript是一种基于对象的语言，对象是一种特殊的数据类型，由变量和函数共同构成
-
在JavaScript内置对象，内置对象是指系统预先定义好的，直接使用的对象。
- Array数组对象
- String字符串对象
- Date日期对象
- Math数学对象
- RegExp正则表达式对象
-
数组（Array）是一个有序的数据集合，使用单独的变量名来存储一系列的数据。在JavaScript中，定义数组时不需要指定数组的数据类型，而且可以将不同类型的数据存放到一个数组中。通过数组的构造函数Array()来创建一个数组对象。
-
Array对象的属性包括constructor、length和prototype。
-
数组对象的常用方法
- concat()方法用于连接两个或多个数组，返回合并后的新数组，而原数组保持不变
- join()方法用于把数组中的所有元素放入一个字符串中，并通过指定的分隔符隔开。
- push()方法用于向数组的末尾添加一个或多个元素，返回数组的新长度
- slice()方法用于从数组中返回选定的元素
-
字符串对象（String）用于对文本字符串进行处理，字符串的创建有以下两种方式：字面量方式和new方式。
- 字面量方式
- 字符串类型是一个基本的数据类型，而字符串对象是将字符串封装成了一个对象
- 封装后的对象可以调用该对象的属性和方法
- 在JavaScript中，可以隐式地将一个字符串转换成字符串对象
- new方式创建字符串对象是通过调用String()构造函数来完成，并返回一个String对象
-
Date日期对象：JavaScript通过日期对象（Date）来操作日期和时间。通过日期对象的构造函数创建一个系统当前时间或指定时间的日期对象。
-
Math数学对象：数学对象（Math）提供了一些数学运算中的常数及数学计算方法，在数学运算时非常有用。与String、Date不同，Math对象没有提供构造方法，可以直接使用Math对象。在Math对象中，提供了一些常用的数学常数，如圆周率、自然对数的底数等。
-
RegExp正则表达式对象：正则表达式是一种字符串匹配的模式，通过单个字符串来描述和匹配一系列符合某个句法的规则。JavaScript提供了一个RegExp对象来完成有关正则表达式的匹配功能。
-
创建一个RegExp对象有两种方式：直接量方式和构造函数方式。不仅能单独使用元字符、括号表达式或量词来创建一个RegExp对象，还可以将以上三者混合使用来创建RegExp对象。
BOM和DOM模型
-
浏览器对象模型BOM定义了JavaScript操作浏览器的接口，提供了与浏览器窗口交互的功能，例如获取浏览器窗口大小、版本信息、浏览历史记录等，在HTML 5中，W3C正式将BOM纳入到其规范之中，BOM是用于描述浏览器中对象与对象之间层次关系的模型，提供了独立于页面内容、并能够与浏览器窗口进行交互的对象结构。
-
window对象是BOM模型中的顶层对象，其他对象都是该对象的子对象，浏览器会为每一个页面自动创建window、document、location、navigator和history对象：
- window对象是BOM模型中的最高一层，通过window对象的属性和方法来实现对浏览器窗口的操作
- document对象是BOM的核心对象，提供了访问HTML文档对象的属性、方法以及事件处理
- location对象包含当前页面的URL地址，如协议、主机名、端口号和路径等信息
- navigator对象包含与浏览器相关的信息，如浏览器类型、版本等
- history对象包含浏览器的历史访问记录，如访问过的URL、访问数量等信息
-
DOM（文档对象模型）属于BOM的一部分，用于对BOM中的核心对象document进行操作，DOM是一种与平台、语言无关的接口，允许程序和脚本动态地访问或更新HTML或XML文档的内容、结构和样式，且提供了一系列的函数和对象来实现访问、添加、修改及删除操作，document对象是DOM模型的根节点。
-
在JavaScript中，事件分为两大类：操作事件：用户在浏览器中操作所产生的事件，
文档事件：文档本身所产生的事件，如文件加载完毕、卸载文档和文档窗口改变等事件。 -
操作事件包括鼠标事件、键盘事件和表单事件：
- 常见的鼠标事件(Mouse Events)有鼠标点击、双击、按下、松开、移动、移出和悬停等事件
- 键盘事件事件(Keyboard Events)包括按下、松开、按下后又松开等事件；
- 表单及表单元素事件(Form & Element Events)包括表单提交、重置和表单元素的改变、选取、获得焦点、失去焦点等事件
-
对HTML元素绑定事件的方式有：HTML元素的属性绑定和JavaScript脚本动态绑定
- HTML元素的属性绑定事件：在HTML标签内，使用以on开头的某一属性（如onclick、onmouseover等）为该元素绑定指定的事件处理函数。
- JavaScript脚本动态绑定事件：通过JavaScript脚本获得文档中的某一对象object，然后通过object.onxxx方式为该元素绑定指定的事件处理函数。
-
在window对象中，常用的方法有open()、close()、setTimeout()、setInterval()和clearTimeout()等方法。
-
setTimeout()方法用于设置一个计时器，在指定的时间间隔后调用函数或计算表达式，且仅执行一次。
-
setInterval()方法用于设置一个定时器，按照指定的周期（以毫秒计）调用函数或计算表达式。
-
document对象的方法：
- write()和writeln()方法，write()和writeln()方法都是用于向文档流中输出内容；当输出内容为纯文本时，将在页面中直接显示；当输出内容为HTML标签时，由浏览器解析后并进行显示。writeln()与write()基本相同，区别在于writeln()每次输出结果之后额外加一个换行符（\n）。页面中的换行通常使用br标签而非换行（\n），换行符仅在pre标签中起作用。
- getElementById()方法
用于返回指定ID的元素；当页面中有多个ID相同的元素时，只返回第一个符合条件的元素，在页面元素操作时，元素的ID应尽量唯一，以免因浏览器不兼容而导致无法实现页面效果。 - getElementsByName()方法：用于返回指定name属性的元素集合，多用于单行文本框和复选框等具有name属性的元素。
- getElementById()方法：用于返回指定标签名的元素集合，元素在集合中的顺序即是其在文档中的顺序，当参数为“*”时，将返回页面中所有的标签元素。
- getElementsByClassName()方法：用于返回指定class属性的元素集合，该方法属于HTML 5 DOM中新定义的方法，在IE 8及之前版本的中无效。
- querySelector()方法：用于返回指定CSS选择器的元素；当满足条件的有多个时，只返回第一个元素。
- querySelectorAll()方法：是HTML 5中新引入的方法，返回指定CSS选择器的元素集合。
-
DOM节点：HTML文档的结构是一种树形结构，HTML中的标签和属性可以看作DOM树中的节点，节点又分为元素节点、属性节点、文本节点、注释节点、文档节点和文档类型节点，各种节点统称为Node对象，通过Node对象的属性和方法可以遍历整个文档树。
2368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
