范仁义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、代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <div style="text-align: center;">
  9.          <h1>点击变色实例</h1>
  10.      </div>
  11.      <div>
  12.          <a id="my_a" href="https://www.baidu.com" style="color: red;">去百度</a>
  13.      </div>
  14.      <div>
  15.          <button id="myBtn" style="margin-top:15px;padding: 5px;background-color: darkseagreen; border-radius: 5px;color: #ffffff; ">点击将上述文字变成蓝色</button>
  16.      </div>
  17.      <script>
  18.          let myBtn=document.getElementById('myBtn');
  19.  
  20.          myBtn.addEventListener('click', change_color);
  21.          function change_color() {
  22.              let my_a=document.getElementById('my_a');
  23.              my_a.style.color='blue';
  24.          }
  25.  
  26.      </script>
  27.  </body>
  28.  </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. IOS 之 NSBundle 使用

    来源:http://blog.sina.com.cn/s/blog_b0c59541010151rd.html An NSBundle object represents a location in ...

  2. 无法将文件“E:\NetWorkPace\Permission\packages\EntityFramework.6.1.1\lib\net45\EntityFramework.xml”复制到“bin\EntityFramework.xml”。对路径“bin\EntityFramework.xml”的访问被拒绝。

    无法将文件“E:\NetWorkPace\Permission\packages\EntityFramework.6.1.1\lib\net45\EntityFramework.xml”复制到“bin ...

  3. MySql时区修改

    1.查看当前时间 > select curtime(); #或select now()也可以+-----------+| curtime() |+-----------+| 15:18:10 | ...

  4. 常用的js加密

    https://github.com/hellobajie/AES-of-JavaScript    此为js的 AES加密方式,两个加密文档,可当做扣js必备

  5. MyBatis之Oracle、Mysql批量插入

    Mybatis中Dao层 public interface UsersMapper { public void insertEntitys(List<UserEntity> users); ...

  6. mysql学习之基础篇04

    五种基本子句查询 查询是mysql中最重要的一环,我们今天就来说一下select的五种子句中的where条件查询: 首先我们先建立一张商品表:goods 由于商品数目太多,我就不一一列举了. 在这里我 ...

  7. idea中添加多级父子模块

    在 IntelliJ IDEA 中,没有类似于 Eclipse 工作空间(Workspace)的概念,而是提出了Project和Module这两个概念. 在 IntelliJ IDEA 中Projec ...

  8. convirt集中管理平台搭建

    情况说明: (1)本文采用OEL6.3x64操作系统,需要有KVM安装环境.(2)convirt2.1.1采用源码方式安装,convirt环境分别两部分,一部分是cms,用于管理kvm/xen虚拟主机 ...

  9. LeetCode - 92、反转链表 II

    反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明:    1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m ...

  10. vue 关于props 父组件传值

    swiper.vue  子组件 info.vue 父组件 swiper.vue<template> <div class="swiper-wrap" @mouse ...