当前位置: 首页 > news >正文

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

在这里插入图片描述

文章目录

  • 本课程有什么?
  • 前端是什么?
        • 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:为网页添加交互功能,比如用户点击按钮时,弹出一个对话框,或者加载更多内容。

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

相关文章:

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

文章目录 本课程有什么?前端是什么?1. **前端概述**2. **前端的工作职责**3. **前端技术栈**6. **前端开发工具**7. **HTML、CSS、JS的关系** 本课程有什么? 本套课程是零基础入门保姆级课程,课程主要内容包含: HTML…...

[WSL][桌面][X11]WSL2 Ubuntu22.04 安装Ubuntu桌面并且实现GUI转发(Gnome)

1. WSL安装 这里不再赘述,WSL2支持systemd,如果你发现其没有systemd相关指令,那么你应该看看下面这个 https://blog.csdn.net/noneNull0/article/details/135950369 但是,Ubuntu2204用不了这个脚本,比较蛋疼。 – …...

PMC如何根据实际情况调整生产作业计划?

面对原材料价格波动、市场需求突变、供应链不确定性增加等多重挑战,PMC人员如何根据实际情况迅速调整生产作业计划,成为了决定企业能否稳健前行的关键。今天,天行健企业管理咨询公司就来深入探讨,PMC高手们是如何在复杂多变的环境…...

unity中 骨骼、纹理和材质关系

在Unity和游戏开发中,骨骼(Skeleton)、纹理(Texture)和材质(Material)是角色和物体渲染的关键组成部分,它们各自的作用和关系密切关联,通常共同工作来实现一个模型的最终…...

18、论文阅读:AOD-Net:一体化除雾网络

AOD-Net: All-in-One Dehazing Network 前言介绍相关工作物理模型传统方法深度学习方法 建模与扩展变换后的公式网络设计与高级特征任务相结合 除雾评价数据集和实现 前言 该论文提出了一种基于卷积神经网络(CNN)的图像去雾模型,称为 All-in…...

Hadoop生态圈框架部署(五)- Zookeeper完全分布式部署

文章目录 前言一、Zookeeper完全分布式部署(手动部署)1. 下载Zookeeper2. 上传安装包2. 解压zookeeper安装包3. 配置zookeeper配置文件3.1 创建 zoo.cfg 配置文件3.2 修改 zoo.cfg 配置文件3.3 创建数据持久化目录并创建myid文件 4. 虚拟机hadoop2安装并…...

【机器学习】聚类算法分类与探讨

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…...

MySQL中distinct与group by之间的性能进行比较

在 MySQL 中,DISTINCT 和 GROUP BY 都是用于去重或汇总数据的常用 SQL 语法。尽管它们在某些情况下能产生相同的结果,但它们的内部工作方式和性能表现可能有所不同。理解这两者的差异,对于选择正确的语法非常重要,尤其是在处理大量…...

计算机视觉读书系列(1)——基本知识与深度学习基础

研三即将毕业,后续的工作可能会偏AI方向的计算机视觉方面,因此准备了两条线来巩固计算机视觉基础。 一个是本系列,阅读经典《Deep Learning for Vision System》,做一些总结跑一些例子,也对应本系列文章 二是OpenCV实…...

怎么查看navicat的数据库密码

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

webrtc前端播放器完整案例

https://download.csdn.net/download/jinhuding/89961792...

GORM优化器和索引提示

在使用 GORM 进行数据库操作时&#xff0c;优化器和索引提示可以帮助你提高查询性能。GORM 提供了一些方法来利用这些特性。 优化器提示 优化器提示&#xff08;Optimizer Hints&#xff09;是数据库系统提供的功能&#xff0c;用于指导查询优化器如何处理查询。不同的数据库…...

linux驱动-i2c子系统框架学习(1)

可以将整个 I2C 子系统用下面的框图来描述&#xff1a; 可以将上面这一 I2C 子系统划分为三个层次&#xff0c;分别为用户空间、内核空间和硬件层&#xff0c;内核空间就包括 I2C 设备驱动层、I2C 核心层和 I2C 适配器驱动层&#xff0c; 本篇主要内容就是介绍 I2C 子系统框架中…...

元戎启行嵌入式面试题及参考答案

介绍下 CAN 通信原理 控制器局域网(CAN)是一种串行通信协议,主要用于汽车、工业自动化等领域的电子控制单元(ECU)之间的通信。 其通信原理是基于多主站架构。在总线上,多个节点(设备)都可以主动发起通信。CAN 协议使用差分信号来传输数据,通过两条信号线 CAN_H 和 CAN…...

【EasyExcel】EasyExcel导出表格包含合计行、自定义样式、自适应列宽

目录 0 EasyExcel简介1 Excel导出工具类设置自定义表头样式设置自适应列宽添加合计行 2 调用导出工具类导出Excel表3 测试结果 0 EasyExcel简介 在数据处理和报表生成的过程中&#xff0c;Excel是一个非常常用的工具。特别是在Java开发中&#xff0c;EasyExcel库因其简单高效而…...

es数据同步(仅供自己参考)

数据同步的问题分析&#xff1a; 当MySQL进行增删改查的时候&#xff0c;数据库的数据有所改变&#xff0c;这个时候需要修改es中的索引库的值&#xff0c;这个时候就涉及到了数据同步的问题 解决方法&#xff1a; 1、同步方法&#xff1a; 当服务对MySQL进行增删改的时候&…...

apt镜像源制作-ubuntu22.04

# 安装必要的软件 sudo apt-get install -y apt-mirror # 编辑/etc/apt/mirror.list,添加以下内容 set base_path /var/spool/apt-mirror # 指定要镜像的Ubuntu发布和组件-null dir jammy-updates main restricted universe multiverse # 镜像的Ubuntu发布和组件的URL-n…...

libaom 源码分析: 预测编码过程梳理

AV1 预测编码中核心技术 AV1(AOMedia Video 1)作为一种开源的视频编码格式,其预测编码核心技术主要包括以下几个方面: 分区树分割模块: AV1利用多类型分割模式,递归地对图像/视频序列进行分区,以捕捉更丰富的空间信息,从而提升编码效率。这包括新的方向预测分割模式及…...

从0开始学习Linux——Yum工具

往期目录&#xff1a; 从0开始学习Linux——简介&安装 从0开始学习Linux——搭建属于自己的Linux虚拟机 从0开始学习Linux——文本编辑器 上一个章节我们简单了解了Linux中常用的一些文本编辑器&#xff0c;本次教程我们将学习yum工具。 一、Yum简介 Yum&#xff08;全名…...

【Linux】Linux管道揭秘:匿名管道如何连接进程世界

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 &#x1f308;C专栏&#xff1a;C 文章目录 1.什么是管道 &#xff1f;2. 管道的类型2.1 匿…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...