前端知识点复习

最新推荐文章于 2024-05-12 23:20:50 发布

Iwltmy

最新推荐文章于 2024-05-12 23:20:50 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/dengna1998/article/details/104490775

版权

一、HTML

1.HTML（超文本标记语言，Hyper Text Markup Language）是一种描述性标记语言，用来描述页面内容的显示方式。

2.HTML文件是一种纯文本文件，以".html" 或 ".htm"为后缀。

3.HTML文档结构是由 <html>、<head>和<body>这三大元素组成。

<!DOCTYPE html>
<html>
<head>
      <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
      <title>这是一个简单的页面</title>
 <body>
          网页正文部分
 </body>
 </head>

4.<head>中可以包含以下子元素：<title>、<meta>、<base>、<link>、<script>以及<style>等。

5.meta元素
用于向客户的浏览器传递信息和命令，而不是用来显示内容的。一个标签中可以包含一个或多个标签。

标签主要分为两大类：

对页面的设置，通过http-equiv属性进行指定
对搜索引擎的设置，通过name属性进行指定

6.HTML文档中的文本元素包括：内容标题、文本修饰以及特殊字符。
在这里插入图片描述

7.<font>标签可以用来控制更多的文本字体外观样式，通过face、size和color属性来设定文本的字体、大小和颜色。

8.有序列表：使用一些数值或字母作为编号

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

通过type属性可以指定有序列表编号的样式，取值方式有如下几种：
“1”代表阿拉伯数字（1、2、3…）；
“a”代表小写字母（a、b、c…）；
“A”代表大写字母(A、B、C…）；
“i”代表小写罗马数字（i、ii、iii…）；
“I”代表大写罗马数字（I、II、III…）。
通过start属性指定列表序号的开始位置，例如start="2"表示从2开始编号。

9.无序列表：使用项目符号作为编号

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

10.定义列表：列表中的每个项目与描述配对显示

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

11.块级元素

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

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

style属性用于设置div元素的行内样式；
class属性用于引用CSS的类选择器；
align属性用于设置div元素中的内容的对齐方式，取值范围是left、right、center或justify

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

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

style属性用于设置span元素的行内样式；
class属性用于引用CSS的类选择器；
align属性用于设置span元素中的内容的对齐方式，取值范围是left、right、center或justify

13.图像标签

<img src="url" alt=" " .../>

在这里插入图片描述
14.超链接标签
当浏览者点击链接（HyperLink）时，可以直接转向对应的网页、图片、文件或邮箱等资源；

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

标签的target属性可以改变目标文档的显示窗口
在这里插入图片描述

15.表格

表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成。

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

表格的各组成部分均包含在标签之内
单元格是表格的基本元素，使用标签表示
行是表格的水平元素，使用标签表示
一行可以由一个或多个单元格构成，而一个表格可以由一行或多行构成

表格基本元素
在这里插入图片描述

表格通过、、、标签对表格进行横向分组

16.单元格标签
单元格是表的基本元素，包括和标签
在这里插入图片描述
17.框架
框架（frame）能够将浏览器窗口划分为多个独立的窗格，每个窗格包含一个独立的HTML页面

<frameset rows="行高度所占窗口的像素或比例,.." 
          cols="列宽度所占窗口的像素或比例,.." >
    <frame src="..."/>
	......
</frameset>

18.表单
Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息

表单主要分为表单标签及表单控件两大类

表单控件又可细分为表单域和按钮两部分，常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等

<form action="处理数据程序的URL地址" method="get|post" name="表单名称" … >
</form>

在这里插入图片描述
method属性
（1）get方式：将数据作为URL的一部分发送给服务器。URL由地址部分和数据部分构成，两种之间用问号“？”隔开，数据以“名称=值”的方式成对出现，且数据与数据之间通过“&”符号进行分割。

（2）post方式：将数据隐藏在HTTP的数据流中进行传输；请求数据不会出现在地址栏中，安全性比get方式要高，并且对数据长度没有限制。

1）单行文本框，通常用来输入一些简单的内容。

<input type="text" name="…" size="…" maxlength="…" value="…"       disabled="disabled" readonly="readonly"/>

2）密码框，在框中输入内容时，显示的不是当前输入的内容而是掩码形式（星号“*”或其他符号）

<input type="password" name="…" size="…" maxlength="…"
       value="…" />
符号

3）单选按钮是指在一组数据中只能选择其中一个选项

<input type="radio" name="…" value="…"  />

具有相同name属性的单选按钮分为一组，一组只能选择一项

4）复选框是指在一组数据中允许用户选择一项或多项，各项之间并不互斥

<input type="checkbox" name="…" value="…" checked="checked"/>

5）文件选择框
用户通过表单上传文件时，需要使用文件选择框来选择上传文件

6）隐藏框

<input type="hidden" name="…" value="…" />

7）多行文本框是用来输入较长内容的文本输入控件

<textarea name="…" rows="…" cols="…" wrap="…" > 文本内容 </textarea>

8）
列表选择框允许用户从列表中选择一项或多项

<select name="…" size="…" multiple="multiple">
   <option value="…" selected="selected">选项描述内容</option>
    …
</select>

表单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，甚至用于触发客户端脚本程序。
按钮分为提交按钮、重置按钮、图片按钮和普通按钮，可以通过标签或标签来创建按钮。

<input type="submit|reset|button|image" name="…" src="…" value="…" />

二、CSS（层叠样式表）

1.样式是CSS的基本单元，每个样式包含两部分内容：

选择器（Selector）：用于指明网页中哪些元素应用此样式规则。浏览器解析该元素时，根据选择器指定的样式来渲染元素的显示效果；
声明（Declaration）：每个声明由属性和属性值两部分构成，并以英文分号（;）结束

2.CSS基本格式
在这里插入图片描述
3.CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。

（1）内嵌样式（Inline Style Sheet）又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。

<p style="color:red; background: yellow;">内嵌样式-style属性</p>

（2）内部样式表（Internal Style Sheet）将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。

（3）链接外部样式表

<link type="text/css" rel="stylesheet" href="url" />

一般情况下，多重样式的优先级由高到低的顺序是“内嵌–>内部–>外部–>浏览器缺省默认”。

4.下列是一份优先级逐级增加的选择器列表：
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 规则例外

内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

5.CSS选择器
在这里插入图片描述

基本选择器

1）通用选择器

*{   }

2)标签选择器

