背景
最近在付费网站学习web全栈开发，记录一下阶段性学习。今天刚好学完html基础，跟着教程画了个基础的网站。
样品展示:
开发工具
vscode
Visual Studio Code - Code Editing. Redefined
常用插件
Prettier：格式优化
Live Sever:实时调试
Material Theme：主题增强显示效果
常用网站
可视化：饼图 | Charts | Google for Developers
CSS Default Browser Values for HTML Elements
https://github.com/hustcc/canvas-nest.js/
代码
index.html
围棋资讯网 围棋资讯网 这是一种策略棋类 网站首页 中国棋院棋院 日本棋院 韩国棋院 围棋性质 （进行中的围棋） 时间: 周朝至今 类型: 棋盘游戏 代表: 柯洁 复杂度: 极高 浅谈围棋 围棋，别名弈、碁等，国际通行棋种，世界上最古老的棋类游戏之一，是具有高度文化色彩的智力竞技项目，流行于中国、日本、韩国等东亚国家。是中华民族发明的迄今最久远、最复杂的智力博弈活动之一。 [1] [2] [3]围棋是一种策略性二人棋类游戏，使用格状棋盘及黑白二色棋子进行对弈 [78]，对局双方在棋盘的交叉点上轮流下子，每次只能下一子，落子后不能移动，终局时以目数多者为胜。因黑方有先手优势，故规定局终时黑方要贴目给白方。中日韩等不同国家制定的竞赛规则略有不同。 [4] [6]围棋棋理博大精深，蕴含着中华文化的丰富内涵，被列为“琴棋书画”四大文化之一，是中国文化与文明的体现。2008年，入选中国《国家级非物质文化遗产代表性项目名录》 围棋起源于中国古代 [78]，南北朝时经朝鲜半岛传入日本，流传到欧美各国。 [4]1949年，中华人民共和国成立以后，围棋被列为体育竞赛项目，并于1957年起举行全国性的围棋锦标赛。 [79]1988年，富士通杯和应氏杯两项世界职业围棋锦标赛相继开赛，世界围棋进入了一个新时代。 [56]长期以来，围棋一直被看作是艺术、文化，而非竞技体育项目。直到2010年广州亚运会，围棋才首次成为亚运会正式比赛项目. 历史发展 围棋起源于中国，中国古代称为“弈”，东汉许慎《说文解字》中称：“弈，围棋也。”左传襄公二十五年疏载：“棋者所执之子，以子围而相杀，故谓之围棋。”传说围棋的起源距今已经4000余年的历史。古文献中，较早可信的则见于《左传•鲁襄公二十五年》的记载：“”弈者举棋不定，不胜其耦，而况君而弗定乎？”这表明至少在春秋时期，围棋已开始在我国使用 比赛规则 围棋的规则十分简单，却拥有十分广大的空间可以落子，使到围棋的变化多得数不清，比中国象棋复杂多了。这就是围棋的魅力。下一盘围棋比下一盘中国象棋一般花的时间比较多，快则十五分钟，慢则要几天，多数时候下一盘棋需要一到二个小时。多下围棋对人脑有帮助，可填强一个人的计算能力，记忆，创艺，思想能力，判断能力，精神更集中。 基本下法 对局双方各执一色棋子，黑先白后，交替下子，每次只能下一子。 棋子下在棋盘上的空格非禁着点的交叉点上。 棋子下定后，不得再向其他位置移动。 轮流下子是双方的权利，但允许任何一方放弃下子权而使用虚着。chinaweb.html
围棋资讯网 | 中国棋院 围棋资讯网 这是一种策略棋类 网站首页 中国棋院棋院 日本棋院 韩国棋院 中国棋院 中国浅谈围棋 柯洁 抽象九冠王 围棋，别名弈、碁等，国际通行棋种，世界上最古老的棋类游戏之一，是具有高度文化色彩的智力竞技项目，流行于中国、日本、韩国等东亚国家。是中华民族发明的迄今最久远、最复杂的智力博弈活动之一。 [1] [2] [3]围棋是一种策略性二人棋类游戏，使用格状棋盘及黑白二色棋子进行对弈 [78]，对局双方在棋盘的交叉点上轮流下子，每次只能下一子，落子后不能移动，终局时以目数多者为胜。因黑方有先手优势，故规定局终时黑方要贴目给白方。中日韩等不同国家制定的竞赛规则略有不同。 [4] [6]围棋棋理博大精深，蕴含着中华文化的丰富内涵，被列为“琴棋书画”四大文化之一，是中国文化与文明的体现。2008年，入选中国《国家级非物质文化遗产代表性项目名录》 围棋起源于中国古代 [78]，南北朝时经朝鲜半岛传入日本，流传到欧美各国。 [4]1949年，中华人民共和国成立以后，围棋被列为体育竞赛项目，并于1957年起举行全国性的围棋锦标赛。 [79]1988年，富士通杯和应氏杯两项世界职业围棋锦标赛相继开赛，世界围棋进入了一个新时代。 [56]长期以来，围棋一直被看作是艺术、文化，而非竞技体育项目。直到2010年广州亚运会，围棋才首次成为亚运会正式比赛项目. 中国围棋历史发展 围棋起源于中国，中国古代称为“弈”，东汉许慎《说文解字》中称：“弈，围棋也。”左传襄公二十五年疏载：“棋者所执之子，以子围而相杀，故谓之围棋。”传说围棋的起源距今已经4000余年的历史。古文献中，较早可信的则见于《左传•鲁襄公二十五年》的记载：“”弈者举棋不定，不胜其耦，而况君而弗定乎？”这表明至少在春秋时期，围棋已开始在我国使用 中国围棋比赛规则 围棋的规则十分简单，却拥有十分广大的空间可以落子，使到围棋的变化多得数不清，比中国象棋复杂多了。这就是围棋的魅力。下一盘围棋比下一盘中国象棋一般花的时间比较多，快则十五分钟，慢则要几天，多数时候下一盘棋需要一到二个小时。多下围棋对人脑有帮助，可填强一个人的计算能力，记忆，创艺，思想能力，判断能力，精神更集中。japanweb.html
围棋资讯网 | 日本棋院 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); } 围棋资讯网 这是一种策略棋类 网站首页 中国棋院棋院 日本棋院 韩国棋院 日本围棋，中国围棋传入到日本。历史悠久的围棋艺术起源于中国，这已为世人所公认，但确切年代尚无定论。晋人张华所撰《博物志》云：“尧造围棋，丹朱善之”，这不过是一种传说，难以为信。一般认为，最早记述围棋的文献是《左传·襄公二十五年》所载：“弈者举棋不定，不胜其耦”；《说文解字》曰：“弈，围棋也”；继《左传》之后，《论语》曰：“不有博弈者乎？为之尤贤乎已”；《孟子》记曰：“弈秋，通国之善弈者也。”可见在春秋战国时代，围棋已经流行于中国了，而且出现了弈秋这样的善弈国手。 但此说系据推考而来，并无确凿证据。 东京本院 大阪本院 长崎本院 江户本院 围棋比赛 除上述专业棋手的比赛外，还有名目繁多的全国性业余棋手赛。其中有：《每日新闻》社主办的1955年恢复的“业余本因坊战”、《朝日新闻》社于1961年始主办的“业余十杰战”、日本棋院主办的“女子业余冠军赛”、全日本大学围棋联盟主办的“全日本学生团体赛、个人赛、十杰赛”、全国高等学校（高等学校在日本指高中）围棋联盟主办的“全日本高校冠军赛”等等。另外，在地方报纸范围内，由各种团体主办的定期比赛不胜枚举。据日本《新世纪百科辞典》和《大日本百科事典》统计，日本围棋人口有600万人、职业棋手400人、业余棋手有段位者在100，000人以上，堪称“围棋大国”。 七大战 棋圣战 名人战 本因坊战 十段战 天元战 -->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应用，到时候会分享全部的代码~
浙公网安备 33010602011771号