第二天 HTML的常用标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
一、媒体标签（一）、图片标签（img）标签格式及属性介绍（二）、音频标签（embed、audio）embed标签audio标签（三）、视频标签（embed、video）embed标签video标签（四）、源码二、链接标签（a）（一）、超链接标签（二）、锚链接锚点定位三、列表标签（一）、无序标签（ul）（二）、有序列表（ol）（三）、自定义列表（dl）(四）、源码（五）、运行效果四、表格标签（table）案例（表格跨行跨列）五、表单标签（form)一、媒体标签
（一）、图片标签（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="">谷歌一下</a> 超链接文本<a href="" 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="">百度一下</a></li><li><a href="">谷歌一下</a></li><li><a href="">淘宝一下</a></li><li><a href="">京东一下</a></li></ul>type属性：标签图标形状disc:实心圆（默认）、circle:空心圆、square:方块title属性：鼠标悬停文本提示
（二）、有序列表（ol）
<ol type="1" title="搜索大全"><li><a href="">百度一下</a></li><li><a href="">谷歌一下</a></li><li><a href="">淘宝一下</a></li><li><a href="">京东一下</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="">谷歌一下吧</a></dd><dt><img src="img/bd_logo1.png" alt="baidu" width="50"/></dt><dd><a href="">我是百度</a></dd><dt><img src="img/so.ico" alt="360搜索" width="50"/></dt><dd><a href="">我是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="">百度一下</a></li><li><a href="">谷歌一下</a></li><li><a href="">淘宝一下</a></li><li><a href="">京东一下</a></li></ul><hr /><h3>有序列表ol</h3><ol type="1" title="谷歌相关图标"><li><a href="">百度一下</a></li><li><a href="">谷歌一下</a></li><li><a href="">淘宝一下</a></li><li><a href="">京东一下</a></li></ol><hr /><h3>自定义列表dl</h3><dl title="搜索大集合"><dt><img src="img/11.png" alt="google" width="50"/></dt><dd><a href="">谷歌一下吧</a></dd><dt><img src="img/bd_logo1.png" alt="baidu" width="50"/></dt><dd><a href="">我是百度</a></dd><dt><img src="img/so.ico" alt="360搜索" width="50"/></dt><dd><a href="">我是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和postget会在地址栏中显示表单的数据（不安全），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属性的值，值为用户输入；
案例效果展示
