前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • 什么是DHTML?
  • DHTML和HTML有什么区别?有什么不同
  • HTML
  • DHTML
  • 两者区别
  • DHTML技术
  • 相关阅读

这有帮助吗?

  1. Html探索系列

DHTML(动态网页)简介

什么是DHTML?

DHTML 指动态 HTML(Dynamic HTML),是一种使 HTML 页面具有动态特性的艺术,是一种创建动态和交互 WEB 站点的技术集。它 将 HTML、JavaScript、DOM 以及 CSS 组合在一起,用于创造动态性更强的网页。

DHTML 实现了网页从 Web 服务器下载后无需再经过服务端的处理,而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。如:鼠标移到文章段落中时,字体颜色变成蓝色;鼠标指针移到一个超级链接上时,会自动生成一个下拉式子链接目录等。

DHTML 通过 JavaScript 和 HTML DOM,能够动态地改变 HTML 元素:

  • **动态内容:**动态地更新网页内容,可动态地插入、修改或删除网页的元件,如文字、图像、标记等。

  • **动态排版样式:**W3C 的 CSS 样式表提供了设定 HTML 标记的字体大小、字形、粗细、颜色、文本对齐方式、宽、高、行高度、外边距、内边距、边框、背景色\图片、位置以及页面布局方式等排版样式,而”动态排版样式”即可以“动态”地改变排版样式。

简而言之,DHTML 就是一种在从 Web 服务器下载进浏览器以后,仍然能够随时变换更新网页内容、排版样式以及动画等的网页。

确切地说,DHTML 只是一种制作网页的概念,而不是一种网络技术(就像 JavaScript 和 ActiveX),也不是一个标记、一个插件或者是一个浏览器。实际上没有一个组织或机构推出过所谓的 DHTML 标准或技术规范之类的。DHTML 不是一种技术、标准或规范,只是一种将目前已有的网页技术、语言标准整和运用,制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。

DHTML和HTML有什么区别?有什么不同

HTML

HyperText Markup Language,超文本标记语言。

超文本就是指页面中可以包含图片、链接、音乐、视频等非纯文字元素。显然可知,静态文本就是页面只包含文字元素。

HTML 是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分,HTML 的结构包括头部(head)和主体(body)两大部分。头部描述浏览器所需的信息,主体包含所要说明的具体内容。通过标记符号,可以呈现出一个网站整体的架构部分。

DHTML

DHTML 是 Dynamic html 的简称,就是动态的 HTML 的意思,是相对传统的静态的 HTML 而言的一种制作网页的概念。

可以把它简单地理解为:DHTML = html + css + javascript 的集成。

两者区别

  • HTML 是一种标记语言,是一种规范,一种标准;DHTML 不是 W3C 标准,它是是一种用来创建动态站点的技术组合物。

  • 传统的HTML 页面是静态的; DHTML 是在静态的 HTML 页面上加入了 javascript 脚本,使其能根据用户的动作作出一定的响应。如:鼠标移动到图片上,图片改变颜色;移动到导航栏,弹出一个动态菜单,等等效果。

DHTML技术

对大多数人来说,DHTML 意味着 HTML、css和 JavaScript 的组合。Web 开发者通过 DHTML 可控制如何在浏览器窗口中显示和定位 HTML 元素。

DHTML 技术大致包含以下:

  • HTML 4.0

    通过 HTML 4.0,所有的格式化(信息)可移出HTML文档,并写入一个独立的样式表中。因为 HTML 4.0 可以把文档的表现从其结构中分离,我们可以在不搞乱文档内容的情况下完全地控制表现层。

  • 层叠样式表(CSS)

    通过 CSS,我们得到了一种用于 HTML 文档的样式和布局模型。

    由于 CSS 使开发者有能力同时控制多个网页的样式和布局,CSS 可以称作 Web 设计领域的一个突破。作为开发者,您可以为每个 HTML 元素定义样式,并把它应用到您希望的任意多的页面上。如果需要做一个全局的改变,只需简单地改变样式,Web 中所有的元素都会被自动地更新。

  • 文档对象模型(DOM)

    DOM 指文档对象模型。

    HTML DOM 是针对 HTML 的文档对象模型。

    HTML DOM 定义了针对 HTML 的一套标准的对象,以及访问和处理 HTML 对象的标准方法。

    “W3C 文档对象模型(DOM)是一个中立于语言和平台的接口,它允许程序和脚本动态地访问和更新文档的内容、结构以及样式”。

  • JavaScript

    JavaScript 是因特网的标准脚本语言,它使您有能力编写可控制所有 HTML 元素的代码。

相关阅读

上一页DOCTYPE:文档类型与浏览器模式下一页HTML标签详解

最后更新于1年前

这有帮助吗?

JS 参考手册
中文DHTML参考手册