HTML+CSS+JS入门

最新推荐文章于 2024-04-27 05:24:38 发布

王火乐呀

最新推荐文章于 2024-04-27 05:24:38 发布

阅读量1.7k

点赞数 4

分类专栏：前端文章标签：前端 html css javascript java

本文链接：https://blog.csdn.net/ldstudent/article/details/124235530

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

🤖HTML+CSS+JS入门🤖

本文针对于前端入门小白与后端初级程序员，看完这篇文章有👉立竿见影👈的效果

🍁如果你是一名前端小白，那么这篇文章就是你前端生涯的第一扇窗户🍁
🍁作为一名后端初级程序员，对前端也需要一定的了解，这篇文章就可以领你走进前端的大门🍁

如果对各位有帮助，欢迎各位👍点赞📢评论⭐️收藏

话不多说，直接开始：

🚀HTML

一、概念

Hyper Text Markup Language 超文本标记语言，是最基础的网页开发语言

二、快速入门

1、html文档

html文档的后缀名为 .html 或 .htm

2、标签分类

围堵标签：有开始标签和结束标签。如 <html> </html>
自闭和标签：开始标签和结束标签在一起。如 <br/>

3、初识HTML

HTML代码示例*(先通过一小段html代码来认识一下)*：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>this is html code</title>
	</head>
	<body>
		<h1> hello world </h1>
		<font color="crimson">hello world</font>
	</body>
</html>

代码效果：

在这里插入图片描述

4、HTML标签

4.1、文件标签

构成html最基本的标签

html ：html文档的根标签
head：头标签，用于指定html文档的一些属性，引入外部资源
title：标题标签
body：体标签
<!DOCTYPE html>：html5中定义该文档是html文档

4.2、文本标签

和文本有关的标签

：注释
<h1>到 <h6>: 标题标签（h1 到 h6 字体逐渐递减）
<p>段落标签
<br>换行标签
<hr>展示一条水平线
<b>加粗标签
<i>字体斜体
<font>字体标签
<center>文本居中

根据文本标签自己做一个小案例：

在这里插入图片描述

案例源码：

<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>Github简介</title>
</head>
<body>

<h1>
  Github简介
</h1>
<hr color="#ffd700">

<p>
  <font color="#FF0000">GitHub</font>是一个<b><i>面向开源及私有软件项目</i></b>的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。
</p>

<p>
  GitHub于2008年4月10日正式上线，除了Git代码仓库托管及基本的Web管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目Ruby on Rails、jQuery、python等。
</p>

<p>

  作为开源代码库以及版本控制系统，Github拥有超过900万开发者用户。随着越来越多的应用程序转移到了云上，Github已经成为了管理软件开发以及发现已有代码的首选方法。
</p>

<p>

  在GitHub，用户可以十分轻易地找到海量的开源代码。
</p>

<hr color="#ffd700">

<font color="gray" size="2">
  <center>
    百度百科<br>
    版权所有Copyright 2006-2018&copy;, All Rights Reserved 京公网安备11000002000001号
  </center>
</font>
</body>
</html>

4.3 、图片标签

该标签可用来展示图片<img>，其中，用src属性来指定图片的地址

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display img</title>
</head>
<body>

<!-- 演示img标签 -->
<img src="github1.png">

<br>

<img src="gihub2.png" width="480" height="480">

</body>
</html>

演示效果：

在这里插入图片描述

4.4 、列表标签

列表标签分为有序列表<ol>与无序列表<ul>，列表项用<li>实现

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display ol and ul</title>
</head>
<body>

<!--展示有序标签与无需标签-->

<h1>有序标签</h1><br>

<ol>
    <li>github</li>
    <li>gitee</li>
    <li>idea</li>
</ol>

<h1>无序标签</h1>
<ul>
    <li>java</li>
    <li>C++</li>
    <li>python</li>
</ul>

</body>
</html>

演示效果：

在这里插入图片描述

4.5、链接标签

用a标签来定义一个超链接

属性：

