多语言笔记系列：Polyglot Notebooks 中使用 Html

bicijinlian

已于 2023-05-27 17:20:51 修改

阅读量140

点赞数

分类专栏： Polyglot Notebooks 教程文章标签： html javascript 前端

于 2023-05-27 17:18:17 首次发布

本文链接：https://blog.csdn.net/bicijinlian/article/details/130903333

版权

Polyglot Notebooks 教程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

多语言笔记系列之：在 Polyglot Notebooks 中使用 Html

方式一：纯(传统)html方式

<!-- 主动声明单元格为 html 单元格，可以省略后在右下方选择！ -->
#!html

hellow html !

使用：完整html文档

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完整html文档</title>
</head>
<body>
    <div>
        hello, html !
    </div>
</body>
</html>

使用：html片断

<!-- html片断，与完整html文档用法基本一样 -->
#!html

<div>
    使用html片断
</div>

使用：行内(内联)样式

#!html
<!-- 使用内联(行内)样式 -->
<div style="background-color: purple; padding: 50px;">
    <div style="width:400px; height:100px; line-height: 96px; margin: 0 auto; border: 2px solid darkorange; background-color: cadetblue; text-align: center; font-size: 25px;">
    使用 <strong>行内</strong> 样式
    </div>
</div>

使用：内部样式

#!html
<!-- 使用内部样式 -->
<style>
    .outer {
        background-color: purple; 
        padding: 50px;
    }
    .inner {
        width:400px; 
        height:100px; 
        line-height: 96px; 
        margin: 0 auto; 
        border: 2px solid darkorange; 
        background-color: cadetblue; 
        text-align: center; 
        font-size: 25px;
    }
</style>
<div class="outer">
    <div class="inner">
    使用 <strong>内部</strong> 样式
    </div>
</div>

引用：外部样式表文件

#!html
<!-- 引用外部样式表文件 -->
<link rel="stylesheet" href="./WebSite/css/demo.css">
<div class="demo-outer">
    <div class="demo-inner">
    引用 <strong>外部</strong> 样式表文件
    </div>
</div>

使用：嵌入式 javascript ［基本不用］

#!html
<!-- 嵌入式 javascript -->
<div 
    style="background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;" 
    onclick='event.currentTarget.style.backgroundColor="chocolate";'>
    点我改变背景变色
</div>

使用行内 javascript

#!html
<!-- 行内 javascript -->
<div id="js-test"
    style="background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;" 
    onclick='event.currentTarget.style.backgroundColor="chocolate";'>
    点我切换背景颜色
</div>
<script>
    var flag =false;
    document.getElementById("js-test").onclick = function()
    {
        if(flag)
        {
            event.currentTarget.style.backgroundColor = "goldenrod";
        }
        else
        {
            event.currentTarget.style.backgroundColor = "green";
        }
        flag = !flag;
    };
</script>

引用：外部 javascript 文件

#!html
<!-- 行内 javascript -->
<div id="js-file-test"
    style="background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;" 
    onclick='event.currentTarget.style.backgroundColor="chocolate";'>
    点我切换背景颜色
</div>
<script src="./WebSite/js/index.js"></script>

引用：外部html文件

有问题：html中引用的外部css文件、js文件路径要相对于笔记本文件而不是html本身的路径。这点特别恶心，目前没找到完美的解决方法。可以入两次暂时解决演示用或者笔记与html文件同目录！

#!html
<!-- 直接使用外部html文件 -->
#!import ./WebSite/index.html

方式二：结合 asp.net 的 Razor方式

注意：此方法动态生成html，可以操作数据库、请求第三方接口等，也可以使用共享变量，非常方便。

// 添加包源(省略即使用默认nuget包源)
#i "nuget:https://api.nuget.org/v3/index.json"

// 引用Razor包
#r "nuget: RazorInteractive"

#!razor

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记本直接引用外部 html 文件</title>
    <!-- 相对于notebook文件的路径 -->
    <link rel="stylesheet" href="./WebSite/css/index.css">
    <script>
    function GetRandomColor() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
    
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    function RandomColor(event) {
        event.currentTarget.style.backgroundColor = GetRandomColor();
    };
</script>
</head>
<body>
    <div class="container">
        @{
            for(int i=1;i<=7; i++)
            {
                <div class="@($"item item{i}")"></div>
            }
        }
    </div>
</body>
<script src="./WebSite/js/index.js"></script>
</html>