前端入门(认识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.hqwc.cn/news/599012.html

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

相关文章

一文读懂Memory consistency model (内存模型)

Memory consistency model又称Memory model (内存模型)&#xff0c;定义了使用Shared memory(共享内存)执行多线程(Multithread)程序所允许的行为规范。Memory model定义了软硬件接口规范&#xff0c;以便程序员预料硬件会有什么行为&#xff0c;而硬件实现者知道可以使用什么样…

初识React(二)响应事件、state、useState

(一)响应事件 使用 React 可以在 JSX 中添加 事件处理函数。其中事件处理函数为自定义函数&#xff0c;它将在响应交互&#xff08;如点击、悬停、表单输入框获得焦点等&#xff09;时触发 1.给组件添加事件处理函数 就像vue的click"handleClick"一样 但这里要特别…

Redis单线程 VS 多线程

一、Redis 为什么选择单线程&#xff1f; 这种说法其实并不严谨&#xff0c;为什么这么说呢&#xff1f; Redis的版本有很多 3.x、4.x、6.x&#xff0c;版本不同架构也不同的&#xff0c;不限定版本问是否单线程也是不太严谨。 版本3.x&#xff0c;最早版本&#xff0c;也就…

SQLite 4.9的 OS 接口或“VFS”(十三)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite字节码引擎&#xff08;十二&#xff09; 下一篇:SQLite 4.9的虚拟表机制(十四) 1. 引言 本文介绍了 SQLite OS 可移植性层或“VFS” - 模块位于 SQLite 实现堆栈底部 提供跨操作系统的可移植性。 VFS是Virtual File…

mac老版本如何升级到最新版本

mac老版本如何升级到最新版本 老macbook升级新版本&#xff08;Big sur、Monterey&#xff09; 首先介绍我的电脑的机型及情况&#xff1a; 2015年初的MacBook Air 处理器是1.6Hz 双核Interl Core i5 内存4G 老版本只能升到10.13 想要升到最高版本的原因&#xff1a;想要注册…

解决Xshell连接不上虚拟机

相信有很多同学和我一样遇到这个问题&#xff0c;在网上看了很多教程基本上都让先在虚拟机输入ifconfig命令查看ip地址&#xff0c;弄来弄去最后还是解决不了&#x1f62d;&#x1f62d;&#xff0c;很大概率是我们的虚拟机没有开启网卡&#xff0c;默认Centos是不启用网卡的&a…

麒麟系统ARM安装rabbitmq

简单记录下&#xff0c;信创服务器&#xff1a;麒麟系统&#xff0c;安装rabbitmq的踩坑记录。 本文章参考了很多大佬文章&#xff0c;我整理后提供。 一、安装基础依赖 yum -y install make gcc gcc-c kernel-devel m4 ncurses-devel openssl-devel unixODBC-devel 二、下载…

python gui 实现多个pdf文件合并成一个文件

这是gui截图&#xff0c;汉字都能看懂吧 上代码之前需要安装两个库 pip install PyPDF2 pip install PySimpleGUI然后直接运行代码 import os from PyPDF2 import PdfReader, PdfWriter import PySimpleGUI as sg import tkinter as tk from tkinter import filedialogdef Ge…

八数码问题(bfs)

方式一&#xff1a;string存储状态 题目传送门&#xff1a;845. 八数码 - AcWing题库 BFS适用于边权为1的最短路问题 &#xff0c;而这题要求最少的交换次数&#xff0c;将每一次的九宫格状态当作一个“状态结点”&#xff0c;由当前这个结点可以扩展出其它状态【即 x 可以与其…

基于R语言BIOMOD2模型的物种分布模拟

随着生物多样性全球大会的举办&#xff0c;不论是管理机构及科研单位、高校都在积极准备&#xff0c;根据国家林草局最新工作指示&#xff0c;我国将积极整合、优化自然保护地&#xff0c;加快推进国家公园体制试点&#xff0c;构建以国家公园为主体的自然保护地体系。针对我国…

layui在上传多图时,allDone方法只是在第一次全部成功时调用了

问题点&#xff1a;在使用layui框架做多张图片上传时&#xff0c;遇见只有第一次操作上传图片时&#xff0c;触发了allDone全部上传成功的方法&#xff0c;后面再添加图片时&#xff0c;就不会调用这个方法 原因&#xff1a;是因为我删除了 choose 方法&#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 …