轻松学会div+css03常用html标签及用途

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2016-05-24 22:49:04　-　阅:　-　评:1　-　积分:0

摘要：
　　这是艺灵带你轻松学会div+css的第三节课：常用html标签及用途。这节先解释用dreamweaver新建的文档代码释义，然后再教同学们如何区分单双标签，最后列举常用的标签......

第三节：常用html标签及用途

1.1、html文档说明

在上一节的课程中，我们知道了如何去新建html文档，那么对于文档中默认的代码都是什么意思呢？

1.1.1、文档解释

<!--文档声明，遵循XHTML 1.0过渡型标准规范、、、-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--定义一个命名空间-->
<html xmlns="http://www.w3.org/1999/xhtml">
<!--头部-->
<head>
<!--编码，如果没有可能会出现乱码现象！-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--一个网页的标题，显示在浏览器左上角-->
<title>无标题文档</title>
<meta name="keywords" content="网页关键字写在这里"/>
<meta name="description" content="网页描述内容写这里"/>
<!--待引入的外部css样式表-->
</head>
<!--身体部分-->
<body>
<!--body里面放我们自定义的html代码及js等内容-->
</body>
</html>

配图一张：新建的html文档释义对于新手来说，默认生成的这些内容并不需要我们去记，但艺灵还是建议同学们在自己电脑上用手敲几遍代码，加深下印象。

接下来我们来说下标签。

2.1、标签

一个html网页由若干个标签组成，不同的标签有不同的意义和作用。在讲这些标签前，我们需要知道标签的格式。

2.1.1、标签格式

由一对尖括号包裹的关键词组成，例如：<div>，<p>，<a>等等。特别强调一点：不管是标签还是属性还是css样式中出现的符号，必须将输入法切换成英文状态下再输入。也就是说：我们的html代码不识别中文！(别问为什么了，反正这玩意儿不是国人发明的，所以你懂的。)

上面提到的尖括号，可能有些新手还不知道如何在键盘中打出，注意了：同时按住Ctrl+,可打出左尖括号<；同时按住Ctrl+.可打出右尖括号>。如果对同时一词不能够理解，可以这样：先按住Ctrl不要松，再用另一支手去按,或.即可打出左尖括号<或右尖括号>。如果您对键盘不熟悉，艺灵建议您多练习练习，练久了就会了。

我们了解了标签的格式后，需要再知道一个知识点：单双标签。

2.1.2、单双标签特点

单标签是孤独的，例如默认文档中的meta标签，以及我们以后经常用到的img图片、input输入框等等。

双标签是成双成对的，例如默认文档中的title、body，以及我们以后经常用到的div、p、a等等。双标签的第一个标签是开始标签，第二个是结束标签。此处配图一张：　

2.1.3、如何区分单双标签

如果是新手，我们可以打开我们的dreameaver编辑器，然后将光标放到我们的<body>标签中间，然后先敲一个左尖括号<然后再敲一个关键字，例如：img，然后再敲一个右尖括号>。此时要注意了，如果右尖括号前面出现了一个斜杠 / 则表示这个标签为单标签。否则为“双标签”。配图一张：　

注意上面结论中的这个双标签，艺灵添加了一个引号，什么意思呢？其实上面这种方法判断双标签并不准确，因为新手可能会随便输入一些本来就没有的标签。

那如何判别双标签呢？

2.1.4、判别双标签

还是执行刚才的步骤：打开dw编辑器，然后将光标放到我们的<body>标签中间，然后先敲一个左尖括号<然后再敲一个关键字，例如：div，然后再敲一个右尖括号>，然后接着再敲一个左尖括号<，然后再敲一个斜杠 / 。此时需要注意！如果此时再次出现我们刚打的关键字div，则表示这个标签是双标签，否则，这个标签是不存在的一个标签！配图一张：　

关于区分标签一事，掌握不熟的同学们请多做练习。不要拿到代码就光凭眼睛看，要知道：魔术可就是在你眼皮底下变的，你相信你的眼睛吗？？？所以，如果想要知道你的判断单双标签对不对，不要嫌麻烦，多练习总有好处的！

注意一点，在html中，只有单双标签，没有三标签、四标签等等！

接下来我们再说说常用的标签有哪些吧。

3.1、常用标签

html标签有很多，但我们常用的却并不多。对于新手来说，我们只需要熟记常用的标签就足够应对我们平时的工作了。

3.1.1、常用html标签整理

/*格式：标签名-用途*/
div-划分布局
p-文本段落
a-超链接
span,em,strong,b,sub,del等-修饰用
h1~h6-seo优化
ul,li,ol,li-有无序列表
form,input,label,textarea,button,select-表单相关
table,tr,td-表格相关
dl,dt,dd-列表相关
img-图像
embed,video,object-视频相关
marquee-跑马灯
title-网页标题

以上枚举的这些，在我们日常制作网页中都会用到，那就新手先掌握这些标签，没事时打开软件练习练习。

4.1、录制视频

标题：艺灵带你轻松学会div+css03常用html标签及用途

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

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

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

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-05-24/400.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！