范仁义web前端介绍课程---4、html、css、js初体验

一、总结

一句话总结：

html：就是网站的骨架，比如div标签、a标签等
css：style标签或者style属性里面的就是css
js：页面中的script标签里面就是js代码

二、html、css、js初体验（百度为例）

课程对应的视频地址：4、html、css、js初体验
https://www.fanrenyi.com/video/1/4

1、html代码

2、css代码

3、js代码

三、html、css、js配合小实例

1、效果图

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div style="text-align: center;">

         <h1>点击变色实例</h1>

     </div>

     <div>

         <a id="my_a" href="https://www.baidu.com" style="color: red;">去百度</a>

     </div>

     <div>

         <button id="myBtn" style="margin-top:15px;padding: 5px;background-color: darkseagreen; border-radius: 5px;color: #ffffff; ">点击将上述文字变成蓝色</button>

     </div>

     <script>

         let myBtn=document.getElementById('myBtn');

         myBtn.addEventListener('click', change_color);

         function change_color() {

             let my_a=document.getElementById('my_a');

             my_a.style.color='blue';

         }

     </script>

 </body>

 </html>
 

范仁义web前端介绍课程---4、html、css、js初体验的更多相关文章

  1. 范仁义web前端介绍课程---5、webstorm的下载安装

    范仁义web前端介绍课程---5.webstorm的下载安装 一.总结 一句话总结: webstorm破解版搜索:webstorm破解 site:52pojie.cn 编辑器随便选用,功能都差不多,哪 ...

  2. 范仁义web前端介绍课程---3、课程大纲（初步）

    范仁义web前端介绍课程---3.课程大纲(初步) 一.总结 一句话总结: 知识点脉络(知识架构):刚开始对这个稍微了解一下就可以了,在逐步的学习过程中,心里大概有这样一套知识点的脉络 二.范仁义前端 ...

  3. 范仁义web前端介绍课程---2、web前端是干嘛的

    范仁义web前端介绍课程---2.web前端是干嘛的 一.总结 一句话总结: 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技 ...

  4. 范仁义web前端介绍课程---1、课程意义

    范仁义web前端介绍课程---1.课程意义 一.总结 一句话总结: 提供的这一整套学习方法和资源,配合艾宾浩斯遗忘曲线等各种复习.学习算法和后续会有的娱乐化学习方式,能否真正做到让学过的东西不再忘记. ...

  5. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  6. 好程序员web前端分享值得参考的css理论：OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

  7. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  8. 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码

    工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...

  9. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

随机推荐

  1. Ldr和bl指令

    Ldr和bl在启动程序中,都是可以负责pc跳转的指令. 1)bl是地址无关指令,和什么地址无关呢?和当前的运行地址无关,链接器脚本中标明了一个运行地址,但是arm中的代码实际是从地址0开始运行的.这个 ...

  2. （在客户端）https抓包解密

    (一)原理分析 https的数据包是用对称秘钥(https协议协商出来的随机数)加密后的密文. 对称秘钥在传输线路上是密文的(被非对称加密过),但是在client.server端是明文的(因为要用于加 ...

  3. 学习python的日常4

    偏函数: 偏函数是functools模块提供的一个功能,偏函数可以通过设定参数的默认值,降低函数调用的难度 其中设定的参数默认值实际上是可以被传入为其他值的,最后创建偏函数时可接收函数对象.*args ...

  4. c# HashTable 类

  5. Python_变量作用域

    1.变量作用域: def get_apple(name,*b): global totalCount totalCount=0 for num in b: print('............... ...

  6. 【编程开发】Python隐藏属性——使用双下划线标识私有属性，外部不可直接访问

           from:https://zhuanlan.zhihu.com/p/30553607 小编在最初使用上Python之后,就一发不可收拾,人生苦短.我用Python,不光是因为其优雅简洁, ...

  7. UVA1660 电视网络 Cable TV Network[拆点+最小割]

    题意翻译 题目大意: 给定一个n(n <= 50)个点的无向图,求它的点联通度.即最少删除多少个点,使得图不连通. 解析 网络瘤拆点最小割. 定理 最大流\(=\)最小割 感性地理解(口胡)一下 ...

  8. dt二次开发之-url伪静态的自定义

    dt内核的方便性在于代码内核完全开源,都可以根据自身需要进行优化整改,个人在这段时间的深入研究,发现这套内核的方便性,今天继续给大家分享下DT的url伪静态如何自定义函数. url自定义文件是在api ...

  9. 【Java】《Java程序设计基础教程》第五章学习

    5.1 抽象类 Java语言中,父类的某些方法不包括任何逻辑,并且需要由子类重写.在这种情况下,用abstract关键字来修饰一个类时,这个类叫做抽象类,用abstract关键字来修饰一个方法时,这个 ...

  10. JAVA BIO至NIO演进

    主要阐述点: 1.同步/异步 or  阻塞/非阻塞 2.网络模型演进 3.NIO代码示例 一.同步/异步 or  阻塞/非阻塞 同步/异步:核心点在于是否等待结果返回.同步即调用者必须等到结果才返回, ...