【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成

前端三件套是指在网页开发中常用的三种技术:HTML,CSS和JavaScript。它们分别负责网页的结构,样式和交互,是构建网页的基础。下面我们来简单介绍一下它们的作用和特点,并举一些例子。

1 HTML——描述页面结构

HTML(超文本标记语言)是一种用来描述网页内容的语言,它使用一系列的标签(tag)来定义网页中的元素,如标题,段落,图片,链接等。HTML标签通常成对出现,如<h1>和</h >,表示一个一级标题。HTML标签可以嵌套使用,表示不同层次的结构。例如:

<html><head><title>我的网页</title></head><body><h1>欢迎来到我的网页</h1><p>这是一个简单的示例</p><img src="logo.png" alt="我的logo"><a href="https://www.bing.com">访问必应搜索</a></body>
</html>

这段代码定义了一个简单的网页,包含了标题,段落,图片和链接四个元素。浏览器会根据HTML代码来渲染网页,显示出相应的内容。

2 CSS——美化页面

CSS(层叠样式表)是一种用来控制网页外观的语言,它可以定义网页中元素的颜色,大小,位置,边框等属性。CSS可以通过三种方式来应用到HTML中:内联样式,内部样式表和外部样式表。内联样式是在HTML标签中使用style属性来定义样式,如<p style="color:red;" >这是一段红色的文字</p>。内部样式表是在HTML的部分使用

<style>h1 {color: blue;font-size: 36px;}p {font-family: Arial;}
</style>

这段代码定义了两个样式规则,分别应用到h1和p元素上,使得h1元素显示为蓝色和36像素的字体,p元素显示为Arial字体。外部样式表是在一个单独的文件中定义样式,并在HTML中使用标签来引用,如<link rel="stylesheet" href="style.css">。这种方式可以让多个网页共享同一个样式表,方便管理和修改。

3 JavaScript——给页面添加行为

JavaScript(简称JS)是一种用来实现网页交互的脚本语言,它可以在浏览器中运行,响应用户的操作,修改网页内容,发送和接收数据等。JavaScript可以通过两种方式来嵌入到HTML中:内部脚本和外部脚本。内部脚本是在HTML中使用

<script>alert("Hello, world!");
</script>

这段代码会在网页加载时弹出一个对话框,显示“Hello, world!”的信息。外部脚本是在一个单独的文件中编写代码,并在HTML中使用。这种方式可以让多个网页共享同一个脚本文件,方便管理和修改。
前端三件套是网页开发的核心技术,它们相互配合,实现了丰富多彩的网页效果。通过学习和掌握前端三件套,你可以创建自己的网站,并展示你的创意和才华。

4 三件套速成视频

html视频:https://www.bilibili.com/video/BV1jf4y1J7Ms

CSS视频:https://www.bilibili.com/video/BV1Ci4y1W7H7

JavaScript视频:https://www.bilibili.com/video/BV15L4y1a7or

5 三件套手录代码

根据 此 https://www.bilibili.com/video/BV1BT4y1W7Aw5 视频的教程,手录全部代码并部署在 https://blma.gitee.io/html-css-js 共18个小节,3个小时的视频,1个星期手录自学。

0 前端三件套 HTML CSS JavaScript
1.HTML 1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单
2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位
3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM
4.综合练习 16表格的增删改查 17移动端适配 18Flex弹性布局

源代码放在 https://gitee.com/blma/html-css-js 这里,方便自己查阅。

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

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

相关文章

投票项目_登录功能的版本迭代

V0版本: 实现最简单的登录,写个接口去数据库查有没有前端传来的账号和密码,查到且密码正确返回“登录成功”&#xff0c;其余情况统一返回“账号或密码错误”。 V1版本: 用session代替cookie 先导入依赖,将session加入到redis中 1.导入依赖 <dependency><groupId>…

智慧园区可视化的价值,不要再吐槽没啥用了。

