<!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>

JavaScript语法形式1行内式的更多相关文章

  1. 0008 CSS初识（行内式、内部样式表、外部样式表）

    typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...

  2. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. js行内式遇到的一些问题 DOM对象和jq对象转换的问题

    这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但是却遇到一个问题,一直选不到触发事件这个 ...

  4. Angular 行内式依赖注入

    var app = angular.module('myApp', ['ng']); //创建一个自定义服务app.factory('$Debug', function () { return { d ...

  5. JavaScript的DOM_操作行内样式

    一.检测浏览器是否支持css CSS 作为(X)HTML 的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的 CSS 能力.CSS 的能力和 DOM 级别密切相关,所以我们有必要检测当前浏 ...

  6. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  7. JS——行内式注册事件

    html中行内调用function的时候,是通过window调用的function,所以打印this等于打印window,所以在使用行内注册事件时务必传入参数this <!DOCTYPE htm ...

  8. !important覆写css行内样式

    <div class="block"> <span style="font-weight: bold; color: red;">Hel ...

  9. 第48天学习打卡（HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 ）

    行内元素和块元素 块元素 ​ 无论内容多少,该元素独占一行 ​ (p.h1-h6) 行内元素 ​ 内容撑开宽度,左右都是行内元素的可以排在一行 ​ (a.strong.em...) 列表 什么是列表 ...

  10. md语法之行内代码和代码片续集

    md语法之行内代码和代码片 一行之内嵌入一小段代码, 简称行内代码. 其方法为: 用撇号把代码围起来. 比如: import numpy as ny就可以了. 代码片的方法: 三个连续的撇号+pyth ...

随机推荐

  1. 阿里巴巴云原生大数据运维平台 SREWorks 正式开源

    ​简介:阿里巴巴云原生大数据运维平台 SREWorks,沉淀了团队近10年经过内部业务锤炼的 SRE 工程实践,今天正式对外开源,秉承"数据化.智能化"运维思想,帮助运维行业更多的 ...

  2. Flink 在爱奇艺广告业务的实践

    简介: 5 月 22 日北京站 Flink Meetup 分享的议题. 本文整理自爱奇艺技术经理韩红根在 5 月 22 日北京站 Flink Meetup 分享的议题<Flink 在爱奇艺广告业 ...

  3. 编码原则 : DRY, KISS, YAGNI, S.O.L.I.D

    Dont Repeat Yourself. Keep is Simple, Stupid. You Ain't Gonna Need It.  你不需要它 ( 不试图添加你认为以后可能需要的代码,适可 ...

  4. dotnet 在 UOS 统信系统上运行 UNO 程序输入时闪烁黑屏问题

    本文记录我在虚拟机内安装了 UOS 统信系统,运行 UNO 的基于 Skia 的 Gtk 应用程序时,在输入的过程中不断窗口闪黑问题 本质上说这个问题和 UNO 毫无关系,这是一个 OpenGL 硬件 ...

  5. OpenTK 垂直同步对刷新率的影响

    本文将和大家介绍 Vsync 垂直同步的开启对 OpenTK 应用的刷新率的影响 在上一篇博客 OpenTK 入门 初始化窗口 告诉了大家如何初始化 OpenTK 承载 OpenGL 的窗口的应用,在 ...

  6. NopCommerce支持多种类型的数据库

    本文章的内容是根据本人阅读NopCommerce源码的理解,如有不对的地方请指正,谢谢. 阅读目录 1.类结构关系图 2.分析 3.NopCommerce应用 类结构关系图 分析 NopObjectC ...

  7. 为什么需要学习ITSM/ITIL

    假如你需要管理一个超过20人的IT服务组织,一般会面临以下问题: 人多事杂活重,每个人都很累,工作却还是一团糟糕, 用户方怨声载道,领导也颇有微词,同事间也经常互相甩锅埋坑, 工作只是救火或者混日子, ...

  8. Python中强大的通用ORM框架：SQLAlchemy

    Python中强大的通用ORM框架:SQLAlchemy https://zhuanlan.zhihu.com/p/444930067

  9. Linux查看文件指定行数内容与查找文件内容

    Linux查看文件指定行数内容 1.tail date.log 输出文件末尾的内容,默认10行 tail -20 date.log 输出最后20行的内容 tail -n -20 date.log 输出 ...

  10. Swift中的Tuple类型

    Swift中的Tuple类型可以包含任何值,并且这些值的类型可以互相不一样.Tuple本身比较简单,需要记得也就是访问Tuple的方式. 使用变量名访问 let http404Error = (404 ...