abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html總結</title> <link rel="shortcut icon" type="i
<!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鼠標經過狀態(tài)。
[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">現(xiàn)居住地址</td>
<td colspan="3"></td>
</tr>
<tr>
<td>畢業(yè)院校</td>
<td colspan="4"></td>
<td colspan="2">畢業(yè)時間</td>
<td colspan="3"></td>
</tr>
<tr>
<td>學習專業(yè)</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">專業(yè)</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>職業(yè)期望</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">聯(lián)系方式</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>
Correcting teacher：查無此人Correction time：2019-06-22 17:03:14
Teacher's summary：完成的不錯。表格很常用，現(xiàn)在很多框架的表格很漂亮，可以研究下。繼續(xù)加油