webgis开发学习路线

Jul 10, 2025Learning

web 基础入门

HTML5

HTML 本质

HTML 的本质是用标签结构化内容、实现超文本链接的标记语言，它为网页提供骨架，而 CSS 和 JavaScript 分别负责美化和交互，三者共同构建出现代 Web 的基础。

HTML 组成

HTML 的组成可概括为：标签结构（包括语义化标签）、属性、文档结构（head/body）、表单、多媒体、元数据，以及与 CSS/JavaScript 的集成能力。这些组件共同构建了网页的内容骨架和交互基础。

  1. 文档结构

HTML 文档以 <!DOCTYPE html> 声明开头，后跟 <html> 根标签，分为 head（元数据）和 body（可见内容）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <!-- 外部资源引入 -->
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <!-- 外部资源引入 -->
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>
  1. 标签（Tags）与元素（Elements）
  • 标签是 HTML 的基本语法单元，用尖括号表示（如 <p>）。
  • 元素由开始标签、内容和结束标签组成（如 <p>文本</p>）。
  • 空元素无需结束标签（如 <img src="..." alt="...">）。
<h1>标题</h1>
<p>段落</p>
<a href="https://example.com">链接</a>
<img src="image.jpg" alt="图片">
<ul>
  <li>列表项</li>
</ul>
<form>
  <input type="text">
  <button>提交</button>
</form>

<h1>标题</h1>
<p>段落</p>
<a href="https://example.com">链接</a>
<img src="image.jpg" alt="图片">
<ul>
  <li>列表项</li>
</ul>
<form>
  <input type="text">
  <button>提交</button>
</form>
  1. 属性（Attributes）

为标签提供额外信息，格式为 name="value"：

<a href="https://example.com" target="_blank">外部链接</a>
<img src="image.jpg" alt="风景" width="300">
<div class="container" id="main">内容</div>

<a href="https://example.com" target="_blank">外部链接</a>
<img src="image.jpg" alt="风景" width="300">
<div class="container" id="main">内容</div>
  1. 语义化标签（Semantic HTML）

HTML5 引入了表达内容含义的标签，提升可访问性和 SEO(Search Engine Optimization - 搜索引擎优化)：

<header>页面头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>独立文章</article>
<section>章节</section>
<aside>侧边栏</aside>
<footer>页脚</footer>

<header>页面头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>独立文章</article>
<section>章节</section>
<aside>侧边栏</aside>
<footer>页脚</footer>

参考文章:html5语义化标签

  1. 表单（Forms）

用于用户输入，包含 input、select、textarea 等控件：

<form action="/submit" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" required>
  
  <label for="gender">性别：</label>
  <select id="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
  
  <button type="submit">提交</button>
</form>

<form action="/submit" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" required>
  
  <label for="gender">性别：</label>
  <select id="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
  
  <button type="submit">提交</button>
</form>
  1. 多媒体元素

嵌入音频、视频或其他资源：

<img src="image.jpg" alt="图片">
<video controls width="300">
  <source src="video.mp4" type="video/mp4">
</video>
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<img src="image.jpg" alt="图片">
<video controls width="300">
  <source src="video.mp4" type="video/mp4">
</video>
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
  1. 表格（Tables）
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </tbody>
</table>
  1. 元数据（Metadata）

在 <head> 中定义，描述文档属性：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="网页描述">
<title>网页标题</title>
<link rel="icon" href="favicon.ico">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="网页描述">
<title>网页标题</title>
<link rel="icon" href="favicon.ico">

参考文章: HTML基础知识巩固复习之meta（元数据）

CSS3

选择器

参考文章：

  1. CSS 选择器
  2. nth-child 和: nth-of-type 的差异

文本属性

  1. color 设置文本颜色
  2. direction 设置文本方向
  3. letter-spacing 设置字符间距
  4. line-height 设置行高
  5. text-align 对齐元素中的文本
  6. text-decoration 向文本添加修饰
  7. text-indent 缩进元素中文本的首行
  8. text-shadow 设置文本阴影
  9. text-transform 控制元素中的字母
  10. unicode-bidi 设置或返回文本是否被重写
  11. vertical-align 设置元素的垂直对齐
  12. white-space 设置元素中空白的处理方式
  13. word-spacing 设置字间距

背景

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position