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


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

相关推荐
JianZhen✓8 分钟前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
郝学胜-神的一滴28 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海1 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士1 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴1 小时前
深入Lua包(Package)与依赖管理
前端·lua
IT_陈寒2 小时前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端
god002 小时前
chromium项目中添加源文件(BUILD.gn项目中添加源文件)
java·服务器·前端
快乐非自愿2 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
Github掘金计划2 小时前
别再用 “臃肿监控” 了!这款轻量监控神器开源 3 月狂揽 1.3k Star!
前端·监控