广州总部电话:020-85564311

TOP

收起快捷

首页 > 关于途必 > 途必学院 > 学习HTML方法详解一:常用标签之文本标签
学习HTML方法详解一:常用标签之文本标签
发布日期:2015-11-14 08:40:26
浏览次数:
来源:广州网站建设

HTML中就是用一个个标签来标记网页的,下面就来进行常用标签的学习。我们说到网页,首先关注到的就是网页中显示的文本内容,而这些文本内容就是用文本标签来标记的。

       在说常用的标签之前,我们先来说说标签的组成。

       HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

       1HTML 标签是由尖括号包围的关键词,比如 <html>

       2HTML 标签通常是成对出现的,比如 <b> 和 </b>

       3标签对中的个标签是开始标签,第二个标签是结束标签

       4开始和结束标签也被称为开放标签和闭合标签

       HTML的基本结构在《初始HTML》大家已经看到,基本的有四个文本标签:

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.       <head>  

3.       <title>网页标题</title>  

4.       </head>  

5.       <body>  

6.       网页内容  

7.       </body>  

8.</html></span>  

        说明:

         1)html:告知各浏览器,此文档是Web文档,要按照HTML语言规则对文档中的内容进行解释,用来描述网页。

         2)head:描述文档的头信息。常用的子标签有:<link>、<meta>、<script>、<style>、<title>。

         3)title:加载网页中先看到的网页标题。

         4)body:正文标记,包含了网页文档的内容。文字,图像,动画,超链拉以及其他的HTML标记均位于该标记中,是网页中可见的文本内容。

        此外还有一个就是和其他语言相似的一个注释标记:<!--注释内容-->。

        文本标签是网页中基础的标记,包括<p>、<br>、<hn>(n从1到6)、<hr>、<font>、<b>、<i>、<u>、<s>、<sup>、<sub>、<big>、<small>、<strike> 等等。我们只是介绍一些常用的文本标签。

        一,标题标签:HTML 标题是通过 <h1> - <h6> 等标签进行定义的

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.       <head>  

3.       <title>文本标签演示</title>  

4.       </head>  

5.       <body>  

6.       <!--HTML注释:这是一级到六级的标题标签。-->  

7.       <h1>This is heading 1</h1>  

8.       <h2>This is heading 2</h2>  

9.       <h3>This is heading 3</h3>  

10.       <h4>This is heading 4</h4>  

11.       <h5>This is heading 5</h5>  

12.       <h6>This is heading 6</h6>  

13.       <!--HTML段落是通过 <p> 标签进行定义的。-->  

14.       <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>  

15.       </body>  

16.</html></span>  

        网页显示结果为:

学习HTML方法详解一:常用标签之文本标签

        二,段落标签:HTML段落是通过 <p> 标签进行定义的

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.       <head>  

3.       <title>文本标签演示</title>  

4.       </head>  

5.       <body>  

6.       <p>这是段落1。生活的无奈,有时并不源于自我,别人无心的筑就,那是一种阴差阳  

7.  

8.错。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,

9.  

10.让无奈加上了喜悦的等待。</p>  

11.       <p>这是段落2。心有明灯,便不会迷路,便可拒绝黑暗、胆怯,拥有一份明朗的心情  

12.  

13.,一份必胜的信念,一份坦荡的胸怀……心有小窗,便有亮丽的阳光进来,小酌一些温暖的故

14.  

15.事,便有自由清风邀约一些花香或者白云。心有琴弦,纵然客去茶凉,仍有小曲缓缓响起,仍  

16.  

17.有满树桂花知音而化为酒香。</p>  

18.       <p>这是段落3。惊涛拍岸,卷起千堆雪,是一道风景;东风栽柳,碧如丝绦,是一道  

19.  

20.风景;小荷初露,涓涓清泉,是一道风景;可是,你可知道,聪明的你就是一道风景:虽然没  

21.  

22.有东风栽柳的多情,没有小荷初露的恬美;但是你有青春的活力,你有抵御艰难的柔韧,你有  

23.  

24.闪光的心灵。</p>  

25.  

26.       <p>段落元素由 p 标签定义。</p>  

27.       </body>  

28.</html></span>  

        网页结果显示为:

学习HTML方法详解一:常用标签之文本标签

        三,HTML <font> 标签:<font> 规定文本的字体、字体尺寸、字体颜色

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.       <head>  

3.       <title>文本标签演示</title>  

4.       </head>  

5.       <body>  

6.       <h1>这是<font face="宋体" size="+6" color="#FF0000">一级</font>标题</h1>  

7.       </body>  

8.</html></span>  

        网页显示结果为:

学习HTML方法详解一:常用标签之文本标签

        四,HTML <b> 标签:<b> 标签规定粗体文本

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.       <head>  

