连接一个JavaScript文件

news2024/10/5 21:24:11

● 首先,本章我们会使用一个起始文件,代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JavaScript Fundamentals – Part 1</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(to top left, #28b487, #7dd56f);
      }
      h1 {
        font-family: sans-serif;
        font-size: 50px;
        line-height: 1.3;
        width: 100%;
        padding: 30px;
        text-align: center;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript Fundamentals – Part 1</h1>
  </body>
</html>

● 这是一段非常非常简单的HTML代码,只有一个H1的文本,然后通过内联式CSS,设置文本的字体、大小、行高、宽度、间距、居中、颜色,并设置了整个页面的高度、布局、居中、背景渐变

● 还记得上一节课程的一段简单javascript吗?我们也可以使用内联加入到HTML中,记住,内联式并不是一个良好的现实开发方式

在这里插入图片描述

注:记住,JS在head中,会优先执行与body里面的代码,点击确定之后才会运行body里面的代码

● 除此之外,在JavaScript中我们也可以使用一段代码,让其给我们在控制台中进行计算

 console.log(45+85-12);

在这里插入图片描述

● 当然除此之外,我们更好的方式是叫JavaScript放在一个外部的单独的文件中,然后在HTML中去连接她
○ 首先创建我们的js文件
在这里插入图片描述

○ 然后将我们内联的JavaScript复制到script.js中,然后删除掉HTML中的script标签
在这里插入图片描述

● 之后在HTML连接这个script.js这个文件

<script src="script.js"></script>

在这里插入图片描述

这样仍然可以正常运行;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/752101.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LAXCUS分布式操作系统存在的意义和价值

总有一些新用户不能理解LAXCUS分布式操作系统&#xff0c;以及它存在的意义和价值&#xff0c;我这样说吧。 下图是一个图形桌面&#xff08;LAXCUS的图形桌面&#xff0c;不是Windows、也不是Macintosh&#xff09;&#xff0c;在它后面&#xff0c;连着一个计算机集群&#…

阿里云无影云电脑价格_企业办公型1元_云桌面入口

阿里云无影云电脑配置费用&#xff0c;4核8G企业办公型云电脑可以免费使用3个月&#xff0c;无影云电脑地域不同费用不同&#xff0c;无影云电脑是由云桌面配置、云盘、互联网访问带宽、AD Connector、桌面组共用桌面session等费用组成&#xff0c;阿里云百科分享阿里云无影云电…

列表状态值转换,状态码对应文字处理

项目中经常遇到&#xff0c;在新增及编辑的时候&#xff0c;我们根据下拉框选择状态时候&#xff0c;在列表或者详情&#xff0c;我们得根据状态码/值&#xff0c;显示对应的文字&#xff0c;这时候&#xff0c;我们就需要对值进行格式处理&#xff0c;效果如下&#xff1a; 我…

【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览,拖拽导致图片预览不完整问题

现象 el-dialog 内使用 el-image 并添加 preview-src-list 预览&#xff0c;拖拽导致图片预览不完整 <el-dialogwidth"500"v-model"visible":title"activeProp?.name"close"handleClose":draggable"true" // 可拖拽al…

归并排序与计数排序

目录 1.什么是归并排序 2.归并排序的实现 3.归并排序的非递归实现 4.计数排序 1.什么是归并排序 归并排序&#xff08;MERGE-SORT&#xff09;是利用归并的思想实现的排序方法&#xff0c;该算法采用经典的 分治&#xff08;divide-and-conquer&#xff09;策略 &…

服务保护 Sentinel

服务保护 Sentinel Sentinel 介绍Sentinel 的下载使用Sentinel 流控规则流控规则介绍流控规则演示 Sentinel 热点规则Sentinel 隔离和熔断降级Feign 整合 Sentinel线程隔离熔断降级 Sentinel 授权规则Sentinel 系统规则Sentinel 自定义异常Sentinel 资源定义url 默认资源抛出异…

Linux常用命令——emacs命令

在线Linux命令查询工具 emacs 功能强大的全屏文本编辑器 补充说明 emacs命令是由GNU组织的创始人Richard Stallman开发的一个功能强大的全屏文本编辑器&#xff0c;它支持多种编程语言&#xff0c;具有很多优良的特性。有众多的系统管理员和软件开发者使用emacs。 语法 e…

线性磁悬浮多输入多输出(MIMO)系统的线性系统控制器设计、实现和分析(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 ​磁悬浮列车作为一种新型地面交通工具,已经在实践中得到了成功的应用。传统的EMS型磁悬浮系统在结构上简单可靠,而且在技术上…

学习C#基础知识和应用:

C#语言基础知识&#xff1a;了解C#的开发环境、变量、语法和程序结构等基础内容。这些知识是理解和开发C#自动化控制系统的前提。刚好&#xff0c;我这里有上位机入门&#xff0c;学习线路图&#xff0c;各种项目&#xff0c;需要留个6。 Winform窗体控件的应用&#xff1a;Wi…

京东零售 / hotkey 热点key探测工具使用

1、安装etcd 在etcd下载页面下载对应操作系统的etcd&#xff0c;https://github.com/etcd-io/etcd/releases 使用3.4.x以上。 2、启动worker&#xff08;集群&#xff09; 下载并编译好代码&#xff0c;将worker打包为jar&#xff0c;启动即可。如&#xff1a; java -jar $J…

北邮国院物联网 Microprocessor 微处理器笔记

Introduction-随便聊 嵌入式系统是什么&#xff1f;专用的计算机系统。为专门功能可能对计算机架构&#xff0c;外设等做出一些取舍。 通常的限制&#xff1a;Cost&#xff08;比如大量部署传感器节点&#xff09;&#xff0c;Size and weight limits&#xff08;特定应用场景…

PHP代码审计(一)之PHP代码审计的意义

PHP代码审计的意义 什么是代码审计 什么是代码审计&#xff1f;代码审计就是获取目标的源代码&#xff0c;这个目标可以是一个网站&#xff0c;也可以是一个手机app&#xff0c;只要我们得到了目标的源代码&#xff0c;我们就可以去挖掘目标系统的漏洞&#xff0c;代码审计是…

详解Jenkins配置邮件通知

前言 这几天Darren洋在使用Jenkins定时构建jmeter脚本中&#xff0c;要用到邮箱配置&#xff0c;故记录之。 一、Jenkins默认邮箱通知 这里填好smtp服务器地址和邮箱后缀&#xff0c;这样下面的账号就不用加邮箱后缀了。 网易邮箱设置以下我就不说废话文学了&#xff0c;直接上…

从零搭建ros间的通信,各功能包、节点之间的通信

新建消息类型 catkin_create_pkg car_interfaces roscpp rospy std_msgs message_generation message_runtime书写自定义的msg&#xff1a; 比如我写一个GlobalPathPlanningInterface.msg&#xff1a; float64 timestamp #时间戳 float32[] startpoint #起点位置&#x…

【技能实训】DMS数据挖掘项目-Day01

文章目录 任务1 项目准备一、开发环境二、系统简介三、项目创建 任务2【任务2.1】菜单项设计及其测试【任务2.2】使用数组存储采集的数据【任务2.3】控制显示采集的数据 任务1 项目准备 一、开发环境 1.JDK8下载及其环境变量配置(JDK8以上版本) 2.IDE &#xff1a;Eclipse 或…

马可·坎图 (Marco Cantú) 荣获尼克劳斯·沃斯奖 (Niklaus Wirth Award) Pascal最具价值贡献者奖

我们非常高兴地宣布&#xff0c;我们自己的Marco Cant荣获由西班牙萨拉曼卡大学主办的国际Pascal大会颁发的Niklaus Wirth奖。 评审团的引文最后这样一句话&#xff1a;“ Marco Cant 是Pascal社区最杰出、最原创、最杰出的人物之一”。我不认为我们自己可以说得更好。 国际Pa…

rabbitmq使用笔记

前言 mq的优点&#xff1a;异步提速、解耦、流量削峰 mq的缺点&#xff1a; mq宕机可能导致消息丢失、消费者未成功消费如果保证整个系统架构的事务安全、消息可能被重复消费出现幂等问题、消息未被消费到引发死信问题、消息出现消费延迟或消费异常引发的顺序消费错乱问题...…

Linux 修改网卡 MAC 地址

使用 iproute2 修改网卡 MAC 地址 1. 使用如下命令查看当前所有网卡及其 MAC 地址&#xff1b; sudo ip link show2. 如笔者这里想要修改网卡 ens224 的 MAC 地址&#xff0c;先使用如下命令关闭该网卡&#xff1b; sudo ip link set dev ens224 down3. 设置该网卡的 MAC 地…

阿里云:机器学习平台及OpenSearch

机器学习流程 相关项目 BladeDISC-AI编译优化 EasyRec-推荐算法库 EasyCV-视觉图像算法库 EasyNLP-NLP/多模态算法库 模型开发中算法团队面临的工程挑战 Develop platform OpenSearch 向量检索库

亚马逊云科技迁移只需5个简单步骤(2023年迁移到云)

您是否正在考虑亚马逊云科技迁移&#xff0c;并将本地项目迁移到云中&#xff1f; 但是不知道从哪里开始以及如何去做&#xff1f; 在这篇文章中&#xff0c;我将指导您完成亚马逊云科技迁移。 什么是亚马逊云科技&#xff1f; 亚马逊云科技或亚马逊网络服务是最受欢迎的云平…