href : 指定访问资源的URL
target：指定资源的打开方式（_self，默认值，在当前页面打开，__blank，在空白页面打开）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display a </title>
</head>
<body>

<!--链接标签-->

<h2>在当前页面打开链接</h2><br>
<a href="https://www.baidu.com">百度</a><br>
<!--和上面的标签效果一致，target默认属性为_self-->
<a href="https://www.baidu.com" target="_self"百度></a><br>

<h2>在空白页面打开链接</h2><br>
<a href="https://www.csdn.net/" target="_blank">CSDN</a>

</body>
</html>

演示效果：

在这里插入图片描述

4.6、div与span

div : 每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签内联标签

4.7、语义化标签

html5中为了提高程序的可读性，提供了一些标签。

<header>页眉
<footer>页脚

4.8、表格标签

table定义表格，其属性：
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
- bgcolor：背景色
- align：对齐方式
tr定义行，其属性：
- bgcolor：背景色
- align：对齐方式
td定义列，其属性：
- colspan：合并列
- rowspan：合并行
th定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display table</title>
</head>
<body>

<!-- 这里是表格1
    表格1中有cellpadding cellspacing bgcolor属性,可与表格2进行对比查看
-->

<table width="250px" border="1px" align="left" cellpadding="10" cellspacing="0" bgcolor="#faebd7">
    <caption>学生信息表</caption><br>
      <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
      </tr>
    <tr>
        <td>1</td>
        <td>小王</td>
        <td>18</td>
    </tr>
    <tr>
        <td>2</td>
        <td>老陈</td>
        <td>28</td>
    </tr>
</table>

<!--这里是表格2
    表格2中有td的rowspan与colspan,可与表格1对比查看
-->

<table width="250px"  border="2px" align="center">
    <caption>商品信息表</caption><br>
    <thead>
    <tr>
        <th>物品</th>
        <th>数量</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>帽子</td>
        <td>2</td>
        <td>50</td>
    </tr>
    <tr>
        <td>上衣</td>
        <td>1</td>
        <td rowspan="2">200</td>
    </tr>
    <tr>
        <td>裤子</td>
        <td>1</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">总共250元</td>
    </tr>
    </tfoot>

</table><br>


</body>
</html>

演示效果：

在这里插入图片描述

4.9、表单标签

表单标签用于采集用户输入的数据与服务器进行交互。

form用于定义表单，其属性：

action：指定提交数据的URL
method：指定提交方式（常见的提交方式get、post）
- get：请求参数会在地址栏中显示，会封装到请求行中，请求参数大小是有限制的，不太安全。
- post：求参数不会再地址栏中显示，会封装在请求体中，请求参数的大小没有限制，较为安全。

表单项中的数据想被提交，必须指定其name属性。

表单项标签：

input：可以通过type属性值，改变元素展示的样式，其中type属性包括：
- text：文本输入框，且为默认属性，其中placeholder指定输入框的提示信息，当输入框的内容发生变化，会自动清空
- password：密码输入框
- radio：单选框，要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样，一般会给每一个单选框提供value属性，指定其被选中后提交的值，checked属性可以指定默认值
- checkbox：多选框，一般会给每一个单选框提供value属性，指定其被选中后提交的值，checked属性可以指定默认值
- file：文件选择框
- hidden：隐藏域，用于提交一些信息
- 三个按钮属性，分别是submit(提交按钮，可以提交表单)、button（普通按钮）、image（图片提交按钮，src属性指定图片的路径）
label：指定输入项的文字描述信息，label的for属性一般会和input的id属性对应，如果对应了，则点击label区域，会让input输入框获取焦点。
select：下拉列表
- 子元素：option，指定列表项
textarea：文本域
- cols：指定列数，每一行有多少个字符
- rows：默认多少行

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dispalay form</title>
</head>
<body>

