第一周、课时2：js引入到页面的方式和细节

最新推荐文章于 2019-06-02 22:53:42 发布

ruirui_1996

最新推荐文章于 2019-06-02 22:53:42 发布

阅读量294

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ruirui_1996/article/details/77884808

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

js引入到页面的方式和细节

导入css的方式：

行内样式：<div id="div" style="width: 100px;"></div>
内嵌式：将css样式写在style标签块里，放在head中：

    <style type="text/css">
       #div {
           height: 100px;
       }
    </style>

外链式：<link rel="stylesheet" href="css/123.css" type="text/css" />
导入式：@import "css/index.css";

导入js的方式：

行内引用：<div onclick="alert('welcome to Beijing!');"></div>不推荐，安全性能比较低
内嵌式：

<script type="text/javascript">
    var s = 100;
</script>

外链式：<script type="text/javascript" src="js/123.js"></script>

在外链式中，script脚本块中间不可以写js代码，写了也不执行。
通常将js放在body的最后面，原因是：html页面是从上到下加载的，js通常是获取html标签给予动态操作效果的，所以需要先加载html标签，再加载js。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div {
            height: 100px;
        }
        @import "css/index.css";
    </style>
    <link rel="stylesheet" href="css/123.css" type="text/css" />
    <script type="text/javascript" src="js/123.js"></script>
</head>
<body>
<div id="div" style="width: 100px;"></div>
<div onclick="alert('welcome to Beijing!');"></div>
<script type="text/javascript">
    alert("内容"); //在浏览器中弹出框显示内容
    document.write("内容"); //在页面中显示内容
    console.log("内容"); //在控制台输出内容
    innerHTML / innerText //向指定元素中动态添加内容
</script>
</body>
</html>

ruirui_1996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一周、课时2：js引入到页面的方式和细节

js引入到页面的方式和细节导入css的方式：行内样式：<div id="div" style="width: 100px;"></div>内嵌式：将css样式写在style标签块里，放在head中： <style type="text/css"> #div { height: 100px; } </style>外链式：<link
复制链接

扫一扫

专栏目录