织梦作为国内经典的CMS系统,其默认模板基于较旧的 XHTML 和 DedeTag 标签，要让它现代化，拥抱HTML5，主要需要做以下几件事：

织梦模板 html5 分享
（图片来源网络，侵删）
  1. 声明HTML5文档类型
  2. 使用语义化的HTML5标签
  3. 织梦标签的HTML5化改造
  4. 引入CSS和JS的正确方式
  5. 响应式设计

下面我将分步为你详细解析。

声明HTML5文档类型

这是最基本的一步,在模板的 <head> 部分开头，将织梦默认的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 替换为：

<!DOCTYPE html>

这个简洁的声明告诉浏览器,这是一个HTML5文档。

使用语义化的HTML5标签

HTML5引入了许多新的语义化标签,让页面结构更清晰，对搜索引擎更友好，也便于开发者维护。

织梦模板 html5 分享
（图片来源网络，侵删）

常用的新标签：

  • <header>：页面或区域的头部，通常包含logo、导航等。
  • <nav>：导航链接区域。
  • <main>：页面的主要内容，一个页面中只有一个 <main>。
  • <article>：独立的文章内容，如博客文章、新闻。
  • <section>：文档中的一个区域，通常包含一个主题。
  • <aside>：侧边栏或与主要内容相关但独立的内容。
  • <footer>：页面或区域的底部，通常包含版权信息、备案号等。

织梦模板改造示例 (以首页 index.htm 为例):

默认织梦模板结构 (简化版):

<div class="header">
    <div class="logo">...</div>
    <div class="nav">...</div>
</div>
<div class="main">
    <div class="left">
        {dede:arclist titlelen='30' row='10'}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
    </div>
    <div class="right">
        <div class="hot">...</div>
        <div class="links">...</div>
    </div>
</div>
<div class="footer">...</div>

改造后的HTML5结构:

织梦模板 html5 分享
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/}</title>
    ...其他meta标签和CSS/JS链接...
</head>
<body>
    <header class="site-header">
        <div class="logo">...</div>
        <nav class="main-nav">
            {dede:channel type='top' row='8'}
            <li><a href="[field:typelink/]">[field:typename/]</a></li>
            {/dede:channel}
        </nav>
    </header>
    <main class="main-content">
        <section class="article-list">
            {dede:arclist titlelen='30' row='10'}
            <article>
                <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
                <p class="summary">[field:description function='cn_substr(@me,100)'/]...</p>
                <div class="meta">
                    <span class="author">作者：[field:writer/]</span>
                    <span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
                </div>
            </article>
            {/dede:arclist}
        </section>
        <aside class="sidebar">
            <section class="hot-articles">
                <h3>热门文章</h3>
                ...
            </section>
            <section class="friend-links">
                <h3>友情链接</h3>
                ...
            </section>
        </aside>
    </main>
    <footer class="site-footer">
        <p>版权所有 &copy; {dede:global.cfg_webname/}</p>
        <p>{dede:global.cfg_beian/}</p>
    </footer>
</body>
</html>

织梦标签的HTML5化改造

织梦的模板引擎使用 {dede:xxx} 标签，这些标签本身是服务端处理的，输出的是纯HTML。HTML5化改造的重点在于如何组织这些标签的输出，使其符合HTML5规范。

  1. 移除不必要的属性：

    • 织梦默认生成的链接 <a> 可能会带有 target="_blank"，如果不是必须的（如外部链接），可以移除。
    • 图片 <img> 标签，织梦默认会生成 border="0"，在HTML5中已不再需要，直接通过CSS控制即可。

  2. 使用 field 函数优化输出：

    • 日期格式化：使用 function="MyDate('Y-m-d',@me)" 来格式化日期，而不是直接输出时间戳。
    • 截取文本：使用 function="cn_substr(@me,100)" 来安全地截取摘要，防止出现乱码或标签截断。
    • 去除HTML标签：在列表页显示摘要时，使用 function='html2text(@me)' 去除内容中的HTML标签，只保留纯文本。

  3. 列表页 (list.htm) 的HTML5化： 列表页的改造和首页类似，但核心是分页标签 {dede:pagelist/} 的美化。

    <!-- 在 list.htm 的 main 区域 -->
