每逢佳节，倍思奇妙游；今日端午，记录学习，遨游代码~
前言
当我们在学习一门技术的时候，理论往往比较枯燥，想要让自己的知识掌握的更加牢固，就需要我们多动手操作，敲一敲代码，才能发现自己的不足之处。今日端午，就利用自己所学的知识做一个简单的网页吧~
用到的知识
内容区的大小是由height和width两个辅助属性设置的
width和height只是设置盒子内容区的大小，而不是盒子的大小
盒子可见框大小的内容区，由内边距和内边框共同决定
盒子模型、框模型
CSS中所有的元素设置为一个矩形的盒子
将元素设置为矩形盒子后，对页面的布局就变成了将不同盒子摆放到不同位置
每个盒子都是由以下几个部分组成
内容区content
内边距padding
边框border
外边距margin
默认情况下，是没有内边距的
兄弟元素之间的外边距都是正数或者都是负数就是取两者绝对值大的值；
如果都是相同的数值的话，那就是取其中一个的绝对值。
如果是一正一负的话，那就是取两者之和。
比如我们接下来用到的box1 和 box2兄弟选择器：
.box1{
margin-bottom: 50px;
}
.box2{
margin-top: 50px;
}
两者的外边距是50像素，那么最终两个盒子模型的间距就是50像素
>img标签的src属性的定义：标签的src属性是必需的。它的值是图像文件的URL，也就是引用该图像的文件的的绝对路径或相对路径
form表单：
type属性的值：
text：单行文本框。
value ：定义文本框的默认值，也就是文本框内的文字。
size：定义文本框的长度，单位是一字符。
maxlength ：设置文本框最多可以输入的字符数。
radio：单选按钮，name 和 value 是单选按钮中的必要的两个属性，必须要设置。并且同一组单选按钮中各个选项中的 name 属性值必须一样。
checkbox： 多选框，单独使用可以表示两种状态之间的切换，写在标签中的内容为checkbox按钮的介绍。
button：普通按钮。
value 属性的取值就是显示在按钮上的文字。
submit： 提交按钮，value 属性的取值就是显示在按钮上的文字，实现将表单内容提交给服务处理。
rest：重置按钮，value 属性的取值就是显示在按钮上的文字，单击可清除用户在页面当前表单中输入的信息。
file:文件上传，当使用文件域file 时，必须在form标签中指明编码方式。
image：图片域，拥有按钮的特点，也拥有图像的特点（不常用）。
hidden：隐藏字段（不常用）。
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>端午节快乐</title> <style type="text/css"> .box1,.box2{ width: 500px; height: 500px; } .box1{ font-size: 50px; color: floralwhite; width: 1000px; margin-left: 150px; padding: 80px; padding-top:20px; margin-top: 30px; margin-bottom: 50px; border: white 5px solid; text-align: center; margin-top: 60px; } .box2{ font-size: 25px; color: floralwhite; width:1200px ; margin-left: 110px; padding-left:36px; padding-right:26px; padding-top:30px; margin-top: 50px; border: 5px white solid; text-align: center; } .img-cs{ width:1%; height:2%; float:left; margin-left:2px; } body{ background-image: url(./端午快乐.png); } </style> </head> <body> <div class="box1"style="line-height: 2;letter-spacing: 5px;font-weight: 70px;font-size: 50px;font-style: normal;"> <a href="https://mp.weixin.qq.com/s/CtUyQ3NTnOcVIEnQakl0dQ">端午快乐</a><br/> <a href="https://mp.weixin.qq.com/s/CtUyQ3NTnOcVIEnQakl0dQ">the Dragon Boat Festival</a><br/> <img src="../audio/端午节一.jpg" class="img-src"> <img src="../audio/端午节二.jpg" class="img-src"> <img src="../audio/端午节三.jpg" class="img-src"> </div> <div class="box2"> <form> 用户名<input type="text" name="myname" id="1"/><br/> <br/> 密码<input type="password" name="mypassword" id="2"/><br/> <br/> 请选择您要上传的作品 <input type="file" name="myfile" value="作品文件"/> <input type="submit" /> <input type="reset" /> </form> <img src="../audio/端午节四.jpg" class="img-src"> <img src="../audio/端午节五.jpg" class="img-src"> <img src="../audio/端午节六.jpg" class="img-src"> </div> </body> </html>
运行结果
总结
无论学什么动手实践都是最好的方法，无论是初学还是回顾。路还很长，莫忘初心，踏实前行！
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
