前端介绍|基础入门-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连接数据库工具,顶部的文件栏-导出结果-勾选导出密码-导出 步骤2:导出结果使用NotePad或文本打开,找到,数据库对应的的Password"995E66F64A15F6776“”的值复制下来 <Connection ConnectionName"…...
webrtc前端播放器完整案例
https://download.csdn.net/download/jinhuding/89961792...
GORM优化器和索引提示
在使用 GORM 进行数据库操作时,优化器和索引提示可以帮助你提高查询性能。GORM 提供了一些方法来利用这些特性。 优化器提示 优化器提示(Optimizer Hints)是数据库系统提供的功能,用于指导查询优化器如何处理查询。不同的数据库…...
linux驱动-i2c子系统框架学习(1)
可以将整个 I2C 子系统用下面的框图来描述: 可以将上面这一 I2C 子系统划分为三个层次,分别为用户空间、内核空间和硬件层,内核空间就包括 I2C 设备驱动层、I2C 核心层和 I2C 适配器驱动层, 本篇主要内容就是介绍 I2C 子系统框架中…...
元戎启行嵌入式面试题及参考答案
介绍下 CAN 通信原理 控制器局域网(CAN)是一种串行通信协议,主要用于汽车、工业自动化等领域的电子控制单元(ECU)之间的通信。 其通信原理是基于多主站架构。在总线上,多个节点(设备)都可以主动发起通信。CAN 协议使用差分信号来传输数据,通过两条信号线 CAN_H 和 CAN…...
【EasyExcel】EasyExcel导出表格包含合计行、自定义样式、自适应列宽
目录 0 EasyExcel简介1 Excel导出工具类设置自定义表头样式设置自适应列宽添加合计行 2 调用导出工具类导出Excel表3 测试结果 0 EasyExcel简介 在数据处理和报表生成的过程中,Excel是一个非常常用的工具。特别是在Java开发中,EasyExcel库因其简单高效而…...
es数据同步(仅供自己参考)
数据同步的问题分析: 当MySQL进行增删改查的时候,数据库的数据有所改变,这个时候需要修改es中的索引库的值,这个时候就涉及到了数据同步的问题 解决方法: 1、同步方法: 当服务对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工具
往期目录: 从0开始学习Linux——简介&安装 从0开始学习Linux——搭建属于自己的Linux虚拟机 从0开始学习Linux——文本编辑器 上一个章节我们简单了解了Linux中常用的一些文本编辑器,本次教程我们将学习yum工具。 一、Yum简介 Yum(全名…...
【Linux】Linux管道揭秘:匿名管道如何连接进程世界
🌈个人主页:Yui_ 🌈Linux专栏:Linux 🌈C语言笔记专栏:C语言笔记 🌈数据结构专栏:数据结构 🌈C专栏:C 文章目录 1.什么是管道 ?2. 管道的类型2.1 匿…...
2026年最新亲测3款生成会议纪要免费工具推荐,10分钟出稿非常好用!
兄弟们,我来了。作为一个天天泡在会议室、钉钉和飞书里来回切换的职场老兵,我太懂“开会一时爽,整理火葬场”的痛苦了。这几年,各种AI录音转文字、语音转写工具层出不穷,但真正能打、能免费白嫖、还不乱收费的…...
从一家工厂的产品图、SKU 宽度和产品页,能读出哪些经营信息?一份给采购方和上游销售员的读图手册
采购、品牌方、上游销售员常遇到同一种困惑:打开一家"工厂"的店铺,产品图漂亮、SKU 铺得一大屏、参数行行写满,但聊几句发现对方根本不是工厂,是转单贸易商;或者是真工厂,但定位和需求完全错位。…...
3步掌握DownKyi:让你的B站视频收藏效率提升300%
3步掌握DownKyi:让你的B站视频收藏效率提升300% 【免费下载链接】downkyi 哔哩下载姬downkyi,哔哩哔哩网站视频下载工具,支持批量下载,支持8K、HDR、杜比视界,提供工具箱(音视频提取、去水印等)…...
Pipeline五大核心要素拆解:从输入到输出的自动化流程设计
1. 项目概述:为什么我们需要拆解Pipeline的基本要素?在任何一个涉及流程化、自动化处理的领域,无论是软件开发中的CI/CD(持续集成/持续部署),还是数据科学中的数据预处理与分析,甚至是制造业中的…...
告别黑白DEM!GeoServer发布地形图的样式美化实战(附完整SLD代码)
告别黑白DEM!GeoServer发布地形图的样式美化实战(附完整SLD代码) 当你在GeoServer中发布DEM数据时,是否遇到过这样的困扰:明明精心准备了高程数据,预览时却只能看到一片单调的灰度图像?这种&quo…...
激光器物理理论模型:从经典到量子,工程师如何选择?
1. 激光器物理理论模型全景概览激光,这束高度相干、单色、定向的光,其诞生与运作背后,是一套极其精密的物理法则。对于从事光电子、激光技术研发,乃至物理研究的工程师和学者而言,理解这些法则的不同描述层次ÿ…...
C++SFINAE技术详解
CSFINAE技术详解SFINAE(Substitution Failure Is Not An Error)是C模板元编程的核心技术,允许在模板实例化失败时不产生编译错误,而是尝试其他重载。SFINAE的基本原理是模板替换失败不是错误。#include #includetemplate typename…...
S7-1200通讯选型指南:RS485、Profinet还是开放式TCP?看完这篇不再纠结
S7-1200通讯选型指南:RS485、Profinet还是开放式TCP?看完这篇不再纠结 在工业自动化项目中,PLC通讯方案的选择往往让工程师们陷入两难——既要考虑当下设备的兼容性,又要为未来升级预留空间。作为西门子S7-1200系列PLC的用户&…...
AspectCore-Framework反射扩展:打造极致性能的.NET应用终极指南
AspectCore-Framework反射扩展:打造极致性能的.NET应用终极指南 【免费下载链接】AspectCore-Framework AspectCore is an AOP-based cross platform framework for .NET Standard. 项目地址: https://gitcode.com/gh_mirrors/as/AspectCore-Framework Aspec…...
关注模块 API
关注用户 POST /api/v1/relations/followHeaders:Authorization: Bearer {token}Request: {"user_id": "target_user_id" }Response: {"code": 0,"data": {"relation_type": "following"} }接口语义设计 POST /…...
