JavaWeb--前端--01HTML和CSS

1 前端开发介绍

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

• HTML：负责网页的结构（页面元素和内容）。

• CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

• JavaScript：负责网页的行为（交互效果）。

前后端分离的开发模式

学习内容:

1. HTML、CSS、JavaScript
2. Vue、Element、Nginx
3. Maven
4. SpringBoot Web 基础篇
5. MySQL
6. SpringBoot Mybatis
7. SpringBoot Web开发篇
8. SpringBoot Web进阶篇

2 开发工具

Visual Studio Code（简称 VS Code ）
点击下载 code.visualstudio.com/

建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。

3 文档查阅

点击进入:W3School的HTML文档
点击进入:W3School的CSS文档

在这两个网站好好学学吧

4 CSS选择器

1 元素(标签)选择器

• 选择器的名字必须是标签的名字
• 作用：选择器中的样式会作用于所有同名的标签上

元素名称 {
    css样式名:css样式值；
}

例如:

 div{
     color: red;
 }

2 id选择器

• 选择器的名字前面需要加上#
• 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

#id属性值 {
    css样式名:css样式值；
}

123

例如:

#did {
    color: blue;
}

3 类选择器

• 选择器的名字前面需要加上  .
• 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {
    css样式名:css样式值；
}

123

.cls{
     color: green;
 }

5 VSCode的插件

VSCode插件名称	功能
Chinese (Simplified) Language Pack	汉化
Code Spell Checker	拼写检查器
HTML CSS Support	自动补全CSS样式表代码
JavaScript (ES6) code snippets	支持ES6语法提示
Mithril Emmet	补全代码
Path Intellisense	路径提示插件
Vue 3 Snippets	提供代码片段，语法高亮和格式化
VueHelper	代码提示插件
Auto Close Tag	自动闭合HTML/XML标签
Auto Rename Tag	自动完成另一侧标签的同步修改
Beautify	格式化 html ,js,css
Bracket Pair Colorizer	给括号加上不同的颜色
open in browser	快速在浏览器中打开html文件
Vetur	Vue多功能集成插件
File Utils	File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。
IntelliJ IDEA Keybindings	安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。