前端入门(认识HTML,CSS,JavaScript三件套)

目录

前言

HTML(构建)

CSS(设计)

 JavaScript(互动)

总结

相关书籍推荐


 

前言

前端(Frontend)指的是与用户直接交互的部分,也称为客户端。在网站或者应用程序中,前端通常包括用户界面(UI)、用户体验(UX)以及与用户直接交互的各种功能。前端开发主要涉及使用HTML、CSS和JavaScript等技术来构建网站或应用程序的用户界面和交互逻辑。今天我们来初步认识一下这三件套。


HTML(构建)

  • HTML(HyperText Markup Language)是一种用于创建网页结构的标记语言。它由一系列的元素(elements)组成,这些元素用标签(tags)来描述其在网页中的含义和结构。HTML被广泛用于构建网页,并且是Web开发中的基础。通过HTML,开发者可以定义文本、图像、链接、表格、表单等在网页中的布局和内容。
  • HTML使用一种层次结构来组织网页内容,这种结构由标签对(tag pair)组成,其中包括起始标签(opening tag)、结束标签(closing tag)和标签内容。例如,<p>标签用于表示段落,<img>标签用于插入图像,<a>标签用于创建链接等。
  • HTML不负责网页的样式和交互行为,这些功能通常由CSS(Cascading Style Sheets)和JavaScript来实现。HTML与CSS和JavaScript一起构成了Web开发的基础技术,用于创建具有吸引力、交互性和可访问性的网页。

CSS(设计)

  • CSS(Cascading Style Sheets,层叠样式表)是一种用于控制网页样式和布局的样式表语言。它可以与HTML结合使用,通过定义样式规则来指定网页元素的外观和排版方式。CSS的主要作用是将内容与其呈现方式分离,使得网页的样式和结构可以独立进行管理和修改,从而提高网页的可维护性和可重用性。
  • CSS使用一种规则(rule)的结构来定义样式,每个规则由选择器(selector)和声明块(declaration block)组成。选择器用于选择要应用样式的HTML元素,而声明块包含了一组属性-值对,用于描述所选元素的样式。例如,以下是一个简单的CSS规则,这个规则将会选中所有的段落(<p>元素),并将它们的文本颜色设置为蓝色,字体大小设置为16像素。
p {
  color: blue;
  font-size: 16px;
}
  • CSS可以用于控制元素的尺寸、颜色、字体、间距、边框等各种样式属性,以及实现响应式布局、动画效果等。它是Web开发中的重要技术之一,与HTML和JavaScript一起构成了现代Web页面的核心技术。

 JavaScript(互动)

  • JavaScript是一种高级的、解释型的编程语言,用于在网页上实现交互式的动态效果和功能。它通常被用于在网页上操作DOM(Document Object Model,文档对象模型)、处理用户输入、进行数据验证、执行动画效果、与服务器进行通信等。
  • JavaScript最初由Netscape公司(现在的Mozilla基金会)的布兰登·艾奇(Brendan Eich)在1995年创建,并最初被用于在网页中实现简单的交互效果。如今,JavaScript已经发展成为一种强大的、全球通用的编程语言,它被广泛应用于Web开发、移动应用开发、桌面应用程序开发等领域。
  • JavaScript具有以下特点:
  1. 动态性: JavaScript可以在网页加载完毕后动态地修改网页内容、样式和结构,使得网页具有更丰富的交互性。
  2. 事件驱动: JavaScript可以通过监听用户的操作事件(如点击、键盘输入等)来触发相应的响应动作,从而实现交互效果。
  3. 跨平台: JavaScript可以在几乎所有的现代浏览器中运行,并且可以被用于开发跨平台的Web应用程序。
  4. 灵活性: JavaScript支持面向对象编程(OOP)、函数式编程(FP)等多种编程范式,使得开发者能够根据需要选择合适的编程风格。
  • JavaScript与HTML和CSS一起构成了现代Web开发中的三大核心技术,它们共同构建了丰富、交互性强的Web页面和应用程序。

总结

在前端中,HTML,CSS,JavaScript相互配合,来构建前端页面,其中

  • HTML用于对页面进行构建
  • CSS用于对页面进行设计
  • JavaScript用于实现和用户之间的互动逻辑

