多语言笔记系列之:在 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>