讲给后台程序员看的前端系列教程(03)——HTML5标签(2)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100546803

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

上节教程中我们学习了HTML常用标签,这次我们来学习HTML文本标签。

HTML文本标签

文本标签,顾名思义,它是用来显示文本的。在此,我们来瞅瞅HTML中经常使用的文本标签。

font标签

font标签用于给文本设置文字大小和颜色等属性。

语法及其常用属性如下:

<font face="" size="" color=""></font>

在该语法中,各属性作用如下:
face属性表示字体,例如:微软雅黑、黑体、宋体等
size属性表示文字大小,其值为1-7的整数
color属性用于表示文字颜色

示例如下:

<font face="宋体" color="red" size="7">本文作者:谷哥的小弟</font>
<br>
<br>
<font face="宋体" color="red" size="7">博客地址:https://blog.csdn.net/lfdfhl</font>
<br>
<br>

虽然font标签可以给文本设置样式,但是在HTML5中建议不再使用该标签,可采用CSS实现相同的功能。

b标签

b标签常用于文本加粗,它对应于英文中的bold。

<b>b标签用于粗体显示文字</b>

strong标签

strong标签的作用和用法与b标签基本相同,但是在HTML5中为strong标签增加了语义,用其表示重要的文本。

<strong>strong标签用于粗体显示文本,表示重点内容</strong>

small标签

small标签用于显示小号字体,比如:版权信息,法律信息,免责声明

<small>本文的原创作者是谷哥的小弟</small>

有人在想:既然有了samll标签,那么是不是有对应的big标签呢?嗯哼,以前确实是有这个标签的,但是在HTML5中已经将其删除了。

i标签

i标签用于将文本斜体显示,它源于英语单词italic;常用于显示专业词汇,术语,谚语。

<i>service</i>

em标签

em标签表示将文本斜体显示,它源于英语单词emphasize.

<em>这里是考试的重点</em>

看到这里,有的童鞋就有疑问了:i标签和em标签都将文本斜体显示,它们有什么区别么?b标签和strong标签都将文本粗体显示,它们有什么区别呢?

b标签和i标签仅仅表示"此处应该用粗体显示"或者"此处应该用斜体显示",例如,要突出合同的价格那么可以用b标签粗体显示;要表达一句谚语,可以用i标签将其斜体显示。
strong标签和em标签是为了强调内容的重要意义而显示粗体或者斜体;对于搜索引擎,爬虫,SEO而言更受重视。例如,我们将"打倒法西斯!"这句话置于strong标签中;那么,语音阅读器时读到此strong标签就会重读。
概括地来说:b标签和i标签是物理元素 ;strong标签和em标签是逻辑元素。物理元素强调的是一种物理行为。比如说,把一段文字用b标签加粗,意思是告诉浏览器应该加粗显示,没有其他作用;而strong标签不但加粗了字体还起到了强调的作用。同理,i标签和em标签类似,故不再赘述。

u标签

u标签用于表示文本下划线,它源于英文单词underline;请看如下示例:

<u>u标签标示文本的下划线</u>

sup标签

sup标签用于表示文本的上标,它是英文单词superscript的缩写;请看如下示例:

这里是上标<sup>1</sup>

sub标签

sub标签用于表示文本的下标,它是英文单词subscript的缩写;请看如下示例:

这里是下标<sub>2</sub>

span标签

span用于组合文档中的行内元素;它常结合CSS为文本中的某些部分进行特殊处理。说到这里,大家是不是猛然想起来Android里也有类似的东西!比如,要把一部分文字改变颜色,还记得我们在Android里面怎么做的呢?是不是利用SpannableString就可以了?!你瞅瞅,它是不是也是个span呢?所以,这两者是互通的,知道了其中一个,另外一个自然也理解了。

<span style="color:#FA0">大家好</span><span style="color:#F00">我是谷哥的小弟</span>

源码和页面

在此,附上本节教程源码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML常用文本标签</title>
	</head>
	<body>

		<!-- font标签用于给文本设置文字大小和颜色等属性-->
		<font face="宋体" color="red" size="7">本文作者:谷哥的小弟</font>
		<br>
		<br>
		<font face="宋体" color="red" size="7">博客地址:https://blog.csdn.net/lfdfhl</font>
		<br>
		<br>

		<!-- b标签,用于将内容加粗显示-->
		<b>b标签用于粗体显示文字</b>
		<br>
		<br>

		<!-- strong标签,用于表示重点内容-->
		<strong>strong标签用于粗体显示文本,表示重点内容</strong>
		<br>
		<br>

		<!-- small标签用于显示小号字体,常用于表示:版权信息,法律信息,免责声明 -->
		<small>本文的原创作者是谷哥的小弟</small>
		<br>
		<br>

		<!-- i标签用于将文本斜体显示-->
		<i>service</i>
		<br>
		<br>

		<!--em标签表示将文本斜体显示 -->
		<em>这里是考试的重点</em>
		<br>
		<br>

		<!-- u标签 -->
		<u>u标签标示文本的下划线</u>
		<br>
		<br>

		<!-- sup标签,表示上标-->
		这里是上标<sup>1</sup>
		<br>
		<br>

		<!-- sub标签,表示下标 -->
		这里是下标<sub>2</sub>
		<br>
		<br>

	</body>
</html>

效果如下:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页