前端基本知识介绍

Yuki-^_^

于 2024-05-06 21:16:47 发布

阅读量456

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/weixin_49376454/article/details/138508558

版权

一.前端三剑客

1.前导

2.三剑客的分工

二.VsCode的介绍与配置

1.vscode的介绍

2.vscode的下载安装

3.vscode的使用

3.1 图形界面操作

3.3 常用插件

三.HTML基础标签

HTML基础知识

1.HTML为何物？

2.标签介绍

3.HTML属性

4.HTML标签骨架

基本的HTML标签

1.HTML标题标签

2.换行与空格

3.HTML段落

4.字体加粗与倾斜及删除效果

5.图片标签

6.超链接

7.列表

8.布局标签

9.表格标签

10.表单标签

四.CSS基础选择器

CSS介绍

CSS样式表介绍

CSS基础语法

CSS选择器

选择器介绍

基础选择器

复合选择器

CSS引入方式

CSS引入方式介绍

内部样式表（嵌入式）

行内样式表

外部样式表

五.JS基础

Javascript介绍

1.js的介绍

2.js的由来

3.JavaScript组成

JavaScript基本语法

1.JavaScript的引入方式

2.js注释

3.js的输入输出方法

4.变量

5.数据类型

6.数据类型转换

7.更多JS基础

六.JS之DOM

1.DOM简介

什么是DOM？

DOM树

2.获取元素

根据ID获取

根据类名获取

根据标签名获取

通过选择器获取

通过选择器获取（多个）

定位body标签

定位html标签

3.事件基础

事件基础介绍

代码实现

其它的鼠标事件

4.操作元素

操作元素介绍

改变元素的内容

操作元素属性

操作表单元素

样式属性操作

更多js操作

一.前端三剑客
1.前导
（1）HTML,CSS,JS都是单独的语言；

（2）HTML,CSS,JS构成前端技术基础；

2.三剑客的分工
（1）HTML：负责网页的架构；

（2）CSS：负责网页的样式，美化；

（3）JavaScript（JS）：负责网页的行为；

二.VsCode的介绍与配置
1.vscode的介绍
vscode 全称为 Visual Studio Code ，是⼀款免费开源的现代化轻量级代码编辑器，⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃定义快捷键、括号匹配和颜⾊区分、代码⽚段、代码对⽐ Diff、GIT命令等特性，⽀持插件扩展，并针对⽹⻚开发和云端应⽤开发做了优化。
2.vscode的下载安装
(110条消息) Python爬虫编程11——JS反爬_彩色的泡沫的博客-CSDN博客
https://blog.csdn.net/qq_52914337/article/details/123771663?spm=1001.2014.3001.5501

3.vscode的使用
3.1 图形界面操作

3.3 常用插件
我们通常需要代码提示我们辅助编写，这个时候就涉及到VSCODE提供的一系列的插件插件安装在 Extension 中，点击即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。如图：

前端开发推荐安装的几个插件：

1. jshint ： js 代码规范检查。
2. Beautify ：⼀键美化代码的插件。
3. Javascript(ES6) code snippets ： ES6 语法提示。
4. Auto Rename Tag ：⾃动重命名标签。标签都是成对出现的，开始标签修改了，结束标签
也会跟着修改。
5. Auto Close Tag ：⾃动闭合标签。针对⼀些⾮标准的标签，这个插件还是很有⽤的。
6. vscode-icons ：可选。提供了很多类型的⽂件夹 icon ，不同类型的⽂件夹使⽤不同的
icon ，会让⽂件查找更直观。
7. open in browser ：可选。右键可以选择在默认浏览器中打开当前⽹⻚。
三.HTML基础标签
HTML基础知识
1.HTML为何物？
HTML是超文本标记语言（Hyper Text Markup Language）是用来描述网页的一种语言。

注意：HTML不是一种编程语言，而是一种标记语言。

简单来说，HTML文件也可以直接称为网页，浏览器的作用就是读取HTML文件，并且以网页的形式去展示它们。

2.标签介绍
HTML标签是由尖括号包围起来的关键词，如<html></html>