Web前端开发技术------HTML5、CSS3、JavaStript概念的深刻理解

最新推荐文章于 2023-05-16 21:32:14 发布
最新推荐文章于 2023-05-16 21:32:14 发布
阅读量590 收藏 2
点赞数 1
分类专栏： Web 文章标签： 前端 css html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XU_MENGQI/article/details/122173992
版权
本文详细介绍了网页开发的三大核心技术：HTML、CSS和JavaScript。HTML负责网页的结构，CSS用于美化页面样式，而JavaScript则为网页添加动态功能。通过CSS选择器和优先级规则控制样式，JavaScript采用事件驱动方式响应用户操作。了解这三者的基本概念和应用，对于前端开发至关重要。
摘要由CSDN通过智能技术生成

1 HTML

HTML是超文本标记语言（不需要编译）。它是一种标记语言，而不是编程语言。THML是Web网页的结构。HTML使用标记来描述网页。

网页的内容包括标题、副标题、段落、无序列表、定义列表、表格、表单等。

HTML代码框架

<html>
  <head>

  </head>
  <body>

  </body>
</html>

2 CSS

CSS语言是一种标记语言，起美化页面的作用，不需要编译。

CSS通过定义标记或者标记属性的外在表现，对页面 结构风格进行控制，分离文档的内容和表现，克服了传统THML的缺点。将SCC嵌入在页面中，通过浏览器解释执行，而且CSS文件是文本文件，只要理解了HTML就可以掌握它。

CSS语言使得页面内容和表现分离。

CSS选择器：标记选择器、类选择器、id选择器、伪类选择器、属性选择器。

优先级：行内样式>id样式>class样式>标记样式。

.c1{....}   //类选择器（class="c1"）
#c2{....}   //id选择器（id="c2"）

编辑CSS有两种方式：

(1)写在HTML文件里面，位置分为两种形式：一种写在某个元素的属性部分，作为style属性的值；另一种是写在head标记里面，通过style标记包含。

<标记 style=“属性1:值;属性2:值;...”>
修饰的内容
</标记>

<style type="text/css">
选择器1{属性1:值;属性2:值;...}
......
</style>

(2)将CSS规则写在单独的文件里。

<link type="text/css" rel="stylesheet" herf="URL">  //链接外部样式表


<style type="text/css">
  @import url("外部样式表文件1名称");
  @import url("外部样式表文件2名称");
  选择器1{属性1:值;属性2:值;...}
  ......
</style>

3JavaStript

JavaStript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。常用来给HTML网页添加动态的功能（提高用户体验）。

JavaStript的响应采用事件驱动的方式进行，当页面中执行了莫种操作时会产生特定事件。

JavaStript运行在客户端，JavaStript程序运行只依赖于浏览器，与操作系统和及其硬件无关。JavaStript程序不能独立运行，必须依赖HTML文件。

基本语法：

<script type="text/JavaStript" [src="外部js文件"]>
js语句块;
</script>

<script language="JavaStript" [src="外部js文件"]>
...
</script>

