丹摩征文活动 |【前端开发】HTML+CSS+JavaScript前端三剑客的基础知识体系了解

前言

🌟🌟本期讲解关于HTML+CSS+JavaScript的基础知识,小编带领大家简单过一遍~~~

🌈感兴趣的小伙伴看一看小编主页:GGBondlctrl-CSDN博客

🔥 你的点赞就是小编不断更新的最大动力                                       

🎆那么废话不多说直接开整吧~~

 

目录

1.HTML 

1.1什么是HTML

1.2HTML的基本结构

1.3HTML的快速入门

1.4HTML常见的标签

1.段落标签

2.图片标签

3.超链接标签

4.input标签

5.⽆语义标签: div&span 

2.CSS 

2.1什么是CSS

2.2CSS基础结构

2.3CSS选择器

1.标签选择器

2.class选择器

3.id选择器

4.通配符选择器 

5.复合选择器

2.4常用的CSS

1.color

2.font-size

3.外边距与内边距

3.JavaScript

3.1什么是JavaScript

3.2JavaScript的基础语法

3.3使用JQuery操作JavaScript

1.引入对应的库

2.jQuery的基础语法知识

4.总结


1.HTML 

1.1什么是HTML

HTML(Hyper Text Markup Language), 超⽂本标记语⾔.
超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.

标记语⾔: 由标签构成的语⾔(注意在后面经常会使用到这个标签)

 例如以下:

<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

这里的h1,h2就是标签; 

1.2HTML的基本结构

小编这里使用的就是idea进行的前端HTML的编写,一般来说这里的结构就是如下所示的:

<html><head><title>第⼀个⻚⾯</title></head><body>hello world</body>
</html>

 解释:

• html 标签是整个 html ⽂件的根标签(最顶层标签)
• head 标签中写⻚⾯的属性.
• body 标签中写的是⻚⾯上显⽰的内容
• title 标签中写的是⻚⾯的标题

这里的title就是标签,如下所示:

这个就是页面的标题,所以这里一般可以自己进行规定名称;

1.3HTML的快速入门

这里的HTML的基本结构就是如下所示的:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body>这是一个页面内容
</body>
</html>

解释:

• <!DOCTYPE html> 称为 DTD (⽂档类型定义), 描述当前的⽂件是⼀个 HTML5 的⽂件.
• <html lang="en"> 其中 lang 属性表⽰当前⻚⾯是⼀个 "英语⻚⾯". 这⾥暂时不⽤管. (有些
浏览器会根据此处的声明提⽰是否进⾏⾃动翻译).
• <meta charset="UTF-8"> 描述⻚⾯的字符编码⽅式. 没有这⼀⾏可能会导致中⽂乱码.

小编认为我们所后端开发的不用过于深究这里的问题,不用“钻牛角尖” 

这里在浏览器上进行运行观察如下所示:

当然这里的页面的标签小编这里是截取不到了;

1.4HTML常见的标签

1.段落标签

在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签

所以专门的段落标签就是如下:

<p>这是⼀个段落</p>
<p>这是⼀个段落</p>

注意:

• p 标签描述的段落, 前⾯没有缩进. (未来 CSS 会学)
• ⾃动根据浏览器宽度来决定排版.
• html 内容⾸尾处的换⾏, 空格均⽆效.
• 在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.
• html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格

2.图片标签
<img src="rose.jpg">

注意这里的图片的来源就是这个程序的文件的目录下,这是直接路径

3.超链接标签

• href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.
• target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开

<a href="http://www.baidu.com">百度</a>
4.input标签
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">⼥

注意:

各种输⼊控件, 单⾏⽂本框, 按钮, 单选框, 复选框.
• type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
• name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.
• value: input 中的默认值.
• checked: 默认被选中. (⽤于单选按钮和多选按钮)

5.⽆语义标签: div&span 
<div><span>咬⼈猫</span>
</div>
<div><span>兔总裁</span>
</div>
<div><span>阿叶君</span>
</div>

注意:

div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒⼦. ⽤于⽹⻚布局
• div 是独占⼀⾏的, 是⼀个⼤盒⼦.
• span 不独占⼀⾏, 是⼀个⼩盒⼦

