前端介绍|基础入门-html+css+js

news2024/11/7 8:36:39

在这里插入图片描述

文章目录

  • 本课程有什么?
  • 前端是什么?
        • 1. **前端概述**
        • 2. **前端的工作职责**
        • 3. **前端技术栈**
        • 6. **前端开发工具**
        • 7. **HTML、CSS、JS的关系**


本课程有什么?

本套课程是零基础入门保姆级课程,课程主要内容包含:

  • HTML(HyperText Markup Language)
  • CSS(Cascading Style Sheets)
  • JavaScript
  • 实战项目

前端是什么?

1. 前端概述

前端(Frontend)是指网页开发中的客户端部分,也就是用户在浏览器中看到并与之互动的部分。换句话说,前端负责网页的外观、布局、交互效果和用户体验,确保用户能顺畅地访问和使用网站。

前端开发主要包括三个核心技术:

  • HTML(HyperText Markup Language):用于网页的结构和内容描述,决定了网页的基本框架。
  • CSS(Cascading Style Sheets):用于网页的样式设计,决定了网页的外观,比如颜色、字体、布局等。
  • JavaScript:用于网页的交互功能,决定了网页的动态效果和响应用户操作的行为。
2. 前端的工作职责

前端开发的主要任务是创建可视化界面,包括:

  • 页面布局:决定内容在页面上的排列方式。
  • 样式设计:设置文字、图片、颜色等的显示效果。
  • 交互功能:用户与页面交互时(如点击、滑动、输入等),触发一些动态效果或数据操作。
  • 响应式设计:使网站在不同设备上(如手机、平板、电脑等)都能良好显示。
3. 前端技术栈

前端开发使用的技术组合通常被称为“前端技术栈”。常见的技术栈包括:

  • HTML5:现代HTML版本,支持更多丰富的多媒体和结构元素。
  • CSS3:现代CSS版本,支持更强大的动画、过渡、布局等特性。
  • JavaScript:动态脚本语言,处理网页的逻辑和行为。
  • 前端框架和库:如React、Vue、Angular等,它们帮助开发者更高效地构建交互复杂的网页应用。
6. 前端开发工具

前端开发有许多常用的工具,帮助开发者提高开发效率:

如 VS Code、HBuilder、Sublime Text 等。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

7. HTML、CSS、JS的关系

这三者是前端的基石,它们是互相配合的:

  • HTML:定义网页的结构,如标题、段落、图片、链接等。
  • CSS:为HTML元素添加样式,如字体颜色、大小、布局等,使页面看起来美观。
  • JavaScript:为网页添加交互功能,比如用户点击按钮时,弹出一个对话框,或者加载更多内容。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2234900.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

自动驾驶---“火热的”时空联合规划

1 背景 早期的不少规划算法都是横纵分离的(比如Apollo),先求解path之后,依赖path的结果再进行speed的求解。这种横纵解耦的规划方式具有以下特点: 相对较为简单,计算量通常较小,容易实现实时性…

龙蜥副理事长张东:加速推进 AI+OS 深度融合,打造最 AI 的服务器操作系统

AI 原生时代,操作系统厂商要全面优先拥抱 AI,深度融合 AI 能力,发挥关键生态位作用,做好上游芯片与下游 AI 应用开发商之间的纽带,打造最 AI 的服务器操作系统,实现 AI 能力的快速价值转化。 AI 原生趋势下…

详解Java之Spring MVC篇二

目录 获取Cookie/Session 理解Cookie 理解Session Cookie和Session的区别 获取Cookie 获取Session 获取Header 获取User-Agent 获取Cookie/Session 理解Cookie HTTP协议自身是“无状态”协议,但是在实际开发中,我们很多时候是需要知道请求之间的…

【金融风控】相关业务介绍及代码详解

金融风控相关业务介绍 【了解】项目整体介绍 1.风控业务和风控报表</span> 零售金融产品 相关的指标 风控建模流程 ​ #2.特征工程 特征构造 特征筛选 ​ 3.评分卡模型构建 逻辑回归 集成学习 XGBoost LightGBM 模型评估 ​ #4.样本不均衡问题/异常点检测 【了解】今日…

了解数据库设计中的反规范化

反规范化是指通过增加冗余数据来提高数据库的读取效率。也就是说,反规范化通过在表中增加冗余字段来减少数据库中的表连接,以提高查询速度。规范化和反规范化是关系型数据库设计中的两个重要方面,它们分别代表了数据组织方式上的两个不同方向。规范化是为了减少数据冗余和提…

Perforce《2024游戏技术现状报告》Part2:游戏引擎、版本控制、IDE及项目管理等多种开发工具的应用分析

游戏开发者一直处于创新前沿。他们的实践、工具和技术受到各行各业的广泛关注&#xff0c;正在改变着组织进行数字创作的方式。 近期&#xff0c;Perforce发布了《2024游戏技术现状报告》&#xff0c;通过收集来自游戏、媒体与娱乐、汽车和制造业等高增长行业的从业者、管理人…

JAVA基础:数组 (习题笔记)

一&#xff0c;编码题 1&#xff0c;数组查找操作&#xff1a;定义一个长度为10 的一维字符串数组&#xff0c;在每一个元素存放一个单词&#xff1b;然后运行时从命令行输入一个单词&#xff0c;程序判断数组是否包含有这个单词&#xff0c;包含这个单词就打印出“Yes”&…

