Web前端开发与应用教程(HTML5+CSS3+JavaScript)
上QQ阅读APP看书,第一时间看更新

1.2 Web前端开发相关技术

互联网建立50多年了,网站开发技术日新月异,各领域的划分也越来越明确和细致,传统的掌握Dreamweaver就能做网页的认识已经不能适应当前和未来的趋势,作为一名前端人员,就应该掌握更多、更有针对性的技术和知识。Web前端离不开浏览器,主流开发一般采用的是HTML+CSS+JavaScript这3个核心,围绕这3个核心可以开发出来大量技术框架和解决方案。

1.2.1 HTML

HTML是超文本标签语言(HyperText Markup Language,HTML),是网页的骨骼,是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种置标语言。HTML被用来结构化信息——例如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。由蒂姆·伯纳斯-李给出原始定义,由IETF用简化的SGML(标准通用置标语言)语法进行进一步发展的HTML,后来成为国际标准,由万维网联盟(W3C)维护。

HTML最新版本是HTML5,它是HTML当前的一个主要修订版本,现在仍处于发展阶段。目标是取代1999年所定订的HTML4.01和XHTML1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

HTML在Web飞速发展的过程中起到了非常重要的作用,HTML的发展历程见表1-1。

1-1 HTML版本信息

978-7-111-57090-5-Chapter01-2.jpg

其中值得一提的是从HTML4开始页面的结构和表现分离为两种语言:一种用于实现结构的HTML;一种用于表现的CSS。

1.2.2 CSS

CSS(Cascading Style Sheets,层叠样式表)是一种用来表现HTML或XML(标准通用标签语言的一个子集)等文件样式的计算机语言。

如果仅用HTML5技术制作页面,那么大多数网页在视觉上都没有什么吸引力,这是因为HTML是用在定义内容上,而不是放在用CSS(层叠样式表)定义样式上。不过,通过对CSS的学习,你将学会如何为文本和背景添加样式,实现多栏布局,建立起适应各种设备(从手机到台式计算机甚至屏幕更大的设备)的布局等。CSS样式表不过是一种文本文件,其中包含一个或多个(通过属性和值)决定网页某特定元素如何显示的规则。CSS里有控制基本格式的属性(如font-size和color),有控制布局的属性(如position和float),还有决定访问者打印时在哪里换页的打印控制元素。CSS还有很多控制项目显示或消失的动态属性,可以用于创建下拉列表和其他交互性组件。CSS3是目前最新的版本,它提供了大量设计人员和开发人员长期期待的功能。这些功能包括圆角、阴影效果、文字阴影、自定义字体、旋转文本、半透明背景颜色、多图像背景、渐变以及其他很多功能。而且目前主流最新版本的浏览器已经实现了很多CSS3的组件(且即将实现更多),因此从现在起就可以很好地使用它们了。

CSS值得重视的一点在于,开发人员可以在HTML页面之外创建CSS文件,再将它应用于网站上所有的页面。这在构建网页之初及随后对其进行修改时都极大地简化了样式设置工作。一段时间后,如果需要重新设计网站,而内容和结构保持不变,就可以在HTML不发生变动的情况下,为网页提供一套全新的外观。

1.2.3 JavaScript

JavaScript是世界上最流行的脚本语言之一,因为你在PC、手机、平板电脑上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱动的。简单地说,JavaScript是一种运行在浏览器中的解释型的编程语言,它能够跨平台、跨浏览器驱动网页,与用户交互。

HTML定义网页的内容,CSS定义网页的表现,JavaScript则定义特殊的行为。建立网站不可能脱离HTML(如果要让网站看起来很吸引人,则离不开CSS),但JavaScript并不是必需的。在大多数情况下,JavaScript的特性都是用于增强访问者体验的——它们在由HTML和CSS构建的核心体验的基础上进行增强。

通过编写简单的JavaScript程序,可以显示和隐藏内容;通过编写复杂一些的程序,可以加载数据并动态地更新页面。可以操作定制的HTML5 audio和video元素控件,使用HTML5的canvas元素创建游戏。可以利用地理定位,根据访问者所在的位置定制其体验。因此将HTML、CSS和JavaScript三种技术结合起来进行Web开发,可以编写出界面既美观功能又强大的网站。