前端学习小结

80 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第19天,点击查看活动详情

路线

HTML——>CSS——>JS——>JQuery——>Ajax——>vue

1 HTML

网页的结构

HTML基本结构

一个页面是由以下4个部分组成:

一个文档声明:<!DOCTYPE html>

一个html标签对:<html></html>

一个head标签对:<head></head>

一个body标签对:<body></body>

image.png

2 CSS

网页的外观

在一个页面引入CSS,共有3种方式:

  • 外部样式表:外部样式表在单独文件中定义,然后在HTML文件的标签对中使用link标签来引用。

  • 内部样式表:内部样式表,指的是把HTML代码和CSS代码放到同一个HTML文件中。

  • 行内样式表:内部样式表的CSS是在“style标签”内定义的,而行内样式表的CSS是在“标签的style属性”中定义的。

3 JavaScript

网页的行为

JavaScript的3种引入方式,跟CSS的3种引入方式(外部样式表、内部样式表、行内样式表)是非常相似的。

  • 外部JavaScript:指的是把HTML代码和JavaScript代码单独放在不同文件中,然后在HTML文档中使用“script标签”来引入JavaScript代码。

  • 内部JavaScript:指的是把HTML代码和JavaScript代码放在同一个文件中。

  • 元素事件JavaScript:指的是在元素的“事件属性”中直接编写JavaScript或调用函数。

4 JQuery

jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。

使用jQuery的三个步骤:

  1. 引入jQuery文件
  2. 入口函数
  3. 功能实现

5 Ajax

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

6 Vue

  1. JavaScript框架
  2. 简化Dom操作
  3. 响应式数据驱动