p{ font-family:宋体; }

3)类选择器

.box{color:red;}

4)ID选择器

#box{color:gray;}

选择器之间也存在优先顺序，优先级从高到低分别是：
“ID选择器–>类选择器–>标签选择器–>通用选择器”

组合选择器

1）多元素选择器

selector1, selector2 ,...{font-size:14px; color:blue; }

2）后代元素选择器

selector1  selector2  ... {... }

3）子选择器

selector1 > selector2 > ... {... }

4）相邻兄弟选择器

selector1 + selector2 + ... {... }

6.CSS样式属性

1）文本属性
在这里插入图片描述
2）字体属性

3）背景属性

4） cursor属性
cursor属性用于指定用户鼠标的指针类型。在设计表单过程中，使用图片作为提交按钮，当鼠标移到图片上时，通常将鼠标指针由箭头改成手的形状，从而进一步对用户进行提示。

5）display属性
通过display属性可以将页面元素隐藏或显示出来；
通过display属性可以将元素强制改成块级元素或内联元素。

7.伪类选择器
在这里插入图片描述

8.盒子模型
在页面布局中，为了将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范，称为盒子模型。

盒子模型是由内容（content）、边框（border）、内边距(padding)和外边距(margin)四部分组成。

三、JavaScript

1.JavaScript是一种脚本语言，可以直接嵌入HTML页面之中。

2.JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的客户端脚本语言，其特点如下：
1）解释性
2）嵌套在HTML中
3）弱数据类型
4）跨平台
5）基于对象
6）基于事件驱动

3.在页面中使用JavaScript脚本的形式有以下三种：

行内JavaScript脚本

<a href="javascript:alert('请等待评选结果，谢谢');">查看评选结果</a>

内部JavaScript脚本

 <script type="text/javascript">
	alert("body中的JavaScript");
    </script>

