html5网页制作代码_网页前端开发如何入门 | 怎样玩转html css javascript

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

某网站样式

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

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

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

---

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

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

而这代码所使用的编程语言就是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，一个网站依然是一个网站，但是缺少灵魂。

---

说了这么多，应该如何入门网页开发呢？

首先，我要声明：不同于C++，Java，C等编程语言，html、css、js这种脚本语言是真的熟能生巧，能否用有限的语法构建无限的可能，看的是程序员的水平与创意了。

既然是熟能生巧，就少不了不断学习实践。

Html+Css 学习：(没有单独学习Css的途径，因为它依附于html存在，所以要学只能一起学)

• W3school HTML5 网址： http://www.w3school.com.cn/html5/index.asp
• 8小时学会HTML网页开发 -燕十八 网址：https://study.163.com/course/introduction/432008.htm
• edX网站上的一些HTML课程 https://www.edx.org/course?search_query=html
• 《HTTP: The Definitive Guide》

JavaScript 学习：

• W3school JS 网址：http://www.w3school.com.cn/js/index.asp
• JS -廖雪峰的网站 网址： https://www.liaoxuefeng.com/wiki/1022910821149312
• 《JavaScript 高级程序设计》

这些都是我用过的学习路径，而我也抽时间写了一个个人博客的网页(暂时没有上传，因为不想付网站月租。。。)，效果图如下：

希望大家早日也可以玩转网页前端开发！

我是HKUSTang，喜欢记得点点关注哦~感觉文章有用可以点点转发哦~