HTML跟CSS一些内容
HTML和CSS一些内容
好吧，最近好久没有总结了，上周刚刚考完基础部分，成绩还可以吧，不过也检测到自己哪里的不足了，内部类那部分的题有点儿迷糊，其他的掌握的还是比较好的。
今天又开始第二阶段的学习了，今天简单讲了讲HTML 和CSS ，虽然是做的后端的，不过这些前端的东西稍微了解一下也是不错的。而且在以后的练习中还是需要我们自己写一些前端的东西，来供后端操作的。
今天的节奏很快，差不多就是老师讲一下，然后就让我们按照他写的来练习。有些东西没理解。不过对我们来说比较重要的就是表格这方面。晚上我自己写了一个综合性的练习，差不多把今天所学的东西运用了一下，现在把代码放上来，让大家看一下，因为理解的不够透彻，所以可能代码写的很差，勿喷勿喷。
<!--EndFragment-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合练习</title><base>
<style type="text/css">
table{
border: 1px solid;
border-collapse: collapse
}
th,td{
border: 1px solid;
font-size: 25px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var butA = document.getElementById("A")
var butB = document.getElementById("B")
var butC = document.getElementById("C")
butA.onclick = function(){
alert("你的想法观念非常的普通，是个标准的罗曼蒂克浪漫主义拥护者，pp显然是那样的。");
};
butB.onclick = function(){
alert("你现在对童话般的美好事物以及浪漫情事仍抱有一些憧憬，很显然pp这个浪荡子给不了你这些。");
};
butC.onclick = function(){
alert("你挺爱幻想的，简直是个超现实主义者，你有一股非常强烈的欲望想要和pp逃离这里。");
};
};
</script>
</head>
<body>
<h2>第一项（表格）</h2>
<p style="font-size: 20px ; color : #f155ff" >先写一个表格！</p>
<table style="width: 900px ; height: 400px ">
<tr>
<th style="color: red ; font-size: 35px">姓名</th>
<th style="color: red ; font-size: 35px">性别</th>
<th style="color: red ; font-size: 35px">年龄</th>
<th style="color: red ; font-size: 35px">班级</th>
<th style="color: red ; font-size: 35px">爱好</th>
</tr>
<tr>
<td align="center" style="font-size: 25px">彭鹏</td>
<td style="color : #99ff11" align="center">未知</td>
<td align="center">26</td>
<td rowspan="4" align="center">javaEE</td>
<td align="center">耍剑</td>
</tr>
<tr>
<td align="center" style="font-size: 25px">小问</td>
<td rowspan="2" align="center">男</td>
<td align="center">21</td>
<td align="center">弹吉他</td>
</tr>
<tr>
<td align="center" style="font-size: 25px">大蔡</td>
<td align="center">26</td>
<td align="center">侃大山</td>
</tr>
<tr>
<td align="center" style="font-size: 25px">小王</td>
<td align="center">女</td>
<td align="center">22</td>
<td align="center">唱歌</td>
</tr>
</table>
<h2>第二项（超链接）</h2>
<a href="1.JPG" target="_blank">点击查看图片</a>
<h2>第三项（图片）</h2>
<p style=" font-size: 20px ; color : Green">下面是一组图片</p>
<h4>图片一</h4>
<img alt="第一幅图挂掉" src="2.jpg" style="width: 900px ; height: 500px">
<h4>图片二</h4>
<img alt="第二幅图挂掉" src="3.jpg" style="width: 900px ; height: 500px" >
<h4>图片三</h4>
<img alt="第三幅图挂掉" src="../1.jpg" style="width: 900px ; height: 500px">
<br/>
<h2>第四项（测性格）</h2>
<p style="font-size: 20px">如果在黑暗中出现了两点光点，这会是什么呢？</p><br/>
<p style="font-size: 15px ; color: red">A联想到汽车大灯或街灯</p><br/>
<p style="font-size: 15px ; color: blue">B联想到动物目光 </p><br/>
<p style="font-size: 15px ; color: green">C联想到UFO</p><br/>
<button id = "A">A</button>
<button id = "B">B</button>
<button id = "C">C</button>
<br/>
<h2>第五项(问卷调查)</h2>
<form action="../2.jpg">
<p style="font-size: 30px ; color: blue"><i>请认真填写，有机会赢得与妹子的约会哦！</i></p>
您的姓名: <input type="text" name= "name"/><br/>
您的年龄: <input type="text" name= "age"/><br/>
您的长度: <input type="password" name= "length"/><br/>
您的性别: <input type ="radio" name="gender" value="man"/ checked="checked">男
<input type ="radio" name="gender" value="woman"/>女<br/><br/>
您对这个网页的评价为:
<input type="radio" name ="evaluate" value="good"/>好
<input type="radio" name ="evaluate" value="verygood"/>很好
<input type="radio" name ="evaluate" value="perfect" checked="checked"/>完美
<br/><br/>
您喜欢的女孩儿类型(可多选):
<input type="checkbox" name = "love" value ="little"checked="checked" />萝莉
<input type="checkbox" name = "love" value = "beauty" checked="checked"/>美丽
<input type="checkbox" name = "love" value = "sexy" checked="checked"/>性感
<br/><br/>
请选择您的约会地点:
<select>
<option>餐厅</option>
<option>咖啡厅</option>
<option>电影院</option>
<option>酒吧</option>
<option>路边摊</option>
</select>
<br/><br/><br/>
<input type="reset"/>
<input type="submit" value="开启浪漫之旅"/>
</form>
</body>
</html>
总结一下自己写代码时的错误，主要就是：在表格那里，首先要在<title>和</head>之间写一个<table>{} </table>，在这里是定义表格的格式的（这是运用到css了吧？感觉跟老师讲的css的运用差不多，但又不一样），我刚开始定义时border : 1px 就完事儿了，其实少了个 solid，这个是实线，没有的话就不显示了，搞了半天。第二个问题，就是定义那个javaScript里的A、B、C三个按钮的提示信息时，忘了方法是 window.onload，一直写的window.load。不过还是不了解这个方法怎么来的······
<!--EndFragment-->