背景
最近在付费网站学习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
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>
<script
type="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
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>
<script
type="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
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>
<script
type="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>
<script
type="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
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应用，到时候会分享全部的代码~