HTML，CSS,JavaScript学习与实践

编程入门行业动态更新时间:2024-10-08 18:41:15

HTML，CSS,JavaScript学习与实践

一、对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>KyotoAnimation</em>），昵称<b>京阿尼</b>（京アニ），是一家日本动画制作公司。主要负责<a href="/%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="/%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="/" 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=":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="/%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="/%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="/%E6%B2%B3%E6%B5%AA%E6%A6%AE%E4%BD%9C" style="text-decoration: none">河浪荣作</a></td></tr><tr><td><a href="/%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="/%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="/%E6%9C%A8%E4%B8%8A%E7%9B%8A%E6%B2%BB" style="text-decoration: none">木上益治</a>（执行董事、导演，已殁）</li><li><a href="/%E7%9F%B3%E5%8E%9F%E7%AB%8B%E4%B9%9F" style="text-decoration: none">石原立也</a>（执行董事、导演）</li><li><a href="/%E6%AD%A6%E6%9C%AC%E5%BA%B7%E5%BC%98" style="text-decoration: none">武本康弘</a>（执行董事、导演，已殁）</li><li><a href="/%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;
}