2023-04-20 13:30贝格前端工场 提高园区运营效率&#xff1a;智慧园区可以通过物联网技术、大数据分析等手段&#xff0c;实现对园区内设施、设备、人员等的实时监控和管理&#xff0c;从而提高园区的运营效率&#xff0c;降低管理成本。 提升园区服务水平&#xff1a;智慧园区…

前端Vue项目无法启动服务,提示无 ‘dev‘ npm的脚本问题解决

目录 一、问题详情 二、问题解决 一、问题详情 上周还能运行的项目&#xff0c;今天突然无法执行了&#xff0c;连最基本的启动按钮也没有了&#xff0c;所有的项目本地都突然跑不起来了&#xff0c;附上截图。 二、问题解决 后来排查的根本原因有点奇葩&#xff0c;是因为…

C++面试 -操作系统-安全能力:死锁的危害、出现原因、解决方法

目录 死锁的危害 死锁出现的原因 死锁的解决方法 死锁是计算机科学中一个非常重要的概念&#xff0c;特别是在多线程、并发编程以及数据库管理系统等领域中。下面是关于死锁的危害、出现原因和解决方法的基础概述&#xff1a; 死锁的危害 资源浪费&#xff1a;死锁导致系统…

ABBYY FineReader16文档转换、PDF管理与文档比较功能介绍

ABBYY FineReader 16作为一款OCR和PDF一体化程序&#xff0c;其强大的功能使得文档处理变得简单高效。在众多功能中&#xff0c;文档转换、PDF管理和文档比较这三大功能尤为突出&#xff0c;成为了众多企业和个人用户的首选工具。 ABBYY Finereader 16-安装包下载如下&#xff…

【每日前端面经】2023-02-26

题目来源: 牛客 http和https http是一种用于分布式、协作式和超媒体信息系统的应用层协议。简单来说就是一种发布和接收HTML页面的方法&#xff0c;被用于在Web浏览器和网站服务器之间传递消息。该协议以明文方式发送内容&#xff0c;不提供任何方式的数据加密&#xff0c;如…

内存函数(C语言进阶)

目录 前言 1、memcpy 2、memmove 3、memcmp 4、memset 结语 前言 本篇介绍了C语言中的内存函数&#xff0c;内存函数&#xff0c;顾名思义就是处理内存的函数。 1、memcpy memcpy&#xff1a;内存拷贝函数。 相对于strcpy只能拷贝字符串来讲&#xff0c;memcpy能拷…

Qt介绍以及qt_creater的安装和C++项目工程创建

最近天气严寒&#xff0c;同学们要注意保暖哦&#xff01;学习的同时别忘了照顾好自己呀&#xff01;o(*&#xffe3;▽&#xffe3;*)ブ 目录 一、Qt 1、Qt概念 2、常见的GUI 二、安装qt_creater 方法一&#xff1a; 方法二&#xff1a; 三、Qt_creater 中C项目的创建 …

MySQL之sql函数分类

华子目录 sql函数聚合函数数值型函数字符串函数日期和时间函数流程控制函数case用法 sql函数 聚合函数 聚合函数是对一组值进行运算&#xff0c;并返回单个值。也叫分组函数&#xff0c;具体用法请参考该博文 https://blog.csdn.net/huaz_md/article/details/136081708?spm1…

MATLAB环境下一种改进的瞬时频率(IF)估计方法

相对于频率成分单一、周期性强的平稳信号来说&#xff0c;具有非平稳、非周期、非可积特性的非平稳信号更普遍地存在于自然界中。调频信号作为非平稳信号的一种&#xff0c;由于其频率时变、距离分辨率高、截获率低等特性&#xff0c;被广泛应用于雷达、地震勘测等领域。调频信…

PostgreSQL内存上下文系统设计概述

PostgreSQL内存上下文系统设计概述 原文:src/backend/utils/mmgr/README 背景 我们在“内存上下文”中进行大部分内存分配&#xff0c;通常是AllocSets由src/backend/utils/mmgr/aset.c实现。在没有大量开销的情况下成功进行内存管理的关键是定义一组具有适当生命周期的有用…

