HTML,CSS,JS之间的关系

时间:2023-01-06 17:49:16

HTML,CSS,JS之间的关系

本笔记是自己在浏览了各位前辈后拼凑总结下来的知识,供自己使用消化。后面会附上各种链接地址,尊重原创

最准确的网页设计思路是把网页分成三个层次,即:结构层(HTML)、表示层(CSS)、行为层(Javascript)。
一、HTML、CSS、JavaScript简介及简单分工
1、什么是HTML(超文本标记语言 Hyper Text Markup Language),HTML 是用来描述网页的一种语言。
2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素,语法为:selector {property:value} (选择符 {属性:值})
3、JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行
对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript这个植物人就可以对外界刺激做出反应,可以思 考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人。

如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人,没有Javascript、CSS是个毁容的植物人。
如果说HTML是建筑师,CSS就是干装修的,Javascript是魔术师。

来自 <http://www.cnblogs.com/dreamingbaobei/p/5062901.html>

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

html介绍

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

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

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

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

图片标签<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标签里,出现这种情况时,一般按优先权划分

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

css的语法。
css由两个主要部分组成,选择器,一条或多条声明。
选择器是指css样式的名字“.seletor”,名字前面要带上一点“.”。声明是由属性和值组成,给个例子“margin: 0 auto”,冒号前面是属性,后面是值,该例子是定义元素居中显示。
具体的属性和值可点击这里。

javascript介绍
javascript是脚本语言,它是连接前台(html)和后台服务器的桥梁,它是操纵html的能手,本文用js代替javascript进行说明。
平时听到原生js,js库,js框架,js插件等等,下面简单说明一下。
原生js,是指最基础的js,没有封装过,但因为各浏览器对js的支持不同,就导致用基础的js编程需要为不同的浏览器写兼容代码。
Js库,js框架,是指集成一系列dom操作,API封装,界面UI封装的的库类,常见的有jQuery,extjs等等,这方面的定义比较难区分,暂不误导大家
Js插件,就是集成了帮助程序员轻松完成功能的程序。Js插件用得比较多,网页制作上随处可见。如图片轮换功能,导航制作,上传图片等等。

来自 <http://blog.csdn.net/u011057439/article/details/53893411>

HTML,CSS,JS之间的关系的更多相关文章

  1. HTML、PHP、CSS、JS之间的关系

    23:02:06 2019-08-05 自己要搭建网站 虽然可以下载大佬的界面 但至少要懂一点web开发的知识 我现在感觉像个憨憨 啥都不明白 转载自:知乎 https://www.zhihu.com ...

  2. html&plus;css&plus;javascript之间的关系与作用

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

  3. 浅析html&plus;css&plus;javascript之间的关系与作用

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

  4. HTML&comma;Css&comma;JavaScript之间的关系

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

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

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

  6. PHP执行Session与前端JS之间的关系

    <?php error_reporting(0); $path = './tmp/'; $sess_name = session_name(); echo $sess_name; $sess_i ...

  7. 建站有很多技术,如 HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、http&colon;&sol;&sol;ASP&period;NET、Web Services、浏览器脚本、服务器脚本等。它们的区别是什么?新手一点不懂,想理清所有这些技术之间的关系和应用范围。

    先普及用户通过 浏览器 访问网页 的过程: 网页内容是通过服务器运算得出的结果,将结果(网页代码)传输给浏览器,网页代码再通过浏览器运算(计算.渲染),最终展示在用户的眼前的. 至此,我们知道了有2个 ...

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

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

  9. JS对象之间的关系

    JS对象类型 JS中,可以将对象分为"内部对象"."宿主对象"和"自定义对象"三种. 1.本地对象 ECMA-262定义为"独立于 ...

随机推荐

  1. JDBC数据库连接池技术

    在JDBC中,获得连接或释放资源是非常消耗系统资源的两个过程,为了解决此类性能问题,通常采用连接池技术,来共享连接.这样我们就不需要每次都创建连接.释放连接了,这些操作都交给了连接池. 用池的概念来管 ...

  2. js操作dom---创建一个域来输出调试信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 基于IHttpAsyncHandler的TCP收发器

    上一篇文章中,我们提到使用IHttpAsyncHandler来进行UDP的收发操作.由于UDP模型比较简单,所以运行没什么问题.这一篇我主要是使用IHttpAsyncHandler来进行TCP的收发操 ...

  4. 剑指Offer--图的操作

    剑指Offer–图的操作 前言   企业笔试过程中会涉及到数据结构的方方面面,现将有关图的深度优先搜索与广度优先搜索进行整理归纳,方便日后查阅.   在已做过的笔试题目中,可用DFS解决的题目有: & ...

  5. Google File System 见解 &lpar;作业&rpar;

    Google File System ——见解 近年来,大街小巷都传遍的大数据,引起了社会的一阵学习大数据*,造成任何公司在招聘人员的时候都会注上一条,会大数据的优先考虑:但是,从另一方面来说,这狂 ...

  6. Mac 上 Apache Apollo 的安装与运行,和官方下载文件中 Python 实例的演示

    前不久我在 Mac 上成功安装了 mosquitto,这次我又试了试安装另一个热门的 broker —— Apache Apollo.对在 Mac 上安装 mosquitto 感兴趣的可以点击查看我的 ...

  7. A1099&period; Build A Binary Search Tree

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  8. C&num; 优化程序的四十七种方法

    一.用属性代替可访问的字段 1..NET数据绑定只支持数据绑定,使用属性可以获得数据绑定的好处: 2.在属性的get和set访问器重可使用lock添加多线程的支持. 二.readonly(运行时常量) ...

  9. java下使用chromedriver获取访问页面状态码

    ##在使用chromedriver的时候 并没有提供api来获取访问页面的状态码,但是可以打开日志来获取到 LoggingPreferences logPrefs = new LoggingPrefe ...

  10. 第一个struct2程序

    [第1步] 安装Struts2 这一步对于Struts1.x和Struts2都是必须的,只是安装的方法不同.Struts1的入口点是一个Servlet,而Struts2的入口点是一个过滤器(Filte ...