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


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

相关推荐
闲蛋小超人笑嘻嘻3 分钟前
前端面试十四之webpack和vite有什么区别
前端·webpack·node.js
rggrgerj1 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
golang学习记2 小时前
从0死磕全栈之Next.js App Router动态路由详解:从入门到实战
前端
huangql5202 小时前
基于前端+Node.js 的 Markdown 笔记 PDF 导出系统完整实战
前端·笔记·node.js
在逃的吗喽2 小时前
Vue3新变化
前端·javascript·vue.js
yqwang_cn2 小时前
打造优雅的用户体验:自定义jQuery工具提示插件开发全解析
前端·jquery·ux
小Tomkk2 小时前
AI 提效:利用 AI 从前端 快速转型为UI/UX设计师和产品
前端·人工智能·ui
Demoncode_y3 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
杨超越luckly3 小时前
HTML应用指南:利用POST请求获取全国中国工商农业银行网点位置信息
大数据·前端·html·数据可视化·银行网点
皮蛋瘦肉粥_1214 小时前
pink老师html5+css3day02
前端·css3·html5