WEB:讲清楚Html、DOM，模板与表单引擎

myzbx 2024-12-17 15:13 13 浏览

HTML是WEB页面的骨架。无论是CSS还是Javascript，都是在描述或操作HTML数据，严格来说是操作浏览器中基于HTML构建的DOM。在WEB前端开发领域。模板引擎则是尽量将页面呈现与业务逻辑解耦，帮助开发者基于清晰的数据界面生成html页面。表单引擎则是专注于帮助提高制作用户输入页面的效率。

概述

HTML、DOM、模板和表单引擎的协作关系如下图所示。浏览器加载HTML后就生成了一个可以为Javascript操作的DOM。目前一些模板引擎也直接运行在浏览器Javascript下，可加载其数据源，直接修改DOM；而表单引擎通常都带着Javascrip在用户录入数据时或提交表单数据后，对数据进行检查校验。

HTML

HTML（超文本标记语言，HyperText Markup Language）是一种用于创建和结构化网页内容的标准标记语言。它定义了网页的结构和布局，通过使用标记（标签）来描述不同类型的内容，如文本、图像、链接、表格等。

Bash

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>晶莹果甜</title>
	  <style> /*这里是描述html的css代码*/
       h1 {
            color: #333;
        }
        p {
            color: #666;
            font-size: 16px;
        }
        a {
            color: #007BFF;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>欢迎来到晶莹果甜</h1>
    <p>有爱相伴，才是成长。晶莹果甜，有AI相伴。</p>
    <a href="https://www.aigrow.space">访问晶莹果甜<</a>
</body>
<script>
      var heading = document.querySelector('h1');
      // 修改 h1 的文本内容
      heading.textContent = '你好，晶莹果甜，我来了！';
</script>
</html>

DOM

DOM（文档对象模型，Document Object Model）是一种用于表示和操作网页文档的标准接口。它将 HTML 或 XML 文档中的元素表示为对象，使得编程语言（如 JavaScript）能够动态访问和修改这些元素的内容、结构和样式。

上节中的html在被浏览器加载后，会生成一个数形对象。如下所示：

Document
└── html
├─── head
│ └── title
└─── body
├──── h1
└──── p

Javascript正是通过这个树形对象来修改dom，达到改变页面内容的效果的。

模板引擎

模板引擎是一种用于将数据与模板结合生成最终输出（通常是HTML）的工具。它允许开发者将业务逻辑与表现层分离，使得代码更易于维护和重用。模板引擎通常提供占位符、控制结构（如条件语句和循环）以及其他功能，以便根据提供的数据动态生成内容。

不同的模板引擎语法各不一样，比较强大的模板引擎，一般支持变量、条件、循环、转换、函数、引用等多种功能。以jinja2举例如下：

如果有一个模板文件 template.html

Bash

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>欢迎</title>
</head>
<body>
    <h1>欢迎, {{ user.username }}!</h1>
</body>
</html>

那么可以用jinja2结合数据输出html，输出的html里面，{{ user.username }}将被替换为真实数据的值。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    user = {'username': 'Alice'}
    return render_template('template.html', user=user)

if __name__ == '__main__':
    app.run()

除了上面所说的变量之外，其他的语法也示例下：

// 条件
{% if user.is_authenticated %}
    <p>Welcome back, {{ user.username }}!</p>
{% else %}
    <p>Please log in.</p>
{% endif %}

//循环
<ul>
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}

//转换
<p>{{ name|capitalize }}</p>
 
 // 函数 定义与使用
 {% macro render_item(item) %}
    <li>{{ item }}</li>
{% endmacro %}

<ul>
    {{ render_item("Apple") }}
    {{ render_item("Banana") }}
    {{ render_item("Cherry") }}
</ul>

// 引用
// base_template.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>
                            
 // app_template.html
{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
    <p>Welcome to my website!</p>
{% endblock %}

表单引擎

表单引擎是一种用于创建、管理和处理用户输入表单的工具或库。它们通常提供一系列功能，帮助开发者快速构建复杂的表单界面，进行数据验证、数据处理和提交。表单引擎可以用于Web应用、移动应用和桌面应用程序中。

这类工具和库比较多，但是功能差异也比较大。大体而言，相对强大的表单引擎都支持如下特性：

1. 表单构建
提供可视化界面或 API，允许开发者快速创建表单。
支持多种输入类型，如文本框、下拉菜单、复选框、单选按钮、日期选择器等。
2. 数据验证
提供内置的验证规则，确保用户输入的数据符合要求（如必填、格式正确、长度限制等）。
支持自定义验证规则和异步验证。
3. 动态表单
支持根据用户输入动态显示或隐藏其他字段，或根据条件加载不同的表单部分。
4. 表单状态管理
自动管理表单的状态，包括输入值、验证状态、提交状态等。
提供表单重置和清空功能。
5. 数据提交
处理表单数据的提交，包括将数据发送到服务器进行处理，并处理服务器返回的响应。
支持 AJAX 提交，避免页面刷新。
6. 错误处理
提供错误提示和反馈机制，帮助用户理解输入错误并进行修正。
7. 样式和主题
支持自定义样式和主题，以便于与应用程序的整体设计保持一致。
8. 国际化支持
提供多语言支持，允许开发者根据用户的语言设置显示不同的表单内容。
9. 数据预填充和回显
支持从服务器获取数据并预填充表单，使得用户在编辑时更加方便。
提供提交后的数据回显功能，确认用户输入。
10. 自定义组件
允许开发者创建自定义输入组件，以满足特定需求。
11. 集成支持
能够与其他库或框架（如状态管理库、路由库等）集成，增强功能。
12. 可访问性支持
确保表单符合可访问性标准，使得所有用户（包括残障人士）都能顺利使用。

总结

模板引擎用来解构后台与前端开发，使用数据将页面表现与业务逻辑分离，便于大家分工协作。表单引擎有助于快速开发数据录入页面，并形成标准化的风格，使用成熟的框架后，后天工程师可以通过json配置出表单，或者使用设计器直观获得表单页面。

参考资料

HTML5 https://www.w3.org/TR/2011/WD-html5-20110405/
HTML4 https://www.w3.org/TR/html401/
DOM 1 https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/
DOM 2 https://www.w3.org/TR/DOM-Level-2-HTML/
模板引擎 https://docs.jinkan.org/docs/jinja2/
表单引擎 https://formik.org/ https://xrender.fun/form-render

HTML Web 服务器

上一篇：[西门子PLC] 西门子S7-1200 自定义WEB网页功能的实例程序
下一篇：PHP 内置 Web 服务器 php内置web服务器

WEB:讲清楚Html、DOM，模板与表单引擎

概述

HTML

DOM

模板引擎

表单引擎

总结

参考资料

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」

WEB:讲清楚Html、DOM，模板与表单引擎

概述

HTML

DOM

模板引擎

表单引擎

总结

参考资料

微信扫一扫：分享

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」