登录  /  注册
首页 > web前端 > js教程 > 正文

畅谈HTML+CSS+JS(详细讲解)

亚连
发布: 2018-05-18 15:43:26
原创
11069人浏览过

下面是我自己总结的一些想法以及一些收获,  由于个人学的浅,如果有说的不对或不准确的地方,还请大家批评指正。

前端开发三剑客HTML+CSS+JS之名是如雷贯耳,是前端入门的基础之基础,前端程序员们用这三个组件构成了数量众多的网页。然而在初学的时候,由于无法迅速了解全部知识点,所以在学习的时候往往会有盲人摸象的感觉——就是对于各个组件的功能和分工不甚了解,无法从整体上把握学习方向,因而较难构成完整的知识体系,这是比较头疼的事情。我这个人学习有个特点,我喜欢从底层知识学起,然后在这个基础上一层层加上其他内容,最后构成一个完整的框架。这是我习惯的学习方式。

      开始的时候,我还是有点头晕的,知识点一个接一个,互相之间也有交叉,前面与后面联系起来,后面又与前面联系起来,搞懂还是要费劲。但还是整个内容过完两三遍之后,整个框架就清晰多了。简单来说,HTML+CSS+JS的分工体现了软件分层的理念。大体的功能分配是:HTML负责描述内容,CSS负责描述元素的样式,JS则负责实现网页的动作。这样说,其实还不够清晰,新手是看不太明白的,我想我们可以从网页的发展历程来理解为什么会有这三种划分。

      早期的网页是静态网页,网页中的元素基本都没有动作,人们上网主要是浏览资讯,对于网页的交互性要求也低。我们可以看一下96年雅虎的网站(图摘自网络),网页上有图片,超链接和搜索框,大多都采用的默认样式,这样的网页样式与内容都混合在一起,如果要修改网页的样式,就需要挨个修改,这样就会比较麻烦。那么怎么解决这个问题呢?网页开发的开拓者们 将样式从内容中抽离出来,将所有描述网页样式的语句合并成一个文件,这个文件叫层叠样式表,简称CSS。如果我们要修改样式的话就从这个文件里修改,通过一些选择器,我们可以快速地更改某一个或某一类元素的样式,从而提高效率。

       将样式从网页中抽离后,HTML语言只负责描述网页内容,这是什么意思呢?在HTML中,我们用

元素标记头部文件,用元素标记网页名称,用元素标记网页主体,用元素标记表格等等,通过向这些元素中填写内容,我们就写出了一个个有特定样式的节点,所有的这些HTML节点就构成了网页内容。这些标记大多是有默认样式的,如果我们对默认样式不满意,我们还可以在CSS文件中修改。

       完成了内容与表示的分离后,我们要解释网页的动作了。静态页面有个问题是,网页的内容在生成后就不会再变化了。而我们在浏览网页的时候,需要进行交互,我们需要登陆微博来评论点赞转发,我们需要在玩网页游戏的时候控制人物的动作,这部分功能都是由JavaScript(JS)承载的。

  JavaScript是一种轻量级的编程语言,它不像C/C++/JAVA等对数据类型作出严格规定,也没有指针,操作符重载等等内容。说起来这名字很有迷惑性,名字里有Java,大家却都说跟Java没有关系,这着实让人头疼。这好比说拍个电影叫《我叫潘金莲》,却说自己跟潘金莲没有关系。(笑)开个玩笑。不过相比起来,JavaScript与Java的语法有很多相似之处,但JavaScript相比Java简单许多。JS不像Java是一个平台型的语言,有各种各样的组件、框架,JS是与web紧密联系起来的。JS通过插入到HTML中执行的,通过JavaScript我们可以实现写入HTML输出,对事件作出反应 ,改变HTML内容、图像、样式,验证输入等功能。基本上网页上所有的交互都是通过JS函数实现的。这个部分也是三剑客中最难的部分,我现在掌握得也是马马虎虎。后面的文章会针对具体的知识点再展开说。

       JS文件和CSS文件最终是要应用到HTML中的。在HTML中,我们可以通过<script>元素来插入JS代码,<script>元素可以放在<head>或<body>中。或者在外部编写JS文件,在HTML中引用。而CSS代码则稍有区别,我们可以通过<style>元素插入CSS代码,<style>元素必须放在<head>元素中。或者在外部编写CSS文件,在HTML中引用。也可以直接在某元素中规定CSS样式,这种叫内联样式。</script>

       通过最后这部分内容,我们可以试着总结这三个部分的关系了。HTML好比是房子的地基,CSS和JS是,这三个部分一起组成个漂亮的房子。我们不能把他们分开说,某某部分是个房子,只有三个一起才能组成一个漂亮的房子。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

p5.js 毕达哥拉斯树的实现代码_javascript技巧

基于js中的存储键值对以及注意事项介绍_javascript技巧

javascript深入理解js闭包

以上就是畅谈HTML+CSS+JS(详细讲解)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号