熟练运用三件套,是进行前端设计的重要基础。


相关书籍推荐

HTML+CSSHead First HTML与CSS(第二版)
CSS精通CSS 高级Web标准解决方案(第三版)
JavaScriptJavaScript权威指南(第七版)

新手上路,水平有限,如有错误,还望海涵并指出!

与君共勉!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PyCharm关闭项目后等待时间长

每次关闭项目或PyCharm时&#xff0c;会显示正在关闭项目&#xff0c;而这个关闭时间很长且不可确定&#xff0c;很浪费我们的时间&#xff0c;不过愿意等的话&#xff0c;倒也是可以。 解决方法 Help -> Find Action -> 查找 Registry -> 禁用 ide.await.scope.comp…

【功能更新】强化知识库管理与AI问答机器人性能

三月HelpLook带来了3大类功能焕新&#xff0c;主要聚焦于&#xff1a;知识库的管理功能升级和AI问答机器人的优化&#xff0c;让我们看看更新了哪些新功能&#xff01; 那么&#xff0c;接下来就让我们来详细了解一下本次升级都带来了哪些新功能吧&#xff01; 知识库使用与管理…

电话机器人系统源码安装教程

电话机器人系统是一种基于人工智能技术的自动化工具&#xff0c;它可以模仿人类的交谈方式&#xff0c;通过电话与用户进行互动。这种系统广泛应用于客户服务、市场营销、健康咨询等领域。下面是一个基本的电话机器人系统源码安装教程&#xff1a; 1. 准备环境 你需要一个Linu…

《MATLAB科研绘图与学术图表绘制从入门到精通》

解锁MATLAB科研绘图魅力&#xff0c;让数据可视化成为你的科研利器&#xff01; 1.零基础快速入门&#xff1a;软件操作实战案例图文、代码结合讲解&#xff0c;从入门到精通快速高效。 2.多种科研绘图方法&#xff1a;科研绘图基础变量图形极坐标图形3D图形地理信息可视化等&a…

第4章 Redis,一站式高性能存储方案,笔记问题

点赞具体要实现功能有哪些&#xff1f; 可以点赞的地方&#xff1a;对帖子点赞&#xff0c;对评论点赞点一次是点赞&#xff0c;再点一次是取消赞统计点赞的数量&#xff08;计数&#xff0c;string&#xff09;&#xff0c;帖子被点赞的数量&#xff0c;某个用户被点赞的数量…

2024消息预知在线客服系统源码

新增消息预知&#xff0c;消息撤回&#xff0c;消息已读未读&#xff0c; 修复需要刷新才能收到消息 修复客户来源地址 修复消息提示音 修复桌面推送提醒 要求服务器环境&#xff1a; 宝塔面板 &#xff0c;Nginx1.16-1.18&#xff0c;7.2.23 源码下载&#xff1a;https:…

安卓java打包uniapp原生插件 和 uniapp使用安卓android原生插件

1.uniapp dcloud官方文档 简介 | uni小程序SDK 2.前提&#xff0c;需要有经验的安卓java开发人员&#xff0c;并且同时具备uniapp移动端开发经验。说明&#xff1a;android打包的.aar和uniapp需要的.aar是不一样的&#xff0c;uniapp需要的.aar是需要有一些特定配置的&#x…

JJVM类的加载过程

类的加载过程 一个java文件从被加载到被卸载这个生命过程&#xff0c;总共要经理五个阶段&#xff0c;JVM将类加载过程分为&#xff1a;&#xff08;加链初使卸&#xff09; 1. 加载 首先通过一个类的全限定名来获取此类的二进制字节流&#xff1b;其次将这个字节流所代表的静…

如何在社交媒体中使用增强现实来提高客户参与度?

目录 1. 增强现实在社交媒体中的应用是如何发展的 2. 社交媒体营销和广告中的增强现实 3. 社交媒体上的增强现实滤镜和镜头 4. 社交媒体平台上的增强现实购物 5. 利用社交媒体的增强现实事件和品牌激活 6. 增强现实在社交媒体中的未来是什么 7. 社交媒体中的增强现实常见…

