3、HTML5基础：文档结构、常用标签与语义化标签
各位同学，今天我们正式进入HTML5的世界。说实话，HTML5不算什么新技术了，但它依然是RMC界面的基石。你想想看，一个远程监控系统，页面结构都搭不好，后面再炫酷的功能也是白搭。
我个人习惯把HTML5比作一栋房子的骨架。div是砖块，span是装饰条，table是货架，form是门窗。而语义化标签，就是给每个房间贴上标签——这是客厅，那是厨房。没有标签也能住人，但有了标签，大家一看就明白。
3.1 文档结构：一个页面的“出生证明”
每个HTML5页面，开头都是一段固定的声明。我见过不少新手直接复制粘贴，结果漏了<!DOCTYPE html>，页面在IE下直接崩了。嗯，这里要注意。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RMC监控面板</title>
</head>
<body>
<!-- 页面内容写在这里 -->
</body>
</html>这里面有几个关键点：
<!DOCTYPE html>：告诉浏览器“我是HTML5”，少了他，浏览器会进入怪异模式。lang="zh-CN"：声明语言，对搜索引擎和屏幕阅读器友好。meta charset="UTF-8"：字符编码，防止中文乱码。我在项目中遇到过，客户反馈监控页面上的设备名称全是乱码，最后发现就是少了这一行。meta viewport：移动端适配的关键，RMC系统现在很多都在平板上用，这个不能省。
核心要点：文档结构是页面的根基。哪怕你只写一个“Hello World”，也请把这段结构写完整。养成习惯，后面省心。
3.2 常用标签：div、span、table、form
这四个标签，基本覆盖了RMC界面80%的布局需求。我们一个一个说。
3.2.1 div 与 span：块级与行内的“容器”
div是块级元素，独占一行。说白了，它就是一个“盒子”，用来装其他内容。在RMC界面里，我用div来划分区域——左侧设备列表、中间监控图表、右侧告警面板。
span是行内元素，不会换行。它适合用来包裹一小段文字或图标。比如设备状态指示灯旁边的文字，用span包一下，方便单独控制颜色。
<div class="device-panel">
<span class="status-dot">●</span>
<span>设备A - 运行中</span>
</div>我曾经犯过一个低级错误：用div包了一个状态文字，结果每个设备都换行显示，整个列表拉得老长。后来改成span，一行搞定。你想想看，监控界面寸土寸金，布局一定要紧凑。
3.2.2 table：别急着抛弃它
很多人说table过时了，我不完全同意。在RMC系统里，表格依然是展示设备参数、历史数据的最佳方式。比如设备列表、告警记录、日志查询，这些天然就是表格结构。
<table>
<thead>
<tr>
<th>设备名称</th>
<th>当前温度</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>PLC-01</td>
<td>45.2°C</td>
<td class="normal">正常</td>
</tr>
<tr>
<td>变频器-02</td>
<td>78.5°C</td>
<td class="warning">告警</td>
</tr>
</tbody>
</table>小技巧：表格的thead和tbody一定要分开写。一方面语义清晰，另一方面后期用JavaScript动态更新数据时，只操作tbody就行，效率高很多。
3.2.3 form：与后端交互的“桥梁”
RMC系统里，表单无处不在——登录、参数设置、阈值配置、固件升级。form标签就是用来收集用户输入，然后提交给后端的。
<form action="/api/set-threshold" method="POST">
<label for="temp-max">温度上限(°C):</label>
<input type="number" id="temp-max" name="tempMax" value="80">
<label for="humidity-max">湿度上限(%):</label>
<input type="number" id="humidity-max" name="humidityMax" value="70">
<button type="submit">保存配置</button>
</form>这里有个坑，我提醒一下：form的action和method一定要写对。我曾经在项目里忘了写method="POST"，结果表单数据直接拼到了URL里，敏感参数全暴露了。嗯，这个错误我只犯过一次。
注意：RMC系统的表单通常涉及设备控制参数，提交前一定要做前端验证。比如温度上限不能超过设备额定值，否则可能引发误操作。别完全依赖后端，前端先拦一道。
3.3 语义化标签：header、nav、section
语义化标签是HTML5最大的亮点之一。说白了，就是让标签自己“说话”。以前我们写<div class="header">，现在直接写<header>。浏览器、搜索引擎、屏幕阅读器都能一眼认出这是页眉。
在RMC界面里，我通常这样组织：
<header>
<h1>远程监控系统 v3.2</h1>
<p>当前用户：张工 | 登录时间：2025-01-15 09:30</p>
</header>
<nav>
<ul>
<li><a href="/dashboard">总览</a></li>
<li><a href="/devices">设备管理</a></li>
<li><a href="/alarms">告警中心</a></li>
<li><a href="/reports">报表分析</a></li>
</ul>
</nav>
<section>
<h2>当前告警列表</h2>
<!-- 告警表格放这里 -->
</section>
<section>
<h2>设备运行状态</h2>
<!-- 状态卡片放这里 -->
</section>为什么推荐用语义化标签？三个理由：
- 可访问性：屏幕阅读器可以直接跳转到
nav或main，视障工程师也能操作RMC系统。 - SEO：搜索引擎更青睐语义化结构，虽然RMC系统不对外公开，但内部知识库搜索时也有帮助。
- 代码可读性：新同事接手项目，看到
<section>就知道这是一个独立的功能区块，不用再猜class命名。
我的建议：从今天开始，写HTML时优先用语义化标签。实在找不到合适的，再用div兜底。比如header、nav、main、section、article、aside、footer，这七个标签基本够用了。
3.4 本章知识体系
下面这张图，是我自己整理的HTML5基础结构。你可以把它当作一个“速查地图”。
3.5 避坑指南
最后，分享几个我踩过的坑：
- 不要滥用div：我曾经一个页面写了30多个div嵌套，后来自己都看不懂。能用语义化标签就用，实在不行再用div。
- form的默认提交行为：点击button type="submit"会刷新页面。在RMC系统里，我们通常用AJAX异步提交，记得用
event.preventDefault()阻止默认行为。 - table的响应式：大屏上table很漂亮，但到了平板或手机上就挤成一团。建议配合CSS的
overflow-x: auto，或者干脆在小屏上改用卡片布局。 - 语义化标签的兼容性：现在主流浏览器都支持HTML5语义化标签了，但如果你要兼容IE11以下的古董浏览器，记得加一段HTML5 Shiv脚本。
好了，这一章的内容就到这里。HTML5基础看似简单，但它是RMC界面开发的起点。把文档结构、常用标签、语义化标签这三块吃透，后面学CSS和JavaScript会轻松很多。