零基础webgis开发入门：HTML/CSS/JavaScript前端核心基础①

前三篇把方向、环境、平台概念都讲完了。

今天开始，我们正式进入实操敲代码阶段。

本文介绍前端三剑客 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>：主体区域，所有浏览器可见的页面内容、地图容器都放在这里

GIS | 零基础入门WebGIS开发，《智慧校园》项目实战_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Ui4y1U7c6/?spm_id_from=333.1387.homepage.video_card.click&vd_source=9629e581233f391f52868addec97b4bb