前三篇把方向、环境、平台概念都讲完了。
今天开始，我们正式进入实操敲代码阶段。
本文介绍前端三剑客 HTML+CSS+JavaScript 核心基础。
一、HTML：页面结构搭建骨架
HTML不是编程语言，是"标记"HTML是标记语言，它的作用就是告诉浏览器："这里是个标题"、"这里是个段落"、"这里是个列表"。
1. 元素：
元素是HTML的最小基本单位，由开始标签、内容、结束标签三部分组成，完整构成一个页面模块。
示例
<p>我的猫咪脾气爆:)</p>-
<p>：开始标签 -
我的猫咪脾气爆:)：内容 -
</p>：结束标签 -
合起来叫一个元素
2. 属性：给元素加额外信息
可以给HTML元素添加属性，为元素补充额外标识、配置信息，方便后续CSS样式修改、JS获取操作元素。属性格式为 属性名=属性值。
示例
<p class="editor-note">我的猫咪脾气爆:)</p>class="editor-note" 就是属性，用于给当前段落标签绑定类名，实现元素的精准定位。
3. WebGIS开发里常用的HTML标签
1）标题元素 heading
GIS开发无需掌握所有HTML标签，只需掌握以下高频核心标签，足以支撑所有地图页面开发：
-
标题标签 h1~h6：用于页面标题、模块标题，h1为一级主标题，权重最高，h6为六级副标题
-
段落标签 p：用于展示文本描述、功能说明文字
-
容器标签 div ：最核心标签，WebGIS中专门用来作为地图渲染容器，所有地图都会挂载在div容器中
-
无序列表 ul+li：用于展示功能列表、点位列表、导航菜单等
示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML中的常见元素</title>
</head>
<body>
<!-- Ctrl+/：注释（给程序员看的，不会显示在浏览器中） -->
<!-- 1. 标题元素h1~h6 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- 2. div元素（容器元素） -->
<!-- 属性：key=value -->
<div id="container"></div>
<!-- 3. 列表元素 -->
<!--
ul: unorder list（无序列表）
li: list item（列表项）
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>-
<!DOCTYPE html>：声明文档类型，告诉浏览器使用HTML5标准解析页面 -
<html>：页面根元素，包裹所有页面内容 -
<head>：头部区域，存放页面配置、编码、适配、样式等信息 -
<body>：主体区域，所有浏览器可见的页面内容、地图容器都放在这里
二、CSS：页面样式与布局美化
CSS 全称层叠样式表，核心作用是控制HTML元素的外观和布局，包括大小、颜色、背景、位置、边距等。
在WebGIS中，CSS直接决定地图的显示尺寸、是否全屏、页面是否有白边等关键效果。
CSS的核心逻辑可总结为两步走：选元素、改样式。
第一步：选元素（选择器）
1）什么是选择器：
选择器是CSS的核心，作用是从页面众多HTML元素中，筛选出需要修改样式的目标元素。
想象一群小黄人站你面前，你想把单眼的小黄人选出来变红色。
-
第一步：选出所有的单眼小黄人
-
第二步：修改颜色为红色
CSS也是这个逻辑：先选出目标元素，再改它的样式。
-
第一步：通过选择器，找出符合要求的HTML元素
-
第二步：修改找出来的元素的属性
GIS开发最常用：类选择器、ID选择器 ，其中ID选择器是地图容器专属常用选择器。
- id选择器
作用：选择某一个元素，该元素通过id属性指定
语法
html
#id名 {
属性: 值;
}示例：
<div id="container"></div>第二步：声明块------修改元素样式属性
选中元素后，通过样式属性修改外观，GIS开发最常用的基础属性：宽度、高度、背景色、边距等。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>id选择器</title>
<style>
#container {
/* w300+h300 */
width: 300px;
height: 300px;
/* bgc */
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- emmet: #container -->
</body>
</html>三、JavaScript：让页面动起来
JavaScript是解释型编程语言，不需要编译，浏览器直接运行。
在WebGIS开发中，JS是绝对核心：地图加载、点位标记、路径绘制、距离计算、点击交互、数据渲染等所有动态功能，全部依靠JS实现。
1. 变量：存数据
变量是数据容器，用于存储固定数据，GIS中常用于存放经纬度、缩放级别、文本信息等参数。
html
// 数值变量：存储地图缩放等级
var i = 1
// 字符串变量：存储提示文本、备注信息
var str = '欢迎大家来新中地教育学习GIS开发'
// 打印变量，查看数据
console.log(str)变量的声明
html
var i = 1
var str = '欢迎大家来新中地教育学习GIS开发'变量的使用
声明一个名为arr的变量，并将其赋值为一个包含数字 1、2、3 的数组。
console.log(str)2. 数组：存一组数据
数组是一组数据的集合，可批量存储多个数据。在GIS开发中使用频率极高，主要用来存储一组坐标、多个标记点位、路径轨迹点位等。
html
// 定义数组，存储一组数值
var arr = [1,2,3]3. 函数：封装代码片段
函数是可重复使用的代码片段，用于封装固定功能，避免代码冗余，让代码结构更清晰。GIS中常用于封装添加标记、删除点位、计算距离、清空地图等通用操作。
基础语法包含：函数声明、函数调用、参数、返回值
html
// 无参无返回值函数
function fun() {
console.log('hello')
}
// 调用函数，执行功能
fun()
// 带参数、带返回值函数（GIS计算常用）
function add(x, y) {
return x + y
}函数的声明
html
// 无参无返回值函数
function fun() {
console.log('hello')
}函数的调用
html
// 调用函数，执行功能
fun()函数的组成
-
参数
-
返回值
html
// 带参数、带返回值函数（GIS计算常用）
function add(x, y) {
return x + y
}4. 对象：属性和方法的集合
对象是**属性（数据）+ 方法（功能）**的集合，是GIS开发最核心的数据结构。高德、百度、天地图等GIS API的地图实例、标记实例、配置参数，全部以对象形式存在。
html
// 字面量方式创建对象
var obj = {};
// 通过构造函数定义对象
var p = new Person();日常开发中通过 . 语法访问对象的属性和方法，操作地图参数。
5. 事件：用户操作触发代码
事件的核心逻辑：触发操作 => 执行对应代码。用户的点击、拖拽、缩放、移动等操作都属于事件，触发后执行的函数称为回调函数。
GIS常见事件：地图点击事件、标记拖拽事件、地图缩放结束事件、点位悬浮事件等。
五、这些基础在GIS开发里怎么对应？
学完了可能还是懵："这些跟地图有什么关系？" 对应关系表见下表，先了解一下学后面章节时也就知道这些基础用在哪了：
| 前端基础 | GIS开发里的应用 |
|---|---|
<div id="container"> |
地图容器，高德API接管这个div渲染地图 |
width/height: 100% |
地图全屏显示，没高度就空白 |
margin: 0 |
去除白边，避免滚动条 |
| JS变量 | 存经纬度、缩放级别 |
| JS数组 | 存路径坐标、标记点集合 |
| JS函数 | 封装"添加标记"、"计算距离" |
| JS对象 | 配置地图参数、Marker参数 |
| JS事件 | 点击地图、拖拽标记、缩放结束 |
六、下篇预告
下篇正式进入地图功能。从零搭建完整的WebGIS地图页面！