前端开发,需要经常接触 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 AHI 实现解析

    版权声明:本文由musazhang原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/904925001482373849 来源 ...

  2. 记录centos6.8安装Oracle10.2.0.1过程中的错误解决

    [root@hadoop01 database]# ./runInstaller ./runInstaller: /opt/database/install/.oui: /lib/ld-linux.s ...

  3. HADOOP命令介绍

    一.用户命令1.archive命令 (1).什么是Hadoop archives?Hadoop archives是特殊的档案格式.一个Hadoop archive对应一个文件系统目录. Hadoop ...

  4. HashMap多线程并发问题分析

    转载: HashMap多线程并发问题分析 并发问题的症状 多线程put后可能导致get死循环 从前我们的Java代码因为一些原因使用了HashMap这个东西,但是当时的程序是单线程的,一切都没有问题. ...

  5. 《高级Web应用程序设计》课程

    一.课堂课件 全部授课内容 二.作业 访问ftp://192.168.42.254:22,登录后找到自己的姓名文件夹,放入作业即可.登录账号为stu1,密码为空. 已布置练习 练习1(截止日期10月1 ...

  6. python中的动态变量

    def make_name(): names = locals() for i in range(1, 10): names['t%s' % i] = i print names['t%s' % i]

  7. 做为一名PHP程序员,应该关注的互联网IT大牛!

    俗话说:“读万卷书不如行万里路,行万里路不如高人指路”,做为一名新人,以后的路还很长,多年你的成就取决于今天的自己付出,选中自己的方向比什么都重要,关注大牛,向他们学习,才不会迷失自己! 1.惠新宸( ...

  8. MySQL exists的用法介绍

    有一个查询如下: 1 SELECT c.CustomerId, CompanyName   2 FROM Customers c   3 WHERE EXISTS(   4     SELECT Or ...

  9. idea安装

  10. css选择符

    E>F:子选择符,选择所有作为E元素的子元素F.<style type="text/css">li>a {color: #ccc;}</style&g ...