实训打卡第一天，学的不错，淦-----哈哈哈
HTML基本标签
基本标签：前端页面超链接的使用；字体的颜色和字体的大小、形式；还有就是页面图片、音频和视频的导入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是我的第一个网页</title>
</head>
<body bgcolor="lightblue">
<a href="http://www.baidu.com"><h1>百度</h1></a><br>
<a href="http://www.jd.com">淘宝</a><br>
<a href="http://www.csdn.com">CSDN</a><br>
<hr color="red" size="1">
<hr color="pink" size="2">
<hr color="yellow" size="3">
<hr color="blue" size="4">
<hr color="purple" size="5">
<hr color="black" size="6">
<hr color="green" size="7"><br><br>
<font color="red"size="5"face="楷体">陌上人如玉，公子世无双</font><br>
<font color="green"size="5"face="楷体">有心持钵丛林去，又负美人一片情</font><br>
<font color="yellow"size="5"face="楷体">情犹未了缘已尽，笺前莫赋断肠诗</font><br>
<font color="hotpink"size="5"face="楷体">愿与卿结百年好，不惜金屋备藏娇</font><br>
<font color="orange"size="5"face="楷体">红颜又惹相思苦，此心独忆是卿卿</font><br>
<img src="img/1213.jpg" width="200px" height="200px" >
<img src="img/1215.jpg" width="200px" height="200px">
<hr>
<video controls width="400px" height="300px" src="img/12.mp4"></video>
<hr>
<audio src="" controls="controls"></audio>
<ul>
<li>**流弊</li>
<li>403流弊</li>
<li>阳哥流弊</li>
</ul>
<ol>
<li>**流弊</li>
<li>403流弊</li>
<li>阳哥流弊</li>
</ol>
</body>
</html>
表格标签： 在一个table中设置行，然后在行中再设置列的个数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body bgcolor="lightcyan">
<table cellspacing="0" align="center" width="600px" height="400px" border="2px">
<tr bgcolor="aqua">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td bgcolor="orange">22</td>
<td>23</td>
</tr>
<tr bgcolor="chartreuse">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<td>41</td>
<td bgcolor="lightcoral">42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
表单标签： 类似账号注册界面，包含账号、密码、性别、年龄等的设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<form>
账号 <input type="text">
<hr>
密码 <input type="password">
<hr>
性别
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<hr>
爱好
<input type="checkbox">篮球
<input type="checkbox">赚钱
<input type="checkbox">Game
<input type="checkbox">Music
<hr>
个人简介
<br>
<textarea rows="10" cols="40">
</textarea>
<hr>
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
</form>
<hr>
<!--
块儿级元素
div：默认占一行
-->
<p>helloKitty</p>
<div>
helloworld......
</div>
<span>helloAiY</span>
</body>
</html>
CSS常用样式
常用样式 : 类似一个函数，先对div声明之后，再插入图片，这个对于HTML图片处理不同的是CSS可以让照片的形状，边界线，以及动画的设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本样式</title>
<style>
body{
background:lightblue;
}
/* 美化div */
#first{
width: 250px;
height: 250px;
/* url图片路径 */
background: url(img/1215.jpg);
/* 使图片100%显示 */
background-size: 100% 100%;
/* 居中，左右200px */
margin: 200px auto;
/* 边框 ，5px ，实线 ，边框颜色 */
border: 5px solid purple;
/* 圆角 */
border-radius: 50px;
/*
animation:动画的声明
one : 动画名称，自定义
2s :动画时常
linear: 动画类型之一
infinite: 无限执行
*/
animation: one 3s linear infinite;
}
/* 动画执行，动画的名称 */
@keyframes one{
/* 动画执行起始状态 */
from{
/* 旋转角度 */
transform: rotate(0deg);
}
/* 动画执行结束状态 */
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="first">
</div>
</body>
</html>
文本样式 把对于图片的设置改为对于文本的设置，可以设置字体的颜色，大小等等。这个形如C中的函数，不过CSS是用 link 调用外部的CSS文件，然后外部的CSS文件对文本编辑。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本样式</title>
<!-- 引入外部css文件 -->
<link rel="stylesheet" href="css/02.css">
</head>
<body>
<div class="box">
AiY.....6B
hahahahah
</div>
</body>
</html>
body{
background: lightgoldenrodyellow;
}
.box{
width: 600px;
height: 200px;
background: #ADD8E6;
margin: 200px auto;
border: 10px solid greenyellow;
border-radius: 150px;
/* 文本居中 */
text-align: center;
/* 行高，高度和div一致 ，垂直居中 */
line-height: 200px;
/* 字体颜色 */
color: white;
/* 字体大小 */
font-size: 30px;
/* 鼠标变为手状 */
cursor: pointer;
}
