为了账号安全,请及时绑定邮箱和手机立即绑定

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

    webp

    演示效果1

演示效果2

webp

演示效果2


演示效果3

webp

演示效果3


演示效果4

webp

演示效果4


演示效果5

webp

演示效果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已经封杀。

  • 浏览器评分系统

webp

国外排行榜

webp

国内排行榜

webp

谁支持HTML5

八、学习前端开发的建议

  • 要学会看手册,了解不同浏览器的支持与兼容问题。

  • 养成写博客或笔记的习惯,积累技术知识和经验。

  • 多动手,多调试,多看手册,在技术社区多交流。

  • 要敢于尝试新知识。

  • 不要重复造轮子或闭门造车。

  • 常运动健身,预防猝死。



作者:唐朝洋葱
链接:https://www.jianshu.com/p/4915b0c1aba1


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消