摘要：
　　这是艺灵带你轻松学会div+css的第四节课：练习常用html标签。这节主要以练习标签为主，顺便讲解一些常知识点，例如：鼠标滑过图片时提示文本，图破时占位显示信息等......

第四节：练习常用html标签

在上一节的课程中，我们介绍了标签相关内容并枚举了一些常用的标签，今天的这节课，我们主要将上一节课中提到的标签都敲一遍，加深下自己的印象。

1.1、div,p标签

<div>这是一个div标签，划分布局常用</div>
<p>这是一个p标签，文章段落时经常用到</p>

上面代码配图：　此时看不出多大区别，但如果使用我们的审查元素，区别就很明显了。配图：　

1.2、a超链接

<a href="http://www.yilingsj.com" target="_blank">点击我去艺灵网站学习</a>

上面代码配图：　

知识点：
href="要跳转的链接地址"，target="窗口打开类型"。如果不带上href属性，则点击这个a标签时不会进行跳转！target常规取值为：_blank(新窗口打开)，如果不跟此属性，默认为本窗口打开，界时会替换掉原网页内容。

这里需要额外小讲下属性这个知识点。

1.2.1、html属性

在刚才的案例中，我们提到了两个属性，分别是：href和target。在html中，还有很多属性。例如：title、alt、width等等。虽然属性有很多，但格式不变！

1.2.2、属性格式

属性通常跟在我们标签的关键字后面，格式：英文空格属性="值"。这里直接将空格也放进格式中是为了让一些新手避免少写空格的错误习惯。为了便于理解，配图一张：同学们在练习过程中如果发现添加的属性不生效，此时需要检查下属性的格式是否正确了。

好，我们接着上面的往下讲。

1.3、img图像

<img src="图片地址" title="鼠标滑过时会看到这里写的文字" alt="图破时，占位处显示这里的文字" />

上面代码配图：　如果您对于鼠标滑过图片时提示信息感兴趣的话，通过我们刚才的代码即可实现这个效果。

1.4、span,em,strong,b,sub,sup,del等标签

<span>这是span标签</span>
<em>这是em，字体倾斜了哦~</em>
<strong>这是strong，字体加粗(变胖)了哦，语气更强</strong>
<b>这是b，字体加粗(变胖)了哦</b>
<sub>这是sub，下标</sub>
<sup>这是sup，上标</sup>
<del>这是del，删除</del>

上面代码配图：　这里现象很明显了吧！而且这些都在同一行显示的哦！原因：这些都是内联对象。

1.5、h1~h6标签

<h1>h1标签，字号最大</h1>
<h2>h2标签，字号稍微小点</h2>
<h3>h3标签，字号稍微小点</h3>
<h4>h4标签，字号稍微小点</h4>
<h5>h5标签，字号稍微小点</h5>
<h6>h6标签，字号稍微小点</h6>

上面代码配图：　字号逐渐变小，权重也是逐渐降低。

1.6、ul,li标签

<ul>
　<li>这是无序列表，默认前面会出现小点</li>
　<li>这是无序列表，默认前面会出现小点</li>
　<li>这是无序列表，默认前面会出现小点</li>
</ul>

上面代码配图：　注意前面的小点，不是手敲的哦！

1.7、ol,li标签

<ol>
　<li>这是有序列表，默认前面会出现数字且会自动增长</li>
　<li>这是有序列表，默认前面会出现数字且会自动增长</li>
　<li>这是有序列表，默认前面会出现数字且会自动增长</li>
</ol>

上面代码配图：　注意前面的数字会自动增长，神奇吧！

1.8、form表单相关

<form action="提交地址" method="提交方式">
　性别:<label><input type="radio" name="sex" id="man" value="" />男</label>　<label><input type="radio" name="sex" id="woman" value="" />女</label>
　<br />
　账号：<input type="text" name="name" id="name" value="请填写用户名" />
　<br />
　密码：<input type="password" name="password" id="password" placeholder="请填写密码" /><br />
　爱好：<label><input type="checkbox" name="like" value="" checked="checked" />美女</label>　<label><input type="checkbox" name="like" value="" />帅哥</label>
　<br />
　<input type="submit" value="提交"/>
　<input type="reset" value="重置" />
</form>

