华清远见-前端学习总结

一、知识点

（一）html与css

1、相关介绍及作用：

• html

超文本标记语言（ HyperText Markup Languages），是一种纯文本类型的语言。用于勾勒出网页的结构和内容

• css

层叠样式表 (Cascading Style Sheets），又叫级联样式表，简称样式表；用于HTML文档中元素的样式定义，实现网页的美化实现将内容和表现分离

2、一些常用的html标签及表单元素

• 文本标签：

双标签：h1（h1~h6）
单标签：hr
行内元素：span
块级元素：div

• 超链接和图片标签:

img: 用于网页上显示图片
a:用于网页上显示超链接

• 表格标签:

table表格标签： 用于实现一个表格
tr: 行标签
td: 单元格标签(列)

• input表单元素：

表单标签 input 是输入标签 。输入类型是由 type 属性定义（常用有text(文本框)，password(密码)，submit(提交)，radio(单选框)，checkbox(复选框)）

了解更多更详细的标签，参考：
https://www.runoob.com/html/html-tutorial.html

3、css

• css的三种使用方式

内联样式
— 样式定义在单个的HTML元素中
内部样式
— 样式定义在HTML页的头元素中
外部样式
— 将样式定义在一个外部的css文件中（.css文件）
— 由HTML页面引用样式表文件

详细使用参考：
https://www.runoob.com/html/html-css.html

• css的选择器

css的选择器种类很多，详细参考博客：
https://blog.csdn.net/weixin_62255399/article/details/126030848

（二）js(JavaScript)

1、简介

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

2、js常用知识点

变量的定义（可用var ，let ;现在常用 let）：
let 变量名；
let 变量名=变量值;
变量的名字不能使用关键字。
数据类型：
string
number
boolean
null
undefined
运算符：
算术运算符
关系运算符
逻辑运算符
赋值运算符
分支语句：
if…else if… if…else if…
循环语句：
for（let i =0 ; i < n ; i++）{}
for循环同java语法规则
获取元素的方式：
document.getElementById(id值) ：根据id查找元素，结果是一个元素对象
document.getElementsByTagName(标签名字) ：根据标签名查找，结果是一个元素的数组 对象。
document.getElementsByName(标签的name属性) ：根据标签的name属性的值查找，结果是一个元素的数组对象。
document.getElementsByClassName(标签class的值) ： 根据标签的class的值查找，结果是一个元素的数组对象。
修改和获取标签内部的内容：
obj.innerHTML: 可以对文本和标签进行使用
obj.innerText:只能对文本进行使用
obj.value: 表单元素的value值的获取或者设置

3、数组

• 创建数组：

创建数组的几种方式：
let arr1 = new Array(); //创建一个空数组
let arr2 = new Array(20); // 创建一个包含20项的数组
let arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组
let arr4 = []; //创建一个空数组
let arr5 = [20]; // 创建一个包含1项的数组
let arr6 = [“lily”,“lucy”,“Tom”]; // 创建一个包含3个字符串的数组

• 数组的一些常用方法：

length():返回数组长度
push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift():将参数添加到原数组开头，并返回数组的长度 。 sort()：将数组元素按升序排列

4、自定义对象创建方式

new Object
自定义构造器函数
json格式的对象 ：{key:value, key1:value1} , key-string , value-任意数据类型

（三）jquery框架

1、简介

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2、 vscode下载jquery框架

• 右键文件夹，选择Open in Integr…打开终端
  
• 在终端中输入 npm init -y
  
• 再输入npm i jquery -S
  
• 下载成功
  

3、jquery APi文档

https://jquery.cuishifeng.cn/index.html

二、总结

在完成java高级的学习后，我们花了两周左右的时间完成了对前端的一个基础习，我们主要学习了三个部分的内容：html与css、js(JavaScript)、jquery框架。经过两周时间的学习，我发现前端确实比java要简单得多，但是学习的内容并不比java少，前面我总结的一些知识点只是其中部分比较常用的，所以要想对这两周学习的内容熟练掌握还是的花时间多写写代码。