外部JavaScript脚本

<script type="text/javascript" src="js/test.js"></script>

4.数据类型
常见的数据类型有String、Boolean、Array、Number和Undefinded等类型。
在这里插入图片描述

5.变量
1）变量的定义

var 变量1[, 变量2, ...];

2）变量的类型

<script type="text/javascript">
    var x=30;
    alert(typeof x);  //弹出提示信息框
    x="QST软件学院";
    alert(typeof(x));
</script>

3）变量的类型作用域
（1）全局变量
（2）局部变量

6.在JavaScript中，常用的运算符：

赋值运算符
算术运算符
比较运算符
逻辑运算符
三元运算符

7.加强型赋值运算符
在这里插入图片描述
8.算术运算符

9.比较运算符

10.= =与= = =的区别在于：
= = 支持自动类型转换，只要前后两个变量的值相同就返回true，而忽略数据类型的比较
= = = 需要两个变量的值相同并且数据类型一致时才返回true

11.逻辑运算符用于对布尔类型的变量（或常量）进行操作

与（&&）：两个操作数同时为true时，结果为true；否则为false
或（||）：两个操作数中同时为false，结果为false；否则为true
非（！）：只有一个操作数，操作数为true，结果为false；否则结果为true

12.三元运算符

expression ? value1 : value2;

13.流程控制是指通过控制程序执行的顺序，来完成一定的功能：

分支结构（if和switch）
循环结构（while、do while和for等）
break、continue、return等转移语句

14.转移语句
使用转移语句来控制程序的执行方向，包括break语句、continue语句和return语句。
（1） break语句

在switch结构中，遇到break语句时，就会跳出switch分支结构
在循环结构中，遇到break语句时，立即退出循环，不再执行循环体中的任何代码

（2）continue语句

当程序执行过程中遇到continue时，仅仅退出当前本次循环
然后判断是否满足继续下一次循环的条件

15.自定义函数
1）命名函数的定义

function funcName([parameters]){
	statementes;
	[return expression];
}

2）匿名函数的定义

function ([parameters]){
	statementes;
	[return expression];
};

3）对象函数的定义

var funcName=new Function([parameters],statements;);

16.Array数组对象
数组（Array）是一个有序的数据集合，使用单独的变量名来存储一系列的数据。

17.数组对象的常用方法
1)concat()方法
concat()方法用于连接两个或多个数组，返回合并后的新数组，而原数组保持不变

arrayObject.concat(param1, param2, ......, paramX)

2)join()方法
join()方法用于把数组中的所有元素放入一个字符串中，并通过指定的分隔符隔开。

arrayObject.join(separator)

3)push()方法
push()方法用于向数组的末尾添加一个或多个元素，返回数组的新长度

arrayObject.push(newElement1,newElement2,....,newElementX)

4)slice()方法
slice()方法用于从数组中返回选定的元素

arrayObject.slice(start,[end])

18.字符串对象（String）用于对文本字符串进行处理

字符串对象的创建
字符串对象的属性
字符串对象的方法

19.在JavaScript中，string和String的区别如下：

String是string的包装类；
string是一种基本的数据类型，没有提供substring()等方法；
String是构造函数用于创建字符串对象，使用new创建的对象具有substring()等方法；
string没有提供prototype原型对象，而String对象具有prototype原型对象，通过浏览器的端点调试方式进行查看该区别；
使用typeof()函数查看类型时，string变量返回“string”，String对象返回“Object”，而String返回“function”；
使用= =比较时，string类型判断其值是否相等，而String对象则判断是否对同一对象进行引用；
二者的生命周期不同，使用new创建的对象一直存在，而string类型自动生成的会在代码执行后立即销毁。

Iwltmy

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
前端知识点复习

一、HTML1.HTML（超文本标记语言，Hyper Text Markup Language）是一种描述性标记语言，用来描述页面内容的显示方式。2.HTML文件是一种纯文本文件，以".html" 或 ".htm"为后缀。3.HTML文档结构是由 <html>、<head>和<body>这三大元素组成。<!DOCTYPE html><...
复制链接

扫一扫