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


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

相关推荐
亦黑迷失1 分钟前
轻量级 Express 服务器:用 Pug 模板引擎实现动态参数传递
前端·javascript·后端
吃瓜群众i1 小时前
理解Javascript闭包
前端·javascript
安大桃子1 小时前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede1 小时前
多行文本省略号显示,更多按钮展开全部
前端
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化
G扇子1 小时前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全
snakeshe10101 小时前
入解析React性能优化策略:eagerState的工作原理
前端
六边形6661 小时前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
kovli1 小时前
红宝书第十八讲:详解JavaScript的async/await与错误处理
前端·javascript
前端付豪1 小时前
🚀 React 应用国际化实战:深入掌握 react-i18next 的高级用法
前端·react.js·架构