首页 / 知识

2020网页前端开发如何入门

2023-04-11 13:54:00

　　当你看到某个网页炫酷无比或者它让你耳目一新的时候，你是否想过，自己也有可能制作出一套相同的网页？

　　你没有看错，是自己制作，而不是套用那些要么千篇一律要么漫天要价的网站模板。

　　如果你说：千篇一律的模板我能接受。那我没什么说的，你也没必要往下看了。

　　这篇头条，带你们了解一下网站的构成及制作。

　　首先，要知道一件很重要的事：

　　你所看到的所有网站框架，本质上都是一行行代码解析出来的。

　　而这代码所使用的编程语言就是hmtl（超文本标记语言）。

　　听起来有些耳熟？

　　可能你常常会听到别人说html5，或h5, 但实际上，它不同于html，你可以认为html5是html4后面的一个版本，但它不仅仅是html，还包含很多新加入的API，如文件API，websockt等。所以，通常被认为html5是网页开发所用到的html，javascript，css等的总和。

　　所以今天的重点实际是html5，不过我们先讲html。

　　俗话说，没吃过猪肉，总见过猪跑。那你知道如何查看某个网页的html代码吗？

　　以Google Chrome浏览器为例：

　　1. 打开任意网页

　　2. 鼠标停留在网页空白处，单机右键，选择查看网页源代码

　　3. 随后弹出的网页显示的密密麻麻的代码就是网页代码啦

　　4. 你说代码太乱看不懂？那重新点击右键，选择检查，就能看到一一对应的代码啦

　　那我们知道如何查看代码有什么用吗？

　　当然！这就是以后自我创作时灵感的来源！当你看到一个很有趣或很新颖的设计时，你知道如何查看代码，就知道如何进行借鉴了（不是拷贝，是借鉴，在原有基础上进行一定程度的修改或补充）。

　　总而言之，html关系到整个网站的框架、布局、内容，可以说是网站的骨骼和血肉。

　　接下来，来聊一下css。

　　百度百科：CSS（层叠样式表）是一种用来表现HTML等文件样式的计算机语言。

　　简单来说，我们使用CSS文件对html文件进行加工，比如让标题变成红色；让某一部分内容随着时间推移逐渐变透明；让某个网站链接在被点击后变紫色（很常见对不对）。当然，这些修饰功能其实都可以在html文件中编写，但这样就会让整个文件冗长复杂。

　　这就涉及到编程的一个常见思想：模块化。将一个大的项目分化为小的部分，分部实现，有利于思路顺畅，也有利于后期的修改与维护。

　　将所有修饰类代码全部放在CSS中，用相关语法与html绑定，就实现了对网页的加工。

　　由于CSS语法比较系统且固定，所以只要通过学习就可以获悉，这里就不展示如何获取某网站的CSS代码了。

　　总之，Css是对html的加工优化，相当于网站的皮肤毛发。

　　最后，JavaScript。

　　JavaScript跟Java有什么关系？

　　它们两个是完全不同的编程语言。唯一的相同点可能就是名字里都含有Java吧……

　　据传闻当时JavaScript刚面世时，Java如日中天。JavaScript为了蹭热度而取此名字。

　　JavaScript是一种应用于浏览器的脚本语言。

　　脚本语言，简单来说就是实现一些高级功能的语言。

　　比如你可以用JavaScript帮助html实现一个动画，实现与用户之间的互动等等。

　　它让网站变得不再死气沉沉，给用户带来更多的使用体验。

　　没有JavaScript，一个网站依然是一个网站，但是缺少灵魂。