以上就是比较基础的HTML的理解,由于小编是后端开发为目的的,一般来说就是看懂前端的代码就行,所以总结的不是很到位,所以对这部分感兴趣的uu可以扩展一下 

2.CSS 

2.1什么是CSS

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.

CSS前 -> CSS修饰后:

2.2CSS基础结构

选择器 + {⼀条/N条声明}
• 选择器决定针对谁修改 (找谁)
• 声明决定修改啥. (⼲啥)
• 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值.

代码如下:

<style>p {/* 设置字体颜⾊ */color: red;/* 设置字体⼤⼩ */font-size: 30px;}
</style>
<p>hello</p>

注意:

• CSS 要写到 style 标签中(后⾯还会介绍其他写法)

• style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内

2.3CSS选择器

CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性.
就好⽐ SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位⾏动.
CSS选择器主要分以下⼏种:
1. 标签选择器
2. class选择器
3. id选择器4. 复合选择器
5. 通配符选择器 

代码如下:


<div class="font32">我是⼀个div, class为font32</div>
<div class="font32">我是⼀个div, class为font32</div>
<div><a href="#">我是⼀个div</a></div>
<ul><li>aaa</li><li>bbb</li><li><a href="#">ccc</a></li>
</ul>
<ol><li>1111</li><li>2222</li><li>3333</li>
</ol>
<button id="submit">提交</button>

其中的标签的选择器就是如下所示的:

1.标签选择器
a {color: red;
}
2.class选择器
.font32 {font-size: 32px;
}

注意:这里是有一个点的;

⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让

代码更好复⽤)
3.id选择器
#submit {color: red;
}

注意:id 是唯⼀的, 不能被多个标签使⽤ (是和 类选择器 最⼤的区别)

4.通配符选择器 
* {color: red;
}

注意:置⻚⾯所有元素, 颜⾊为红⾊

5.复合选择器
ul li a {color: blue;
}

注意:这里的的标签是有先后顺序的,不能调换顺序

2.4常用的CSS

1.color
.text1{color: red;
}

颜⾊有如下⼏种表达⽅式:
• 英⽂单词,如red,blue
• rgb代码的颜⾊ 如rgb(255,0,0)
• ⼗六进制的颜⾊ 如#ff00ff 

2.font-size
.text1{font-size: 32px;
}

设置的是这个字体的大小

3.外边距与内边距

 padding: 内边距, 设置内容和边框之间的距离.内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离;

margin:外边距, 设置元素和元素之间的距离.

图示如下:

内外边距的概念是相对的,具体是取决于参考的物体;

<style>span{border: red double 2px;margin-left: 20px;margin-right: 20px;}</style>

这里只列举了margin这个外边距的概念,意思就是左右边距是20像素

3.JavaScript

3.1什么是JavaScript

JavaScript (简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名,但是它也被⽤到了很多⾮浏览器环境中

这里的语言主要是用作交互的操作,他与HTML和CSS的关系如下所示:

解释具体:

• HTML: ⽹⻚的结构(⻣)
• CSS: ⽹⻚的表现(⽪)
• JavaScript: ⽹⻚的⾏为(魂)

具体的代码格式如下:

<body><script>alert("Hello JavaScript!")</script>
</body>

 此时进行输出就是如下所示:

可以看到此时的我们就可以进行点击交互了;

3.2JavaScript的基础语法

创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式;

var :早期JS中声明变量的关键字, 作⽤域在该语句的函数内 var name = 'zhangsan';
let :ES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块内let name = 'zhangsan';
const: 声明常量的,声明后不能修改 const name = 'zhangsan';
注意:
JavaScript 是⼀⻔动态弱类型语⾔,变量可以存放不同类型的值(动态),,这里var等可以是任何的类型,包括数组也是一样的,所以这就比Java简单很多;
代码如下:
var name = 'zhangsan';
var age = 20;

可以看到这里的var可以是字符串,也可以是整型;

所以直接计入函数的学习,关于JavaScript的函数方法的写法具体是如下所示的:

function hello() {console.log("hello");
}
// 如果不调⽤函数, 则没有执⾏打印语句
hello();

这是第一种的写法,就是function加上方法的名字,然后具体的操作,调用就是直接方法名字即可

var add = function() {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add);

这就是第二种写法,将add变量作为sum的返回的值,然后再进行调用操作;

对象的创建和调用:

具体的代码如下所示:

var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};
// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调⽤⽅法, 别忘记加上 () 
student.sayHello();

