论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > HTML教程
Tag:初学,入门,文字,链接,table,表单,框加,多媒体,标签,视频教程

html教程_xhtml的常用标签介绍

文章类别:HTML | 发表日期:2011-4-26 9:30:09

我们来简单介绍一下xhtml的常用标签。

1.段落<p>



  段落标签<p>和</p>,在它们中间放上段落的内容,它就形成一个自然段,浏览器在默认情况下会给每个<p>打头的自然段上下两面加上一些空白让段与段之间更加明晰。比如:

<p>阿邦网,生活好帮手!</p>



2.标题<h1>--<h6>



  网页里的标题有六个级别, 即h1~h6,h1是一级标题,以此类推到h6就是六级标题,字体也是由h1排到h6,即由大到小,如果说你觉得六个不够用,非要定出个h7、h9,那么抱歉,只能想其他办法了。


<h1>这是一级标题</h1> 效果相当于30像素的粗体字
<h2>这是二级标题</h2> 效果相当于24像素的粗体字
<h3>这是三级标题</h3> 效果相当于18像素的粗体字
<h4>这是四级标题</h4> 效果相当于16像素的粗体字
<h5>这是五级标题</h5> 效果相当于13像素的粗体字
<h6>这是六级标题</h6> 效果相当于10像素的粗体字


  它的上下两面和<p>一样都添加了空白。

3.换行<br />



  在一个自然段里,也就是在代码的<p>和</p>之间,我们想另起一行而不是另起一段的时候需要插入一个换行标签<br />,从以前的文章里我们可以知道它是一个空标签,需要用“/”来将它关闭。

<p>我在天涯论坛看到阿邦网的广告啦<br />看小窗口,游大世界<br /></p>



4.水平分割线<hr />



  在一大段一大段的文章中间,有时候需要加入一条华丽的分割线来增加美观性,让文章看起来更舒服。这时候<hr />就能“制造”出那条分割线了,<hr />和<br />一样是空标签,需要“/”来关闭一下。

5.区块DIV



  DIV是我们以后经常会用到的标签之一,它可以定义一个区块,里面包含段落、标题、表格等等内容,它最常与id和class一起出现,用它们来定义自己的样式。

<div id="wrap"><div class="redbg"><p>阿邦网,生活好帮手。</p></div></div>


6.引用定义span

  span自身没有什么意义,但它可以通过借用id或class赋予他们的样式来呈现出一种特定的样子,可以说span在xhtml中就是扮演一种“打杂者”的身份,比如上面在标题中说到的h1~h6不够的时候还需要其他样式字体的话就可以用span来单独定义了,比如:
<span style="font-size:46px;color:red;">特殊定义的46像素字体</span>

7.注释<!---->

  注释可以让xhtml中一些代码不被解析到网页中,只能在源代码中查看,这样做能让我们查看网页代码时觉得层次清晰。只要在<!--和-->之间加入要注释的内容即可。   下面我们摘取阿邦网“关于我们”内容结合以上六点和注释做一个例子:
<!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=gb2312" />
<title>关于我们_阿邦网</title>
</head>
<body>
<div><!--从这里就创建了一个区块-->
<p><!--第一个段落的开始-->人生纷繁忙碌,除了紧张的工作,我们也希望拥有平衡而丰富的生活。<br /><!--这里换行-->每当我们打算培养一个爱好,尝试一种产品,为健康改变某个生活习惯的时候,我们总是苦于可靠信息的匮乏,而我们与经验最丰富的人却往往是陌路。<br />于是我们创办了【阿邦】,与您分享过来人的经验,同好者的心得以及业内专家的指点,为您忙碌多彩的都市生活提供贴心而可信的帮助。</p>
<h3>我们的主旨</h3><!--3号标题-->
<p>【阿邦】为原创生活内容网站,旨在通过邀请众多在不同生活领域有所专长的行家(我们称之为“帮手”),通过各种话题的形式与读者分享他们在专长领域的亲身经验和专业知识,为您提供值得信赖的建议和帮助,从而解决生活难题,提高生活品质。</p>
<hr /><!--插入一条水平线,将内容分割-->
<h4>我们致力于提供</h4><!--4号标题,和3号标题对比一下吧-->
<p>
<span class="f_char07"><!--使用span将这几个字定义成特殊样式-->实用的话题:</span>由有所专长的行家“帮手”以话题形式与您分享亲身经验和一手信息,并为入门新手划拨专区,轻松追求高质高效的生活;<br />
<span class="f_char07">广泛的门类:</span>围绕各生活领域内用户关注的生活话题开设相关频道,如时尚、美食、健康、兴趣、宠物、数码等,努力成为各类生活窍门和实用信息的源泉,从而为用户提供生活上的帮助和建议;<br />
<span class="f_char07">独家的内容:</span>严格的原创机制确保网站内容绝少雷同,相关互动设置保证了对用户意见予以积极反馈,并为您与亲友分享经验传递激情提供了平台。
</p>
</div>
</body>
</html>
  新建一个文本文档,将以上代码复制进去,然后点击“文件”--“另存为”,在“文件名”栏填入about.html,保存类型栏里选择“所有文件”,点击保存后退出。(我们还没有学习css定义,例子中span的class还没有特殊的样式,只做个示例而已,暂且不会看到特殊效果。)
视频教程列表
文章教程搜索
 
HTML推荐教程
HTML热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058