第二天 HTML的常用标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
一、媒体标签
（一）、图片标签（img）
图片标签用于显示图片
标签格式及属性介绍
<img />图片标签
常用属性：
src:图片的路径（必要属性）
width:图片宽度（值可为百分比80%也可为像素200）
height:图片高度（值可为百分比80%也可为像素200）【width和height属性建议定义一个即可，以避免图片失真变形】
alt:图片加载失败(浏览器没找到图片)时的替换文本
title:鼠标悬停在图片上的提示文本
案例
<img src="img/toplogo.png" width="200" alt="图片内容77" title="这是张Logo图片"/>
<img src="img/logo.png" width="200" alt="图片内容gooogle" title="这是谷歌Logo图片"/>
<img src="img/toplogo.pn" width="200" alt="图片内容77" title="这是张Logo图片"/>
效果
（二）、音频标签（embed、audio）
用于浏览器播放音频文件。
embed标签
<embed ></embed> 音频标签
常用属性：
src：音频路径（必要属性）
width：播放器宽度
height：播放器高度
案例
<embed src="img/青花瓷.mp3" width="200" height="100" ></embed>
audio标签
<audio></audio>音频标签
常用属性：
src:音频路径（必要属性）
controls：播放的控制台（没有这个属性不显示控制台）
autoplay：自动播放（有这个属性打开网页自动播放）
案例
<audio src="img/青花瓷.mp3" controls="controls" autoplay="autoplay"></audio>
Chrome浏览器上embed标签与audio标签运行效果
IE浏览器上embed标签与audio标签运行效果
（三）、视频标签（embed、video）
embed标签
<embed></embed>用法与音频embed标签相同。
警告！经本人测试Chrome浏览器不支持embed标签，该标签显示乱码，IE浏览器可正常解析！
案例
<embed src="img/蜗牛与黄鹂鸟.MP4" width="400"></embed>
video标签
<video></video>用法与音频标签audio相同。
案例
<video src="img/蜗牛与黄鹂鸟.MP4" controls="controls" autoplay="autoplay"></video>
Chrome浏览器上embed标签与audio标签运行效果
IE浏览器上embed标签与audio标签运行效果
（四）、源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>媒体标签学习</title>
<style>
body{
background: palegreen;
}
h1,h3{
text-align: center;
}
</style>
</head>
<body>
<h1><a name="top"></a>媒体标签学习</h1>
<hr />
<h3>图片标签</h3>
<img src="img/toplogo.png" width="200" alt="图片内容77" title="这是张Logo图片"/>
<img src="img/logo.png" width="200" alt="图片内容gooogle" title="这是谷歌Logo图片"/>
<img src="img/toplogo.pn" width="200" alt="图片内容77" title="这是张Logo图片"/>
<hr />
<h3>音频标签</h3>
<embed src="img/青花瓷.mp3" width="200" height="100"></embed>
<h4>上为embed标签，下为audio标签</h5>
<!--controls属性：控制台
autoplay属性：自动播放 -->
<audio src="img/青花瓷.mp3" controls="controls" autoplay="autoplay"></audio>
<hr />
<h3>视频标签</h3>
<embed src="img/蜗牛与黄鹂鸟.MP4" width="400"></embed>
<!--视频播放Chrome不支持embed标签-->
左为embed标签，右为video标签
<video src="img/蜗牛与黄鹂鸟.MP4" controls="controls" autoplay="autoplay"></video>
</body>
</html>
二、链接标签（a）
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
（一）、超链接标签
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a href="跳转的位置">文本（图像）</a>
常用属性：
href：要跳转的链接地址（必要属性）
target：跳转的目标页面是新建窗口显示（_blank）、覆盖当前页面（_self）
案例
<a href="http://google.com">谷歌一下</a> 超链接文本
<a href="http://google.com" target=""_self""><img src="img/logo.png" width="200"/></a> 超链接图片
效果
（二）、锚链接
锚链接可以跳转到当前页面的指定位置或指定页面的指定位置！常用于长网页的快速定位和快速返回！
锚链接与超链接的区别在于，锚链接需要一个“锚点”，相当于一个定位的标识，使用a标签的name属性来设置“锚点”。
锚点
<a name="top"></a>常用锚点的写法
name属性的值为锚点名称，定位时用到，要求一个html页面锚点名称不能重复
定位
用法与超链接相同
<a href="#top">TOP</a>定位同一html文件中的锚点方法
href属性 = #+锚点名称
<a href="index.html#top">返回主页</a>定位不同html文件中锚点的方法
href属性值 = html文件路径+#+锚点名称
三、列表标签
（一）、无序标签（ul）
组织页面上文本
<ul type="square" title="这是无序列表">
<li><a href="http://baidu.com">百度一下</a></li>
<li><a href="http://google.com">谷歌一下</a></li>
<li><a href="http://taobao.com">淘宝一下</a></li>
<li><a href="http://jd.com">京东一下</a></li>
</ul>
type属性：标签图标形状disc:实心圆（默认）、circle:空心圆、square:方块
title属性：鼠标悬停文本提示
（二）、有序列表（ol）
<ol type="1" title="搜索大全">
<li><a href="http://baidu.com">百度一下</a></li>
<li><a href="http://google.com">谷歌一下</a></li>
<li><a href="http://taobao.com">淘宝一下</a></li>
<li><a href="http://jd.com">京东一下</a></li>
</ol>
用法基本与无序标签相同，需要注意的是type属性取值
type属性：1：阿拉伯数字排序
a、A：字母排序
i、I：罗马数字排序
（三）、自定义列表（dl）
主要用于图文混排。
<dl title="搜索大集合">
<dt><img src="img/11.png" alt="google" width="50"/></dt>
<dd><a href="http://google.com">谷歌一下吧</a></dd>
<dt><img src="img/bd_logo1.png" alt="baidu" width="50"/></dt>
<dd><a href="http://baidu.com">我是百度</a></dd>
<dt><img src="img/so.ico" alt="360搜索" width="50"/></dt>
<dd><a href="http://so.com">我是360搜索</a></dd>
</dl>
dt标签：用于显示图片
dd标签：用于显示文本
(四）、源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签学习</title>
<style>
body{
background: palegreen;
/*text-align: center;*/
}
h1,h3{
text-align: center;
}
</style>
</head>
<body>
<h1>列表标签学习</h1>
<h3>无序列表ul</h3>
<!--属性type:标签图标形状
disc:实心圆（默认）
circle:空心圆
square:方块
title:鼠标悬停提示文本
-->
<ul type="square" title="这是标题">
<li><a href="http://baidu.com">百度一下</a></li>
<li><a href="http://google.com">谷歌一下</a></li>
<li><a href="http://taobao.com">淘宝一下</a></li>
<li><a href="http://jd.com">京东一下</a></li>
</ul>
<hr />
<h3>有序列表ol</h3>
<ol type="1" title="谷歌相关图标">
<li><a href="http://baidu.com">百度一下</a></li>
<li><a href="http://google.com">谷歌一下</a></li>
<li><a href="http://taobao.com">淘宝一下</a></li>
<li><a href="http://jd.com">京东一下</a></li>
</ol>
<hr />
<h3>自定义列表dl</h3>
<dl title="搜索大集合">
<dt><img src="img/11.png" alt="google" width="50"/></dt>
<dd><a href="http://google.com">谷歌一下吧</a></dd>
<dt><img src="img/bd_logo1.png" alt="baidu" width="50"/></dt>
<dd><a href="http://baidu.com">我是百度</a></dd>
<dt><img src="img/so.ico" alt="360搜索" width="50"/></dt>
<dd><a href="http://so.com">我是360搜索</a></dd>
</dl>
</body>
</html>
（五）、运行效果
四、表格标签（table）
主要用于显示表格数据或数据库数据
<table border="2" width="30%" cellpadding="10" cellspacing="10">
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>88</td>
<td>92</td>
</tr>
<tr>
<td>李四</td>
<td>83</td>
<td>95</td>
</tr>
</table>
table常用属性：
border：表格边框粗细表示（不写则默认0，不显示表格边框）
width：表格宽度（不写浏览器则根据表格内容自动适应）
align：整个表格的对齐方式，,主要有三个值left center right 分别表示左、中、右三种对齐方式
bgcolor：整个表格的背景颜色
bordercolor：表格边框的颜色
cellspacing：单元格间的宽度（）框线的宽度
cellpadding：单元格内容与周边框线的距离
tr常用属性：
bgcolor：行内容的背景色
border：行的边框宽度
bordercolor：行边框颜色
background：行背景图片
align：行内容水平对齐方式
valign：行内容的垂直对齐方式
td与th常用属性：
width：单元格宽度
height：单元格高度
bgcolor：单元格的背景色
border：单元格的边框宽度
background：单元格的背景图片
align：单元格内容水平对齐方式
valign：单元格内容的垂直对齐方式
colspan：跨列（横向跨越所占的格数）
rowspan：跨行（纵向跨越所占的格数）
案例（表格跨行跨列）
<table border="2" width="30%" cellpadding="10" cellspacing="10">
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>88</td>
<td>92</td>
</tr>
<tr>
<td>李四</td>
<td>83</td>
<td>95</td>
</tr>
</table>
<hr />
<h3>晋级学习(合并单元格)</h3>
<table border="1" width="30%">
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>89</td>
</tr>
<tr>
<td>英语</td>
<td>78</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>95</td>
</tr>
<tr>
<td>英语</td>
<td>77</td>
</tr>
<tr>
<td colspan="3" align="left">备注：</td>
</tr>
</table>
运行效果
五、表单标签（form)
表单用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<form action="提交地址" method="提交方式post/get">
< input type+"···" />···
</from>
action：表单信息提交给谁（服务器地址，#表示提交给自己，一般用于调试）
method：提交方式get和post
get会在地址栏中显示表单的数据（不安全），
post:不会在地址栏中显示数据，数据会在一个叫form Data的地方
<input type="···" />：表单元素
type取值：text（文本框）password（密码框）submit（提交按钮）
案例
<form action="#" method="get">
<p>用户名： <input type="text" name="uname" /></p>
<p>密码：<input type="password" name="pwd" /></p>
<p><input type="submit" value="Google" /></p>
</form>
表单数据以键值对的方式提交，其中键为name属性的值，值为用户输入；
案例效果展示
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
