JavaWeb--前端--01HTML和CSS

文章目录

  • [1 前端开发介绍](#1 前端开发介绍)
  • [2 开发工具](#2 开发工具)
  • [3 文档查阅](#3 文档查阅)
  • [4 CSS选择器](#4 CSS选择器)
  • VSCode的插件

点击进入:W3School的HTML文档

点击进入:W3School的CSS文档

内容就在这两个网站里面

1 前端开发介绍

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

  • HTML:负责网页的结构(页面元素和内容)。

  • CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。

  • JavaScript:负责网页的行为(交互效果)。

前后端分离的开发模式

学习内容:

HTML、CSS、JavaScript

Vue、Element、Nginx

Maven

SpringBoot Web 基础篇

MySQL

SpringBoot Mybatis

SpringBoot Web开发篇

SpringBoot Web进阶篇

2 开发工具

Visual Studio Code(简称 VS Code )

点击下载 https://code.visualstudio.com/

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

3 文档查阅

点击进入:W3School的HTML文档

点击进入:W3School的CSS文档

在这两个网站好好学学吧

4 CSS选择器

1 元素(标签)选择器

  • 选择器的名字必须是标签的名字
  • 作用:选择器中的样式会作用于所有同名的标签上
html 复制代码
元素名称 {
    css样式名:css样式值;
}

例如:

html 复制代码
 div{
     color: red;
 }

2 id选择器

  • 选择器的名字前面需要加上#
  • 作用:选择器中的样式会作用于指定id的标签上,而且有且只有一个标签(由于id是唯一的)
html 复制代码
#id属性值 {
    css样式名:css样式值;
}

例如:

html 复制代码
#did {
    color: blue;
}

3 类选择器

  • 选择器的名字前面需要加上 .
  • 作用:选择器中的样式会作用于所有class的属性值和该名字一样的标签上,可以是多个
html 复制代码
.class属性值 {
    css样式名:css样式值;
}
html 复制代码
.cls{
     color: green;
 }

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的快捷键。


沉头侧畔千帆过,病树前头万木春。

相关推荐
这里有鱼汤20 分钟前
Python 的 bisect 模块:这个冷门宝藏你用对了吗?
前端·后端·python
博览鸿蒙21 分钟前
FPGA设计职位介绍|如何成为一名合格的数字前端设计工程师?
前端·fpga开发
老胡说前端22 分钟前
JS 数组相同的key 进行合并
前端·javascript·vue.js
kovlistudio30 分钟前
红宝书第三十二讲:零基础学会模块打包器:Webpack、Parcel、Rollup
前端·javascript·webpack·node.js
这里有鱼汤32 分钟前
Python 跨平台路径处理:最优解来了!
前端·后端·python
SailingCoder33 分钟前
npm ERR! CXX(target) Release/obj.target/deasync/src/deasync.o
前端·npm·node.js
念九_ysl1 小时前
使用 Vue 快速集成 FullCalendar 日历组件教程
前端·javascript·vue.js
造夢先森1 小时前
SpringAI+MCP协议 实战
前端·javascript·easyui
恋猫de小郭2 小时前
你为什么需要了解 Dart AST?一个简单的 bug 带你快速认识下 Dart Kernel AST
android·前端·flutter
excel2 小时前
webpack 格式化模块 第 二 节
前端