HTML,Css,JavaScript之间的关系
简述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)和后台服务器的桥梁,对网页行为进行编程,定义网页的行为
三者关系:HTML为主要结构,所有内容都是定义在html上的,css则负责对网页的修饰和布局,而JavaScript则是是网页拥有一个动态的效果,
何为动态效果?在我们初学html是,所学的form表单中的submit提交组件则是一种类似的动态效果,而我们的js,则是使静态的网页动起来.
如,当我们点击摸个按钮,想要弹出窗口,或者修改背景图片,或是其他行为,都可以有自己定义这个行为,这就是网页的动态化.
HTML,Css,JavaScript的基本语法以及引入方法:
HTML:有大量的基础标签组成,不同的标签具有不同的功能,但只有网页自带的样式,目前最常用的布局方式则是使用div的盒子布局,设计网页时通常
先设置整个网页的div布局,再讲大大小小的.具有不同作用的div嵌入网页的大盒子中,最后形成一个基本的网页结构,
标签分为单标签和双标签:<div></div>,<br/>
CSS:作为html的样式存在.在html中有三种方式:
第一种:内部样式:嵌入在html代码中,<style> selector{property:value} 样式... </style>
第二种:外部样式表:通过<link rel="stylesheet" type="text/css" href="外部样式表路径" />引入外部样式表.
第三种:内联样式:<标签 style: 属性:"值";属性:"值">,以分号隔开不同属性,通常在需要特定属性,且不经常修改的标签中使用,且优先级为最高,
会覆盖样式表中的样式
JavaScript:JavaScript代码分为两种书写方式:
第一种:将js代码直接写在html的代码中,为嵌入式代码块<script type="text/JavaScript">这里面负责代码的写入</script>
第二种:将js代码写在单独的 .js文件中,通过<script type="text/JavaScript" src="js文件路径"></script>.
通常不在引入外部js文件的<script>标签中书写js代码,因为写的会被浏览器忽略.且引入的方式也不同于css的href引入,而是使用src
HTML,Css,JavaScript是网页的三要素,后面所学的各种框架都是在他们的基础上建立起来的,不求精通,但求会读且懂.是JavaWeb的基础部分.
HTML,Css,JavaScript之间的关系的更多相关文章
- html+css+javascript之间的关系与作用
三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...
- 浅析html+css+javascript之间的关系与作用
三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...
- 新手理解HTML、CSS、javascript之间的关系-修订
几年前写过一篇博文 <新手理解HTML.CSS.javascript之间的关系>,没想到网上出现了不少转载,当时没有太用心,里面的很多内容有待商榷,这里发布重新发布一篇. 网页主要有三部分 ...
- 新手理解HTML、CSS、javascript之间的关系
http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...
- html、css、javascript之间的关系
网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior)HTML —— 结构, 决定网页的结构和内容( “是什么”)CSS —— 表现 ...
- CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系
设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...
- HTML,CSS,JavaScript,json,xml之间的关系
1.浏览器工作原理: https://blog.csdn.net/Luncles/article/details/80320082 2.HTML,XML,JSON之间的关系: https://blog ...
- HTML,CSS,JS之间的关系
HTML,CSS,JS之间的关系 本笔记是自己在浏览了各位前辈后拼凑总结下来的知识,供自己使用消化.后面会附上各种链接地址,尊重原创 最准确的网页设计思路是把网页分成三个层次,即:结构层(HTML). ...
- DOM,浏览器,javascript,html之间的关系
来源于:https://github.com/hucheng91/myBlog/blob/master/web/dom/dom.md DOM定义 DOM可以以一种独立于平台和语言的方式访问和修改一个文 ...
随机推荐
- echarts 使用时,常见配置
1.隐藏x轴,y轴,网格线 "yAxis": [ { //就是一月份这个显示为一个线段,而不是数轴那种一个点点 "show" : true, "bou ...
- 记录初试Netty(2)-服务端心跳检测
今天在在搭建的netty框架中添加心跳机制,特此记录一下: 1.什么是心跳机制? 心跳是在TCP长连接中,客户端和服务端定时向对方发送数据包通知对方自己还在线,保证连接的有效性的一种机制 在 ...
- java 魔术
每4个字节都有对应的含义
- Adobe Acrobat DC 安装
Adobe Acrobat DC 制作pdf模板 下载:http://www.downza.cn/soft/20562.html 安装出错解决: 可以将C:\Program Files (x86)\C ...
- 百度DMA+小度App的蓝牙语音解决方案案例展示
前记 跟着百度也有一段时间了,经过一年多的努力,我们也做出了一些产品.下面就给大家秀一下我们做的产品.有类似需求的朋友可以多多交流. 智能语音耳机 这个是就是可以通过按键来调用小度app的运动 ...
- ORM批量添加
# ########### Book是模型类 ############ 建一个空列表,盛放obj对象lst_obj=[]# 用for循环控制添加信息条数for i in range(100):# 创建 ...
- Java入门 - 语言基础 - 13.Character类
原文地址:http://www.work100.net/training/java-character.html 更多教程:光束云 - 免费课程 Character类 序号 文内章节 视频 1 概述 ...
- IDEA中springboot的热部署
在pom.xml文件中添加依赖 <!--添加热部署--> <dependency> <groupId>org.springframework.boot</gr ...
- python self用法
在定义类的过程中,无论是显式的创建类的构造方法,还是向类中添加实例方法,都要将self参数作为方法的第一个参数. class Person: def __init__(self): print(&qu ...
- 我的C++开发工具链
工欲善其事,必先利其器.想要干好活,顺手的工具是必不可少的.来分享下我的C++开发工具链. 平台:Windows 编译器:MSVC IDE:Visual Studio 版本控制:TortoiseGit ...