摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HMTL Homework 2</title> <!-- <link rel="stylesheet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HMTL Homework 2</title>
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
<!-- <link rel="shortcut icon" type="image/x-icon" href="http://www.php.cn/favicon.ico"> -->
<style type="text/css">
/* *{
margin: 0px;
外边距
padding: 0px;
内边距
} */
table{
border: 1px solid #ccc;
/*边框*/
border-collapse: collapse;
/*自动合并边框*/
}
tr th{
height: 40px;
/*高*/
border: 1px solid #000;
width: 120px;
/*宽*/
}
tr td{
height: 100px;
border: 1px solid #000;
}
h1{
height: 80px;
text-align: center;
line-height: 80px;
/*行间的距离*/
background: orange;
/*背景色*/
}
input{
width: 94px;
height: 10px;
border: 1px solid #eee;
margin-top: 3px;
/*上外边距*/
margin-left: 10px;
/*左外边距*/
padding: 2px;
}
button{
width: 100px;
height: 20px;
margin-top: 3px;
margin-left: 10px;
padding: 2px;
border: none;
color: #fff;
background: #000FFF;
}
p{
font-family: 微软雅黑;
/*字体*/
}
pre{
font-family: 微软雅黑;
}
.p1{
font-weight: bold;
/*字体样式为粗体*/
font-size: 80px;
/*字号*/
color: red;
/*字体颜色*/
}
.p2{
font-family: 楷体;
}
.p3{
text-indent: 2em;
/*首行缩进*/
}
ul li{
list-style: none;
/*取消标记*/
margin-top: 5px;
height: 30px;
line-height: 30px;
}
ul li:before{
content: '';
/*插入生成内容*/
width: 30px;
height: 30px;
background: url(http://image.tupian114.com/20140415/14300361.png)no-repeat;
/*背景图片*/
background-size: 100%;
/*大小*/
margin-right: 10px;
position: absolute;
/*绝对定位*/
left: 15px;
/*距离左侧距离*/
}
a{
text-decoration: none;
/*取消下划线*/
color: red;
}
a:hover{
text-decoration: underline;
color: pink;
}
div{
height: 800px;
width: 800px;
background: yellow;
color: brown;
}
.top{
height: 50px;
width: 50px;
text-align: right;
/*文字排列格式（居右）*/
}
</style>
</head>
<body>
<table>
<tr>
<th>This</th>
<th>is</th>
<th>a</th>
<th>title</th>
</tr>
<tr>
<td colspan="4"><h1>H1 and colspan 4.</h1></td>
</tr>
<tr>
<td rowspan="2">
rowspan 2 <br>
and <br>
login form
<form action="#" method="post">
<input type="text" name="username" id="username" placeholder="Username"><br>
<input type="password" name="password" id="password" placeholder="Password"><br>
<button>Login</button>
</form>
</td>
<td><b>Blod</b></td>
<td><i>Italics</i></td>
<td><del>del</del> DEL</td>
</tr>
<tr>
<td style="text-align: right;"><h2>h2 right</h2></td>
<td style="text-align: center;"><h3>h3 center</h3></td>
<td style="text-align: left;"><h4>h4 left</h4></td>
</tr>
</table>
<ol>
<li>文档头部 head</li>
<li>文本 字体格式化</li>
<li>超链接</li>
</ol>
<ul>
<li>列表</li>
<li>表单 form</li>
<li>表格 table</li>
</ul>
<p class="p1">This is my homework!!</p>
<p class="p2">font family 微软雅黑</p>
<pre>pre print the tab space and enter
...</pre>
<p>p not print the tab space and enter
...</p>
<p class="p3">
请昨晚参与我们公益直播送书的同学，务必完善好您的个人信息（注：邮 寄地址将依照你填的信息为准！），我们将在下周五(11月9号)全部顺丰包邮发出！注：具体名单正在由php中文网的工作人员加班统计中！请各位稍安勿躁！
</p>
<p class="p3">
我们会第一时间通过php中文网订阅号【php中文网最新课程（phpcnnew）】公布！<br>
<img src="http://img.php.cn//upload/image/757/520/355/1541225947147391.jpg" alt="images"></p>
<p>
原贴地址：<br>
<a href="http://www.php.cn/wenda/142915.html">点我跳转到</a><br>
<a href="http://www.php.cn/wenda/142915.html" target="_blank">新窗口打开</a>
</p>
<div>
this is a big div...
</div>
<a href="" name="top"><img class="top" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541532507845&di=a21f648c7ea9de9bb5dcafe6cb178b91&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F48%2F06%2F89574411bfbe020.jpg" title="Go to top"></a>
</body>
</html>
批改老师：天蓬老师批改时间：2018-11-07 09:05:56
老师总结：完成的很认真,有二点建议:
1. 如果长度为0,那么px是可以省略不写的,例如: margin: 0;
2. a中的链接地址,协议是可以省略的
