前端知识复习

最新推荐文章于 2020-12-19 16:22:06 发布

哎呀呀(^^)

最新推荐文章于 2020-12-19 16:22:06 发布

阅读量510

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/Wyn199925/article/details/104503923

版权

前端知识复习

（一）HTML

HTML是一种超文本标记语言，用来描述页面内容的显示方式，能用来表现如文字、视频、音频、程序等复杂元素。
HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。
HTML的基本组成单位是标签，标签对的组成：标签名、属性（名值对）、内容，语法结构如下：

	<标签>
    	  内容
	<标签>

例子：<a href="www.eec-cn.com">U+新工科</a>

HTML文档结构是由三大元素组成：
- html标签：文档以该标签开始又以该标签结束，所有内容都需要放在这对标签中间。
- head元素：页面的头部信息，用于向浏览器提供整个页面的基本信息，但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示，标题元素（标签的内容）除外，会显示在浏览器窗口的左上角。
- body元素：页面的正文，是用户在浏览器主窗口中看到的信息，包括图片、表格、段落、图片、视频等内容，且需位于标签之内；但并不是所有的内部标签都是可见的。
编写HTML文件的注意事项：
(X)HTML文档应以标签进行声明，位于所有的文档标签之前，用于说明该文档所使用HTML或XHTML的特定版本，告知浏览器应按照什么方式对页面文档进行解析。

	【示例】HTML 5文档类型声明
			<!DOCTYPE html >

HTML文档的head元素包含很多标签，用于向浏览器提供整个页面的基本信息。
head中可以包含以下子元素：title、meta、base、link、script以及style等
HTML文档中的文本元素包括：内容标题、文本修饰以及特殊字符。
- 内容标题：h1、h2、h3、h4、h5、h6
- 文本修饰：font、b、i、s、u、sup、sub、strong、big、small
- 特殊符号：双引号（“）"、&号 &、空格  、小于号（<）<、大于号（>）>、小于等于（≤）≤、大于等于（≥）≥、版权号（©）©、商标符号（™）™、注册商标（®）®、分数（¼）¼、分数（½）½等
文档结构元素：
- 段落标签：p
- 换行标签：br
- 水平线标签：hr
列表元素：
- 有序列表：

	<ol>
		<li>列表项 1</li>
		<li>列表项 2</li>
		......
	</ol>

 - 无序列表：

	<ul type="类型">
		<li>列表项 1</li>
		<li>列表项 2</li>
		......
	</ul >

 - 定义列表：

 	<dl>
		<!-- 第1项开始 -->
		<dt>标题 1</dt >
		<dd>描述 1</dd>
		<!-- 第1项结束 -->
		<!-- 第2项开始 -->
            ......
		<!-- 第2项结束 -->	
	</dl >

块级元素<div>标签用于将网页中的某一特定区域用边框围起来，并赋予指定的样式。

<div style="块元素的样式" class="类选择器名称" align="对齐方式">
	内容部分
	......
</div>

其中style属性用于设置div元素的行内样式；

class属性用于引用CSS的类选择器；

align属性用于设置div元素中的内容的对齐方式，取值范围是left、right、center或justify

标签属于行内块，用于指定行内元素，通过标签来选择特定的文本，以便赋予特殊的样式；

<span style="块元素的样式" class="类选择器名称" align="对齐方式">
    内容部分
</span>

其中style属性用于设置span元素的行内样式；

class属性用于引用CSS的类选择器；

align属性用于设置span元素中的内容的对齐方式，取值范围是left、right、center或justify

超链接标签:
- 当浏览者点击链接（HyperLink）时，可以直接转向对应的网页、图片、文件或邮箱等资源；
- 常见的超链接有以下几种类型：文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接

		<a href="url" name=" " target=" ">链接内容</a>

表格标签：

	<table> 
 		<!-- 一行可以包含多个单元格 -->
  		<tr>
    		<td>单元格内容</td>
    		<td>单元格内容</td>
   		 	<!--更多单元格-->
    		......
  		</tr>
   		<!--更多行-->
   		......
	</table>

其中表格的各组成部分均包含在<table>标签之内

单元格是表格的基本元素，使用<td>标签表示

行是表格的水平元素，使用<tr>标签表示

一行可以由一个或多个单元格构成，而一个表格可以由一行或多行构成

