Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[软技能] 第110天 前端页面有哪三层构成?分别有什么作用? #1024

Open
haizhilin2013 opened this issue Aug 3, 2019 · 2 comments
Labels
软技能 软技能

Comments

@haizhilin2013
Copy link
Collaborator

第110天 前端页面有哪三层构成?分别有什么作用?

@haizhilin2013 haizhilin2013 added the 软技能 软技能 label Aug 3, 2019
@gyd1997
Copy link

gyd1997 commented Aug 4, 2019

三层即结构层、表示层、行为层。

  • 结构层为页面的骨架,由 HTML 或 XHTML 标记语言创建,用于搭建文档的结构。

  • 表示层为页面的样式,由 CSS (层叠样式表)负责创建,用于设置文档的呈现效果。

  • 行为层为页面的行为,由 JavaScript 语言创建,用于实现文档的行为。

不过,在这三种技术之间存在着一些潜在的重叠区域,如:DOM 技术可以用来改变网页的结构。在 CSS 身上也可以找到这种技术相互重叠的例子。诸如 :hover 和 :focus 之类的预定义符号(伪 class 属性) 使我们可以根据用户触发事件来改变呈现效果。改变元素的呈现效果当然是表示层的“势力范围”,但对用户触发事件做出反应却是行为层的领地。表示层和行为层 的这种重叠形成了一个灰色地带。

@censek
Copy link

censek commented Jan 21, 2020

结构层 - HTML
表示层 - CSS
行为层 - JavaScript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
软技能 软技能
Projects
None yet
Development

No branches or pull requests

3 participants