3.       <title>文本标签演示</title>  

4.       </head>  

5.       <body>  

6.       <p>这是普通文本</p>  

7.       <hr />  

8.       <b>这是粗体文本</b>  

9.       </body>  

10.</html></span>  

       网页显示的结果为:

学习HTML方法详解一:常用标签之文本标签

       五,HTML <i>、<u>、<s>、<sup>、<sub>、<big>、<small>等等一些标签,还有其他的一些文本标签我们就不再一一列举了。好的HTML编辑器都会有这些文本标签。

       <i> 标签显示斜体文本效果。

       <u> 标签可定义下划线文本。

       <s> 标签可定义加删除线文本定义。

       <sup> 标签可定义上标文本。

       <sub> 标签可定义下标文本。

       <big> 标签呈现大号字体效果。

       <small> 标签呈现小号字体效果。

       六,换行标签<br />和水平制表符标签<hr />

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.       <head>  

3.       <title>文本标签演示</title>  

4.       </head>  

5.       <body>  

6.       <p>山一程,水一程。身向榆关那畔行,夜深千帐灯。 风一更,雪一更。聒碎乡心梦  

7.  

8.不成,故园无此声。</p>  

9.       <hr />  

10.       <p>谁念西风独自凉,萧萧黄叶闭疏窗。沉思往事立残阳。被酒莫惊春睡重,赌书消得  

11.  

12.泼茶香,当时只道是寻常。</p>  

13.       <br />  

14.       人生若只如初见,何事秋风悲画扇。等闲变却故人心,却道故人心易变。  

15.       </body>  

16.</html></span>  

        网页结果显示为:

学习HTML方法详解一:常用标签之文本标签

责任编辑:途必技术部

版权所有:http://www.uweb.net.cn (优网科技) 转载请注明出处

关闭
推荐新闻
童心无界 童萌有礼——六一儿童节活动来啦!
童心无界 童萌有礼——六一儿童节活动来啦!
六一儿童节是属于“孩子们”节日,不管是天真卡爱的小朋友,还是童心未泯的大朋友。跟着我们一起重回童年,让童心出发吧。
2024.06.03 10:56:04
途必科技十一月生日会--关怀与爱
途必科技十一月生日会--关怀与爱
时隔一个月,又迎来了我们可爱小伙伴们的生日,本月有好几位的寿星生日。途必科技为了关怀员工,特地举办了此次的集体生日会活动,并且还有很多丰富的小吃零食,饮品饮料,当然更重要的蛋糕也是不可或缺的。
2023.11.29 10:57:26
一起成长---十月途必科技员工生日会
一起成长---十月途必科技员工生日会
秋高气爽的季节里头,我们迎来了十月份途必科技小伙伴们的生日,在这个温馨的聚会里一同感受着生日的快乐,能在工作繁忙之余享受到节日带来的温暖。每一次的生日会都是大家在共同的成长,当然啦,成长的路上少不了磕磕碰碰,但是在我们的人生里头,总会相遇温暖,陪伴左右,成长也就变得更加有意义。
2023.10.30 09:29:30
温暖与你同在-八月途必科技小伙伴生日会
温暖与你同在-八月途必科技小伙伴生日会
在每个人成长的背后,总会有温暖相伴,像在途必科技的大家庭里,大家都可以感受到这样的氛围,又温馨,有爱。也许有时候自己都忘了的生日,却是有人记得你的生日,有人愿意为你祝福,这又何尝不是一种温暖呢。途必科技与大家一同成长,也将爱送给大家,途必科技对出席生日会的每一位小可爱表示热烈的欢迎和衷心的感谢,同时也为八月份生日的寿星们送上美丽的祝福~祝愿可爱的寿星们天天开心,心想事成,身体健康,另外也希望每位途必科技的小伙伴在未来的工作中越来越顺利,生活里也越来越好。
2023.08.30 10:32:55
这次圣诞节,我们玩大的
这次圣诞节,我们玩大的
这次的圣诞节,我们玩大的,为了让大家感受到如火热情般的圣诞节,此次带来了很多不一样的玩法和活动。行政人事部代表途必科技给大家制造了很多不一样的惊喜,在这里你可以收获丰富满满的礼物,漂亮小姐姐和可爱圣诞老人的合影,小伙伴们其乐融融的氛围,
2022.12.25 17:00:04
推荐案例
眼光高度决定品牌厚度!
业务展示
专业团队,品质服务

预算不足没关系,

这里

广州市途必企业管理中心(有限合伙)版权所有 粤ICP备2020085998号 Copyright © 2023 All Rights Reserved
 
扫码咨询

专属顾问
扫码咨询您的优网专属顾问!