一、 对HTML,CSS学习内容的实践：参照维基百科简单制作了一个静态网页
- HTML：着重学习记忆各种标签所表示的含义，了解基本的构造
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Kyoto Animation</title>
<link rel="stylesheet" href="CSS/kyoanistyle.css">
</head>
<body>
<div id="container">
<h1>京都动画</h1>
<div class="box1">
<p>
<b>京都动画</b>（日语：京都アニメーション，英语：<em>Kyoto
Animation</em>），昵称<b>京阿尼</b>（京アニ），是一家日本动画制作公司。主要负责<a href="https://zh.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB" style="text-decoration:none" target="_blank">动画</a>制作，商品企划、制造、销售、批发、出版的公司，公司成立于1981年。1985年7月12日成为有限公司，并于1999年成为股份有限公司。2003年开始独立制作动画。其公司商标的设计来自于公司名称开头日本汉字“京”的变化[1]。
</p>
<p>
<strong>京都动画</strong>的前身为“京都动画工作室”。创办人<ins>八田阳子</ins>本身曾经在手冢治虫工作室担任动画完稿上色的工作，与夫婿<ins>八田英明</ins>结婚后搬家到京都府宇治市，1981年成立工作室，跟邻近的家庭主妇一起承接
<a href="https://zh.wikipedia.org/wiki/%E9%BE%99%E4%B9%8B%E5%AD%90" target="_blank">龙之子</a>制作公司与日升动画的完稿外包工作。而在1985年公司法人化，八田英明就任为社长。一开始是上色专门公司，1986年成立作画部门。现在社长是八田英明。雇员119名(至2019年9月)。总部设于京都府宇治市，同时拥有子公司Animation Do股份有限公司、三个动画工作室、社员宿舍、动画学校及商品开发部、商品销售店铺等。
</p>
<p>
动画制作主要合作商有Anime工房婆娑罗（有限会社アニメ工房婆娑罗）以及Studio Blue等。
</p>
<p>
2017年6月，京都动画公布了多个动画电影的企划，并在官网打出“京アニ映画year”（京阿尼电影年）。目前该企划已经宣布最少持续到2020年。
</p>
<p>
<del><strong>山田尚子是神！</strong></del>
</p>
</div>
<div class="box2">
<div align="center">
<h2>京都动画株式会社</h2>
<p>
Kyoto Animation Co., Ltd.
</p>
<a href="http://www.kyotoanimation.co.jp/en/" target="_blank" title="点击进入Kyoto Animation官网"><img src="img/1920px-Kyoto_Animation_logo.svg.png" alt="Kyoto Animation Logo" width="512" height="64"></a>
<p>
京都动画标识
</p>
<a href="https://zh.wikipedia.org/wiki/File:Kyoto_Animation_head_office_20101010.jpg" target="_blank" title="左键点击下载图片"><img src="img/Kyoto_Animation_head_office_20101010.jpg" alt="京都动画第一工作室" width="800" height="600"></a>
<p>
京都动画位于京都府宇治市的总部
</p>
</div>
</div>
<div class="clearfix"></div>
<hr \>
<p>
<table class="table1">
<caption>动画作品表</caption>
<thead>
<tr>
<td>年份</td>
<td>中文名称</td>
<td>日文名称</td>
<td>播出时间</td>
<td>导演</td>
<td>原作类别</td>
</tr>
</thead>
<tbody>
<tr>
<td>2021年</td>
<td><a href="https://zh.wikipedia.org/wiki/%E5%B0%8F%E6%9E%97%E5%AE%B6%E7%9A%84%E5%A5%B3%E5%83%95%E9%BE%8D" style="text-decoration: none">小林家的龙女仆S</a></td>
<td>小林さんちのメイドラゴンS</td>
<td>7月－</td>
<td>石原立也</td>
<td>漫画</td>
</tr>
<tr>
<td rowspan="3">2018年</td>
<td><a href="https://zh.wikipedia.org/wiki/%E7%B4%AB%E7%BE%85%E8%98%AD%E6%B0%B8%E6%81%86%E8%8A%B1%E5%9C%92" style="text-decoration: none">紫罗兰永恒花园</a></td>
<td>ヴァイオレット·エヴァーガーデン</td>
<td>1月－4月</td>
<td>石立太一</td>
<td rowspan="3">KA Esuma文库</td>
</tr>
<tr>
<td colspan="2">Free！ -Dive To The Future-</td>
<td>7月－9月</td>
<td><a href="https://zh.wikipedia.org/wiki/%E6%B2%B3%E6%B5%AA%E6%A6%AE%E4%BD%9C" style="text-decoration: none">河浪荣作</a></td>
</tr>
<tr>
<td><a href="https://zh.wikipedia.org/wiki/%E5%BC%A6%E9%9F%B3%EF%BC%8D%E9%A2%A8%E8%88%9E%E9%AB%98%E4%B8%AD%E5%BC%93%E9%81%93%E9%83%A8%EF%BC%8D" style="text-decoration:none">弦音－风舞高中弓道部－</a></td>
<td>ツルネ－風舞高校弓道部－</td>
<td>10月－2019年1月</td>
<td>山村卓也</td>
</tr>
<tr>
<td colspan="6"><a href="https://zh.wikipedia.org/wiki/%E4%BA%AC%E9%83%BD%E5%8B%95%E7%95%AB" style="text-decoration: none" target="_blank">前往Wikipedia查看更多</a></td>
</tr>
</tbody>
</table>
<br />
</p>
<hr \>
<p>
主要制作人员
<br />
<ul>
<li><a href="https://zh.wikipedia.org/wiki/%E6%9C%A8%E4%B8%8A%E7%9B%8A%E6%B2%BB" style="text-decoration: none">木上益治</a>（执行董事、导演，已殁）</li>
<li><a href="https://zh.wikipedia.org/wiki/%E7%9F%B3%E5%8E%9F%E7%AB%8B%E4%B9%9F" style="text-decoration: none">石原立也</a>（执行董事、导演）</li>
<li><a href="https://zh.wikipedia.org/wiki/%E6%AD%A6%E6%9C%AC%E5%BA%B7%E5%BC%98" style="text-decoration: none">武本康弘</a>（执行董事、导演，已殁）</li>
<li><a href="https://zh.wikipedia.org/wiki/%E6%B1%A0%E7%94%B0%E6%99%B6%E5%AD%90" style="text-decoration: none">池田晶子</a>（执行董事，已殁）</li>
</ul>
</p>
</div>
</body>
</html>
- CSS： 学习了CSS基本语法、选择器、盒子模型、定位
CSS代码:
body {
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 1.6em;
}
#container {
width: 80%;
margin: auto;
margin-top: 30px;
padding-left: 10px;
padding-right: 10px;
}
#container h1 {
color: #000;
}
.box1 {
float: left;
width: 65%;
}
.box2 {
float: right;
width: 28%;
background-color: #dadada;
border: 1px solid #999999;
line-height: 0.3em;
font-size: 14px;
}
.box2 img {
max-width: 90%;
height: auto;
object-fit: contain;
}
.table1 {
table-layout: fixed;
width: 80%;
border-collapse: collapse;
border: 1px solid #999999;
text-align: center;
}
.table1 td {
border: 1px solid #999999;
}
.table1 caption {
text-align: left;
}
.table1 thead th:nth-child(1) {
width: 10%;
}
.table1 thead th:nth-child(1) {
width: 30%;
}
.table1 thead th:nth-child(1) {
width: 30%;
}
.table1 thead th:nth-child(1) {
width: 10%;
}
.table1 thead th:nth-child(1) {
width: 10%;
}
.table1 thead th:nth-child(1) {
width: 10%;
}
.clearfix {
clear: both;
}
成品截图：
二、JavaScript的学习
学习了JS的基本语法、JS脚本的调用策略、JS的一些与C++不同的特性、JS字符串的常用方法、JS面向对象的知识
主要成品物为MDN上的一些实操项目
JavaScript实践项目（Github）
三、 Github仓库
Web学习与实践
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
