前端开发,需要经常接触 HTML、DOM、CSS、JS等,那么HTML、CSS、JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点...

  HTML:超文本标记语言 (Hyper Text Markup Language),不是一种编程语言,而是一种标记语言

      定义了文档的内容,决定了要显示网页中的各个组成部分。(HTML文档中的每个成分都是一个节点——dom节点)

      相当于“名词”

  CSS:层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素。(宽度、高度、颜色、位置、边框、阴影等)

      相当于“形容词”。(用来修饰dom节点)

  JS:客户端的一种脚本语言,是一种轻量级的编程语言,具有简单的面向对象的特征。

     操作的是dom实现的“动态效果”,即实现页面动画效果。常用来给HTML网页添加动态功能,比如响应用户的各种操作。

     js是在html和css完成后添加的效果,例如轮播图、点击弹框、鼠标移动或悬浮不同位置呈现不同的效果等,还支持异步请求,即在不刷新页面的情况下从后台(服务端)请求数据。

     相当于“动词”


  结构----HTML(标签、节点)

  样式----CSS(颜色,位置)

  逻辑----JavaScript(控制)


  注意:1、css3出来后,可通过伪元素实现部分动画。

   2、以上关于名词、形容词、动词的说法只是为了方便理解,不具备普遍定义性。

  (该文仅供学习交流。如有不同观点,欢迎留下宝贵意见~)

HTML、CSS、JS在前端开发中都扮演怎样的角色的更多相关文章

  1. 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  2. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  3. JS高级前端开发群加群说明

    JS高级前端开发群加群说明 *一.文章背景: *二. 高级群: *三. 加入方式: *四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在"前端开发"关键字搜 ...

  4. (webstorm的CSS插件)前端开发必备!Emmet使用手册

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动你得生 ...

  5. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  6. Vue.js高效前端开发 • 【Vue基本指令】

    全部章节 >>>> 文章目录 一.Vue模板语法 1.插值 2.表达式 3.指令概述 4.实践练习 二.Vue绑定类样式和内联样式 1.Vue绑定类样式 2.Vue绑定内联样式 ...

  7. 使用 mock.js 让前端开发与后端独立

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. Vue.js高效前端开发 • 【Ant Design of Vue框架基础】

    全部章节 >>>> 文章目录 一.Ant Design of Vue框架 1.Ant Design介绍 2.Ant Design of Vue安装 3.Ant Design o ...

  9. Vue.js高效前端开发 • 【初识Vue.js】

    全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...

随机推荐

  1. 不使用插件实现对WordPress默认编辑器的增强

    四处寻觅无果.无意看了一下wordpress官方的API函数.苍天有眼啊!原来,后台的编辑器可以插入很多增强功能.果断卸载掉CK and SyntaxHighlighter编辑器插件.事实上,Word ...

  2. 使用input range滑块,控制元素transform rotate旋转样式

    <!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...

  3. TortoiseGit编辑全局变量支持https

    在windows,右键,进入tortoisegit的设置窗口,在左边树形菜单选Git,然后店"编辑全局.gid/config"按钮 输入以下文字 [http] sslVerify ...

  4. WPF 数据绑定Binding

    什么是数据绑定? Windows Presentation Foundation (WPF) 数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及与数据交互. 通过数据绑定,您可以对两个不同对象 ...

  5. 使用tomcat部署jsp程序

    安装java1.6.0到默认目录 下载apache-tomcat-6.0.32-windows-x86.zip,解压到D:\soft目录下 配置环境变量 JAVA_HOME C:\Program Fi ...

  6. 下载历史版本App超详细教程

    有些时候我们需要下载旧版本的 App 进行研究或者其他用途,然而在 iOS 下,苹果的 App Store 里面默认只能下载最新版本的 App,对滴,就是这么任性,不服不行.然而在 Android 里 ...

  7. localStorage 2016/12/26

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localSt ...

  8. html slelect 标签默认值

    <select name="channelCode" id="channelCode" class="all_input" style ...

  9. Mongodb 故障分享 初始化时"errmsg" : "exception: new file allocation failure" 并且长时间处于STARTUP2

    Hello,大家下午好. 近几天的项目有点赶,所以耽误了更新.现在给大家分享下,在安装mongodb的过程中,遇到的故障一则.其实很小白的问题,当时遇到这个问题的时候比较心慌,浪费了很多时间,跟大家分 ...

  10. JS实现 点击button(copy) 复制对应的网址——类似于复制推广链接

    <form action=""> <input type="text" class="share-input" value ...