{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "在笔记本中使用 Hmtl\n",
    "==========================="
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "> 特别注意:css里的样式,可能影响整个笔记本,比如说给html元素添加背景,整个笔记文档背景都变了!可以变相设置整个笔记文档了。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 46,
   "metadata": {
    "dotnet_interactive": {
     "language": "html"
    },
    "polyglot_notebook": {
     "kernelName": "html"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\r\n",
       "<html lang=\"en\">\r\n",
       "<head>\r\n",
       "    <meta charset=\"UTF-8\">\r\n",
       "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n",
       "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n",
       "    <title>当flex布局遇到自动margin</title>\r\n",
       "    <link rel=\"stylesheet\" href=\"./index.css\">\r\n",
       "    <style>\r\n",
       "        /*#region*/\r\n",
       "        .container {\r\n",
       "            width: 800px;\r\n",
       "            min-height: 400px;\r\n",
       "            margin: 20px auto;\r\n",
       "\r\n",
       "            background-color: rgb(132, 121, 110);\r\n",
       "\r\n",
       "            display: flex;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item {\r\n",
       "            text-align: center;\r\n",
       "            font-size: 30px;\r\n",
       "        }\r\n",
       "\r\n",
       "        /* 子项的宽高\r\n",
       "            是精心设计过的,大小不一、有无设置不同,只有这样才能测试出各种情况。统一宽高的情况下,变得简单了却难以测试。\r\n",
       "        */\r\n",
       "\r\n",
       "        /* 子项的文本内容\r\n",
       "            也是精心设计过的,x便于观察基线(baseline)、g下部凸出、j是全高字符等,便于测试,否则aling-itme:baseline等测试不出来效果。\r\n",
       "        */\r\n",
       "        .item1 {\r\n",
       "            height: 150px;\r\n",
       "\r\n",
       "            background-color: blueviolet;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item2 {\r\n",
       "            /* width: 200px;\r\n",
       "            height: 200px; */\r\n",
       "\r\n",
       "            background-color: green;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item3 {\r\n",
       "            font-size: 100px;\r\n",
       "            width: 250px;\r\n",
       "            height: 150px;\r\n",
       "            background-color: skyblue;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item4 {\r\n",
       "            width: 200px;\r\n",
       "            height: 200px;\r\n",
       "\r\n",
       "            background-color: coral;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item5 {\r\n",
       "            width: 200px;\r\n",
       "            height: 100px;\r\n",
       "            background-color: deeppink;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item6 {\r\n",
       "            background-color: forestgreen;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item7 {\r\n",
       "            width: 200px;\r\n",
       "            height: 120px;\r\n",
       "            background-color: saddlebrown;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item2::after,.item6::after {\r\n",
       "            content: \"无高\";\r\n",
       "        }\r\n",
       "\r\n",
       "        .item1::after,.item4::after {\r\n",
       "            content: \"无宽\";\r\n",
       "            \r\n",
       "        }\r\n",
       "        /* #endregion */\r\n",
       "    </style>\r\n",
       "</head>\r\n",
       "<body>\r\n",
       "    <div class=\"container\">\r\n",
       "        <div class=\"item item1\">x</div>\r\n",
       "        <div class=\"item item2\">x</div>\r\n",
       "        <div class=\"item item3\">\r\n",
       "            xgj3\r\n",
       "        </div>\r\n",
       "    </div>\r\n",
       "\r\n",
       "    <div class=\"container\">\r\n",
       "        <div class=\"item item1\">x</div>\r\n",
       "        <div class=\"item item2\">x</div>\r\n",
       "        <div class=\"item item3\">\r\n",
       "            xgj3\r\n",
       "        </div>\r\n",
       "\r\n",
       "        <div class=\"item item4\">x</div>\r\n",
       "\r\n",
       "        <div class=\"item item5\">\r\n",
       "            xgj5\r\n",
       "        </div>\r\n",
       "\r\n",
       "        <div class=\"item item6\">x</div>\r\n",
       "\r\n",
       "        <div class=\"item item7\">\r\n",
       "            xgj7\r\n",
       "        </div>\r\n",
       "    </div>\r\n",
       "    <script src=\"./index.js\"></script>\r\n",
       "    <script>\r\n",
       "        console.log('hello from JavaScript!');\r\n",
       "    </script>\r\n",
       "</body>\r\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\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>当flex布局遇到自动margin</title>\n",
    "    <link rel=\"stylesheet\" href=\"./index.css\">\n",
    "    <style>\n",
    "        /*#region*/\n",
    "        .container {\n",
    "            width: 800px;\n",
    "            min-height: 400px;\n",
    "            margin: 20px auto;\n",
    "\n",
    "            background-color: rgb(132, 121, 110);\n",
    "\n",
    "            display: flex;\n",
    "        }\n",
    "\n",
    "        .item {\n",
    "            text-align: center;\n",
    "            font-size: 30px;\n",
    "        }\n",
    "\n",
    "        /* 子项的宽高\n",
    "            是精心设计过的,大小不一、有无设置不同,只有这样才能测试出各种情况。统一宽高的情况下,变得简单了却难以测试。\n",
    "        */\n",
    "\n",
    "        /* 子项的文本内容\n",
    "            也是精心设计过的,x便于观察基线(baseline)、g下部凸出、j是全高字符等,便于测试,否则aling-itme:baseline等测试不出来效果。\n",
    "        */\n",
    "        .item1 {\n",
    "            height: 150px;\n",
    "\n",
    "            background-color: blueviolet;\n",
    "        }\n",
    "\n",
    "        .item2 {\n",
    "            /* width: 200px;\n",
    "            height: 200px; */\n",
    "\n",
    "            background-color: green;\n",
    "        }\n",
    "\n",
    "        .item3 {\n",
    "            font-size: 100px;\n",
    "            width: 250px;\n",
    "            height: 150px;\n",
    "            background-color: skyblue;\n",
    "        }\n",
    "\n",
    "        .item4 {\n",
    "            width: 200px;\n",
    "            height: 200px;\n",
    "\n",
    "            background-color: coral;\n",
    "        }\n",
    "\n",
    "        .item5 {\n",
    "            width: 200px;\n",
    "            height: 100px;\n",
    "            background-color: deeppink;\n",
    "        }\n",
    "\n",
    "        .item6 {\n",
    "            background-color: forestgreen;\n",
    "        }\n",
    "\n",
    "        .item7 {\n",
    "            width: 200px;\n",
    "            height: 120px;\n",
    "            background-color: saddlebrown;\n",
    "        }\n",
    "\n",
    "        .item2::after,.item6::after {\n",
    "            content: \"无高\";\n",
    "        }\n",
    "\n",
    "        .item1::after,.item4::after {\n",
    "            content: \"无宽\";\n",
    "            \n",
    "        }\n",
    "        /* #endregion */\n",
    "    </style>\n",
    "</head>\n",
    "<body>\n",
    "    <div class=\"container\">\n",
    "        <div class=\"item item1\">x</div>\n",
    "        <div class=\"item item2\">x</div>\n",
    "        <div class=\"item item3\">\n",
    "            xgj3\n",
    "        </div>\n",
    "    </div>\n",
    "\n",
    "    <div class=\"container\">\n",
    "        <div class=\"item item1\">x</div>\n",
    "        <div class=\"item item2\">x</div>\n",
    "        <div class=\"item item3\">\n",
    "            xgj3\n",
    "        </div>\n",
    "\n",
    "        <div class=\"item item4\">x</div>\n",
    "\n",
    "        <div class=\"item item5\">\n",
    "            xgj5\n",
    "        </div>\n",
    "\n",
    "        <div class=\"item item6\">x</div>\n",
    "\n",
    "        <div class=\"item item7\">\n",
    "            xgj7\n",
    "        </div>\n",
    "    </div>\n",
    "    <script src=\"./index.js\"></script>\n",
    "    <script>\n",
    "        console.log('hello from JavaScript!');\n",
    "    </script>\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 测试下"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 64,
   "metadata": {
    "dotnet_interactive": {
     "language": "html"
    },
    "polyglot_notebook": {
     "kernelName": "html"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\r\n",
       "<html lang=\"en\">\r\n",
       "<head>\r\n",
       "    <meta charset=\"UTF-8\">\r\n",
       "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n",
       "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n",
       "    <title>当flex布局遇到自动margin</title>\r\n",
       "    <link rel=\"stylesheet\" href=\"./index.css\">\r\n",
       "    <style>\r\n",
       "        /* #region */\r\n",
       "        .container {\r\n",
       "            width: 800px;\r\n",
       "            min-height: 400px;\r\n",
       "            margin: 20px auto;\r\n",
       "\r\n",
       "            background-color: rgb(132, 121, 110);\r\n",
       "\r\n",
       "            display: flex;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item {\r\n",
       "            text-align: center;\r\n",
       "            font-size: 30px;\r\n",
       "        }\r\n",
       "\r\n",
       "        /* 子项的宽高\r\n",
       "            是精心设计过的,大小不一、有无设置不同,只有这样才能测试出各种情况。统一宽高的情况下,变得简单了却难以测试。\r\n",
       "        */\r\n",
       "\r\n",
       "        /* 子项的文本内容\r\n",
       "            也是精心设计过的,x便于观察基线(baseline)、g下部凸出、j是全高字符等,便于测试,否则aling-itme:baseline等测试不出来效果。\r\n",
       "        */\r\n",
       "        .item1 {\r\n",
       "            height: 150px;\r\n",
       "\r\n",
       "            background-color: blueviolet;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item2 {\r\n",
       "            /* width: 200px;\r\n",
       "            height: 200px; */\r\n",
       "\r\n",
       "            background-color: green;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item3 {\r\n",
       "            font-size: 100px;\r\n",
       "            width: 250px;\r\n",
       "            height: 150px;\r\n",
       "            background-color: skyblue;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item4 {\r\n",
       "            width: 200px;\r\n",
       "            height: 200px;\r\n",
       "\r\n",
       "            background-color: coral;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item5 {\r\n",
       "            width: 200px;\r\n",
       "            height: 100px;\r\n",
       "            background-color: deeppink;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item6 {\r\n",
       "            background-color: forestgreen;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item7 {\r\n",
       "            width: 200px;\r\n",
       "            height: 120px;\r\n",
       "            background-color: saddlebrown;\r\n",
       "        }\r\n",
       "\r\n",
       "        .item2::after,.item6::after {\r\n",
       "            content: \"无高\";\r\n",
       "        }\r\n",
       "\r\n",
       "        .item1::after,.item4::after {\r\n",
       "            content: \"无宽\";\r\n",
       "            \r\n",
       "        }\r\n",
       "        /* #endregion */\r\n",
       "    </style>\r\n",
       "</head>\r\n",
       "<body>\r\n",
       "    <div class=\"container\">\r\n",
       "        <div class=\"item item1\">x</div>\r\n",
       "        <div class=\"item item2\">x</div>\r\n",
       "        <div class=\"item item3\">\r\n",
       "            xgj3\r\n",
       "        </div>\r\n",
       "    </div>\r\n",
       "\r\n",
       "    <div class=\"container\">\r\n",
       "        <div class=\"item item1\">x</div>\r\n",
       "        <div class=\"item item2\">x</div>\r\n",
       "        <div class=\"item item3\">\r\n",
       "            xgj3\r\n",
       "        </div>\r\n",
       "\r\n",
       "        <div class=\"item item4\">x</div>\r\n",
       "\r\n",
       "        <div class=\"item item5\">\r\n",
       "            xgj5\r\n",
       "        </div>\r\n",
       "\r\n",
       "        <div class=\"item item6\">x</div>\r\n",
       "\r\n",
       "        <div class=\"item item7\">\r\n",
       "            xgj7\r\n",
       "        </div>\r\n",
       "    </div>\r\n",
       "    <script src=\"./index.js\"></script>\r\n",
       "</body>\r\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#!import ./index.html"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  },
  "orig_nbformat": 4
 },
 "nbformat": 4,
 "nbformat_minor": 2
}