前端开发,需要经常接触 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. 数据库 MySQL安装图解

    MySQL安装图解 一.MYSQL的安装 1.打开下载的mysql安装文件,双击运行mysql-5.5.40-win32.msi. 2.选择安装类型,有"Typical(默认)". ...

  2. 《基于Apache Kylin构建大数据分析平台》

    Kyligence联合创始人兼CEO,Apache Kylin项目管理委员会主席(PMC Chair)韩卿 武汉市云升科技发展有限公司董事长,<智慧城市-大数据.物联网和云计算之应用>作者 ...

  3. 个人学习随笔(psi-blast随笔)

    psi-blast学习 最近自己学习了一些新工具,最近在学习关于蛋白质相互作用位点的预测,在学习中,接触了几个新的工具,下面说说自己正在学习的psi-blast. 首先要说我用psi-blast用来做 ...

  4. gulp教程之gulp-concat

    简介: 使用gulp-concat合并javascript文件,减少网络请求. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1. ...

  5. MVC5+EF6 入门完整教程八

    本篇是相对独立的一篇,主要讲解不丢失数据进行数据库结构升级. 前面我们讲解EF功能时,已经介绍过一种更新数据库的方式: EF比较model和database,如果两边不一致,程序将会drop and ...

  6. C#微信公众号接口开发,灵活利用网页授权、带参数二维码、模板消息,提升用户体验之完成用户绑定个人微信及验证码获取

    一.前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号 ...

  7. Dependency Scope

    Dependency Scope <dependency>中还引入了<scope>,它主要管理依赖的部署.目前<scope>可以使用5个值: * compile,缺 ...

  8. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  9. window 链接方式

    一.硬链接 mklink /H <destination> <source> 创建后的图标也和原文件的图标一样,在属性中也无法看出其中的链接关系 可通过命令查看 fsutil ...

  10. 使用ajaxfileupload.js实现文件上传

    ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,file ...