一、HTML中表格标签学习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>表格学习1</h3>
<table border="1px" align="center">
<tr height="100px" align="center">
<td width="100px" >11</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr height="100px" align="center">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr height="100px" align="center">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
实现的效果
<hr />
<h3>表格学习2</h3>
<!--
书写表格的快捷键
table[border='1px']>tr[height='100px']*3>th[width='100px']*3-->
<table border="1px">
<thead>
<tr height="100px" bgcolor="green">
<th width="100px" bgcolor="red" >1</th>
<th width="100px">2</th>
<th width="100px">3</th>
</tr>
</thead>
<tbody bgcolor="palevioletred" align="center">
<tr height="100px">
<th width="100px" rowspan="2">4</th>
<th width="100px">5</th>
<th width="100px">6</th>
</tr>
<tr height="100px">
<th width="100px">4</th>
<th width="100px">5</th>
<th width="100px">6</th>
</tr>
<tr height="100px">
<th width="100px">4</th>
<th width="100px">5</th>
<th width="100px">6</th>
</tr>
</tbody>
<tfoot>
<tr height="100px">
<th width="100px">7</th>
<th width="100px">8</th>
<th width="100px">9</th>
</tr>
</tfoot>
</table>
实现的效果
<hr />
<h3>表格的合并</h3>
<table border="1px" align="center">
<tr height="100px" align="center">
<td width="100px" rowspan="2">1--4</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr height="100px" align="center">
<!--<td>4</td>-->
<td>5</td>
<td>6</td>
</tr>
<tr height="100px" align="center">
<td>7</td>
<td colspan="2">8--9</td>
<!--<td>9</td>-->
</tr>
</table>
</body>
</html>
实现的效果
<!--
table: 自适应能力
（width="300px" height="300px"）每个单元格的大小和内容有关系
（align="center"）整个表格整体居中
tr（height）（align="center"文本居中）:行
td（width）（align="center"文本居中）:列
th:标题列：字体会加粗，文本会居中
bgcolor:背景颜色
thead,tbody,tfoot:
好处:可以批量的操作元素，操作方便
行合并/和列合并不可以跨区域使用
rowspan="2"(行合并)/colspan（列合并）
2:是代表要合并的行或者列的数量
切记：合并完之后把合并上的行/列删除
-->
二、iframe 框架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com" target="ifm">百度</a></li>
<li><a href="http://www.taobao.com" target="ifm">淘宝</a></li>
<li><a href="http://www.163.com" target="ifm">网易</a></li>
</ul>
<!--网页的嵌套：特点：只是局部刷新，不是整个网页刷新-->
<iframe name="ifm" width="1000px" height="500px" src="http://www.baidu.com"></iframe>
<!--
name:框架的名称
width：宽度
height:高度
src：默认打开的网页
-->
</body>
</html>
三、frameset 框架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="100px,*,80px">
<frame src="admin/top.html" noresize="noresize"/>
<frameset cols="15%,*">
<frame src="admin/left.html"/>
<frame name="frm" src="admin/right.html"/>
</frameset>
<frame src="admin/bottom.html"/>
</frameset>
<!--<body>
</body>-->
</html>
<!--
第一步：去除body标签
第二步：划分指定的网页（横向划分{rows},纵向划分{cols}）
-->
实现的效果
四、form表单的认识
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!--普通文本框-->
<input type="text" name="wd" id="" value="" />
<!--提交按钮-->
<input type="submit" value="牛逼一下"/>
</form>
</body>
</html>
<!--
****重点
https://www.baidu.com/s?wd=java
?:前-代表提交的地址
?:后-代表的是提交的参数 key =value&key=value
action:表单提交的地址
method:提交的方式
get(默认的方式) : url{http://www.baidu.com/?wd=java}
post:url{http://www.baidu.com/}
两者的区别：
get：请求的数据是依附于url地址之后，传输的数据是有大小限制的，数据的请求是不安全的
post：（居多）请求的数据是依附于传输的文本，传输的数据是没有大小的限制，数据请求比较的安全
-->
五、HTML4中的常用表单项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<!--普通文本框-->
<p>
账号:<input type="text" name="zh" placeholder="请输入邮箱/账号"/>
</p>
<!--密码框-->
<p>
密码:<input type="password" name="pwd"/>
</p>
<p>
<!--单选框-->
性别:
男<input type="radio" name="sex" checked="checked"/>
女<input type="radio" name="sex"/>
</p>
<p>
<!--多选框 checked：默认被勾选-->
爱好：
抽烟<input type="checkbox" checked="checked"/>
喝酒<input type="checkbox" checked/>
烫头<input type="checkbox" />
</p>
<p>
<!--下拉列表 selected：默认选择的内容-->
国籍：
<select size="2" >
<output></output>
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3" selected>英国</option>
</select>
</p>
<p>
<!--文件选择-->
文件选择:<input type="file" />
</p>
<p>
<!--多行文本框-->
<textarea rows="20" cols="30"></textarea>
</p>
<p>
<!--提交按钮-->
<input type="submit" value="提交" />
<!--清空按钮-->
<input type="reset" value="清空" />
<!--普通的按钮，无法提交表单的数据 本身没有作用，一般结合js中的事件使用-->
<input type="button" value="提交" onclick="alert('我不管，我最帅')"/>
</p>
</form>
</body>
</html>
效果图
六、html5中新增表单项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--table表格+form表单构成的布局效果-->
<form>
<table border="0px" align="center">
<tr height="50px">
<td width="150px">*日期:</td>
<td width="150px">
<input type="date" name="" id="" value="" />
</td>
</tr>
<tr height="50px">
<td width="150px">星期:</td>
<td width="150px">
<input type="week" name="" id="" value="" />
</td>
</tr>
<tr height="50px">
<td width="150px">*年龄:</td>
<td width="150px">
<input type="number" name="" id="" value="" />
</td>
</tr>
<tr height="50px">
<td width="150px">邮箱:</td>
<td width="150px">
<input type="email" name="" id="" value="" />
</td>
</tr>
<tr height="50px">
<td width="150px">地址:</td>
<td width="150px">
<input type="url" name="" id="" value="" />
</td>
</tr>
<tr height="50px">
<td width="150px">颜色:</td>
<td width="150px">
<input type="color" name="" id="" value="" />
</td>
</tr>
<tr height="50px">
<td width="150px"><input type="submit" value="提交" /> </td>
<td width="150px">
<input type="reset" name="" id="" value="清空" />
</td>
</tr>
</table>
</form>
</body>
</html>
效果图
七、HTML中的媒体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--音频标签 controls：控制条-->
<audio src="au/1.mp3" controls="controls"></audio>
<!--可以引入任何的音频-->
<audio>
<source src="au/1.mp3"></source>
<source src="au/1.ogg"></source>
<source src="au/1.wav"></source>
该浏览器不支持音频
</audio>
<!--视频标签引入-->
<video src="au/movie.mp4" controls="controls"></video>
<video>
<source src="au/movie.mp4"></source>
<source src="au/movie.ogg"></source>
<source src="au/movie.webm"></source>
</video>
<!--多媒体-->
<embed src="au/1.mp3"></embed>
<embed src="au/movie.mp4"></embed>
</body>
</html>