这就是主要的对象的创建的方式,还用一种就是通过new来创建对象,但是小编不推荐这种写法,那么通过new对象来进行操作的方式如下:

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

3.3使用JQuery操作JavaScript

1.引入对应的库
参考地址: https://releases.jquery.com/

点击进入之后,点击任何版本的都是没有问题的,但是在进入每个小版本的时候,建议使用minified这个;

然后进行复制:

补充:

uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)
minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)
slim: 精简瘦⾝版, 没有Ajax和⼀些特效
slim minified : slim 的压缩版 

那么最后,就可以粘贴到我们代码中了,代码如下:

<body>
<script src="jquery.js"></script></body>

 但是为啥小编这里是这么短??因为小编将这个保存到本地了,然后直接放在项目的文件夹里了,如下所示:

这样的好处就是:放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险

那么操作的方式如下:

先点击复制https的网址入口,然后进入这个页面:

 可以看到此时就是内部的源码,然后再次右击鼠标进行另存为到我们写的代码的目录下:

可以发现此时,我们在代码中就是这个jQuery的文件了,那么我们就可以使用这个jQuery来操作JavaScript了;

2.jQuery的基础语法知识

jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作

$(selector).action()

注意:

$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
• Selector 选择器, ⽤来"查询"和"查找" HTML 元素
• action 操作, 执⾏对元素的操作

那么具体的实例操作就是如下:

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>$(document).ready(function(){$('button').click(function(){$(this).hide();});});</script>

这就是一个点击交互,然后按键消失的操作;

解释:等文件加载完毕后点击了这个按钮就会触发一个方法,这个方发就会导致消失的操作;

这里的事件就是点击操作的事件,但是还有其他的事件如下:

⽂档就绪事件(完成加载) $(document).ready(function)
点击事件 $(selector).click(function)
双击事件 $(selector).dblclick(function)

元素的值发⽣改变 $(selector).change(function)
⿏标悬停事件 $(selector).mouseover(function)

当然还有这个如何获取这个元素的内容

text() 设置或返回所选元素的⽂本内容
html() 设置或返回所选元素的内容(包括 HTML 标签)
val() 设置或返回表单字段的值

代码如下所示:

<body>
<script src="jquery.js" ></script>
<input type="button" value="点击消失按钮"><div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script>$(document).ready(function () {var html = $("#test").html();console.log("html内容为:"+html);var text = $("#test").text();console.log("⽂本内容为:"+text);var inputVal = $("input").val();console.log(inputVal);});
</script>
</body>

那么此时的输出就是如下所示的:

此时可以看到,当我们进入浏览器的控制台的时候,可以发现html内容包含了标签,而文本内容就只有文本,不包含其他的标签;

当然这里还有其他的操作,例如添加,删除,以及CSS属性的操作;小编就不再过多的演示了;这里还有一个猜数字的前端小游戏,小编将代码放在下面的gitee里了;

4.总结

小编本期主要讲解了关于前端三剑客的基础认知:HTML+CSS+JavaScript的基础知识;但是讲解的不是很仔细需要扩展的小伙伴可以额外去学习学习哦;

猜数字小游戏代码在test6:前端基础知识: 前端知识了解

🌅🌅🌅~~~~最后希望与诸君共勉,共同进步!!!


💪💪💪以上就是本期内容了, 感兴趣的话,就关注小编吧。

                 😊😊  期待你的关注~~~

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

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

相关文章

ComfyUI-image2video模型部署教程

