前端入门(认识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权威指南(第七版)

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

与君共勉!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FIN和RST的区别,几种TCP连接出现RST的情况

一、RST跟FIN的区别&#xff1a; 正常关闭连接的时候发的包是FIN&#xff0c;但是如果是异常关闭连接&#xff0c;则发送RST包 两者的区别在于&#xff1a; 1.RST不必等缓冲区的包都发出去&#xff0c;直接就丢弃缓存区的包发送RST包。而FIN需要先处理完缓存区的包才能发送F…

实战webSocket压测(三)Jmeter真实接口联调

背景&#xff1a; 接口地址为&#xff1a;ws://sunlei.demo 接口说明&#xff1a;websocket接口&#xff0c;首次连接&#xff0c;通过Text请求设置开启标志&#xff0c;然后通过wav文件流传输&#xff0c;达到后端服务可以根据传输信息进行解析满足指定标准后&#xff0c;web…

这就是AI眼中的物理世界:OpenAI Sora音乐短片《Worldweight》和超现实影片《气球人》

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

自定义gitlog格式

git log命令非常强大而好用&#xff0c;在复杂系统的版本管理中扮演着重要的角色&#xff0c;但默认的git log命令显示出的东西实在太丑&#xff0c;不好好打扮一下根本没法见人&#xff0c;打扮好了用alias命令拍个照片&#xff0c;就正式出道了&#xff01; 在使用git查看lo…

何为网络协议?一图知晓网络过程。

网络协议就是计算机之间沟通的语言 为了有效地交流&#xff0c;计算机之间需要一种共同的规则或协议&#xff0c; 就像我们和老外沟通之前&#xff0c;要先商量好用哪种语言&#xff0c; 要么大家都说中文&#xff0c;要么大家都说英语&#xff0c;这才能有效地沟通。 网络协…

JVM 全景图

今天我重新复习了一下 jvm 的一些知识点。我以前觉得 jvm 的知识点很多很碎&#xff0c;而且记起来很困难&#xff0c;但是今天我重新复习了一下&#xff0c;对这些知识点进行了简单的梳理之后&#xff0c;产生了不一样的看法。虽然 jvm 的知识点很碎&#xff0c;但是如果你真的…

如何自定义项目启动时的图案

说明&#xff1a;有的项目启动时&#xff0c;会在控制台输出下面的图案。本文介绍Spring Boot项目如何自定义项目启动时的图案&#xff1b; 生成字符图案 首先&#xff0c;找到一张需要设置的图片&#xff0c;使用下面的代码&#xff0c;将图片转为字符文件&#xff1b; impo…

动态规划刷题(算法竞赛、蓝桥杯)--线段(线性DP)

1、题目链接&#xff1a;P3842 [TJOI2007] 线段 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include <bits/stdc.h> using namespace std; const int N20010; int a[N][2],f[N][2]; //a[i][0]表示l[i],a[i][1]表示r[i] int dis(int a,int b){return abs(a-b); } int…

基于Swin Transformers的乳腺癌组织病理学图像多分类

乳腺癌的非侵入性诊断程序涉及体检和成像技术&#xff0c;如乳房X光检查、超声检查和磁共振成像。成像程序对于更全面地评估癌症区域和识别癌症亚型的敏感性较低。 CNN表现出固有的归纳偏差&#xff0c;并且对于图像中感兴趣对象的平移、旋转和位置有所不同。因此&#xff0c;…

flutter升级3.10.6Xcode构建报错

flutter sdk 升级Xcode报错收集&#xff0c;错误信息如下&#xff1a; Error (Xcode): Cycle inside Runner; building could produce unreliable results.没问题版本信息&#xff1a; Xcode&#xff1a;15.3 flutter sdk &#xff1a;3.7.12 dart sdk&#xff1a;2.19.6 …

考研||考公||就业||其他?-------愿不再犹豫

大三下了&#xff0c;现在已经开学一个多月了&#xff0c;在上个学期的时候陆陆续续吧周围有的行动早的人已经开始准备考研了&#xff0c;当然这只是下小部分人吧&#xff0c;也有一部分人是寒假可能就开始了&#xff0c;更多的则是开学的时候&#xff0c;我的直观感受是图书馆…

AI大模型下的策略模式与模板方法模式对比解析

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#xff1a;设计模式深度解析&#xff1a;AI大模型下…

[挖坟]如何安装Shizuku和LSPatch并安装模块(不需要Root,非Magisk)

2023年12月13日&#xff0c;LSPatch 停止维护 2024年1月8日&#xff0c;LSPosed 停止维护 2024年1月8日&#xff0c;ZygiskNext 停止维护 2024年1月9日&#xff0c;KernelSU 停止维护 这里使用 ColorOS 14 演示&#xff0c;其他品牌手机类似 安装 Shizuku 官网: https://shiz…

报修小程序怎么建立?维修服务行业的智能化升级

在这个数字化飞速发展的时代&#xff0c;维修服务行业也在经历着前所未有的变革。消费者对于服务的期待不再局限于传统的电话预约或线下等待&#xff0c;而是希望能够通过更加智能、便捷的途径解决日常生活中的维修问题。在这样的背景下&#xff0c;报修小程序应运而生&#xf…

性能分析-CPU知识

目录 CPU知识 cpu组成 查看cpu信息&#xff1a; top命令中 cpu相关&#xff1a; top命令看到系统负载&#xff1a; CPU负载 IO负载 上下文&#xff1a; CPU的寄存器和程序计数器----在cpu的控制器中 实战演示分析 top命令分析 arthas工具 进程上下文切换高的问题分析…

【MIT6.S081】Lab1: Xv6 and Unix utilities(详细解答版)

实验内容网址&#xff1a;https://xv6.dgs.zone/labs/requirements/lab1.html Sleep 关键点&#xff1a;函数参数判断、系统函数调用 思路&#xff1a; 通过argc来判断函数参数是否正确&#xff0c;通过atoi函数来讲字符串转化为整型&#xff0c;调用sleep函数后退出程序。 代…

OpenAI Sora:浅析文生视频模型Sora以及技术原理简介

一、Sora是什么&#xff1f; Sora官方链接&#xff1a;https://openai.com/sora 视频模型领头羊Runway Gen 2、Pika等AI视频工具&#xff0c;都还在突破几秒内的连贯性&#xff0c;而OpenAI&#xff0c;已经达到了史诗级的纪录。 OpenAI&#xff0c;永远快别人一步&#xff0…

C++的List类(一):List类的基本概念

目录 前言 List类的基本概念 List的构造函数 List类迭代器的使用 List的功能 List的元素访问 List与vector比较 前言 vector的insert和erase都会导致迭代器失效list的insert不会导致迭代器失效&#xff0c;erase会导致迭代器失效 insert导致失效的原因是开辟了新空间后…

【氮化镓】在轨实验研究辐射对GaN器件的影响

【Pioneering evaluation of GaN transistors in geostationary satellites】 摘要&#xff1a; 这篇论文介绍了一项为期6年的空间实验结果&#xff0c;该实验研究了在地球静止轨道上辐射对氮化镓&#xff08;GaN&#xff09;电子元件的影响。实验使用了四个GaN晶体管&#xf…

解决前端精度丢失问题:后端Long类型到前端的处理策略

在Web开发中&#xff0c;我们经常遇到前后端数据类型不匹配的问题&#xff0c;特别是当后端使用大数据类型如Long时&#xff0c;前端由于JavaScript的数字精度限制&#xff0c;可能导致精度丢失。本文将深入探讨这个问题&#xff0c;并提供两种有效的解决方法。 一、问题背景 …