<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html总结</title>
<link rel="shortcut icon" type="images/x-icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1560948568&di=b055f8411a9d8817529f5e8e7751bfa5&src=http://image20.it168.com/201312_800x800/1693/c1df91b20ffc5c3a.jpg">
<style>
a{text-decoration: none;color:#fff;}
ul li{width:300px;height:36px;line-height: 36px;}
ul li:before{content:url(daohang.png);line-height: 36px;margin:10px;}
form{width:360px;height:240px;line-height: center;background:#FFF;margin:10px;}
input{width:260px;height:48px;margin-top:20px;padding-left:8px;}
button{width:260px;height:48px;margin-top:20px;background-color: #ef8900;border:none;color:#fff;font-size:16px;}
table{width:800px;border:1px solid #fff;text-align: center;border-collapse:collapse;}
tr td{width:80px;height:30px;border:1px solid #fff;}
</style>
</head>
<body style="background-color: #282923;color:#fff;text-align: center;">
<h1>HTML总结</h1>
<hr>
<h4>
<ul style='list-style:none;text-align:left;'>
<li><a href='' name="sum">知识总结</a></li>
<li><a href='' name="case">案例</a></li>
</ul>
</h4>
<div name="sum" style="width:100%;height:46px;background-color:#fff;color: #000;">
<h3 style="line-height: 46px;">知识总结</h3>
</div>
<div>
<pre style='text-align:left;color:#fff;line-height: 30px;'>
[1]单标签就是只有一个标签，也就是一个空元素：meta、img、hr、br
[2]双标签有开始标签和结束标签
[3]块级元素：独占一行，对宽高的属性值生效，如果不给宽度，块级元素就默认浏览器的宽度，（即就是100%宽）。例如：div p ul h1~h6 .....
[4]行内元素：对宽高属性值不生效，完全靠内容撑开宽高，可以跟其他标签存在一行,例如：span b strong em a img input .....
[5]行内块元素：结合行内和块级元素的特点，不仅对宽高的属性值生效还可以跟多个 标签存在一行。例如：input img
[6]meta charset="utf-8"，设置编码方式，不设置中文乱码，英文正常。
[7]link rel="shortcut icon" type="image/x-icon"href="logo地址"，link在页面中最常见的就是引入外部样式
[8]text-indent:2em,首行缩进两字符。em斜体,i斜体 ,del删除线 ,br换行,pre预格式文本，保留文本空格换行等 ,h1--h6标题标签,font-size字体大小,line-hight行高
font-weight字体粗细,font-family字体样式,text-align文字位置
[9]a超链接。text-decoration:none;删除下划线。text-decoration:underline;加下划线。a:hover鼠标经过状态。
[10]有序列表,ol>li*n 无序列表,ui>li*n list-style:none;去掉无序列表样式 list-style:url(图片地址);通过该方法，不能调整图片位置等
before ul li:before{content:url(images/logo.png);margin-right:10px;}
after ul li:after{content:url(images/logo.png);margin-right:10px;}
[11]form表结构，属性：method=“get/post" action="URL地址'
input输入框，属性type="text/password" name="username/pwd" placeholder="请输入用户名/密码">
button登录按钮
[12]table表结构， border-collapse:collapse;边框线合并 tr>th表头 tr>td表格 colspan=""合并列 rowspan=""合并行
注意：
1.返回顶部不会，需要查资料学习
2.网页框架结构需多练习
3.before、after运用有限，需扩展练习
4.加验证码？
5.删除边框不会
6.文字左右两边显示
</pre>
</div>
<div name="case" style="width:100%;height:46px;background-color:#fff;color: #000;">
<h3 style="line-height: 46px;">案例</h3>
</div>
<div style="padding-top: 20px;">
<form method="get" action="">
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码"><br>
<button>登录</button>
</form>
</div>
<table>
<tr>
<th colspan="10" style="height:40px;">
<h1>个人简历</h1><br><span style="text-align: left;font-size:16px;">应聘职位：</span> <span style="text-align:right;font-size:12px;">填表日期：————年————月————日</span>
</th>
</tr>
<tr>
<td rowspan="2">姓名</td>
<td rowspan="2" colspan="2"></td>
<td>性别</td>
<td></td>
<td colspan="2">文化</td>
<td colspan="2"></td>
<td rowspan="4">照片</td>
</tr>
<tr>
<td>身高</td>
<td></td>
<td colspan="2">政治面貌</td>
<td colspan="2"></td>
</tr>
<tr>
<td>籍贯</td>
<td colspan="4"></td>
<td colspan="2">出生年月</td>
<td colspan="2"></td>
</tr>
<tr>
<td>户口所在地</td>
<td colspan="4"></td>
<td>婚否</td>
<td></td>
<td>民族</td>
<td></td>
</tr>
<tr>
<td>身份证号码</td>
<td colspan="4"></td>
<td colspan="2">现居住地址</td>
<td colspan="3"></td>
</tr>
<tr>
<td>毕业院校</td>
<td colspan="4"></td>
<td colspan="2">毕业时间</td>
<td colspan="3"></td>
</tr>
<tr>
<td>学习专业</td>
<td colspan="4"></td>
<td colspan="2">爱好特长</td>
<td colspan="3"></td>
</tr>
<tr>
<td style="height:90px;">个人简历</td>
<td colspan="9" style="height:90px;"></td>
</tr>
<tr>
<td>就学时间</td>
<td colspan="4">学校</td>
<td>学年</td>
<td>学历</td>
<td colspan="2">专业</td>
<td>担任职务</td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td>英语应用水平</td>
<td colspan="5"></td>
<td>职业期望</td>
<td colspan="3"></td>
</tr>
<tr>
<td>计算机应用水平</td>
<td colspan="5"></td>
<td>住宿要求</td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="4">工作经历</td>
<td colspan="2">时间</td>
<td colspan="5">工作地点</td>
<td colspan="2">职务</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="5"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="5"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="5"></td>
<td colspan="2"></td>
</tr>
<tr>
<td>待遇要求</td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="2">联系方式</td>
<td>移动电话</td>
<td colspan="3"></td>
<td>固定电话</td>
<td colspan="4"></td>
</tr>
<tr>
<td>邮编</td>
<td colspan="3"></td>
<td>地址</td>
<td colspan="4"></td>
</tr>
</table>
</body>
</html>
