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>
效果图如图所示，花里花俏的
