<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
行内式 --- 与css的行内式基本相同
在标签中,通过 script标签 来定义JavaScript代码
但是实际操作中,一般是通过 定义 事件来 定义JavaScript程序代码
这样的行内式,我们在实际项目中基本不会使用
只要了解即可
-->
//onclick是js点击事件
<!-- 在 代码中 直接定义 script 程序代码内容 -->
<div id="div1" style="color: red;" onclick="window.alert('我是点击弹出的内容')">你点我试试</div>
<div id="div2" style="color: blue;" onclick= fun1() >试试就试试</div>
<!-- 特殊的标签,a标签
在 a标签中 有 href 属性 可以定义标签的跳转对象
如果定义JavaScript程序,有可能会受到超链接跳转的影响,执行JavaScript代码有误
超链接要写行内式,定义在 href 属性中
在 href 属性中 定义 JavaScript: ;
在 冒号 分号之间,定义 JavaScript代码
此时 就 不能实现 页面跳转了,如果需要实现页面跳转,需要通过 BOM 操作来实现
JavaScript:; 大小写,不区分,都行,只是我们习惯性的 J 和 S 大写
JavaScript 大小写随便
因为 JavaScript 是 href的属性值,会被理解为 html 程序的一部分
html代码是不区分大小写的
window.alert() 是要严格区分大小写的
虽然当前也被视为 href的属性值
但是 本质是 一个js 程序
JavaScript程序 会 严格区分大小写
-->
<A id="a1" href="hTTps://wWW.bAIdu.cOm" onclick= fun2()>我想去百度看看</a>
<br>//是可以跳转的点击后字体是黄色
<a href="jAvAscRipT: window.alert('我是定义的js程序弹出内容') ;" >我是标准的超链接行内式</a>//出现一个弹窗
<!-- 没有跳转对象的超链接,之前href的属性值写的是 #
执行效果是点击超链接,会跳转至页面的顶部
现在href的属性值,写的是 JavaScript:;
没有任何执行效果,不会有任何的跳转
-->
<a href="JavaScript:;">我就是随便写写的超链接</a>
<script>
function fun2(){
const oA = document.querySelector('#a1');
oA.style.color = 'orange';
}
</script>
</body>
</html>