<h4>这里是一个表单</h4>
<form action="form_action.asp" method="get">
    <label for="name">姓名:</label>
    <input type="text"  id="name" name="name"/><br>
    性别:<select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
        </select><br>
    密码:<input type="password" name="pwd"/><br>
    学历:<input type="radio" name="edu"/>本科
        <input type="radio" name="edu"/>专科<br>
    爱好:<input type="checkbox" name="hobby"/>篮球
    <input type="checkbox" name="hobby"/>足球
    <input type="checkbox" name="hobby"/>乒乓球<br>
    个人资料:<input type="file"><br>
    自我评价:<textarea cols="50" ></textarea>
    <input type="hidden" value="1"><br>
    <input type="image" src="github1.png">

</form>

</body>
</html>

演示效果：

在这里插入图片描述

🚀CSS

一、概念

Cascading Style Sheets 层叠样式表（层叠：多个样式可以作用在同一个html的元素上，同时生效），CSS的功能强大，能够将内容展示与样式控制分离，降低耦合度（解耦）。

二、 CSS的使用

css与html的结合方式

1、内联样式

在标签内使用style属性指定css代码，如：<div style="color:red;">hello css</div>，在之前的html介绍中也已经用到。

2、内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码，如：

<style>
	div{
		  color:blue;
		}
		
</style>
<div>hello css</div>

3、外部样式

在head标签内，定义link标签，引入外部的css资源文件,如：

a.css文件：
div{
	color:green;
	}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

ps：

内联样式、内部样式、外部样式，css作用范围越来约大
内联样式不常用
外部样式可以写为：

<style>
	@import "css/a.css";
</style>

三、 CSS语法

格式：

选择器 {
			属性名1:属性值1;
			属性名2:属性值2;
			...
		}

选择器（下面会介绍）:筛选具有相似特征的元素

ps：

每一对属性需要使用;隔开，最后一对属性可以不加;

四、选择器

1、基础选择器

id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法：#id属性值{}
类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}

ps：id选择器优先级高于类选择器
元素选择器：选择具有相同标签名称的元素

语法：标签名称{}

ps：类选择器优先级高于元素选择器

2、扩展选择器

选择所有元素：

语法： *{}
并集选择器：

语法：选择器1,选择器2{}
子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1

元素：选择器1 > 选择器2{}

属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名=“属性值”]{}

例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att^=value]属性选择器的应用</title>
<style type="text/css">
p[id^="one"]{
	color:pink;
	font-family:"微软雅黑";
	font-size:20px;	
}
</style>
</head>
<body>
<h2>春望</h2>
<p id="one">国破山河在，城春草木深。</p>
<p id="two">感时花溅泪，恨别鸟惊心。</p>
<p id="one1">烽火连三月，家书抵万金。</p>
<p id="two1">白头搔更短，浑欲不胜簪。</p>
</body>
</html>

伪选择器：选择一些元素具有的状态

语法：元素:状态{}

状态：

link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态

例子：

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>

</body>
</html>

五、属性

1、字体、文本

fint-size：字体大小
color：文本颜色
text-align：对齐方式
line-height：行高

2、背景

background

3、边框

border

4、尺寸

width：宽度
height：高度

5、盒子模型

margin：外边距

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>

<body>

<p>这个段落没有指定外边距。</p>

<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>

<p>这个段落没有指定外边距。</p>

</body>

</html>

padding：内边距
- 默认情况下内边距会影响整个盒子的大小
- box-sizing:boder-box; 涉资盒子属性，让width和height就是最终盒子的大小
float：浮动
- left
- right

🚀JavaScript

一、概念

	一门客户端脚本语言（不需要编译），运行在客户端浏览器中，每个浏览器都有JavaScript的解析引擎。

JavaScript可以用来增强用户和HTML页面交互的过程，可以控制html元素，让页面有一些动态的效果。

二、基本语法

1、与html结合

内部JS :定义<script>标签，标签体内容就是js代码
外部JS:定义<script>标签，通过src属性引入外部的js文件

ps：<script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序,并且<script>可以定义多个。

2、注释

单行注释：/注释内容
多行注释：/*注释内容*/