表格的常用属性有对齐方式、背景颜色、边框、高度、宽度等。
单元格标签：
- 单元格标签是表的基本元素，包括<td>和<th>标签
- 标签多用来包含表格中的数据部分，而标签用来包含表格的标题部分
- 单元格常用的属性有水平对齐、垂直对齐、水平跨度、垂直跨度、宽度、高度、背景颜色等
表单：
- Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息
- 表单主要分为表单标签及表单控件两大类
- 表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素，除多行文本框和列表选择框外，大部分表单域使用标签来创建。
  - 单行文本框，通常用来输入一些简单的内容。通过将标签的type属性设为text方式来创建一个单行文本框。
  - 密码框与文本框相似，但在框中输入内容时，显示的不是当前输入的内容而是掩码形式（星号“*”或其他符号）
  - 单选按钮是指在一组数据中只能选择其中一个选项，通过将标签的type属性设为radio方式来创建一个单选按钮选项。当表单中有多个单选按钮时，浏览器会根据单选按钮的name属性进行分组。
  - 复选框是指在一组数据中允许用户选择一项或多项，各项之间并不互斥，通过将标签的type属性设为checkbox方式来创建一个复选框，当复选框有多项数据时，浏览器会根据复选框的name属性进行分组，分组前后在页面显示方面并没有差别，但在使用JavaScript特效或向服务器提交数据时，需要对复选框进行合理分组，以便对数据的处理。
  - 文件选择框是用户通过表单上传文件时，需要使用文件选择框来选择上传文件，通过将标签的type属性设为file方式来创建一个文件选择框，使用文件选择框时，form表单的enctype属性应设为multipart/form-data类型，method属性应为post类型。
  - 隐藏域是在网页之间传递数据时，有些数据不希望用户在页面中看到，可以通过隐藏域来实现，通过将标签的type属性设为hidden来创建一个隐藏域。
  - 多行文本框是用来输入较长内容的文本输入控件，通过将标签创建一个多行文本框，标签之间的内容会在页面加载时显示出来。
  - 列表选择框允许用户从列表中选择一项或多项。在HTML中，可以通过和标签来创建一个列表框。
- 在表单域录入数据后，可通过表单的特殊控件（如提交按钮等）将数据传递给服务器端，由服务器接收表单数据并进行处理（常见的服务器端语言有JSP、PHP、ASP.NET、NodeJS等）
- 表单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，甚至用于触发客户端脚本程序。按钮分为提交按钮、重置按钮、图片按钮和普通按钮，可以通过标签或标签来创建按钮。

（二）CSS

样式是CSS的基本单元，每个样式包含两部分内容：
- 选择器（Selector）：用于指明网页中哪些元素应用此样式规则。浏览器解析该元素时，根据选择器指定的样式来渲染元素的显示效果；
- 声明（Declaration）：每个声明由属性和属性值两部分构成，并以英文分号（;）结束
CSS基本格式：
- 其中，一个选择器可以包含有一个或多个声明。
  在CSS样式声明中，书写格式可能有所不同，但应遵循以下规则：
  第一项必须是选择器或选择器表达式
  选择器之后紧跟一对大括号
  每个声明是由属性和属性值组成，且位于大括号之内
  声明之间需以英文分号进行间隔
  最后一个声明后面的英文分号可以省略
CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。
- 内嵌样式（Inline Style Sheet）又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。
- 内部样式表（Internal Style Sheet）将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。
- 外部样式表是将CSS样式以独立的文件进行存放，然后在页面中引入该样式文件。
- 链接外部样式：在HTML中标签用于将文档与外部资源进行关联，经常用于链接网页的外部样式表.
  <link type="text/css" rel="stylesheet" href="url" />
  其中：type属性用于设置链接目标文件的MIME类型，CSS样式表的MIME类型是text/css
  
  rel属性用于设置链接目标文件与当前文档的关系，stylesheet表示外部文件的类型是CSS文件
  - 在页面的标签中使用标签关联style.css样式文件，然后在中通过标签选择器引用样式文件中预定义的样式

	<html>
  		<head>
    		<title>链接外部样式表的使用</title>
    		<link type="text/css" rel="stylesheet" href="css/style.css" />
  		</head>
  		<body>
    		<h1>链接外部样式表的使用</h1>
    		<hr/ >
 	 	</body>
	</html>

样式表的优先级
- 内联样式表的权值最高 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对象。