简述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之间的关系的更多相关文章

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

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

  2. 浅析html+css+javascript之间的关系与作用

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

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

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

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

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

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

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

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

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

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

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

  8. HTML,CSS,JS之间的关系

    HTML,CSS,JS之间的关系 本笔记是自己在浏览了各位前辈后拼凑总结下来的知识,供自己使用消化.后面会附上各种链接地址,尊重原创 最准确的网页设计思路是把网页分成三个层次,即:结构层(HTML). ...

  9. DOM,浏览器,javascript,html之间的关系

    来源于:https://github.com/hucheng91/myBlog/blob/master/web/dom/dom.md DOM定义 DOM可以以一种独立于平台和语言的方式访问和修改一个文 ...

随机推荐

  1. Gitlab应用——系统管理

    ​ 查看linux系统信息 ​ 查看日志 ​ ​ 创建账号 ​ 选择regular,这是一个普通账号,点击“create user”账号创建完成 ​ 点击“User”,然后点击“New user”.使 ...

  2. webpack进阶用法你都get到了么?

    如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpa ...

  3. Python3-提高效率的方法

    1.字符串格式化 Python3.7或以上推荐使用f-string,其他版本推荐使用format方法. 2.字典的初始化 使用字面量初始化字典(以及其他集合类型). 说明:Python中初始化集合类型 ...

  4. ElasticSearch入门篇Ⅰ --- ES核心知识概括

    C01.什么是Elasticsearch 1.什么是搜索 垂直搜索(站内搜索) 互联网的搜索:电商网站,招聘网站,各种app IT系统的搜索:OA软件,办公自动化软件,会议管理,员工管理,后台管理系 ...

  5. MySQL 锁的小结

    摘自:https://www.cnblogs.com/protected/p/6526857.html 关于数据库的各种锁的总结: 1.共享锁(又称读锁).排它锁(又称写锁): InnoDB引擎的锁机 ...

  6. 【Nginx入门系列】第三章 通过端口号区分虚拟主机

    1.配置虚拟主机 (1)连接Nginx所在的服务器(我使用的是putty) (2)切换到nginx.conf 配置文件所在的目录,我目录是/usr/local/nginx/conf (3)增加一个虚拟 ...

  7. 微信小程序 npm 找不到npm包 没有找到可以构建的npm包 如何使用第三方npm组件

    微信官方的npm文档 太模糊了,而且感觉把最重要的东西写在了最后面,我这里费了老大功夫才知道这个坑. 初次使用,首先要初始化 npm 初始化——> 找到 pages 这个文件夹,然后进入这个文件 ...

  8. WTL设置对话框背影色

    MainDlg.h // MainDlg.h : interface of the CMainDlg class // //////////////////////////////////////// ...

  9. FFMPEG学习----解码视频

    基础概念 我们平时看到的视频文件有许多格式,比如 avi, mkv, rmvb, mov, mp4等等,这些被称为容器(Container), 不同的容器格式规定了其中音视频数据的组织方式(也包括其他 ...

  10. QQ截图工具截取

    邮箱截图插件 TXGYMailCamera.dll(X86) Export: CameraWindow CameraSubArea CameraWindowLikeSpy 调用参数: rundll32 ...