当前位置: 首页 > 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 匿…...

2026年最新亲测3款生成会议纪要免费工具推荐,10分钟出稿非常好用!

兄弟们&#xff0c;我来了。作为一个天天泡在会议室、钉钉和飞书里来回切换的职场老兵&#xff0c;我太懂“开会一时爽&#xff0c;整理火葬场”的痛苦了。这几年&#xff0c;各种AI录音转文字、语音转写工具层出不穷&#xff0c;但真正能打、能免费白嫖、还不乱收费的&#xf…...

从一家工厂的产品图、SKU 宽度和产品页,能读出哪些经营信息?一份给采购方和上游销售员的读图手册

采购、品牌方、上游销售员常遇到同一种困惑&#xff1a;打开一家"工厂"的店铺&#xff0c;产品图漂亮、SKU 铺得一大屏、参数行行写满&#xff0c;但聊几句发现对方根本不是工厂&#xff0c;是转单贸易商&#xff1b;或者是真工厂&#xff0c;但定位和需求完全错位。…...

3步掌握DownKyi:让你的B站视频收藏效率提升300%

3步掌握DownKyi&#xff1a;让你的B站视频收藏效率提升300% 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等&#xff09;…...

Pipeline五大核心要素拆解:从输入到输出的自动化流程设计

1. 项目概述&#xff1a;为什么我们需要拆解Pipeline的基本要素&#xff1f;在任何一个涉及流程化、自动化处理的领域&#xff0c;无论是软件开发中的CI/CD&#xff08;持续集成/持续部署&#xff09;&#xff0c;还是数据科学中的数据预处理与分析&#xff0c;甚至是制造业中的…...

告别黑白DEM!GeoServer发布地形图的样式美化实战(附完整SLD代码)

告别黑白DEM&#xff01;GeoServer发布地形图的样式美化实战&#xff08;附完整SLD代码&#xff09; 当你在GeoServer中发布DEM数据时&#xff0c;是否遇到过这样的困扰&#xff1a;明明精心准备了高程数据&#xff0c;预览时却只能看到一片单调的灰度图像&#xff1f;这种&quo…...

激光器物理理论模型:从经典到量子,工程师如何选择?

1. 激光器物理理论模型全景概览激光&#xff0c;这束高度相干、单色、定向的光&#xff0c;其诞生与运作背后&#xff0c;是一套极其精密的物理法则。对于从事光电子、激光技术研发&#xff0c;乃至物理研究的工程师和学者而言&#xff0c;理解这些法则的不同描述层次&#xff…...

C++SFINAE技术详解

CSFINAE技术详解SFINAE&#xff08;Substitution Failure Is Not An Error&#xff09;是C模板元编程的核心技术&#xff0c;允许在模板实例化失败时不产生编译错误&#xff0c;而是尝试其他重载。SFINAE的基本原理是模板替换失败不是错误。#include #includetemplate typename…...

S7-1200通讯选型指南:RS485、Profinet还是开放式TCP?看完这篇不再纠结

S7-1200通讯选型指南&#xff1a;RS485、Profinet还是开放式TCP&#xff1f;看完这篇不再纠结 在工业自动化项目中&#xff0c;PLC通讯方案的选择往往让工程师们陷入两难——既要考虑当下设备的兼容性&#xff0c;又要为未来升级预留空间。作为西门子S7-1200系列PLC的用户&…...

AspectCore-Framework反射扩展:打造极致性能的.NET应用终极指南

AspectCore-Framework反射扩展&#xff1a;打造极致性能的.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 /…...