web全栈开发学习-01html基础
背景
最近在付费网站学习web全栈开发，记录一下阶段性学习。今天刚好学完html基础，跟着教程画了个基础的网站。
样品展示:
开发工具
vscode
Visual Studio Code - Code Editing. Redefined
常用插件
Prettier：格式优化
Live Sever:实时调试
Material Theme：主题增强显示效果
常用网站
HTML 中引入 CSS 的方式 | 菜鸟教程
可视化：饼图 | Charts | Google for Developers
CSS Default Browser Values for HTML Elements
https://github.com/hustcc/canvas-nest.js/
代码
index.html
<!DOCTYPE html>
<html lang="zh-Hant"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>围棋资讯网</title></head><body><scripttype="text/javascript"color="0,0,0"opacity="0.3"zIndex="-2"count="199"src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script><header><div class="Top"><h1>围棋资讯网</h1><h3>这是一种策略棋类</h3><nav><ul><li><a class="active" href="#">网站首页</a></li><li><a href="./chinaweb.html">中国棋院棋院</a></li><li><a href="./japanweb.html">日本棋院</a></li><li><a href="./koreaweb.html">韩国棋院</a></li></ul></nav></div><div></div></header><main><section class="left"><h3>围棋性质</h3><figure><img src="./images/a.jpeg" alt="围棋用具" /><figcaption>（进行中的围棋）</figcaption><table><tr><td>时间:</td><td>周朝至今</td></tr><tr><td>类型:</td><td>棋盘游戏</td></tr><tr><td>代表:</td><td>柯洁</td></tr><tr><td>复杂度:</td><td>极高</td></tr></table></figure></section><section class="right"><h3>浅谈围棋</h3><p>围棋，别名弈、碁等，国际通行棋种，世界上最古老的棋类游戏之一，是具有高度文化色彩的智力竞技项目，流行于中国、日本、韩国等东亚国家。是中华民族发明的迄今最久远、最复杂的智力博弈活动之一。[1] [2][3]围棋是一种策略性二人棋类游戏，使用格状棋盘及黑白二色棋子进行对弈[78]，对局双方在棋盘的交叉点上轮流下子，每次只能下一子，落子后不能移动，终局时以目数多者为胜。因黑方有先手优势，故规定局终时黑方要贴目给白方。中日韩等不同国家制定的竞赛规则略有不同。[4][6]围棋棋理博大精深，蕴含着中华文化的丰富内涵，被列为“琴棋书画”四大文化之一，是中国文化与文明的体现。2008年，入选中国《国家级非物质文化遗产代表性项目名录》</p><p>围棋起源于中国古代 [78]，南北朝时经朝鲜半岛传入日本，流传到欧美各国。[4]1949年，中华人民共和国成立以后，围棋被列为体育竞赛项目，并于1957年起举行全国性的围棋锦标赛。[79]1988年，富士通杯和应氏杯两项世界职业围棋锦标赛相继开赛，世界围棋进入了一个新时代。[56]长期以来，围棋一直被看作是艺术、文化，而非竞技体育项目。直到2010年广州亚运会，围棋才首次成为亚运会正式比赛项目.</p><hr /><h3>历史发展</h3><p>围棋起源于中国，中国古代称为“弈”，东汉许慎《说文解字》中称：“弈，围棋也。”左传襄公二十五年疏载：“棋者所执之子，以子围而相杀，故谓之围棋。”传说围棋的起源距今已经4000余年的历史。古文献中，较早可信的则见于《左传•鲁襄公二十五年》的记载：“”弈者举棋不定，不胜其耦，而况君而弗定乎？”这表明至少在春秋时期，围棋已开始在我国使用</p><hr /><h3>比赛规则</h3><p>围棋的规则十分简单，却拥有十分广大的空间可以落子，使到围棋的变化多得数不清，比中国象棋复杂多了。这就是围棋的魅力。下一盘围棋比下一盘中国象棋一般花的时间比较多，快则十五分钟，慢则要几天，多数时候下一盘棋需要一到二个小时。多下围棋对人脑有帮助，可填强一个人的计算能力，记忆，创艺，思想能力，判断能力，精神更集中。</p><h4>基本下法</h4><ul><li>对局双方各执一色棋子，黑先白后，交替下子，每次只能下一子。</li><li>棋子下在棋盘上的空格非禁着点的交叉点上。</li><li>棋子下定后，不得再向其他位置移动。</li><li>轮流下子是双方的权利，但允许任何一方放弃下子权而使用虚着。</li></ul></section></main></body>
</html>
chinaweb.html
<!DOCTYPE html>
<html lang="zh-Hant"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>围棋资讯网 | 中国棋院</title></head><body><scripttype="text/javascript"color="0,0,0"opacity="0.3"zIndex="-2"count="199"src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script><header><div class="Top"><h1>围棋资讯网</h1><h3>这是一种策略棋类</h3><nav><ul><li><a href="./index.html">网站首页</a></li><li><a class="active" href="#">中国棋院棋院</a></li><li><a href="./japanweb.html">日本棋院</a></li><li><a href="./koreaweb.html">韩国棋院</a></li></ul></nav></div><div></div></header><main><section class="chinaweb"><p style="font-size: 1.5rem; font-weight: bolder">中国棋院</p><hr /></section><section class="chinaweb-main"><h3 style="font-size: 1.25rem">中国浅谈围棋</h3><div class="player"><h4>柯洁</h4><h5>抽象九冠王</h5><p>围棋，别名弈、碁等，国际通行棋种，世界上最古老的棋类游戏之一，是具有高度文化色彩的智力竞技项目，流行于中国、日本、韩国等东亚国家。是中华民族发明的迄今最久远、最复杂的智力博弈活动之一。[1] [2][3]围棋是一种策略性二人棋类游戏，使用格状棋盘及黑白二色棋子进行对弈[78]，对局双方在棋盘的交叉点上轮流下子，每次只能下一子，落子后不能移动，终局时以目数多者为胜。因黑方有先手优势，故规定局终时黑方要贴目给白方。中日韩等不同国家制定的竞赛规则略有不同。[4][6]围棋棋理博大精深，蕴含着中华文化的丰富内涵，被列为“琴棋书画”四大文化之一，是中国文化与文明的体现。2008年，入选中国《国家级非物质文化遗产代表性项目名录》</p><p>围棋起源于中国古代[78]，南北朝时经朝鲜半岛传入日本，流传到欧美各国。[4]1949年，中华人民共和国成立以后，围棋被列为体育竞赛项目，并于1957年起举行全国性的围棋锦标赛。[79]1988年，富士通杯和应氏杯两项世界职业围棋锦标赛相继开赛，世界围棋进入了一个新时代。[56]长期以来，围棋一直被看作是艺术、文化，而非竞技体育项目。直到2010年广州亚运会，围棋才首次成为亚运会正式比赛项目.</p></div><hr /><div class="player"><h3 style="font-size: 1.25rem">中国围棋历史发展</h3><p>围棋起源于中国，中国古代称为“弈”，东汉许慎《说文解字》中称：“弈，围棋也。”左传襄公二十五年疏载：“棋者所执之子，以子围而相杀，故谓之围棋。”传说围棋的起源距今已经4000余年的历史。古文献中，较早可信的则见于《左传•鲁襄公二十五年》的记载：“”弈者举棋不定，不胜其耦，而况君而弗定乎？”这表明至少在春秋时期，围棋已开始在我国使用</p></div><hr /><div class="player"><h3 style="font-size: 1.25rem">中国围棋比赛规则</h3><p>围棋的规则十分简单，却拥有十分广大的空间可以落子，使到围棋的变化多得数不清，比中国象棋复杂多了。这就是围棋的魅力。下一盘围棋比下一盘中国象棋一般花的时间比较多，快则十五分钟，慢则要几天，多数时候下一盘棋需要一到二个小时。多下围棋对人脑有帮助，可填强一个人的计算能力，记忆，创艺，思想能力，判断能力，精神更集中。</p></div></section></main></body>
</html>
japanweb.html
<!DOCTYPE html>
<html lang="zh-Hant"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>围棋资讯网 | 日本棋院</title><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript">google.charts.load("current", { packages: ["corechart"] });google.charts.setOnLoadCallback(drawChart);function drawChart() {var data = google.visualization.arrayToDataTable([["Task", "Hours per Day"],["Work", 11],["Eat", 2],["Commute", 2],["Watch TV", 2],["Sleep", 7],]);var options = {title: "My Daily Activities",pieHole: 0.4,};var chart = new google.visualization.PieChart(document.getElementById("donutchart"));chart.draw(data, options);}</script></head><body><scripttype="text/javascript"color="0,0,0"opacity="0.3"zIndex="-2"count="199"src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script><header><div class="Top"><h1>围棋资讯网</h1><h3>这是一种策略棋类</h3><nav><ul><li><a href="./index.html">网站首页</a></li><li><a href="./chinaweb.html">中国棋院棋院</a></li><li><a class="active" href="#">日本棋院</a></li><li><a href="./koreaweb.html">韩国棋院</a></li></ul></nav></div><div></div></header><main><section class="japan-web"><div class="japan"><div class="image"><img src="./images/japan.jpg" alt="日本棋院" /></div><div class="webinfo"><p>日本围棋，中国围棋传入到日本。历史悠久的围棋艺术起源于中国，这已为世人所公认，但确切年代尚无定论。晋人张华所撰《博物志》云：“尧造围棋，丹朱善之”，这不过是一种传说，难以为信。一般认为，最早记述围棋的文献是《左传·襄公二十五年》所载：“弈者举棋不定，不胜其耦”；《说文解字》曰：“弈，围棋也”；继《左传》之后，《论语》曰：“不有博弈者乎？为之尤贤乎已”；《孟子》记曰：“弈秋，通国之善弈者也。”可见在春秋战国时代，围棋已经流行于中国了，而且出现了弈秋这样的善弈国手。</p><p>但此说系据推考而来，并无确凿证据。</p><ul><li>东京本院</li><li>大阪本院</li><li>长崎本院</li><li>江户本院</li></ul></div></div></section><hr style="width: 100%" /><section class="competition"><div class="competition"><div class="text"><h3>围棋比赛</h3><p>除上述专业棋手的比赛外，还有名目繁多的全国性业余棋手赛。其中有：《每日新闻》社主办的1955年恢复的“业余本因坊战”、《朝日新闻》社于1961年始主办的“业余十杰战”、日本棋院主办的“女子业余冠军赛”、全日本大学围棋联盟主办的“全日本学生团体赛、个人赛、十杰赛”、全国高等学校（高等学校在日本指高中）围棋联盟主办的“全日本高校冠军赛”等等。另外，在地方报纸范围内，由各种团体主办的定期比赛不胜枚举。据日本《新世纪百科辞典》和《大日本百科事典》统计，日本围棋人口有600万人、职业棋手400人、业余棋手有段位者在100，000人以上，堪称“围棋大国”。</p><ul><li>七大战</li><li>棋圣战</li><li>名人战</li><li>本因坊战</li><li>十段战</li><li>天元战</li></ul></div><!--<div class="chart"><img src="images/korea.jpg" alt="圆饼图" /></div>--><div id="donutchart"></div></div></section></main></body>
</html>
style.css
* {padding: 0%;margin: 0%;box-sizing: border-box;
}h1,
h2,
h3,
h4,
h5 {font-weight: normal;
}header div.Top {padding: 1rem;background-image: url(./images/001.jpg);background-repeat: no-repeat;background-position: top;background-size: cover;
}header div.top h1 {font-size: 2.5rem;
}header div.top h3 {font-size: 2.5rem;
}header nav {background-color: black;
}header nav ul {display: flex;list-style-type: none;padding: 0.8rem 1.2rem;
}header nav ul li {padding: 0.8rem 1.2rem;
}nav ul li a {color: white;text-decoration: none;font-size: 1.25rem;font-weight: bolder;
}nav ul li a:hover {color: yellow;transition: all 0.3s ease;
}a.active {color: yellow;
}main {display: flex;flex-wrap: wrap;
}main section {padding: 1rem;
}section.left {flex: 1 1 200px;
}section.left img {width: 90%;
}section.left h3 {margin-bottom: 1rem;
}section.left table {margin-top: 1rem;
}section.left table,
section.left td {padding: 0.25rem;
}section.right {flex: 4 1 500px;
}section.right h3 {padding: 0.25rem;margin-top: 0.5rem;font-size: 1.25rem;
}section.right ul {margin-left: 2rem;
}p {padding: 0.25rem 0rem;
}section.chinaweb {width: 100%;
}.player h4 {font-size: 1rem;color: chartreuse;
}.player h5 {font-size: 1rem;color: blue;
}.player {margin: 2rem;padding: 0.5rem;border: 4px solid yellowgreen;
}div.japan {display: flex;flex-wrap: wrap;padding: 1rem;
}div.japan div.image {flex: 1 1 300px;display: flex;align-items: center;
}div.japan div.image img {width: 100%;
}div.japan div.webinfo {flex: 3 1 500px;
}div.competition {display: flex;flex-wrap: wrap;padding: 1rem;
}div.competition div.text h3 {color: aqua;font-size: 1.5rem;
}div.competition div.text {flex: 3 1 500px;
}div.competition div.chart {flex: 1 1 300px;display: flex;align-items: center;
}div.competition div.chart img {width: 90%;
}#donutchart {flex: 1 1 300px;
}
总结
总体来看，目前单纯从HTML来画页面，和之前WPF绘画的感觉大差不差。需要掌握一些常见的element，主要难点还是在css的绘制上面，这个问题现在ai能解决很大一部分。暂时没有数据交互的部分，这部分等我完成js的学习后再来更新。课程的最后会搭一个自己web应用，到时候会分享全部的代码~
相关文章：
web全栈开发学习-01html基础
背景 最近在付费网站学习web全栈开发，记录一下阶段性学习。今天刚好学完html基础，跟着教程画了个基础的网站。 样品展示: 开发工具 vscode Visual Studio Code - Code Editing. Redefined 常用插件 Prettier：格式优化 Live Sever:实时调…...
基于Socketserver+ThreadPoolExecutor+Thread构造的TCP网络实时通信程序
目录 介绍： 源代码： Socketserver-服务端代码 Socketserver客户端代码： 介绍： socketserver是一种传统的传输层网络编程接口，相比WebSocket这种应用层的协议来说，socketserver比较底层，soc…...
[Java 基础]枚举
枚举是一种特殊的类，表示一组固定的常量。枚举跟普通类一样可以用自己的变量、方法和构造函数，构造函数只能使用 private 访问修饰符，所以外部无法调用。 现实生活中的例子： 一周七天（MONDAY ~ SUNDAY） …...
多线程环境中，如果多个线程同时尝试向同一个TCP客户端发送数据，添加同步机制
原代码 public async Task SendToClientAsync(TcpClient targetClient, byte[] data, int offset, int length) {try{// 1. 检查客户端是否有效if (targetClient null || !targetClient.Connected){Console.WriteLine("Cannot send: client is not connected");ret…...
【含文档+PPT+源码】基于微信小程序的旅游论坛系统的设计与实现
项目介绍 本课程演示的是一款基于微信小程序的旅游论坛系统的设计与实现，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统 …...
贝叶斯优化+LSTM+时序预测=Nature子刊！
贝叶斯优化与LSTM的融合在时间序列预测领域取得了显著成效，特别是在处理那些涉及众多超参数调整的复杂问题时。 1.这种结合不仅极大提高了预测的精确度，还优化了模型训练流程，提升了效率和成本效益。超参数优化的新篇章：LSTM因其…...
NodeJS全栈WEB3面试题——P3Web3.js / Ethers.js 使用
3.1 Ethers.js 和 Web3.js 的主要区别是什么？ 比较点Ethers.jsWeb3.js体积更轻量，适合前端较大，加载慢，适合 Node文档文档简洁、现代化，支持 TypeScript文档丰富，但不够现代化模块化设计高度模块化&#x…...
Quick UI 组件加载到 Axure
将 Quick UI 组件加载到 Axure 的完整指南 Axure 支持通过自定义元件库加载外部 UI 组件库（如 Quick UI），以下是详细的操作流程： 一、准备工作 获取 Quick UI 组件库文件： 下载 .rplib 格式的 Quick UI 元件库文件&a…...
Vue3（ref与reactive）
一，ref创建_基本类型的响应式数据 在 Vue 3 中，ref是创建响应式数据的核心 API 之一 ** ref的基本概念** ref用于创建一个可变的响应式数据引用，适用于任何类型的值（基本类型、对象、数组等）。通过ref包装的值会被转…...
Starrocks中RoaringBitmap杂谈
背景 最近在阅读Starrocks源码的时候，遇到ColumnRefSet的RoaringBitmap使用，所以借此来讨论一下RoaringBitmap这个数据结构,这种思想是很值得借鉴的。 对于的实现可以参考一下 <dependency><groupId>org.roaringbitmap</groupId><…...
通过ca证书的方式设置允许远程访问Docker服务
设置允许远程访问Docker服务 使用场景 环境 系统：anolis7.9 修改Docker服务配置，配置安全证书 生成ca证书到/etc/docker目录中，后续会要用到 #该步骤需要设置密码，后面步骤会要用到，此处设置密码为123456 openss…...
涂胶协作机器人解决方案 | Kinova Link 6 Cobot在涂胶工业的方案应用与价值
涂胶工业现状背景： 涂胶工艺在汽车制造、电子组装、航空航天等工业领域极为关键，关乎产品密封、防水、绝缘性能及外观质量。 然而，传统涂胶作业问题频发。人工操作重复性强易疲劳，涂胶质量波动大；大型涂胶器使用增加工…...
理解继承与组合的本质：Qt 项目中的设计选择指南
文章目录 理解继承与组合的本质：Qt 项目中的设计选择指南一、继承与组合的本质区别1. 继承（Inheritance）2. 组合（Composition） 二、继承的适用场景三、组合的适用场景四、错误使用继承的后果五、判断继承或组合的三问法…...
新手小白使用VMware创建虚拟机安装Linux
新手小白想要练习linux，找不到合适的地方，可以先创建一个虚拟机，在自己创建的虚拟机里面进行练习，接下来我给大家接受一下创建虚拟机的步骤。 VMware选择创建新的虚拟机 选择自定义 硬件兼容性选择第一个，不同的版本&a…...
使用 PHP 和 Guzzle 对接印度股票数据源API
对接 StockTV API 可能涉及获取实时或历史的金融市场数据，如股票价格、交易量、市场新闻等。为了帮助你更好地理解如何使用 PHP 对接 StockTV API，下面我将提供一个通用指南和示例代码。 前提条件 注册并获取API密钥：首先你需要在 StockTV …...
EscapeX：去中心化游戏，开启极限娱乐新体验
VEX 平台推出全新去中心化游戏 EscapeX（数字逃脫），创新性地将大逃杀玩法与区块链技术相融合。用户不仅能畅享紧张刺激的解谜过程，更能在去中心化、公正透明的环境中参与游戏。EscapeX 的上线，为 VEX 生态注入全新活力&…...
使用PyQt5的图形用户界面（GUI）开发教程
文章目录 写在前面一、PyQt5的安装1.1 使用Conda管理环境1.1.1 新建环境1.1.2 conda list和pip list的区别1.1.3 conda install和pip install的区别 1.2 安装PyQt5和Qt Designer1.3 VsCode中配置Qt Designer 二、PyQt5的UI设计2.1 .ui文件设计2.2 .qrc文件建立2.3 qss设计 三、…...
STM32实战：智能环境监测站设计方案
下面是一个基于STM32的智能环境监测站设计方案，使用Keil MDK-ARM开发环境。这个系统集成了多种传感器，并通过OLED显示数据，同时具备数据存储和报警功能。 [STM32F4系列MCU] ├── I2C总线 │ ├── SHT30温湿度传感器 │ ├──…...
猎板硬金镀层厚度：新能源汽车高压系统的可靠性基石
在新能源汽车的电池管理系统（BMS）和电机控制器中，硬金镀层厚度直接关系到高压环境下的电气稳定性与使用寿命。猎板针对车载场景开发的耐电迁移方案（金层 2.5μm，镍层 8μm），经 150℃/85% RH 高压…...
KEYSIGHT是德科技 E5063A 18G ENA系列网络分析仪
KEYSIGHT是德科技 E5063A 18G ENA系列网络分析仪 E5063A ENA 矢量网络分析仪 18GHz 2端口 降低无源射频元器件的测试成本 Keysight E5063A ENA 是一款经济适用的台式矢量网络分析仪，可用于测试简单的无源元器件，例如频率最高达到 18 GHz 的天线、滤…...
VR 虚拟仿真工器具：开启医学新视界的智慧钥匙
VR 虚拟仿真工器具在医疗领域的应用，为医疗行业的发展带来了新的机遇。在手术模拟训练中，它让医生提前熟悉手术流程和操作技巧。对于一些复杂的手术，如心脏搭桥手术、神经外科手术等，手术难度大、风险高，对医生的操作技…...
webshell管理工具、C2远控服务器流量分析
文章目录 一、Webshell管理工具流量分析1. 蚁剑（AntSword）2. 冰蝎（Behinder）3. 哥斯拉（Godzilla）二、常见C2远控服务器流量分析1. Metasploit2. CobaltStrike 三、防御对抗策略总结 一、Webshell管理工具流…...
JavaWeb：前端工程化-TS（TypeScript）
概述 快速入门 常用类型 基础类型 联合类型 函数类型 对象类型 接口Interface Interface和type区别 典型推论...
unity+ spine切换武器不换皮肤解决方案
1.在spine编辑中获取到角色武器插槽名称 这里的武器插槽名称为“zj_22”。角色的spine正常导出到unity中。 2.将需要替换的武器图片单独放在一个spine项目里面，并为每个武器单独建立一个插槽。 而且全部放在根骨骼Root下。 3.将武器的spine动画导出，会…...
[java八股文][MySQL面试篇]SQL基础
NOSQL和SQL的区别？ SQL数据库，指关系型数据库 - 主要代表：SQL Server，Oracle，MySQL(开源)，PostgreSQL(开源)。 关系型数据库存储结构化数据。这些数据逻辑上以行列二维表的形式存在，每一列代表…...
Ubuntu中SSH服务器安装使用
SSH服务安装 1. 安装 OpenSSH 安装 SSH 服务端（允许远程登录） sudo apt update sudo apt install openssh-server安装 SSH 客户端（用于连接其他服务器） sudo apt install openssh-client2. 检查 SSH 服务状态 sudo systemctl…...
【AI论文】SWE-rebench：一个用于软件工程代理的任务收集和净化评估的自动化管道
摘要：基于LLM的代理在越来越多的软件工程（SWE）任务中显示出有前景的能力。 然而，推进这一领域面临着两个关键挑战。 首先，高质量的训练数据稀缺，尤其是反映现实世界软件工程场景的数据，在这些场…...
Flask文件处理全攻略：安全上传下载与异常处理实战
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「storms…...
【算法深练】分组循环：“分”出条理，化繁为简
目录 引言 分组循环 2760. 最长奇偶子数组 1446. 连续字符 1869. 哪种连续子字符串更长 2414. 最长的字母序连续子字符串的长度 3456. 找出长度为 K 的特殊子字符串 1957. 删除字符使字符串变好 674. 最长连续递增序列 978. 最长湍流子数组 2110. 股票平滑下跌阶段的…...
焊缝缺陷焊接缺陷识别分割数据集labelme格式5543张4类别
数据集中有超过一半为增强图片，请认真观察图片预览 数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：5543 标注数量(json文件个数)：5543 标注类别数：4…...