StudyGroup
/
PolyglotNotebooksStudy
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '456dc2d483'
${ noResults }
PolyglotNotebooksStudy/Docs/多语言笔记.9.1.使用html.ipynb

480 lines
11 KiB
Plaintext
Raw Blame History Unescape Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{
"cells": [
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"在多语言笔记本中使用 html\n",
"======================="
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## 方式一：纯(传统)html方式"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### hello html"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"<!-- 主动声明单元格为 html 单元格，可以省略后在右下方选择！ -->\n",
"#!html\n",
"\n",
"hellow html !\n"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：完整html文档"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"<!DOCTYPE html>\n",
"<html lang=\"zh-CN\">\n",
"<head>\n",
" <meta charset=\"UTF-8\">\n",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
" <title>完整html文档</title>\n",
"</head>\n",
"<body>\n",
" <div>\n",
" hello, html !\n",
" </div>\n",
"</body>\n",
"</html>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：html片断"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"<!-- html片断，与完整html文档用法基本一样 -->\n",
"#!html\n",
"\n",
"<div>\n",
" 使用html片断\n",
"</div>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：行内(内联)样式"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 使用内联(行内)样式 -->\n",
"<div style=\"background-color: purple; padding: 50px;\">\n",
" <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;\">\n",
" 使用 <strong>行内</strong> 样式\n",
" </div>\n",
"</div>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：内部样式"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 使用内部样式 -->\n",
"<style>\n",
" .outer {\n",
" background-color: purple; \n",
" padding: 50px;\n",
" }\n",
" .inner {\n",
" width:400px; \n",
" height:100px; \n",
" line-height: 96px; \n",
" margin: 0 auto; \n",
" border: 2px solid darkorange; \n",
" background-color: cadetblue; \n",
" text-align: center; \n",
" font-size: 25px;\n",
" }\n",
"</style>\n",
"<div class=\"outer\">\n",
" <div class=\"inner\">\n",
" 使用 <strong>内部</strong> 样式\n",
" </div>\n",
"</div>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 引用：外部样式表文件"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 引用外部样式表文件 -->\n",
"<link rel=\"stylesheet\" href=\"./WebSite/css/demo.css\">\n",
"<div class=\"demo-outer\">\n",
" <div class=\"demo-inner\">\n",
" 引用 <strong>外部</strong> 样式表文件\n",
" </div>\n",
"</div>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：嵌入式 javascript ［基本不用］"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 嵌入式 javascript -->\n",
"<div \n",
" style=\"background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;\" \n",
" onclick='event.currentTarget.style.backgroundColor=\"chocolate\";'>\n",
" 点我改变背景变色\n",
"</div>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用行内 javascript"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 行内 javascript -->\n",
"<div id=\"js-test\"\n",
" style=\"background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;\" \n",
" onclick='event.currentTarget.style.backgroundColor=\"chocolate\";'>\n",
" 点我切换背景颜色\n",
"</div>\n",
"<script>\n",
" var flag =false;\n",
" document.getElementById(\"js-test\").onclick = function()\n",
" {\n",
" if(flag)\n",
" {\n",
" event.currentTarget.style.backgroundColor = \"goldenrod\";\n",
" }\n",
" else\n",
" {\n",
" event.currentTarget.style.backgroundColor = \"green\";\n",
" }\n",
" flag = !flag;\n",
" };\n",
"</script>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 引用：外部 javascript 文件"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 行内 javascript -->\n",
"<div id=\"js-file-test\"\n",
" style=\"background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;\" \n",
" onclick='event.currentTarget.style.backgroundColor=\"chocolate\";'>\n",
" 点我切换背景颜色\n",
"</div>\n",
"<script src=\"./WebSite/js/index.js\"></script>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 引用：外部html文件"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"有问题：html中引用的外部css文件、js文件路径要相对于笔记本文件而不是html本身的路径。这点特别恶心，目前没找到完美的解决方法。可以入两次暂时解决演示用或者笔记与html文件同目录！"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 直接使用外部html文件 -->\n",
"#!import ./WebSite/index.html"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## 方式二：结合 asp.net 的 Razor方式 "
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"注意：此方法动态生成html，可以操作数据库、请求第三方接口等，也可以使用共享变量，非常方便。"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"// 添加包源(省略即使用默认nuget包源)\n",
"#i \"nuget:https://api.nuget.org/v3/index.json\"\n",
"\n",
"// 引用Razor包\n",
"#r \"nuget: RazorInteractive\"\n",
"\n",
"//使用 Razor 生成 html或html片断"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"#!razor\n",
"\n",
"<!DOCTYPE html>\n",
"<html lang=\"zh-CN\">\n",
"<head>\n",
" <meta charset=\"UTF-8\">\n",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
" <title>笔记本直接引用外部 html 文件</title>\n",
" <!-- 相对于notebook文件的路径 -->\n",
" <link rel=\"stylesheet\" href=\"./WebSite/css/index.css\">\n",
" <script>\n",
" function GetRandomColor() {\n",
" var r = Math.floor(Math.random() * 255);\n",
" var g = Math.floor(Math.random() * 255);\n",
" var b = Math.floor(Math.random() * 255);\n",
" \n",
" return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n",
" }\n",
"\n",
" function RandomColor(event) {\n",
" event.currentTarget.style.backgroundColor = GetRandomColor();\n",
" };\n",
"</script>\n",
"</head>\n",
"<body>\n",
" <div class=\"container\">\n",
" @{\n",
" for(int i=1;i<=7; i++)\n",
" {\n",
" <div class=\"@($\"item item{i}\")\"></div>\n",
" }\n",
" }\n",
" </div>\n",
"</body>\n",
"<script src=\"./WebSite/js/index.js\"></script>\n",
"</html>"
]
}
],
"metadata": {
"kernelspec": {
"display_name": ".NET (C#)",
"language": "C#",
"name": ".net-csharp"
},
"language_info": {
"name": "polyglot-notebook"
},
"orig_nbformat": 4,
"polyglot_notebook": {
"kernelInfo": {
"defaultKernelName": "csharp",
"items": [
{
"aliases": [],
"name": "csharp"
},
{
"aliases": [],
"name": "razor"
}
]
}
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Reference in New Issue View Git Blame Copy Permalink