.net做网站实例 贴吧线上营销有哪些

1 传统 Web 中 HTML 的角色

HyperText Markup Language：用来描述页面结构——标题、段落、图片、表单……

只负责“放什么元素、排在什么层级”，真正的行为靠 JS，视觉靠 CSS。

<!-- 传统网页：结构 + class 交给 CSS -->
<div class="header"><h1>Hello Web</h1><button id="incBtn">+</button><span id="count">0</span>
</div><script>// 纯 JS 手动取 DOM / 改文本let n = 0;document.getElementById('incBtn').onclick = () => {n++;document.getElementById('count').innerText = n;};
</script>

2 TTML 相对 HTML 的区别

能力	TTML 特有	举例对比
数据插值	{{variable}} 直接把 JS data 渲染进模板	<text>{{count}}</text>
事件声明式绑定	bindtap="add" 只写函数名，不内嵌 JS	<button bindtap="add">+</button>
条件 / 列表指令	wx:if wx:for	<view wx:for="{{list}}">{{item}}</view>
组件标签集	<swiper> <scroll-view> 等对接原生能力	<swiper autoplay="{{true}}">…</swiper>
安全沙箱	模板层不能直接写 <script>	事件必须跳到 *.js 文件
rpx 单位	与屏幕宽度自适应的长度单位	width: 750rpx = 全屏

本质：TTML = HTML 结构 + 小程序框架指令 + 数据/事件绑定语法，让 UI 与 JS data 形成自动同步。

对照示例：计数器

A. HTML 版（手动操作 DOM）

<button id="incBtn">+</button>
<span id="count">0</span>
<script>let n = 0;incBtn.onclick = () => { count.innerText = ++n; };
</script>

B. TTML + TTJS 版（声明式 + 双向）

<!-- counter.ttml -->
<button bindtap="add">+</button>
<text>{{count}}</text>

// counter.js
Page({data: { count: 0 },add() { this.setData({ count: this.data.count + 1 }); }
});

差别

• TTML 无需直接改 DOM，调用 setData ➜ 框架自动把 count 更新到 {{count}} 位置。

• 点击事件只写 bindtap=“add”，函数体放在 JS，模板更纯净。

模式	需求	更新流程
原生 DOM	手写 document.*	直接改 DOM（命令式）
小程序 TTML / React 等	写模板 {{count}} + this.setData({count})	框架比对数据差异自动改视图（声明式）

优点：

逻辑与视图分离，代码量大幅减少；并且这样可以在框架内部做批量更新、虚拟 DOM diff，性能可控，且不易产生 “忘了同步 UI” 的 Bug

代价：
必须走框架限定的 API（如 setData），不能直接任意操作 DOM。