通过 SSH 连接远程 Ubuntu 服务器

目录 安装 SSH 服务器允许 SSH 通过防火墙远程 SSH 连接&#xff08;选&#xff09;重启向日葵 安装 SSH 服务器 更新软件包列表 sudo apt update安装 OpenSSH 服务器 sudo apt install openssh-server检查 SSH 服务器状态 sudo systemctl status ssh如果 SSH 服务器正在运…

http请求响应详解

http介绍 http协议&#xff1a; Http”协议称为是“超文本传输协议”&#xff08;HTTP-Hypertext transfer protocol&#xff09;。它定义了浏览器怎么向万维网服务器请求万维网文档&#xff0c;以及服务器怎么样把文档传送给浏览器。 https协议&#xff1a; 传统的HTTP协议…

使用 OpenCV 实现图像的透视变换

概述 在计算机视觉领域&#xff0c;经常需要对图像进行各种几何变换&#xff0c;如旋转、缩放和平移等。其中&#xff0c;透视变换&#xff08;Perspective Transformation&#xff09;是一种非常重要的变换方式&#xff0c;它能够模拟三维空间中的视角变化&#xff0c;例如从…

Oracle视频基础1.4.4练习

1.4.4 [dbs] 删干净上次创建的bbk ll rm -f *dbf ll rm -f spfilebbk.ora clear ll创建bbk的pfile&#xff0c;准备对应的目录 ll strings spfilewilson.ora | more strings spfilewilson.ora > initbbk.ora :%s/wilson/bbk :%s/*\.//g :wq ll vi initbbk.ora####### 创…

【spring】Cookie和Session的设置与获取(@CookieValue()和@SessionAttribute())

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;程序猿的春天 获取Cookie 使用 Servlet 获取Cookie&#xff1a; Spring MVC 是基于 Servlet API 构建的原始 Web 框架&#xff0c;也是在 Servlet 的基础上实现的 RestController RequestMapping…

神经网络基础--什么是神经网络?? 常用激活函数是什么???

前言 本专栏更新神经网络的一些基础知识&#xff1b;案例代码基于pytorch&#xff1b;欢迎收藏 关注&#xff0c; 本人将会持续更新。 神经网络 1、什么是神经网络 人工神经网络&#xff08; Artificial Neural Network&#xff0c; 简写为ANN&#xff09;也简称为神经网络…

030集——分组法——C# CAD二次开发

重叠的图行进行分组&#xff0c;效果如下&#xff1a; 纵向投影重叠&#xff08;横向移动冲突&#xff09;可以分组: 纵向冲突也可以分组&#xff1a; 也可根据颜色不同分组&#xff1a; 部分代码如下&#xff0c;完整代码见文章下方名片 public class Class1{[CommandMethod(…

Edge 浏览器插件开发:图片切割插件

Edge 浏览器插件开发&#xff1a;图片切割插件 在图片处理领域&#xff0c;按比例切割图片是一个常见需求。本文将带你开发一个 Edge 浏览器插件&#xff0c;用于将用户上传的图片分割成 4 个部分并自动下载到本地。同时&#xff0c;本文介绍如何使用 cursor 辅助工具来更高效…

关于圆周率

关于圆周率 大约20年前的2005年&#xff0c;我在上大学的时候&#xff0c;网上流传这样一段程序&#xff0c;被称之为“外星人计算圆周率程序”。程序如下&#xff1a; long a 10000, b, c 2800, d, e, f[2801], g; main() {for (; b - c;) f[b] a / 5; for (; d 0, g …

【docker】6. 镜像仓库/镜像概念

Docker Registry&#xff08;镜像仓库&#xff09; 什么是 Docker Registry 镜像仓库 (Docker Registry) 负责存储、管理和分发镜像&#xff0c;并且提供了登录认证能力&#xff0c;建立了仓库的索引。 镜像仓库管理多个 Repository&#xff0c; Repository 通过命名来区分。…

debian系统安装qt的时候 显示xcb相关文件缺失

如果是安装之后的问题 我们可以选择使用ldd的命令查看当前依赖的so那些文件确实 ldd /home/yinsir/Qt/5.15.2/gcc_64/plugins/platforms/libqxcb.so 本人在进行打包的时候 出现则会个报错 ERROR: ldd outputLine: “libxcb-util.so.1 > not found” ERROR: for binary: “/…

怎么查看navicat的数据库密码

步骤1:打开navicat连接数据库工具&#xff0c;顶部的文件栏-导出结果-勾选导出密码-导出 步骤2&#xff1a;导出结果使用NotePad或文本打开&#xff0c;找到&#xff0c;数据库对应的的Password"995E66F64A15F6776“”的值复制下来 <Connection ConnectionName"…

清华大学提出Mini-Omni2:开源多模态模型,功能与GPT-4o媲美!

&#x1f310; 在人工智能领域&#xff0c;多模态模型的发展正如火如荼。今天&#xff0c;我们要介绍的是由清华大学提出的Mini-Omni2&#xff0c;这是一个开源的多模态语言模型&#xff0c;它在功能上与GPT-4o相媲美&#xff0c;能够理解和生成视觉、听觉和文本内容&#xff0…