MTK i500p AIoT解决方案

一、方案概述 i500p是一款强大而高效的AIoT平台&#xff0c;专为便携式、家用或商用物联网应用而设计&#xff0c;这些应用通常需要大量的边缘计算&#xff0c;需要强大的多媒体功能和多任务操作系统。该平台集成了Arm Cortex-A73 和 Cortex-A53 的四核集群&#xff0c;工作频…

抖音引流私域转化模式1.0现场视频,从抖音源源不断把人加到私域买单

抖音-引流私域转化模式1.0现场视频&#xff0c;从抖音源源不断把人加到私域&#xff0c;让加到私域的粉丝买单 课程内容&#xff1a;抖音引流私域转化模式1.0现场视频&#xff0c;从抖音源源不断把人加到私域买单 - 百创网-源码交易平台_网站源码_商城源码_小程序源码 01.第一…

理解PostgreSQL中的postmaster.pid

在PG中&#xff0c;一个简要的体系结构图可以大致画成下边的样子&#xff1a; Server端基本上分成backend process和若干background process。这些process都是一个名为postmaster进程的子进程。而postmaster则是postgres进程的别名。 进程概况 [14:42:08-postgrescentos1:/pg…

脱单微信群|相亲脱单支招|手把手教你脱单

群里有太多优质单身男女生&#xff0c;你的脱单困惑&#xff0c;TA可能也遇到过。抬手在群里滴滴&#xff0c;即刻拥有一群有过相同问题的友友和运营客服帮忙。 点我进脱单群 点击 情感脱单问题&#xff0c;直接私信给樱桃情感老师&#xff0c;保护个人隐私和提升问题解决效率…

arcgis10.5安装步骤

目录 一、安装License 二、安装ArcGIS_Desktop 三、安装汉化包&#xff0c;解压后&#xff0c;直接双击等待安装即可 一、安装License 双击ArcGIS_License_Manager_Windows_105_154033 选择【Next】 勾选I accept&#xff0c;然后选择【Next】 选择License的安装目录&#x…

详解事件循环

浏览器的进程模型 何为进程&#xff1f; 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 何为线程 &#xff1f; 有了进程后…

锂电池算法学习集合---基于matlab/simulink的电池参数辨识、充放电、SOC估计算法。

整理了锂电池的多种算法合集&#xff1a;涵盖电动汽车Simulink模型、电动汽车动力电池SOC估算模型、动力电池及电池管理系统BMS。 电动汽车动力电池SOC估算模型含有:电池参数辨识模型、电池的充放电数据、电池手册、卡尔曼滤波电池SOC文献、卡尔曼滤波算法的锂电池SOC估算模型…

15-1-Flex布局

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 Flex布局1 Flex容器和Flex项目2 Flex 容器属性2.1 主轴的方向2.2 主轴对齐方式…

STM32智能家居小助手

​ 设计的目的 大部分家用电器开关仍旧是传统的机械式按键开关&#xff0c;原因是传统式的电器开关开发周期短&#xff0c;制作成本低&#xff0c;方案成熟&#xff0c;但是传统的遥控家电开关已经不能满足人们对家电控制的要求&#xff0c;传统的遥控器具有单一性&#xff0c;…

k8s1.28-helm安装kafka-Raft集群

参考文档 [Raft Kafka on k8s 部署实战操作 - 掘金 (juejin.cn)](https://juejin.cn/post/7349437605857411083?fromsearch-suggest)部署 Raft Kafka&#xff08;Kafka 3.3.1 及以上版本引入的 KRaft 模式&#xff09;在 Kubernetes (k8s) 上&#xff0c;可以简化 Kafka 集群…

Linux编程中进程的概念和环境变量

目录 概述 1 认识进程 1.1 进程的定义 1.2 进程状态 1.3 进程的调用 2 进程环境 2.1 进程ID 2.2 父进程与子进程 2.3 UID 和 GID 2.4 环境变量 2.4.1 通过main函数参数获取环境变量 2.4.2 environ 全局变量获取环境变量 2.4.3 getenv()函数获取环境变量 2.5 环境变…