HTML、CSS和JavaScript的概述
一、学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等,目前最新版本为HTML5。
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
二、HTML、CSS、Javascript之间的关系
最准确的网页设计思路是把网页分成三个层次,如:结构层(HTML)、表示层(CSS)、行为层(Javascript)。
如果用一辆汽车比喻三者间的关系是:HTML是车的结构,CSS是车身的装饰和颜色,Javascript是发动机和方向盘控制。
如果用房子来比喻的话,HTML是建筑师,CSS就是搞装修,Javascript是魔术师(例如声控灯泡),
如果用一个人来比喻的话,HTML是肉身、CSS就是皮肤、Javascript就是灵魂。没有Javascript的话,只有HTML+CSS是植物人,没有Javascript和CSS,只有HTML是个毁容的植物人。
三、HTML5的新功能与特性
本地存储持久化
网页多媒体,支持网页端的Audio、Video等多媒体功能,可以很好的替代FLASH
基于SVG、Canvas、WebGL及CSS3的3D功能实现,所呈现的惊人视觉效果。演示效果
性能与集成达到更好的优化。
支持多设备、跨平台、移动优先等等。
即时更新,提高可用性和改进用户的友好体验。
可实现轻量级的游戏开发。打字游戏
当涉及到网站的抓取和索引的时候,对于SEO很友好。
支持自适应网页,自动识别屏幕宽度,并做出相应调整网页布局和设计。
语义化标记。
... ...
演示效果1演示效果1
演示效果2
演示效果3
演示效果4
演示效果5
其它 演示效果
四、javascript的框架 -- jQuery
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库,极大地简化了 JavaScript 编程与复杂度。
jQuery可以在工作提高效率,减少代码量,从而事倍功半。
jQuery完全不用担心兼容的问题,大部分浏览器都能实现常用的功能。
学完JavaScript基础再学 jQuery可以变得很容易,节省时间。
注意jQuery在移动端使用会出现延迟状态,选择 Zepto.js 来代替jQuery
五、前端利器 BootStrap
Bootstrap 是基于 HTML、CSS、JavaScript 的框架,它简洁灵活,使得 Web 开发更加快捷,节省大量时间,提高开发效率,是目前最受欢迎的前端框架。
Bootstrap提供了优雅的HTML和CSS规范,只要有HTML和CSS的基础就可以学习。
不支持IE8以下的浏览器。
功能组件非常丰富,请访问 中文官网
六、选择编辑器
目前编辑器非常多,五花八门,在这里介绍比较常用的编辑器,按个人喜好去选择就行。如果只是为了学习而尽快提高水平,我建议用记事本当作编辑来写代码,这样进步会更快。开发编辑器推荐
七、浏览器的比较
在开发过程经常遇到头疼的就是兼容问题,特别是IE浏览器,支持的功能比较少,不得不说这是许多前端工程师最痛恨的浏览器之一。在全球使用最多的浏览器是谷歌浏览器,它功能丰富,支持HTML5的新功能,也支持Debug调试功能。
若要达到任何浏览器都要统一,就不要拿特殊的标签或语义来使用了。
学习前端开发,建议选择谷歌或360浏览器。
许多浏览器一直在更新,变化不断,废弃了很多不常用的标签和属性。
自从HTML5出现以后,在移动端就不要再使用Flash,因为使用Flash比较耗电,苹果公司对Flash已经封杀。
国外排行榜
国内排行榜
谁支持HTML5
八、学习前端开发的建议
要学会看手册,了解不同浏览器的支持与兼容问题。
养成写博客或笔记的习惯,积累技术知识和经验。
多动手,多调试,多看手册,在技术社区多交流。
要敢于尝试新知识。
不要重复造轮子或闭门造车。
常运动健身,预防猝死。
作者:唐朝洋葱
链接:https://www.jianshu.com/p/4915b0c1aba1
共同学习,写下你的评论
评论加载中...
作者其他优质文章