实训打卡第一天，学的不错，淦-----哈哈哈
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; }
