三者间的关系

一个基本的网站包含很多个网页,一个网页由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. python学习——函数参数

    一.为什么要使用函数 函数能提高应用的模块性,和代码的重复利用率. 二.函数的参数 位置参数:从左至右进行匹配 一般情况,也就是我们迄今为止最常用的方法,是通过位置进行匹配把参数值传递给函数头部的参数 ...

  2. C#Socket_TCP(客户端,服务器端通信)

    客户端与服务器通信,通过IP(识别主机)+端口号(识别应用程序). IP地址查询方式:Windows+R键,输入cmd,输入ipconfig. 端口号:可自行设定,但通常为4位. 服务器端: usin ...

  3. Codeforces 396C

    题意略. 思路: 将树上的节点编好dfs序,然后就可以用树状数组区间修改点查询了. 我们用 lft[v] 和 rht[v]来表示v的子树在dfs序中的左端和右端,这样才方便我们对树状数组的操作. 其实 ...

  4. MapDB使用入门

    背景 MapDB官网:http://www.mapdb.org 官方翻译之后的话:MapDB基于堆外存储.磁盘存储提供了Java的Maps.Sets.Lists.Queues等功能.它混合了Java集 ...

  5. [Python] socket实现TFTP上传和下载

    一.说明 本文主要基于socket实现TFTP文件上传与下载. 测试环境:Win10/Python3.5/tftpd64. tftpd下载:根据自己的环境选择下载,地址 :http://tftpd32 ...

  6. Delphi - cxGrid字段类型设定为ComboBox 并实现动态加载Item

    cxGrid设定字段类型为ComboBox 在cxGrid中选中需要设定的字段: 单击F11调出属性控制面板,在Properties下拉选项中选中ComboBox,完成字段类型的设定. cxGrid ...

  7. in和exists过程对比

    两者执行流程完全不一样. in的过程 select * from tableA a where a.id in (select b.a_id from tableB b); 1)首先子查询,查询B表中 ...

  8. java基础-多线程二

    java基础-多线程二 继承thread和实现Runnable的多线程每次都需要经历创建和销毁的过程,频繁的创建和销毁大大影响效率,线程池的诞生就可以很好的解决这一个问题,线程池可以充分的利用线程进行 ...

  9. Features Track 2018徐州icpc网络赛 思维

    Morgana is learning computer vision, and he likes cats, too. One day he wants to find the cat moveme ...

  10. zoj 5823 Soldier Game 2018 青岛 I

    题目传送门 题意:现在有n个人,现在可以把这n个人分成若干组,只有连续的人才能被分为一组,并且一个组内最多2个人,现在问你 所有组内的最大值-最小值 这个差值最小是多少. 题解: 将每个人的情况3种情 ...