下载掌阅APP，畅读海量书库
立即打开
Web开发语言主要包括HTML、CSS和JavaScript，它们共同实现一个动态网页。其中，HTML决定网页结构，CSS描述网页的外观，JavaScript实现网页中的交互操作。
HTML的全称是超文本标记语言（HyperText Markup Language），1989年由Tim Berners Lee发明，较新版在2014年10月由国际万维网联盟（W3C）公布发行（HTML 5，简称H5），是当前使用的最新版本的HTML标准。
HTML运行在浏览器中，由浏览器负责解析。它的主要功能是编写网页中的内容，一个HTML文件可以称为一个文档或者一个Web页面。学习HTML需要掌握的内容包括HTML的文档结构、HTML的知识结构以及HTML 5的相关知识等。
HTML作为一门标记语言，与编程语言的区别是，标记语言的书写是由一系列标签组成的。HTML的每一个标签代表网页中的一项内容，一个完整的HTML文档需要包含文档声明、根元素标签、头部元素标签、内容标签，头部元素用来定义文档的基础信息，内容标签包含页面中所有可见的内容。
HTML文档是一个后缀为.html或.htm的文件，代码1-1展示了一个完整HTML 5文档的结构，其中：
（1）<!DOCTYPE html>为文档类型声明，告诉浏览器这个文档是使用HTML 5规范编写的。这个声明通常放在HTML文档的最前面，它的重要性在于可以帮助浏览器以正确的方式渲染页面，并确保开发者在编写代码时遵循相应的规范。
（2）<html>为根元素标签。表示HTML页面从此处开始编写，这也是浏览器解析文档内容的开始。</html>表示文档截止，页面的所有内容都需要写在<html></html>标签内。
（3）<head>为头部元素，是一个包含了所有头部标签的容器。<head>内部的元素可以包含文档的标题（<title>）、指向外部资源（如CSS文件）的链接、脚本、样式、元数据等。在元数据标签中，<meta charset="utf-8">定义网页使用utf-8编码；name="viewport"说明该Web页面可以被用户缩放，并且针对移动端设备进行了优化；content="width=device-width，initial-scale=1.0"指令中，width=device-width标记指示视区宽度应为设备的屏幕宽度，initial-scale=1.0设置了Web页面的初始缩放比例。<meta>标签中还可以设置一些其他的指令，如使用user-scalable指定用户是否可以缩放视区（yes表示允许缩放，no表示不允许缩放），maximum-scale和minimum-scale用于设置对Web页面缩放比例的限制，值的范围为0.25～10.0，与initial-scale相同，这些指令的值均应用于视区内容的缩放比例。另外，在<head>标签中还可以引入一些外部文件，如样式文件、外部脚本等。<title>标签描述了文档的标题，将上述文档在浏览器中打开，显示在浏览器窗口顶部的内容为该文档的标题，如本示例显示为“html文档结构”。
（4）<body>标签包含可见的页面内容，所有页面的元素都在这个标签中编写。如在本示例中，只定义了一个id为app的<div>标签。
代码1-1 HTML文档结构
将代码保存为.html格式的文件，然后使用浏览器打开，效果如图1-1所示。这是本书的第一个HTML页面，可以看到，上述代码所生成的页面仅包含了一行文字：“html文档结构示例”。
图1-1 第一个HTML页面
HTML学习的知识结构包括基础语法、常用元素和标签、表单控件、HTML 5的新增元素、SEO优化和Web安全等。
（1）HTML基础语法：包括HTML文档的基本结构、元素和标签的基本语法、元素和标签的嵌套及属性的使用方法等。
（2）常用HTML元素和标签：HTML有很多常用的元素和标签，如<h1>、<p>、<a>、<img>、<ul>、<ol>等，需要掌握它们的语法和用途。
（3）表单控件：表单是Web页面中常用的交互元素，HTML提供多种表单控件，如文本框、单选框、复选框、下拉框等，需要掌握它们的语法和用途。
（4）HTML 5的新增元素：HTML 5新增了一些元素，如<header>、<footer>、<nav>、<section>、<article>等，需要掌握它们的语法和用途。
（5）SEO优化：在Web开发中，需要了解搜索引擎优化（SEO）的基本知识，例如，如何使用HTML元素和标签来提高网站的搜索排名等。
（6）Web安全：在编写HTML代码时需要注意安全性，如了解如何防范跨文档传递（XSS）和跨站点脚本攻击（CSRF）等常见的安全问题。
这些知识可以帮助开发人员编写出高质量、安全、易用的Web页面，更多更详细的内容可以查阅相关资料。
HTML 5对以前的版本进行了优化和改进，增加了更多语义化标签，例如：
（1）新增article、footer、header、nav、section等新的特殊内容元素。
（2）支持canvas绘图，新增canvas标签。
（3）新增用于媒介回放的video和audio标签，可以不使用第三方插件就访问和加载音/视频。
（4）增加一些新的表单控件，如calendar、date、time、email、url、search等，它们都可以以标签的形式使用。
（5）支持移动端开发、支持本地存储等。可以通过HTML 5来开发移动端小程序，还有对本地离线存储的支持，让前端开发的能力得到了很大提升。
HTML的语义化标签让网页编写更加便捷，语义表达明确，编写的代码清晰易读。HTML 5的很多新特性给开发带来了极大的便利，WebGIS开发中经常需要使用标签实现一些效果，如使用canvas标签绘制一条路径、通过DOM进行点的标注等。后面章节中即将讲解的WebGIS开发框架中，MapboxGL框架是通过WebGL（使用的canvas标签）来渲染矢量数据，Leaflet框架使用的是DOM方法。这些都是HTML标签及HTML 5新特性的一些具体使用，HTML在不断发展，HTML标准也在不断更新，读者需要了解每一种绘图方式的特点和优缺点，掌握HTML标签的使用。在开发中，还应该善于使用一些新特性和功能，以便能更好地提高开发效率，提高开发质量。
代码1-2是使用canvas标签绘制一个简单的矩形。通过JavaScript代码实现绘制的方法在<script>标签内完成，绘制一个长为100、宽为60、边框宽度为2个像素、边框颜色为红色的矩形。代码运行后的效果如图1-2所示。
代码1-2 canvas绘制一个矩形
图1-2 使用canvas标签绘制一个矩形
CSS（Cascading Style Sheets，层叠样式表）用来描述HTML文档的样式，决定HTML在网页中如何显示，包括针对不同设备和屏幕尺寸的设计与布局、HTML标签在文档中的样式等。CSS的主要作用是将样式信息与HTML文档分离，使Web开发人员可以更轻松地对页面进行样式设计和布局调整。使用CSS可以实现以下功能。
（1）定义颜色、字体、大小、边框、背景等基本样式。
（2）控制页面元素的位置、大小、对齐方式等布局属性。
（3）实现响应式设计，使网页可以自适应不同的屏幕大小和设备类型。
（4）实现动画效果和视觉效果，如渐变、阴影、旋转、缩放等。
（5）实现交互效果，如鼠标悬停、单击、选中等。
CSS使用选择器（selector）定位HTML元素，并通过样式规则（style rules）定义这些元素的样式和布局。样式规则由选择器和一组属性-值对（property-value pairs）组成，如下所示：
selector {
property1： value1;
property2： value2;
...
}
现行使用的标准规范为CSS 3，它是由W3C在2001年5月23日完成的工作草案。CSS 3是对CSS技术升级的版本，被拆分成了很多个模块，一些重要的模块如选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面等，每一个模块内部包含多个CSS属性。CSS规范还会不断开发，在Web开发过程中，需要对新升级更新的标准规范不断跟进学习，以便能更好地进行Web开发和编写更加优美的Web页面。
CSS必须引用在HTML文档中，所设置的样式才能够生效。引用CSS常用的方法有四种。
1）外链式
外链式引入是在网页的<head></head>标签中，使用<link>标签来链接一个外部的.css文件。例如，引入link.css文件：
<link rel="stylesheet" href="./link.css">
2）导入式
和外链式差不多，都是在外部创建一个.css文件，只不过导入式是在<style>标签中通过@import url(cssUrl)方式导入，cssUrl是指css文件的路径。例如，导入一个名为index.css的文件，可以使用如下方法：
<style>
@import url('./index.css'); // 导入同级目录下的index.css文件
</style>
导入式和外链式都是引用的外部.css文件，但这两种方式在作用到HTML时却有很大的不同。首先，从加载顺序上，外链式是先加载CSS，再显示HTML；而导入式是先显示HTML，再加载CSS。其次，从网页渲染时HTML的表现来看，外链式能够保证在HTML渲染时就带有完整的样式，而导入式在网络环境不太好的情况下，可以让页面结构先渲染，页面样式等到CSS加载完成后再做绘制。两种方式各有优劣，需要结合实际的业务场景进行选择，不过，一般推荐使用外链式引入，这样能够保证页面在渲染出来时就带有设定的样式。
3）内嵌式
内嵌式是在HTML中创建一个<style>标签，把CSS样式写入标签内。<style>标签可以写在HTML文档的任何位置，但通常是在<head>标签内。如定义一个div标签的样式，可以使用如下方式：
4）行内样式
行内样式是直接把css代码放到HTML标签里面，作为style属性的属性值。如为一个<div>标签设置样式：
上述四种方式引入CSS的区别是，它们的作用优先级不一样。其中，优先级最高的是行内样式，其次是内嵌式，再是导入式，最后是外链式。
通过修改div背景颜色的方法来观察不同方式CSS引入的优先级顺序。分别按照以下步骤创建和引入文件。
第一步，新建一个import.css的文件，用于导入式的样式。写入以下样式代码，将div的背景设置为蓝色。
第二步，新建一个link.css的文件，作为外链式的文件。加入下列代码，将div的背景设置为黄色。
第三步，将这两个文件和方式3（内嵌式CSS）、方式4（行内样式）中的样式同时引入同一个HTML文档中，如代码1-3所示。
代码1-3 CSS样式引用
下面进行对比，首先使用浏览器打开该文档。可以看到，在同时添加这四组样式的情况下，div的背景颜色显示的是红色——生效的是行内样式。将行内样式去掉，只剩下内嵌式、导入式和外链式时，div的背景显示为粉色——内嵌式的颜色。然后再去掉内嵌式，只剩下外链式和导入式，div显示为导入式的蓝色背景。最后去掉导入式文件，div背景才显示为黄色。这说明四种方式引入CSS的优先级顺序由高到低依次为行内样式→内嵌式→导入式→外链式。
学习CSS需要掌握的知识结构包括如下几种。
（1）CSS基础语法：CSS使用选择器和样式规则来定义HTML元素的样式和布局，需要掌握选择器的语法和用法，以及样式规则中属性和值的语法和用法。
（2）盒模型：CSS中用于描述HTML元素尺寸和位置的模型，需要掌握盒模型的组成部分、计算方式和应用方法等。
（3）布局和定位：CSS可以用于控制HTML元素的布局和定位，需要掌握各种布局方式，如流式布局、浮动布局、弹性布局、网格布局等，还有定位方式，如相对定位、绝对定位、固定定位等。
（4）文本样式：CSS可以用于控制HTML文本的样式，如颜色、字体、大小、对齐等，需要掌握各种文本样式属性的用法和效果。
（5）背景和边框：CSS可以用于控制HTML元素的背景和边框，需要掌握各种背景和边框样式属性的用法和效果。
（6）动画和过渡：CSS可以用于实现动画效果和过渡效果，需要掌握各种动画和过渡样式属性的用法和效果。
（7）响应式设计：CSS可以用于实现响应式设计，使网页可以自动适应不同的屏幕大小和设备类型，需要掌握响应式设计的原理和实现方法。
熟练掌握这些内容可以帮助开发人员编写出高质量、灵活、适应性强的Web页面。在实际应用中，为了提高代码的简洁性、易读性，丰富CSS能力，提高网站的渲染性能等，人们对CSS的使用提出了更高的要求，从而产生了一系列高阶方法来使用和管理CSS，例如，使用类方式管理样式、使用CSS预处理器等（如SCSS、Less、Stylus等），以此来提高开发效率，提高CSS的能力。
随着浏览器、前端框架、打包工具等的发展，CSS很多更高级的用法被广泛使用，包括CSS预处理器、CSS模块化、CSS自定义属性、CSS Grid和Flexbox、CSS性能优化等，具体如下。
（1）CSS预处理器：一种扩展CSS语言的工具，如Sass、Less、Stylus等。它们提供了变量、混合（mixin）、嵌套、函数等高级特性，使得CSS代码更加模块化和可维护。使用CSS预处理器，可以设置一个样式不用考虑浏览器的兼容性问题，预处理器会帮助我们解决。预处理器的编程特性让CSS适应性更强，可以在CSS类型中编写嵌套样式，使用变量、简单的程序逻辑、函数等。
（2）CSS模块化：一种将CSS代码拆分成小模块的方法，每个模块只包含相关的样式规则，可以提高代码的可维护性和复用性。CSS模块化有多种实现方式，如BEM、SMACSS、OOCSS等。
（3）CSS自定义属性：一种定义和使用自定义属性的方法，如--my-color：red，可以在CSS中引用这些自定义属性来定义样式。它们可以用于实现主题切换、响应式设计、动态样式等高级应用。
（4）CSS Grid和Flexbox：两种用于布局的强大的CSS属性。CSS Grid可以实现复杂的网格状布局，Flexbox则可以实现弹性盒子布局，两者都可以用于响应式设计。
（5）CSS性能优化：一种优化CSS代码以提高页面性能和渲染速度的方法，包括减少CSS文件大小、使用CSS预处理器、缓存CSS文件、使用GPU加速、使用CSS动画代替JavaScript等技术。
（1）浏览器兼容性：不同浏览器对CSS的实现可能存在差异，需要注意兼容性问题。
（2）性能：CSS样式表文件的大小和数量对网页的性能有很大影响。需要优化CSS，减少不必要的代码，避免使用过多的CSS文件，以提高页面加载速度和性能。
（3）命名规范：CSS样式的命名应该具有一定的规范性，避免使用过于复杂或过于简单的命名，以便于代码的维护和管理。
（4）选择器性能：选择器的复杂度会影响CSS样式的渲染性能，应该尽量避免使用过于复杂的选择器，降低渲染的复杂度。
（5）布局：CSS的布局方式和盒模型会对页面布局产生影响，需要注意不同布局方式的优缺点，选择最合适的布局方式。
（6）代码规范：CSS代码应该具有一定的规范性和可读性，遵循代码缩进、注释、代码组织等规范，以便于代码的维护和管理。
CSS更加详细的内容同样可以参考本书参考文献中的资料进行学习。Web开发需要特别注重CSS知识的学习，正确使用CSS，编写出高质量、高效、易维护的CSS代码，同时也提高Web页面的优美度和高效率响应。
小提示： CSS的兼容性可通过Can I use网站查询，如图1-3所示。
图1-3 Can I use网站查询浏览器兼容性
JavaScript是一种脚本语言，它在网页中的作用是控制HTML元素的行为，如改变HTML元素的样式、触发事件执行用户交互等。JavaScript出现以前，网页只能是一种静态的页面，JavaScript的出现使网页和用户之间实现了一种实时的、动态的、可交互的关系。JavaScript是维护用户和网页之间交互的重要技术，具有非常强大的功能。
JavaScript也是在浏览器中运行，并由浏览器负责解析和编译。同样，它也有自己的语言标准，JavaScript是由ECMA（欧洲电脑制造商协会）通过ECMAScript（ES）来实现标准化的。ECMAScript每年都会有新的提案增加进来，对ES标准进行更新升级（现已更新到ES15）。
实际上，一个完整的JavaScript应该由三部分组成，分别是ECMAScript、DOM和BOM。
（1）ECMAScript是一种语法规定，它规定了语言的语法类型、语句、关键字、保留字、操作符和对象等。
（2）DOM（Document Object Model，文档对象模型）是当网页被加载时，浏览器将HTML编译后形成的一种特殊的页面结构（称为DOM树）。DOM树把整个页面映射为一个多层节点结构，浏览器对一个网页进行渲染时，通过DOM树关联CSS和程序代码完成展示。DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的独立于平台和语言的接口。
（3）BOM（Browser Object Model，浏览器对象模型）定义可以进行操作的浏览器的各功能部件的接口。JavaScript通过访问BOM对象来访问、控制、修改浏览器。它是一种用来描述对象与对象之间层次关系的模型，主要用来处理浏览器窗口的内容。
BOM在不同浏览器的实现方式有所不同，表现也有一定差别，但总体包括以下能力。
（1）Windows对象。通过该对象可以获取文本框的宽高（windows.innerWidth）、浏览器窗口的宽高（windows.outerWidth）、打开（windows.open("/")）或关闭（windows.close( )）新窗口等。这个对象在页面一经加载就由浏览器自行创建，不需要开发者手动创建。也就是说，只要页面加载完成，就可以通过Windows来访问相关的属性。
（2）Navigator对象。该对象提供浏览器相关信息，包括浏览器名称、版本号、操作系统等。它还提供了一些与浏览器功能相关的方法，如获取用户的地理位置等。
（3）Screen对象。提供用户屏幕相关信息，如有关屏幕分辨率、颜色深度和可用窗口大小等信息。
（4）History对象。用于管理浏览器窗口的历史记录。通过这个对象，可以在浏览历史记录中向前或向后导航，以及在不同的页面之间进行跳转。如history.back返回上次访问地址，history.back (2)返回上上次访问的地址，以此类推。
（5）Location对象。表示当前加载文档的URL信息。它允许获取和修改当前页面的URL，包括协议、主机、端口、路径、查询参数等。
（6）XMLHttpRequest对象。用于在后台与服务器进行数据交互。它允许发送HTTP请求并接收响应，以实现异步通信和更新页面内容。
（7）其他对象，如弹出框alert、confirm确认框、prompt输入框、计时器等。
浏览器的这些能力都需要用到JavaScript来获取并使用，JavaScript在Web端开发中的主要作用如下。
（1）读写HTML元素，实现动态操作DOM。
（2）对浏览器事件做出响应，执行数据交互。
（3）在数据提交到服务器之前做数据校验，并能够监测浏览器的信息，如记录和维护cookies等。
（4）作为服务端开发语言，如通过Node.js技术进行服务端编程。
代码1-4的功能是在浏览器中创建和加载地图。运行该代码，可以看到如图1-4所示的效果。
代码1-4 OpenLayers初始化地图
图1-4 实现一个加载地图的功能
本例中，在<head>标签中通过<link>引入OpenLayers样式文件，通过<script>引入OpenLayers静态包，在<style>标签中定义了地图容器的大小。在<body>标签中，定义了一个id为map的<div>作为绘制地图的容器。在<script>标签中，通过JavaScript代码完成地图的加载，即<script>标签所包含的内容。
JavaScript知识库庞大，需要学习的内容较多。
（1）掌握JavaScript基础语法、DOM操作、事件处理、函数和作用域、对象和面向对象编程、异步编程和回调函数、Ajax和数据交互、模块化和库/框架等内容。
（2）JavaScript拥有非常丰富的库和框架，如jQuery、React、Vue.js等，可以加快开发效率和提高代码质量。
（3）JavaScript与HTML、CSS结合使用，实现高效、灵活、交互性强的Web页面。
（4）JavaScript还可以通过Node.js等技术，实现服务器端编程，开发高性能、可扩展的Web应用程序。
（5）JavaScript的高阶知识包括闭包、高阶函数、Promise和异步编程、Generator和异步编程、Proxy和元编程、ES6模块化、Web Worker等。
JavaScript在Web开发中发挥着非常重要的作用，网页的动态效果、用户交互、表单验证、构建前端框架和库、异步编程、服务器端编程、移动应用程序开发等这些功能，都通过JavaScript实现，Web开发需要在这块多下功夫学习。
JavaScript的强大功能使页面从静态变成了动态。但是，随着动态网页、数据交互等需求的大量涌现，开发者实现这些功能必须通过JavaScript操作DOM来完成，这样JavaScript的弊端就逐渐暴露了出来。
（1）DOM问题。频繁操作复杂的文档对象模型，不论从开发者角度还是页面性能，随着需求的增多和复杂，都会出现一些瓶颈性的问题。
（2）浏览器问题。由于JavaScript在各浏览器中的实现方式不一，所以在不同浏览器中的兼容性难以统一。
（3）工具问题。在Web开发之初，缺少便捷的开发和调试工具。
可见，随着动态页面的开发，不仅需要考虑是否能提供完备的功能，还需要考虑页面的美观性，考虑提高用户体验，开发更加流畅的网站。为了解决或者避开以上开发中的痛点，需要提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。于是，开发框架开始出现。与JavaScript直接操作DOM相比，开发框架使用起来更加方便，开发效率也极大地提高了。