温柔徐u.
关注
专栏目录
HTML5和CSS3和JavaScript的初步总结
qq_45769170的博客
12-08 1302
文章目录HTML5CSSJavaScript总说 HTML5 技术性的解释来说：HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 通俗的来讲： 对于一个页面来说，HTM...
[分享]9款非常实用的CSS3和Javascr…
tianleiyang的专栏
12-26 295
DemoStudio网站汇集了许多非常新颖且实用的CSS3和JavaScript效果演示示例，这让我联想起Chrome体验版的效果演示，本文是Firefox版。开发者们的想法总是层出不穷，你跟上技术潮流了吗？一起来体验下这9款不同凡响的3D版本吧，或许能为你的开发带来些许灵感。 友情提醒：所有的这些均是体验版本，在IE旧版本浏览器中无法正常显示，你可以根据自己的喜好选择Chrome，Firefo
入门精通web前端：三大核心HTML5、CSS3 、JS必学
weixin_43793782的博客
07-07 2555
WEB前端三大基础核心内容【HTML5、CSS3 和 JavaScript】 对于前端的学习和提高，我的基本思路是这样的。首先，前端的三个最基本的东西 HTML5、CSS3 和 JavaScript（ES6）是必须要学好的。这其中有很多很多的技术，比如，CSS3 引申出来的 Canvas（位图）、SVG（矢量图） 和 WebGL（3D 图），以及 CSS 的各种图形变换可以让你做出非常丰富的...
HTML5+CSS3
jack_970124的博客
05-08 212
CSS3的权重1.什么是权重    CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式2.权重的等级划分!important，加在样式属性值后，权重值为 10000内联样式，如：style=””，权重值为1000ID选择器，如：#content，权重值为100类，伪类和属性选择器，如： content、:hover ...
html java 设置 style,html - CSS3 to style Java? - Stack Overflow
weixin_29184075的博客
06-23 138
There is no CSS styling with Swing. If you use JavaFx2 however, which is the successor of Swing, you do have CSS styling available to you.If you are not already very familiar with Swing, I suggest you...
SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...
赤兔胭脂小吕布的博客
01-19 3981
前端页面的搭建 首先我们在resources包下新建一个文件夹static，SpringBoot默认会去把static包下的文件做一个路由 然后在static包下新建一个HTML File类型的文件，文件名为index.html(这是默认的) 在index.html文件中 <!DOCTYPE html> <html lang="en"> //完整的html分为head...
web开发 javastript 实用特效代码
11-17
本资源"web开发 javastript 实用特效代码"是一份全面的手册，专为动态网页开发设计，包含了丰富的JavaScript特效代码示例。 JavaScript特效在现代网页设计中扮演着至关重要的角色，它们不仅提高了用户体验，还为...
前端学习笔记之--原型和原型链的理解。
qq_41176706的博客
10-26 204
原型和原型链类似于Java和C#的继承； 首先在慕课网上学习到的5个关于JavaStript原型的规则。 1.所有引用类型（数组，函数，对象）除了null之外，都有对象的特征，都可以自由扩展属性； 2.所有的引用类型，都有__proto__（隐式原型）属性，属性值是一个普通的对象。 3.所有的函数，都有一个prototype（显式原型）属性，属性值是也是一个普通的对象。 4.所有的引用类...
vue2 vue3 js es6 html css 知识点
weixin_71783532的博客
08-03 1024
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...
WEB开发技术实验指导
06-25
这是重庆大学计算机学院的 WEB开发技术实验指导 适合于入门级得同学学习之用，每个实验都将的很详细，有截图和源代码，涉及到了web开发的各种技术，HTML，CSS布局，JavaStript，Ajax，xml，数据库，存储过程，...
Java CSS与CSS3
weixin_30587927的博客
05-14 75
CSS与CSS3 转载于:https://www.cnblogs.com/leading-index/p/6853053.html
到底HTML5和CSS3之间有什么关系
qq_43444478的博客
09-15 1344
　　很多零基础学习HTML5的人在学习之初都会接触HTML和CSS，HTML和HTML5之间的关系显而易见，但CSS和HTML5又有怎样的关系呢?今天千锋郑州老师就来给大家揭秘一下二者的关系。 　　HTML是网页语言，即HTML(HypertextMarkupLanguage)，是用于描述网页文档的一种标记语言。而HTML5是当前最新版本，在文档类型声明、结构语义以及功能方面，HTML5比HTML具有更明显的优势。HTML5的新特性有：用于绘画的canvas元素、用于媒介回放的video和au..
【JavaStript】
qq_41233305的博客
05-16 976
【JavaScript】
浅谈HTML、 CSS、 JavaScript三者的关系
icontent
08-18 211
转自：https://www.pinlue.com/article/2021/01/1005/1111479033712.html
必学的web前端三大核心:JavaScript css3 HTML5
cpythonsz的博客
07-30 919
对于前端的学习和提高，我的基本思路是这样的。首先，前端的三个最基本的东西 HTML5、CSS3 和 JavaScript（ES6）是必须要学好的。这其中有很多很多的技术，比如，CSS3 引申出来的 Canvas（位图）、SVG（矢量图） 和 WebGL（3D 图），以及 CSS 的各种图形变换可以让你做出非常丰富的渲染效果和动画效果。ES6 简直就是把 JavaScript 带到了一个新的台阶，JavaScript 语言的强大，大大释放了前端开发人员的生产力，让前端得以开发更为复杂的代码和程序，于是像 Re
html css js需要一起学吗,web前端入门：css+html5+javascript同时学可以吗？
weixin_39867559的博客
06-19 490
原标题：web前端入门：css+html5+javascript同时学可以吗？HTML+CSS+JS是前端基础核心知识，肯定是都要学的。在web前端中，HTML是结构标准，CSS是样式标准，JS是行为标准，三者缺一不可。说的直白点，HTML就是骨架，CSS就是皮肤，JS就是灵魂。 虽说三者的重要性很难分出高下，但在不同的领域里三者有不同的侧重，比如侧重结构布局时，HTML独占优势，侧重样式表现时C...
JavaStript_异步
m0_37602317的博客
05-06 130
同步、异步 同步 同步调用函数的时候会马上执行，同时等待返回结果，即进入阻塞状态，得到返回结果后再进行下一步执行 异步 异步会将操作和结果在时间上分隔开，在执行完操作后，并不会等待返回结果，继续执行同步代码，等到执行结果返回后，再来进行返回结果的处理，也就是说异步执行是非阻塞的 let timeOut = setTimeout(() => { console.log('一秒后打印') clearTimeout(timeOut) }, 1000) console.log('马上打印') //
JavaStript基础
weixin_44720468的博客
05-24 278
** JavaScript基础 ** ## JS与HTML，CSS的区别 HTML：提供网页的结构，提供网页中的内容 CSS：为网页提供样式，用来美化网页 JS：用来控制网页的内容，给网页增加动态的效果 变量 变量可以看做是一个包裹，包裹里面可以盛放你所需要的数据。 使用变量可以方便的获取或者修改内存中的数据 var 声明变量 例如 var age； 然后给你的变量赋值 var age=18； 变量的命名规则是由字母，数字，下划线，$符号组成，不能以数字开头，不能以关键字和保留字命名，例如：fo
javaStript基础
m0_73642750的博客
09-12 356
把javaScriot代码写在....标签中。
javastript
最新发布
12-20
JavaScript是一种广泛应用于Web开发的编程语言。它是一种动态类型的语言，可以处理各种数据类型，包括数字、字符串、布尔值、对象等。下面是一些关于JavaScript的介绍和示例： 1. 获取变量的类型： ```javascript var age = 18; console.log(typeof age); // 输出：number ``` 2. 数据类型转换： - 转换为字符串类型： ```javascript var num = 5; console.log(num.toString()); // 输出："5" ``` - 转换为数值类型： ```javascript console.log(Number("10")); // 输出：10 console.log(Number("abc")); // 输出：NaN ``` - 转换为布尔类型： ```javascript console.log(Boolean(0)); // 输出：false console.log(Boolean('')); // 输出：false console.log(Boolean(null)); // 输出：false console.log(Boolean(undefined)); // 输出：false console.log(Boolean(NaN)); // 输出：false console.log(Boolean(其他值)); // 输出：true ``` 3. 后置++操作符： ```javascript var num1 = 5; num1++; var num2 = 6; console.log(num1 + num2++); // 输出：12 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值