摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html總結(jié)</title> <link rel="shortcut icon" type="i
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html總結(jié)</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總結(jié)</h1>
<hr>
<h4>
<ul style='list-style:none;text-align:left;'>
<li><a href='' name="sum">知識(shí)總結(jié)</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;">知識(shí)總結(jié)</h3>
</div>
<div>
<pre style='text-align:left;color:#fff;line-height: 30px;'>
[1]單標(biāo)簽就是只有一個(gè)標(biāo)簽，也就是一個(gè)空元素：meta、img、hr、br
[2]雙標(biāo)簽有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽
[3]塊級(jí)元素：獨(dú)占一行，對(duì)寬高的屬性值生效，如果不給寬度，塊級(jí)元素就默認(rèn)瀏覽器的寬度，（即就是100%寬）。例如：div p ul h1~h6 .....
[4]行內(nèi)元素：對(duì)寬高屬性值不生效，完全靠?jī)?nèi)容撐開(kāi)寬高，可以跟其他標(biāo)簽存在一行,例如：span b strong em a img input .....
[5]行內(nèi)塊元素：結(jié)合行內(nèi)和塊級(jí)元素的特點(diǎn)，不僅對(duì)寬高的屬性值生效還可以跟多個(gè) 標(biāo)簽存在一行。例如：input img
[6]meta charset="utf-8"，設(shè)置編碼方式，不設(shè)置中文亂碼，英文正常。
[7]link rel="shortcut icon" type="image/x-icon"href="logo地址"，link在頁(yè)面中最常見(jiàn)的就是引入外部樣式
[8]text-indent:2em,首行縮進(jìn)兩字符。em斜體,i斜體 ,del刪除線(xiàn) ,br換行,pre預(yù)格式文本，保留文本空格換行等 ,h1--h6標(biāo)題標(biāo)簽,font-size字體大小,line-hight行高
font-weight字體粗細(xì),font-family字體樣式,text-align文字位置
[9]a超鏈接。text-decoration:none;刪除下劃線(xiàn)。text-decoration:underline;加下劃線(xiàn)。a:hover鼠標(biāo)經(jīng)過(guò)狀態(tài)。
[10]有序列表,ol>li*n 無(wú)序列表,ui>li*n list-style:none;去掉無(wú)序列表樣式 list-style:url(圖片地址);通過(guò)該方法，不能調(diào)整圖片位置等
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表結(jié)構(gòu)，屬性：method=“get/post" action="URL地址'
input輸入框，屬性type="text/password" name="username/pwd" placeholder="請(qǐng)輸入用戶(hù)名/密碼">
button登錄按鈕
[12]table表結(jié)構(gòu)， border-collapse:collapse;邊框線(xiàn)合并 tr>th表頭 tr>td表格 colspan=""合并列 rowspan=""合并行
注意：
1.返回頂部不會(huì)，需要查資料學(xué)習(xí)
2.網(wǎng)頁(yè)框架結(jié)構(gòu)需多練習(xí)
3.before、after運(yùn)用有限，需擴(kuò)展練習(xí)
4.加驗(yàn)證碼？
5.刪除邊框不會(huì)
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="請(qǐng)輸入用戶(hù)名">
<input type="password" placeholder="請(qǐng)輸入密碼"><br>
<button>登錄</button>
</form>
</div>
<table>
<tr>
<th colspan="10" style="height:40px;">
<h1>個(gè)人簡(jiǎn)歷</h1><br><span style="text-align: left;font-size:16px;">應(yīng)聘職位：</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>戶(hù)口所在地</td>
<td colspan="4"></td>
<td>婚否</td>
<td></td>
<td>民族</td>
<td></td>
</tr>
<tr>
<td>身份證號(hào)碼</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è)時(shí)間</td>
<td colspan="3"></td>
</tr>
<tr>
<td>學(xué)習(xí)專(zhuān)業(yè)</td>
<td colspan="4"></td>
<td colspan="2">愛(ài)好特長(zhǎng)</td>
<td colspan="3"></td>
</tr>
<tr>
<td style="height:90px;">個(gè)人簡(jiǎn)歷</td>
<td colspan="9" style="height:90px;"></td>
</tr>
<tr>
<td>就學(xué)時(shí)間</td>
<td colspan="4">學(xué)校</td>
<td>學(xué)年</td>
<td>學(xué)歷</td>
<td colspan="2">專(zhuān)業(yè)</td>
<td>擔(dān)任職務(wù)</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>英語(yǔ)應(yīng)用水平</td>
<td colspan="5"></td>
<td>職業(yè)期望</td>
<td colspan="3"></td>
</tr>
<tr>
<td>計(jì)算機(jī)應(yīng)用水平</td>
<td colspan="5"></td>
<td>住宿要求</td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="4">工作經(jīng)歷</td>
<td colspan="2">時(shí)間</td>
<td colspan="5">工作地點(diǎn)</td>
<td colspan="2">職務(wù)</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>移動(dòng)電話(huà)</td>
<td colspan="3"></td>
<td>固定電話(huà)</td>
<td colspan="4"></td>
</tr>
<tr>
<td>郵編</td>
<td colspan="3"></td>
<td>地址</td>
<td colspan="4"></td>
</tr>
</table>
</body>
</html>
批改老師：查無(wú)此人批改時(shí)間：2019-06-22 17:03:14
老師總結(jié)：完成的不錯(cuò)。表格很常用，現(xiàn)在很多框架的表格很漂亮，可以研究下。繼續(xù)加油