为什么需要改为HTML5？
- 语义化：HTML5标签（如
<header>,<nav>,<main>,<article>,<section>,<footer>）清晰地描述了页面的结构和内容含义，这有助于搜索引擎更好地理解你的网页,从而提升SEO效果。 - 可访问性：语义化标签对屏幕阅读器等辅助技术更友好,能让残障人士更好地访问你的网站。
- SEO优化：搜索引擎（如百度、Google）更偏爱结构清晰、语义明确的HTML5页面,这有助于提高网站在搜索结果中的排名。
- 维护性：代码结构更清晰，开发者更容易阅读、理解和维护。
- 移动端友好：HTML5引入了许多针对移动设备的API和特性,使网站在移动设备上表现更佳。
核心织梦标签与HTML5标签的对应关系
这是修改的核心，你需要找到织梦模板文件（.htm）中的织梦特定标签,并将其包裹在正确的HTML5标签中。
（图片来源网络，侵删）
| 织梦常见场景/模块 | 传统织梦标签 | HTML5 语义化标签 | 说明 |
|---|---|---|---|
| 页面头部 | <head> |
<head> |
<head>标签本身没有变，但里面的内容可以优化，如添加<meta charset="UTF-8">。 |
| 页面最外层容器 | <div class="wrap"> |
<div class="wrap"> |
最外层容器通常还是<div>，因为它不代表一个具体的区块。 |
| 网站页眉 | <div id="header"> |
<header id="header"> |
定义页眉，通常包含Logo、主导航等。 |
| 主导航菜单 | <div id="nav"> |
<nav id="nav"> |
定义导航链接区块。 |
| 网站标志 | <div id="logo"> |
<div id="logo"> 或 <h1 id="logo"> |
<h1>是更优选择，因为Logo通常是网站最重要的标题。 |
| 区 | <div id="main"> |
<main id="main"> |
最重要的标签之一，定义页面的主要内容，一个页面只应有一个<main>。 |
| 文章列表 | {dede:arclist} |
<section class="article-list"> |
用<section>包裹文章列表，表示一个独立的内容区块。 |
| 单篇文章 | <div class="article-item"> |
<article> |
最重要的标签之一，定义一篇独立的、完整的内容（如文章、帖子、评论）。 |
<h3><a href="[field:arcurl/]">[field:title/]</a></h3> |
<h2><a href="[field:arcurl/]">[field:title/]</a></h2> |
<article>通常用<h2>级别的使用。 |
|
| 文章摘要 | [field:description/] |
<p class="summary">[field:description/]</p> |
用<p>标签包裹摘要文本。 |
| 文章详情页 | {dede:field.body/} |
<article> |
整个文章详情页的内容应该被包裹在<article>标签中。 |
| (详情页) | <h1>[field:title/]</h1> |
<h1>[field:title/]</h1> |
文章详情页的标题是页面最重要的，应使用<h1>。 |
[field:body/] |
<div class="article-content">[field:body/]</div> |
文章正文内容，可以用<div>或更具体的标签包裹。 |
|
| 侧边栏 | <div id="sidebar"> |
<aside id="sidebar"> |
定义侧边栏，通常是与主要内容相关但独立的内容（如广告、相关文章、作者信息）。 |
| 页脚 | <div id="footer"> |
<footer id="footer"> |
定义页脚，通常包含版权信息、备案号、友情链接等。 |
| 分页 | {dede:pagelist/} |
<div class="pagination"> 或 <nav class="pagination"> |
分页也是导航的一种，可以用<nav>。 |
| 版权信息 | © 2025 My Site |
<p>© 2025 My Site</p> |
版权信息是文本，用<p>
|
具体修改步骤（以列表页 index.htm 为例）
假设你的默认模板文件是 /templets/default/index.htm。
步骤 1：备份原始模板
在进行任何修改之前，务必备份你的原始模板文件！这是防止操作失误导致网站崩溃的黄金法则。
步骤 2：分析并修改 index.htm 文件
用代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开 index.htm。
修改文档类型和字符集 在文件最顶部，确保有正确的HTML5声明和UTF-8编码。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:global.cfg_webname/}</title>
<!-- 其他 head 内容 -->
</head>
用 <header> 包裹页眉
找到包含Logo和主导航的<div id="header">，将其改为<header>。
<!-- 修改前 -->
<div id="header">
<div id="logo">...</div>
<div id="nav">...</div>
</div>
<!-- 修改后 -->
<header id="header">
<div id="logo">...</div>
<nav id="nav">...</nav> <!-- 同时将导航div改为nav -->
</header>
用 <main> 和 <section> 包裹主内容区
找到包含 {dede:arclist} 的主内容区域。
<!-- 修改前 -->
<div id="main">
<div class="left"> <!-- 左侧文章列表 -->
{dede:arclist}
<div class="article-item">
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
<p>[field:description/]</p>
</div>
{/dede:arclist}
</div>
<div class="right"> <!-- 右侧侧边栏 -->
{dede:include filename="side.htm"/}
</div>
</div>
<!-- 修改后 -->
<main id="main">
<section class="left"> <!-- 用 section 包裹文章列表 -->
{dede:arclist}
<article> <!-- 用 article 包裹每一篇文章 -->
<h2><a href="[field:arcurl/]">[field:title/]</a></h2>
<p class="summary">[field:description/]</p>
</article>
{/dede:arclist}
</section>
<aside class="right"> <!-- 用 aside 包裹侧边栏 -->
{dede:include filename="side.htm"/}
</aside>
</main>
用 <footer> 包裹页脚
找到包含版权信息的<div id="footer">，将其改为<footer>。
<!-- 修改前 -->
<div id="footer">
<p>版权所有 © {dede:global.cfg_webname/}</p>
</div>
<!-- 修改后 -->
<footer id="footer">
<p>版权所有 © {dede:global.cfg_webname/}</p>
</footer>
步骤 3：修改其他页面模板
重复以上步骤,修改其他关键模板文件：
（图片来源网络，侵删）
- 文章列表页:
list_article.htm - 页:
article_article.htm(或你自定义的文件名)- 在
article_article.htm中，确保文章标题是<h1>，整个文章内容被<article>包裹。
- 在
- 搜索页:
search.htm - 首页:
index.htm(已修改) 页 (article_article.htm) 示例：**
<!-- 修改前 -->
<div id="article-content">
<h1>[field:title/]</h1>
<div class="info">...</div>
<div class="body">
[field:body/]
</div>
</div>
<!-- 修改后 -->
<article id="article-content">
<h1>[field:title/]</h1>
<div class="info">...</div> <!-- 可以进一步语义化，如 <div class="article-meta"> -->
<div class="article-body">
[field:body/]
</div>
</article>
注意事项与进阶优化
- 织梦标签不变：我们只是包裹织梦的标签（如
{dede:arclist}），而不是修改或删除它们，织梦的PHP引擎在后台解析这些标签,生成最终HTML。 - CSS样式：在将
<div id="header">改为<header id="header">后，原有的CSS选择器（#header）依然有效，所以样式不会丢失，但如果要利用HTML5的新特性,可能需要微调CSS。 - 标题层级 (
<h1>,<h2>,<h3>)：- 首页/列表页：文章列表的标题可以用
<h2>。 - 文章详情页：文章本身的标题必须是唯一的
<h1>。 - 侧边栏/评论：侧边栏模块或评论区的标题可以用
<h3>或<h4>。 - 层级逻辑清晰,不要跳级使用。
- 首页/列表页：文章列表的标题可以用
- 内容清理：织梦生成的文章内容（
[field:body/]）中可能包含过时的HTML标签（如<font>,<center>,<table>用于布局），在修改模板的同时，最好能通过织梦后台的“批量维护”功能或编写SQL语句，清理这些非标准标签,使内容本身也符合HTML5标准。 - 测试：修改完成后，务必在浏览器中打开网站，检查页面是否显示正常，功能是否完好，可以使用W3C Markup Validation Service等工具来验证你的HTML5代码是否规范。
通过以上步骤，你就可以将一个传统的织梦网站系统性地升级到现代的HTML5标准,使其更符合未来Web开发的趋势。