华为大数据平台-FusionInsight MRS

1、产品定位 (1) 关于华为的大数据平台&#xff0c;本人之前用过FusionInsight HD版本&#xff0c;近期也在用MRS结合MPP和治理平台做湖仓一体的开发&#xff0c;其实MRS是在HD基础上进行的升级、改版&#xff0c;MRS是集成一些开源的大数据组件&#xff0c;有自己的运维和安全…

【leetcode】剑指Offer专项突击版含注释 Java版本(一)

目录 前言第一天&#xff08;整数&#xff09;剑指 Offer II 002. 二进制加法&#xff08;简单&#xff09; 第二天&#xff08;整数&#xff09;剑指 Offer II 004. 只出现一次的数字 &#xff08;中等&#xff09;剑指 Offer II 005. 单词长度的最大乘积&#xff08;中等&…

LabVIEW光伏逆变器低电压穿越能力测试

LabVIEW光伏逆变器低电压穿越能力测试 随着光伏发电技术的迅速发展&#xff0c;光伏逆变器的低电压穿越&#xff08;LVRT&#xff09;能力日益成为影响电网稳定性的关键因素。为了提升光伏逆变器的并网性能&#xff0c;开发了一套基于LabVIEW的光伏逆变器LVRT测试系统。该系统…

如何成为fpga工程师

FPGA的应用领域非常的广&#xff0c;尤其再人工智能&#xff0c;大数据&#xff0c;云计算等等方向非常吃香。加上国家这两年的政策支持&#xff0c;整个芯片行业相比较其他的传统行业来说会好很多&#xff0c;总之前景是光明的&#xff0c;道路是曲折的&#xff0c;想要在人才…

05-验证整数输入

需求分析 我们在脚本中验证整数输入可谓是小菜一碟&#xff0c;但如果你也想接受负数的话&#xff0c;可就没那么容易了。问题在于每个数值只能有一个负号&#xff0c;而且还必须出现在数值的最开始部分。下面脚本可以确保正确地格式化负数&#xff0c;另外还能检查其值是否位…

Parquet 文件生成和读取

文章目录 一、什么是 Parquet二、实现 Java 读写 Parquet 的流程方式一&#xff1a;遇到的坑&#xff1a;坑1&#xff1a;ClassNotFoundException: com.fasterxml.jackson.annotation.JsonMerge坑2&#xff1a;No FileSystem for scheme "file"坑3&#xff1a;与 spa…

JAVA工程师面试专题-《并发编程篇》

目录 一、线程 1、并发与并行的区别 2、同步和异步的区别 3、Java中创建线程有哪些方式? 4、Thread和Runnable的区别 5、Java中的Runnable、Callable、Future、FutureTask的区别和联系&#xff1f; 6、说一下你对 CompletableFuture 的理解 7、volatile关键字有什么用&…

Ansible script 模块 该模块用于将本机的脚本在被管理端的机器上运行。Ansible服务执行本机脚本

目录 过程首先&#xff0c;我们写一个脚本&#xff0c;并给其加上执行权限直接运行命令来实现在被管理端执行该脚本验证错误演示 过程 该模块直接指定脚本的路径即可 首先&#xff0c;我们写一个脚本&#xff0c;并给其加上执行权限 vim /tmp/df.sh编辑脚本内容 这个脚本内容…

信钰证券:无任何氢能产品形成收入,这只氢能概念股却八连板了

受氢能方针面影响&#xff0c;多个氢能股迎来连涨潮。 2月26日&#xff0c;蓝科高新(601798.SH)涨停&#xff0c;截至收盘报11.01元&#xff0c;涨幅9.99%&#xff0c;完成八连板&#xff0c;总市值39.03亿元。首要因其地点氢能板块全体上涨影响。 同日同花顺氢动力概念下&am…