一 培训+自学内容
1 HTML
html是一种超文本标记语言，被用于定义网页。主要方式是通过添加标签来在网页中插入文本 图片等内容建立网页框架。
几个基本标签
1.head标签：head元素是所有头部元素的容器,包含文档的标题（title），脚本、样式、meta 信息 以及其他更多的信息。可以定义整个网页的基本格式，模板如下：
img
{
border-radius: 15px;
}
body
{
background-image: url(b1.jpg);}
div.relative
{
position: relative;
width: 500px;
top: 50%;
left: 50%;
}
div img
{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 2s;
}
div img:hover
{
transform: scale(1.2);
}
h2.pos_right
{
position: relative;
right: 500px;
}
p.pos_right{
position: relative;
right: 500px;
}2.body标签：人们通过网页直观看到的所有元素都来自于body标签，所以body标签里的内容决定着网页的美观程度，模板如下：
<body style="background-color: rgb(247, 189, 118);">
<h1 style="text-align: center;"></h1>
<div class="relative">
<img src="p2.jpg" width="500">
<h2 class="pos_right"></h2>
<p class="pos_right">
</p>
</div>
<div class="relative">
<img src="p1.jpg" width="500">
<h2 class="pos_right"></h2>
<p class="pos_right">
</p>
</div>
<div class="relative">
<img src="p3.jpg" width="500">
<h2 class="pos_right"></h2>
<p class="pos_right">
</p>
</div>
<div class="relative">
<img src="p4.jpg" width="500">
<h2 class="pos_right"></h2>
<p class="pos_right">
</p>
</div>
<div class="relative">
<img src="p5.jpg" width="500">
<h2 class="pos_right"></h2>
<p class="pos_right">
</p>
</div>
<button onclick="myFunc()">上一页</button>
<script>
function myFunc() {
window.location.href = ".html";
}
</script>
<button onclick="myFunc()">下一页</button>
<script>
function myFunc() {
window.location.href = ".html";
}
</script>
</body>head和body标签构成了网页的框架，里面需要各种其他标签作为内容填充才能完整地制作网页。如img（图片）p(段落）div(分割区块)...
2 css
CSS全称为“级联样式表”，相⽐HTML的属性，CSS拥有更丰富的样式和“级联”的特性。简单来说就是通过css可以对网页进一步美化。
用法案例
img
{
border-radius: 15px;
}此用法可以实现对图片的圆角设置
二 感悟
第一次培训结束的时候没仔细看作业内容，理所应当地觉得第一次作业应该不会太难，就把作业拖到了周中。。。于是就有了化身ddl战士熬夜爆肝教程的我。但是在过程中通过各种方式查到资料把自己的一些想法实现的感觉还是很好的。下次作业一定从周一开始做！！！
