可降解磁阻传感器研究中的扫描电镜表征应用
2026/6/26 6:14:55
前三篇把方向、环境、平台概念都讲完了。
今天开始，我们正式进入实操敲代码阶段。
本文介绍前端三剑客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：用于展示功能列表、点位列表、导航菜单等
示例：
<!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选择器是地图容器专属常用选择器。
2) id选择器
作用：选择某一个元素，该元素通过id属性指定
语法
#id名 { 属性: 值; }示例：
<div id="container"></div>第二步：声明块——修改元素样式属性
选中元素后，通过样式属性修改外观，GIS开发最常用的基础属性：宽度、高度、背景色、边距等。
<!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中常用于存放经纬度、缩放级别、文本信息等参数。
// 数值变量：存储地图缩放等级 var i = 1 // 字符串变量：存储提示文本、备注信息 var str = '欢迎大家来新中地教育学习GIS开发' // 打印变量，查看数据 console.log(str)变量的声明
var i = 1 var str = '欢迎大家来新中地教育学习GIS开发'变量的使用
声明一个名为arr的变量，并将其赋值为一个包含数字 1、2、3 的数组。
console.log(str)2. 数组：存一组数据
数组是一组数据的集合，可批量存储多个数据。在GIS开发中使用频率极高，主要用来存储一组坐标、多个标记点位、路径轨迹点位等。
// 定义数组，存储一组数值 var arr = [1,2,3]3. 函数：封装代码片段
函数是可重复使用的代码片段，用于封装固定功能，避免代码冗余，让代码结构更清晰。GIS中常用于封装添加标记、删除点位、计算距离、清空地图等通用操作。
基础语法包含：函数声明、函数调用、参数、返回值
// 无参无返回值函数 function fun() { console.log('hello') } // 调用函数，执行功能 fun() // 带参数、带返回值函数（GIS计算常用） function add(x, y) { return x + y }函数的声明
// 无参无返回值函数 function fun() { console.log('hello') }函数的调用
// 调用函数，执行功能 fun()函数的组成
参数
返回值
// 带参数、带返回值函数（GIS计算常用） function add(x, y) { return x + y }4. 对象：属性和方法的集合
对象是属性（数据）+ 方法（功能）的集合，是GIS开发最核心的数据结构。高德、百度、天地图等GIS API的地图实例、标记实例、配置参数，全部以对象形式存在。
// 字面量方式创建对象 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地图页面！