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>
    <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

<!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

<!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

* {
  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;
}