HTML
一. 概念
html就是一個標準標記語言。
二. 標籤
h標籤
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
超鏈接
<a href="http://www.baidu.com" target="">百度</a>
target中屬性的值有：_self(自己)，在當前頁面中打開；__blank（空白）在另外一個新的空白的tab中打開。
段落標籤
<p> </p>
用來一個段落，是一個非常特殊的標籤，因爲它是一個 塊級元素，有是一個文本級元素。
圖片
<img src="./../../1.jpg">
表格標籤
<table border="1" cellspacing="0" cellpadding="0" width="10%">
<thead>
<tr>
<th></th><!-- 文本加粗並居中 -->
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tobdy>
<tfoot>
</tfoot>
</table>
table標籤表只能放thead、tbody、tfoot、tr; tr下只能放th、hd; td、th下可以放任何東西
可以不寫tbody、thead、tfoot
colspan: 列合併、rowspan, 行合併
無序列表
<ul>
<li></li>
</ul>
ul下只能放li標籤，但是li下可以放發任何東西
有序列表
<ol>
<li></li>
</ol>
ol下只能放li標籤，但是li下可以放發任何東西
div
<div></div>
文本元素
<span></span>
<b></b>
<i></i>
<u></u>
表單元素
<input> type類型： text password radio checkbox reset submit file
<select multiple>
<option></option>
</selct>
<textarea rows="" cols=""></textare>
作業：
- 不參考上課代碼，寫出表單。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這是小白到大神第一個HTML作業</title>
</head>
<body>
<!--
shift + enter : 實現光標(在任何一個位置)換行。
一定要掌握:
<input> 標籤的type類型：
text(默認), password(密碼), file(文件), radio(單選),
checkbox(複選) submit(提交) reset(重置)
<select multiple> select標籤下面是 <option>, mutiple的意思是否爲多選。
<textarea rows="" cols=""> 文本域標籤, rows(行) 高度， cols(列)， 寬度。
-->
<form action="" method="">
<table>
<tr>
<td>用戶名:</td>
<!-- name一定要帶上，將來在做交互的時候要使用 -->
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>職業</td>
<td><input type="text" name="job"></td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>頭像:</td>
<td><input type="file" name="password"></td>
</tr>
<tr>
<td>性別:</td>
<td>
<!-- 單選按鈕
對於radio標籤，checked或者 checked="checked" 默認選中
-->
<input type="radio" name="gender"> 男
<input type="radio" checked name="gender"> 女
</td>
</tr>
<tr>
<td>技能/td>
<td>
<!-- 複選框
對於radio標籤，checked或者 checked="checked" 默認選中
-->
<input type="checkbox" checked name="interests"> 擅長java
<input type="checkbox" name="interests"> 擅長Python
<input type="checkbox" name="interests"> 擅長吹水
<input type="checkbox" checked name="interests"> 擅長c++
<input type="checkbox" checked name="interests"> 擅長撩妹
</td>
</tr>
<tr>
<td>能力等級:</td>
<td>
<select name="graduation">
<option></option>
<option>及格</option>
<option>中等</option>
<option>良好</option>
<option>優秀</option>
</select>
</td>
</tr>
<tr>
<td>所屬部門:</td>
<td>
<!-- multiple 多個。 -->
<select multiple name="bank">
<option>運維的</option>
<option>人力部</option>
<option>後勤部門</option>
<option>研發部</option>
<option>售前服務</option>
<option>售後服務</option>
<option>總部</option>
</select>
</td>
</tr>
<tr>
<td>自己介紹一下自己:</td>
<!--
rows表示行，值爲整數
cols表示列，值爲整數
-->
<td><textarea rows="20" cols="59" name="profile"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
效果圖如圖所示
2. 就是表格的合併
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="80%" border="1" cellpadding="0" cellspacing="0"
style="text-align: center;">
<tr>
<td rowspan="2" style="background-color: blanchedalmond;color: crimson;">年齡</td>
<td rowspan="2" style="background-color: cornflowerblue;color: azure;">性別</td>
<td rowspan="2" style="background-color:blue ;color: aliceblue;">地址</td>
<td colspan="2" width="25%" style="background-color: sandybrown;color: black;">Name</td>
</tr>
<tr>
<td style="background-color: chartreuse;color: darkgoldenrod;">FirstName</td>
<td style="background-color: aqua;color: currentcolor;">LastName</td>
</tr>
<tr>
<td>2</td>
<td>女</td>
<td>中國</td>
<td>林</td>
<td>小美</td>
</tr>
<tr>
<td>23</td>
<td>男</td>
<td>中國</td>
<td>錢</td>
<td>小四</td>
</tr>
<tr>
<td>18</td>
<td>女</td>
<td>英國</td>
<td>jack</td>
<td>makkke</td>
</tr>
</table>
</body>
</html>
效果圖如圖所示，花裏花俏的
