三者间的关系

一个基本的网站包含很多个网页,一个网页由html, css和javascript组成。

html是主体,装载各种dom元素;css用来装饰dom元素;javascript控制dom元素。

用一扇门比喻三者间的关系是:html是门的门板,css是门上的油漆或花纹,javascript是门的开关;

html介绍

html是用来描述网页的一种语言,它不是一种编程语言,而是一种标记语言(标记标签),总的来说,html使用标记标签来描述网页,本文就用标签来代替标记标签进行说明。

标签是指<html></html>,<div></div>。

标签是有语义的:标题用<h1>,表格展示用<table>,链接用<a>,无序排列用<ul>等等。

标签里可带有各类属性,最基本的就是class和id。class属性的作用是引用css样式;id的作用是配合javascript使用,具有唯一性。下面举几个例子说明

l  图片标签<img>的主要属性有src,alt。src是引用图片的网络地址(必要);alt是对这张图片的描述,如果图片加载不成功,则会显示alt的文字。

l  超链接<a>的主要属性有href,target。href是指链接要跳转的网址(必要);target是告诉浏览器点击这个链接后要以哪种形式找开窗口,target=”_blank”是指打开一个新窗口

若想了解更多关于html的资料,请点击这里

css介绍

css的官方名字叫层叠样式表,它的出现是为了解决内容和表现分离的问题,一般存放在.css文件里。

使用css。

可在html的头元素<head>里书写,或者书写在CSS文件并在html里引用该文件。

css优先权。

多个css样式可集中在单个html标签里,出现这种情况时,一般按优先权划分

  1. 浏览器默认设置 (最低)
  2. 外部样式表
  3. 内部样式表(写在html的<head>标签内部)
  4. 内联样式(写在html的标签里,即style属性)(最高)

css的语法。

css由两个主要部分组成,选择器,一条或多条声明。

选择器是指css样式的名字“.seletor”,名字前面要带上一点“.”。声明是由属性和值组成,给个例子“margin: 0 auto”,冒号前面是属性,后面是值,该例子是定义元素居中显示。

具体的属性和值可点击这里

javascript介绍

javascript是脚本语言,它是连接前台(html)和后台服务器的桥梁,它是操纵html的能手,本文用js代替javascript进行说明。

平时听到原生js,js库,js框架,js插件等等,下面简单说明一下。

l  原生js,是指最基础的js,没有封装过,但因为各浏览器对js的支持不同,就导致用基础的js编程需要为不同的浏览器写兼容代码。

l  Js库,js框架,是指集成一系列dom操作,API封装,界面UI封装的的库类,常见的有jQuery,extjs等等,这方面的定义比较难区分,暂不误导大家

l  Js插件,就是集成了帮助程序员轻松完成功能的程序。Js插件用得比较多,网页制作上随处可见。如图片轮换功能,导航制作,上传图片等等。

至于js语法介绍,则太过于琐碎,详情请点击这里

浅析html+css+javascript之间的关系与作用的更多相关文章

  1. html+css+javascript之间的关系与作用

    三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...

  2. HTML,Css,JavaScript之间的关系

    简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...

  3. 新手理解HTML、CSS、javascript之间的关系-修订

    几年前写过一篇博文 <新手理解HTML.CSS.javascript之间的关系>,没想到网上出现了不少转载,当时没有太用心,里面的很多内容有待商榷,这里发布重新发布一篇. 网页主要有三部分 ...

  4. JDK,JRE,JVM三者之间的关系和作用

    1,定义: JDK: Java Develpment Kit java 开发工具 bin:最主要的是编译器(javac.exe) include:java和JVM交互用的头文件 lib:类库 JRE: ...

  5. 新手理解HTML、CSS、javascript之间的关系

    http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...

  6. html、css、javascript之间的关系

    网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior)HTML —— 结构, 决定网页的结构和内容( “是什么”)CSS —— 表现 ...

  7. CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系

    设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...

  8. .h(头文件) .lib(库文件) .dll(动态链接库文件) 之间的关系和作用的区分

    .h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的.附加依赖项的是.lib不是.dll,若生成了DLL,则肯定也生成 LIB文件.如果要完成源代码的编译和链接,有头文件和lib就够了 ...

  9. HTML,CSS,JavaScript,json,xml之间的关系

    1.浏览器工作原理: https://blog.csdn.net/Luncles/article/details/80320082 2.HTML,XML,JSON之间的关系: https://blog ...

随机推荐

  1. Docker安装Skywalking APM分布式追踪系统

    环境介绍 本文使用虚拟机unbutu18+docker.本unbutu18系统IP地址为:192.168.150.134 大家在使用时记得将此地址换成自己的实际地址. docker的安装可参考:htt ...

  2. Mybatis的一级缓存和二级缓存的理解以及用法

    程序中为什么使用缓存? 先了解一下缓存的概念:原始意义是指访问速度比一般随机存取存储器快的一种RAM,通常它不像系统主存那样使用DRAM技术,而使用昂贵但较快速的SRAM技术.对于我们编程来说,所谓的 ...

  3. 技术改变生活| 免费看VIP视频,屏蔽广告,解锁新姿势!

    说到这个,我就忍不住的要介绍一下今天的主角 Tampermonkey 了.Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于Chrome, Microsoft Edg ...

  4. 【Leetcode】【简单】【122. 买卖股票的最佳时机 II】【JavaScript】

    题目描述 122. 买卖股票的最佳时机 II 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票) ...

  5. 安卓开发开发规范手册V1.0

    安卓开发开发规范手册V1.0 之前发布过一份Web安全开发规范手册V1.0,看到收藏文章的读者挺多,发现整理这些文档还挺有意义. 最近周末抽了些时间把之前收集关于安卓安全开发的资料也整理了一下,整理出 ...

  6. 简单详细讲解js闭包(看完不懂你砍我!!!)

    <javascript高级程序设计>中闭包的概念: 闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作般在函数中定义实例(局部)变量,而这些变量 ...

  7. 2019 HZNU Winter Training Day 14 Comprehensive Training

    A - Choosing Capital for Treeland CodeForces - 219D 题意:有一颗单向边的树,要选取一个结点作为首都.要求是这个结点到其它结点,总共需要翻转的路径数量 ...

  8. 【LeetCode】BFS 总结

    BFS(广度优先搜索) 常用来解决最短路径问题. 第一次便利到目的节点时,所经过的路径是最短路径. 几个要点: 只能用来求解无权图的最短路径问题 队列:用来存储每一层便利得到的节点 标记:对于遍历过的 ...

  9. 分析spring4和spring5日志中的不同

    日志在工作中起到关键作用,我们经常使用它来打印关键信息,方便分析,或者是输出错误信息,用于bug排查,spring中同样使用了日志进行信息的输出,但是spring4和spring5之间的日志又有些不同 ...

  10. c语言实现数组的排序

      本文章只对选择排序和冒泡排序进行介绍 选择排序实际上是从0到length-1,选择某个元素与其他的元素进行大小比较,如果大于就交换,其他情况不做操作,如图: 冒泡排序实际上是先选择某个元素,然后从 ...