上面代码配图：　

上面的代码中包含有很多知识点。例如：点击男或女文字时自动选中，不必再像以往那样只有点击了前面的圈才能选中，做到这一点大大提高了用户体验。密码需要是密文，呈星号状，重置功能等。

input的type类型改变后会有不同功能及效果。

1.8.1、type

type="text" /*常见的文本框*/
type="password" /*密码*/
type="file" /*上传*/
type="email" /*邮箱*/
type="color" /*颜色*/
type="date" /*日期*/
type="number" /*数字类型*/
type="radio" /*单选*/
type="checkbox" /*复选*/
type="range" /*滑块*/
type="submit" /*表单提交*/
type="button" /*按钮*/
type="reset" /*重置*/
......如果您想知道更多，请上网查之，此处不再举例。

1.9、dl,dt,dd

<dl>
　<dt>dt，一般放图</dt>
　<dd>dd，一般放描述</dd>
</dl>

上面代码配图：　此标签一般用于图文显示。

1.10、table,tr,td

<table border="1" cellspacing="1" cellpadding="1">
　<tbody align="center">
　　<tr><th colspan="3">Header,水平横向将3个th合并成1个</th></tr>
　<tr><td>Data</td><td>Data</td><td>Data</td></tr>
　　<tr><td colspan="2">水平横向将两个td合并成一个</td><td> </td></tr>
　　<tr><td> </td><td colspan="2">水平横向将两个td合并成一个</td></tr>
　　<tr><td rowspan="2">纵向将两个td合并成1个</td><td>Data</td><td>Data</td></tr>
　<tr><td>Data</td><td>Data</td></tr>
　</tbody>
</table>

上面代码配图：　

表格在过去曾风靡很久，但现在用的不是特别多，如果是统数据还是建议使用表格。

对于上面的代码，重点有以下这些：cellspacing、cellpadding、colspan、rowspan。花点时间研究下吧，会有意外的收获哦~

1.11、多媒体

<!--方法一-->
<embed src="要播放的视频或mp3等地址" type="application/x-shockwave-flash" wmode="transparent"/>
</embed>
<!--方法二-->
<video width="" height="">
　<source src="myvideo.mp4" type="video/mp4"></source>
　<source src="myvideo.ogv" type="video/ogg"></source>
　<source src="myvideo.webm" type="video/webm"></source>
　<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
　　<param name="movie" value="myvideo.swf" />
　　<param name="flashvars" value="autostart=true&file=myvideo.swf" />
　</object>当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>

上面代码配图：　

注意上面代码中黄色高亮的部分wmode="transparent"，添加这个属性主要是用来解决：视频层高于其它层后覆盖住其它内容的问题。

1.12、marquee

<marquee>marquee，动起来！可做弹幕特效哦~</marquee>

上面代码配图：　

艺灵不会告诉你：marquee可以做弹幕特效。

还有一些标签，这里就不再列举了，如果同学们想了解更多，可网上查之。

2、demo欣赏

这篇文章中列举的这些标签，艺灵都放到一个demo网页中，小窗欣赏：如果想看全屏效果,点此进入demo演示页面

3、录制视频

标题：艺灵带你轻松学会div+css04练习常用html标签

视频备用地址：
淘宝：http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/38969674.swf
优酷：http://player.youku.com/player.php/sid/XMTU3ODAxMjY4OA==/v.swf
土豆：http://www.tudou.com/v/770lI8R9xv8/v.swf
腾讯：http://static.video.qq.com/TPout.swf?vid=t03011iudjs&auto=0

如果看官想看更多视频，可在优酷、土豆、腾讯视频中搜索下：艺灵设计哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-05-25/401.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。