<main class="main-content">
    <section class="article-list">
        {dede:list pagesize='10'}
        <article>
            <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
            <p>[field:infos/]</p>
            <div class="meta">
                <span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
            </div>
        </article>
        {/dede:list}
        <!-- 分页区域 -->
        <nav class="pagination">
            {dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5"/}
        </nav>
    </section>
</main>

    然后你需要编写CSS来美化 .pagination 的输出，让它看起来更现代。

引入CSS和JS的正确方式

HTML5对 <script> 和 <link> 标签的引入方式有所简化。

  1. CSS样式表：

    • 位置：推荐放在 <head> 标签内，这样页面加载时可以优先渲染样式，避免页面闪烁。
    • 属性：type="text/css" 在HTML5中是可选的，可以省略。
    <!-- head 内 -->
<link rel="stylesheet" href="/templets/yourtemplate/css/style.css">

  2. JavaScript脚本：

    • 位置：推荐放在 </body> 标签之前，这样可以防止脚本加载阻塞页面渲染，提升页面加载速度。
    • 属性：type="text/javascript" 在HTML5中也是可选的，可以省略。
    <!-- body 结束标签之前 -->
<script src="/templets/yourtemplate/js/jquery.min.js"></script>
<script src="/templets/yourtemplate/js/main.js"></script>
</body>

响应式设计 (Responsive Design)

HTML5模板通常与响应式设计相伴,织梦本身不提供响应式功能，需要通过CSS框架（如Bootstrap）或自定义CSS媒体查询来实现。

使用媒体查询的简单示例：

在 style.css 中添加以下代码：

/* 默认PC端样式 */
.main-content {
    width: 1000px;
    margin: 0 auto;
    display: flex;
}
.article-list {
    flex: 3;
}
.sidebar {
    flex: 1;
    margin-left: 20px;
}
/* 平板端样式，当屏幕宽度小于768px时生效 */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }
    .sidebar {
        margin-left: 0;
        margin-top: 20px;
    }
}
/* 手机端样式，当屏幕宽度小于480px时生效 */
@media (max-width: 480px) {
    .site-header nav {
        /* 可以隐藏主导航，显示汉堡菜单 */
        display: none;
    }
    .mobile-menu {
        display: block; /* 默认隐藏，这里显示 */
    }
}

完整分享：一个简单的HTML5织梦模板结构

这是一个非常基础的首页模板 index.htm，融合了以上所有知识点，你可以基于此进行扩展。

<!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/} - {dede:global.cfg_description/}</title>
    <meta name="keywords" content="{dede:global.cfg_keywords/}">
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/bootstrap.min.css">
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/style.css">
</head>
<body>
    <!-- 顶部通栏 -->
    <div class="top-bar">
        ...
    </div>
    <!-- 网站头部 -->
    <header class="site-header">
        <div class="container">
            <div class="logo">
                <a href="/">{dede:global.cfg_webname/}</a>
            </div>
            <nav class="main-nav">
                {dede:channel type='top' row='8'}
                <li><a href="[field:typelink/]">[field:typename/]</a></li>
                {/dede:channel}
            </nav>
        </div>
    </header>
    <!-- 主要内容区 -->
    <main class="main-content container">
        <div class="row">
            <!-- 左侧文章列表 -->
            <section class="col-md-8 article-list">
                {dede:arclist titlelen='40' row='10' orderby='pubdate' typeid=''}
                <article class="post-item">
                    <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
                    <div class="post-meta">
                        <span class="author">作者：[field:writer/]</span>
                        <span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
                        <span class="views">阅读：[field:click/]</span>
                    </div>
                    <div class="post-summary">
                        [field:description function='cn_substr(@me,150)'/]...
                    </div>
                </article>
                {/dede:arclist}
                <!-- 分页 -->
                <nav class="text-center">
                    {dede:pagelist listitem="info,index,end,pre,next" listsize="5"/}
                </nav>
            </section>
            <!-- 右侧边栏 -->
            <aside class="col-md-4 sidebar">
                {dede:include filename="side.htm"/}
            </aside>
        </div>
    </main>
    <!-- 网页底部 -->
    <footer class="site-footer">
        <div class="container">
            <p>版权所有 &copy; {dede:global.cfg_webname/} | <a href="#">{dede:global.cfg_beian/}</a></p>
        </div>
    </footer>
    <!-- 引入JS文件 -->
    <script src="{dede:global.cfg_templets_skin/}/js/jquery.min.js"></script>
    <script src="{dede:global.cfg_templets_skin/}/js/bootstrap.min.js"></script>
    <script src="{dede:global.cfg_templets_skin/}/js/main.js"></script>
</body>
</html>

总结与建议

  1. 从基础开始：先从修改 <!DOCTYPE> 和使用语义化标签开始，这是最核心的改造。
  2. 善用织梦函数：function 是你美化织梦标签输出的利器，务必掌握常用函数。
  3. 与样式：模板文件（.htm）只负责HTML结构，样式（.css）和脚本（.js）单独管理，便于维护。
  4. 拥抱现代前端框架：如果项目复杂，可以考虑在织梦模板中引入Bootstrap、Tailwind CSS等现代CSS框架，能极大提升开发效率和页面美观度。
  5. 测试：改造完成后，务必在各大主流浏览器中进行测试，确保兼容性。

通过以上步骤,你就可以将一个传统的织梦模板，改造成一个符合现代标准、结构清晰、易于维护和扩展的HTML5模板。