3、数据类型

3.1、原始数据类型：

number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
string：字符串。字符串 “abc” “a” ‘abc’
boolean: true和false
null：一个对象为空的占位符
undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

ps:在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。

对于其他类型转number，string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）,boolean转number：true转为1，false转为0。

其他类型转boolean, number类型，0或NaN为假，其他为真， string类型，除了空字符串("")，其他都是true，null&undefined:都是false，所有对象都为true

3.2、引用数据类型

对象

4、变量

var 变量名 = 初始化值;

typeof运算符：获取变量的类型。
注：null运算后得到的是object

5、运算符

一元运算符：

++ 自增
– 自减
+(-) 正负号

算数运算符：

+ - * / % …

比较运算符：

> < >= <= == ===(全等于)

ps:字符串按照字典顺序比较，按位逐一比较，直到得出大小为止。===全等于在比较之前，先判断类型，如果类型不一样，则直接返回false。==只比较转化成同一类型后的值看值是否相等。

逻辑运算符：

&& || !

三元运算符：

语法：表达式?值1:值2，值，如果是true则取值1，如果是false则取值2，

var a = 3;
var b = 4;
var c = a > b ? 1:0;

6、流程控制语句

if…else…
switch:（在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)，在JS中,switch语句可以接受任意的原始数据类型）
while
do…while
for

7、JS特殊语法

语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
变量的定义使用var关键字，也可以不使用，用表示定义的变量是局部变量，不用表示定义的变量是全局变量(不建议)

8、99乘法表案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>99乘法表</title>
  <style>
    td{
      border: 1px solid;
    }

  </style>

  <script>

    document.write("<table  align='center'>");
    //1.完成基本的for循环嵌套，展示乘法表
    for (var i = 1; i <= 9 ; i++) {
      document.write("<tr>");
      for (var j = 1; j <=i ; j++) {
        document.write("<td>");

        //输出  1 * 1 = 1
        document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");

        document.write("</td>");
      }

      document.write("</tr>");
    }

    //2.完成表格嵌套
    document.write("</table>");

  </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

三、基本对象

1、Function：函数(方法)对象

（1）、创建方式：

var fun = new Function(形式参数列表,方法体); //忘掉吧
function 方法名称(形式参数列表){
方法体
}
var 方法名 = function(形式参数列表){
方法体
}

（2）、特点：

方法定义是，形参的类型不用写,返回值类型也不写。
方法是一个对象，如果定义名称相同的方法，会覆盖
在JS中，方法的调用只与方法的名称有关，和参数列表无关
在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

（3）、调用

方法名称(实际参数列表);

2、Array:数组对象

（1）、创建：

var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];

（2）、方法：

join(参数):将数组中的元素按照指定的分隔符拼接为字符串

var arrs = new Array("welcome","everyone")

console.log(arrs.join());//不加参数跟toString()一样
console.log(arrs.join(""));
console.log(arrs.join("-"));
console.log(arrs.join("+"));

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RfnAcPWq-1650197782824)(C:\Users\59495\AppData\Roaming\Typora\typora-user-images\image-20220413221151572.png)]$

push() 向数组的末尾添加一个或更多元素，并返回新的长度

（3）、属性

length:数组的长度

（4）、特点：

JS中，数组元素的类型可变的。
JS中，数组长度可变的。

3、Boolean

4、Date:日期对象

（1）、创建

var date = new Date();

（2）、方法：

toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

5、Math:数学对象

（1）、创建：

Math对象不用创建，直接使用。 Math.方法名();

（2）、方法：

random():返回 0 ~ 1 之间的随机数。含0不含1
ceil(x)：对数进行上舍入。//4.5 -> 5
floor(x)：对数进行下舍入。//4.5 -> 4
round(x)：把数四舍五入为最接近的整数。//4.5 -> 5

（3）、属性

PI(3.141592653589793)

6、Number

7、String

8、Global

（1）、特点：

全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();

（2）、方法：

encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字（逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number）
isNaN():判断一个值是否是NaN（NaN六亲不认，连自己都不认。NaN参与的==比较全部问false）
eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。

四、BOM

1、概念

Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象

2、组成

Window：窗口对象
Navigator：浏览器对8
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

3、window：窗口对象

（1）、与弹出框有关的方法：

alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
- 返回值：获取用户输入的值

（2）、与打开关闭有关的方法

close() 关闭浏览器窗口。（谁调用我，我关谁）
open() 打开一个新的浏览器窗口。（返回新的Window对象）

（3）、与定时器有关的方法

setTimeout()：在指定的毫秒数后调用函数或计算表达式。
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。

（4）、特点

Window对象不需要创建可以直接使用 window使用。 window.方法名();window引用可以省略，直接方法名()。

4、Location：地址栏对象

（1）、创建

window.location
location

（2）、方法

reload() 重新加载当前文档。刷

（3）、属性

href：设置或返回完整的 URL。

5、History：历史记录对象

（1）、创建

window.history
history

（2）、方法

back()：加载 history 列表中的前一个 URL。
forward()：加载 history 列表中的下一个 URL。
go(参数)：加载 history 列表中的某个具体页面。
- 参数正数：前进几个历史记录
- 参数负数：后退几个历史记录

（3）、属性

length：返回当前窗口历史列表中的 URL 数量。

五、DOM

1、概念

Document Object Model 文档对象模型，将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

2、DOM分类

DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment:注释对象
- Node：节点对象，其他5个的父对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

3、核心DOM模型

3.1、Document：文档对象：

3.1.1、创建

window.document
document

3.1.2、方法

获取Element对象：
- getElementById()：根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- etElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
创建其他DOM对象：
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()

3.2、Element:元素对象

3.2.1、获取/创建

通过document来获取和创建

3.2.2、方法

removeAttribute()：删除属性
setAttribute()：设置属性

3.3、Node:节点对象，其他5个的父对象

3.3.1、特点

所有dom对象都可以被认为是一个节点

3.3.2、方法（CRUD dom树）

appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild() ：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。

3.3.3、属性

parentNode 返回节点的父节点。

六、事件监听机制

概念：某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如：按钮文本输入框…
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

1、常见的事件

点击事件：
- onclick：单击事件
- ondblclick：双击事件
焦点事件：
- onblur：失去焦点
- onfocus:元素获得焦点。
加载事件：
- onload：一张页面或一幅图像完成加载。
鼠标事件：
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
键盘事件：
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
选择和改变：
- onchange 域的内容被改变。
- onselect 文本被选中。
表单事件：
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。

2.事件案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>

<body>
<img id="github1" src="github1.png"  onclick="fun();">
<img id="github2" src="github2.png">

<script>
  function fun(){
    alert('我被点了');
    alert('我又被点了');
  }

  function fun2(){
    alert('咋老点我？');
  }

  //1.获取github2对象
  var github2 = document.getElementById("github2");
  //2.绑定事件
  github2.onclick = fun2;

</script>
</body>
</html>

效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-huzBXEsD-1650197782825)(C:\Users\59495\AppData\Roaming\Typora\typora-user-images\image-20220417201034233.png)]$

点击第二个图片后显示：

在这里插入图片描述

王火乐呀

关注

4
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS入门

🤖HTML+CSS+JS入门🤖本文针对于前端入门小白与后端初级程序员，看完这篇文章有👉立竿见影👈的效果🍁如果你是一名前端小白，那么这篇文章就是你前端生涯的第一扇窗户🍁🍁作为一名后端初级程序员，对前端也需要一定的了解，这篇文章就可以领你走进前端的大门🍁如果对各位有帮助，欢迎各位👍点赞📢评论⭐️收藏话不多说，直接开始：文章目录🤖HTML+CSS+JS入门🤖🚀HTML一、概念二、快速入门1、html文档2、标签分类3、初识HTML4、HTML标签4.1、文件标签4.2、文本标签4.3 、图片
复制链接

扫一扫