一、介绍 本项目基于ComfyUI进行部署&#xff0c;在上面可以简单实现图片到视频的效果。也就是可以通过给定一张图片&#xff0c;实现的功能是图片动起来。 二、部署 要求显存&#xff1a;VAE解码需要13G以上 1. 部署ComfyUI 本篇的模型部署是在ComfyUI的基础上进行&#x…

html5表单属性的用法

文章目录 HTML5表单详解与代码案例一、表单的基本结构二、表单元素及其属性三、表单的高级应用与验证四、表单布局与样式 HTML5表单详解与代码案例 HTML5表单是网页中用于收集用户输入并提交到服务器的重要元素&#xff0c;广泛应用于登录页面、客户留言、搜索产品等场景。本文…

Ajax获取PHP端csv转的json数据并js前端排序与分页

<?php setlocale(LC_ALL, C); //window:删除行首双斜杠if($_GET["act"]"list"){ $csvFile book.csv; // 文件路径&#xff1a;制表符分隔文件 $data []; if (($handle fopen($csvFile, r)) ! false) {$header fgetcsv($handle,0,"\t"); …

SpringBoot(二十二)SpringBoot集成smart-doc自动生成文档

计划在项目中集成swagger日志框架,经过一顿折腾,发现一个小小的问题。我得springboot框架版本是2.6.13,swagger要匹配这个版本的springboot可能比较麻烦。 这可如何是好…… 经跟社区的大神得讨论,他在用的文档生成工具是smart-doc。我尝试一下集成这个工具。 官网:https:…

基于树莓派的边缘端 AI 目标检测、目标跟踪、姿态估计 视频分析推理 加速方案:Hailo with ultralytics YOLOv8 YOLOv11

文件大纲 加速原理硬件安装软件安装基本设置系统升级docker 方案Demo 测试目标检测姿态估计视频分析参考文献前序树莓派文章hailo加速原理 Hailo 发布的 Raspberry Pi AI kit 加速原理,有几篇文章介绍的不错 https://ubuntu.com/blog/hackers-guide-to-the-raspberry-pi-ai-ki…

PETR/PETRv2/StreamPETR论文阅读

1. PETR PETR网络结构如下&#xff0c;主要包括image-backbone&#xff0c;3D Coordinates Generator&#xff0c;3D Position Encoder&#xff0c;transformer Decoder四个模块。 把N 个视角的图像输入到骨干网络中以提取 2D 多视图特征。在 3D 坐标生成器中&#xff0c;首先…

EHOME视频平台EasyCVR多品牌摄像机视频平台监控视频编码H.265与Smart 265的区别?

在视频监控领域&#xff0c;技术的不断进步推动着行业向更高效、更智能的方向发展。特别是在编码技术方面&#xff0c;Smart 265作为一种新型的视频编码技术&#xff0c;相较于传统的H.265&#xff0c;有明显优势。这种技术的优势在EasyCVR视频监控汇聚管理平台中得到了充分的体…

Linux下编译安装Nginx

以下是在Linux下编译安装Nginx的详细步骤&#xff1a; 一、安装依赖库 安装基本编译工具和库 在Debian/Ubuntu系统中&#xff0c;使用以下命令安装&#xff1a;sudo apt -y update sudo apt -y install build - essential libpcre3 - dev zlib1g - dev libssl - dev在CentOS/…

《基于深度学习的车辆行驶三维环境双目感知方法研究》

复原论文思路&#xff1a; 《基于深度学习的车辆行驶三维环境双目感知方法研究》 1、双目测距的原理 按照上述公式算的话&#xff0c;求d的话&#xff0c;只和xl-xr有关系&#xff0c;这样一来&#xff0c;是不是只要两张图像上一个测试点的像素位置确定&#xff0c;对应的深…

新手小白学习docker第八弹------实现MySQL主从复制搭建

目录 0 引言1 实操1.1 新建主服务器容器1.2 书写配置文件1.3 重启master实例1.4 进入mysql-master容器master容器实例内创建数据同步用户 1.5 新建从服务器容器1.6 书写配置文件1.7 重启slave实例1.8 查看主从同步状态1.9 进入mysql-slave容器1.9.1 配置主从复制1.9.2 查看主从…

微信小程序之路由跳转传数据及接收

跳转并传id或者对象 1.home/index.wxml <!--点击goto方法 将spu_id传过去--> <view class"item" bind:tap"goto" data-id"{{item.spu_id}}"> 结果: 2.home/index.js goto(event){// 路由跳转页面,并把id传传过去//获取商品idlet i…

emulator总结

什么是硬件仿真器 做IC设计的人应该都知道软件仿真和FPGA原型验证&#xff0c;可以把硬件仿真器理解为这二者之间的产物&#xff0c;它同时具备二者的优点。 软件仿真&#xff08;simulator&#xff09;全面&#xff0c;支持UVM、assert、coverage收集、可以很方便的dump 波形…

前海华海金融创新中心的工地餐点探寻

​前海的工地餐大部分都是13元一份的哈。我在前海华海金融创新中心的工地餐点吃过一份猪杂饭&#xff0c;现做13元一份。我一般打包后回公司吃或直接桂湾公园找个环境优美的地方吃饭。 ​我点的这份猪杂汤粉主要是瘦肉、猪肝、肉饼片、豆芽和生菜&#xff0c;老板依旧贴心问需要…

reduce-scatter:适合分布式计算;Reduce、LayerNorm和Broadcast算子的执行顺序对计算结果的影响,以及它们对资源消耗的影响

目录 Gather Scatter Reduce reduce-scatter:适合分布式计算 Reduce、LayerNorm和Broadcast算子的执行顺序对计算结果的影响,以及它们对资源消耗的影响 计算结果理论正确性 资源消耗方面 Gather 这个也很好理解,就是把多个进程的数据拼凑在一起。 Scatter 不同于Br…

移门缓冲支架:减少噪音,提升生活质量

移门缓冲支架不仅是一个简单的五金配件&#xff0c;更是提升家居生活质量的有效工具。通过减少门关闭时的噪音&#xff0c;移门缓冲支架能够创造一个安静、舒适的生活环境。以下是移门缓冲支架在减少噪音、提升生活质量方面的详细解析&#xff1a; 1. 显著降低关门噪音问题&…

Unity音频导入设置

参考&#xff1a;unity官方文档 导入设置 Force To Mono&#xff1a;强制单声道。启用后音频片段将降混为单声道声音。可以节省该资源所占据的空间。 Normalize&#xff1a;峰值归一化。降混过程通常会导致信号比原始信号更安静。峰值归一化的信号为音频源的音量属性提供了后…

时间序列分析——移动平均法、指数平滑法、逐步回归法、趋势外推法等(基于Python实现)

第 11章——时间序列分析和预测 【例11-1】 绘制时间序列折线图—观察成分 【代码框11-1】——绘制时间序列折线图 # 图11-2的绘制代码 import pandas as pd import matplotlib.pyplot as plt plt.rcParams[font.sans-serif]=[SimHei

NVMe(Non-Volatile Memory Express)非易失性存储器访问和传输协议

目录 NVMe(Non-Volatile Memory Express)非易失性存储器访问和传输协议 一、NVMe的定义 二、NVMe的特点 三、NVMe的应用场景 四、举例说明 NVMe(Non-Volatile Memory Express)非易失性存储器访问和传输协议 是一种非易失性存储器访问和传输协议,专为固态硬盘(SSD)…

SpringBoot有几种获取Request对象的方法

HttpServletRequest 简称 Request&#xff0c;它是一个 Servlet API 提供的对象&#xff0c;用于获取客户端发起的 HTTP 请求信息。例如&#xff1a;获取请求参数、获取请求头、获取 Session 会话信息、获取请求的 IP 地址等信息。 那么问题来了&#xff0c;在 Spring Boot 中…

模型运行速度笔记: s/epoch VS s/iter

1 概念介绍 在模型训练中&#xff1a; s/epoch 表示每个epoch所需的秒数&#xff0c;即完成一轮完整数据集训练的时间。s/iter 表示每个iteration&#xff08;迭代&#xff09;所需的秒数&#xff0c;即处理一个batch的时间。 它们的关系是&#xff1a; 2 举例 比如我tra…