Tony学前端(三):专用收纳箱是指什么?

2018/07/29  |  云课堂  |  by 老潘  |  浏览 57

手机扫码观看


一、首先我们复习一下上次我们都讲了哪些:

1、<h>标签和<p>标签:

<h>标签是标题,有六兄弟。

<p>标签是段落。

2、标签属性:

标签属性可以赋予标签更多信息;属性的写法;用的最多的是id、class和style属性。

3、文字相关属性:

字体、大小、颜色、风格、粗细、划线;字体样式的懒人写法:font属性;font属性里样式的顺序。

4、回车、水平线和空格:

<br/>:回车。
<hr/>:水平线。
&nbsp;:空格

二、接下来我们继续前进我们来谈谈文本格式化。

1、什么是文本格式化?

就是让单个、整句或整段的文字呈现出一种特定的、统一的格式,譬如缩进、放大、加强、上下标等等。通过文本格式化,我们可以做出更为规范的页面了。

2、如何实现文本格式化?

通过一系列的文本格式化的标签来实现我们的目标,我们只学习一些常用的标签,更多的相关标签大家可以自行查询相关资料。

www.w3school.com.cn就是学习前端的一个很好的网站。


三、接下来我们学习和文本格式化相关的一些常用标签。

1、<q> 引用标签

<q>标签表示引用一小段文字,如一句话、一句诗词等短文本,被引文的文字将会被加上双引号下面示例中的“俱往矣,数风流人物,还看今朝!“将会被作为引用为加上双引号:

<p>《沁园春.雪》中的那句<q>俱往矣、数风流人物,还看今朝!</q> 表达了毛@_@广阔的胸襟与气吞山河的信念!</p>

2、<blockquote> 块引用标签

<q>标签引用的是一小段文字,而<blockquote>标签引用的是一长段文字。因此我们又称<q>标签是短引用,而<blockquote>标签是长引用。

<q>标签引用的标志是加双引号,而<blockquote>标签引用的标志是整段缩进。我们来看下<blockquote>的效果,其中整首诗都会被缩进:


3、<bdo> 定义文字的方向

页面上文字显示的方向默认是从左到右,如果我们想反过来显示的话,那得使用<bdo>标签。要注意的是,光使用<bdo>标签还不够,还得将其的dir属性设置为rtl

<bdo>的使用很简单,我们来演示一下:



4、<pre> 定义预格式化的文本

我们之前学习过,如果有多个连续的空格的话,将会被合并为一个空格,因此我们要用&nbsp;来代表空格;同时回车也会被忽略,因此要使用<br/>来代表回车。

有时候,我们要表现的文本里面有很多空格和回车,特别是在展示计算机源码的时候,这时候用&nbsp;和<br/>就会感觉到特别繁琐和不方便,譬如要展示这种效果:

这个是js中一段常用的代码,等我们学习js的时候就知道它是干什么用的了。这段代码里又有回车又有空格的,如果用普通的html来写的话,就是这个样子:

又有<br/>又有&nbsp;的,非常麻烦而且一点也不直观。那么如果使用<pre>标签的话,由于<pre>标签内的回车和空格都会原样保留,因此就可以很方便的写成:

页面上显示的效果与我们html里的书写效果是一致的,非常的直观和方便!我们必须要为<pre>点个赞!

以上我们学习的几个标签中,<blockquote>和<pre>是经常被使用的,小朋友们必须牢记!接下来我们学习几个专门装饰文字的标签。


之前我们已经学习了通过样式来修饰文字,譬如设置字体、大小等等。那么对于比较简单的装饰效果,html里是有几个专门的标签来处理的,我们来学习这些标签:

这些标签的使用都很简单,我们只需要用标签来包裹文字就可以了,不用额外再写样式。我们来看看这些标签的效果,左边的字是默认,右边的字就是各种效果,我们放在一起可以比较一下:

其实我们发现<b>和<strong>的效果一样,而<em>和<i>的效果也差不多。


接下来我们学习一下上标、下标和注释的写法。

5、<sup> 上标标签

文字将出现在水平中线的上方,常用于次方的表示,下面的示例显示为R的2次方:

 

6、<sub>下标标签

文字将出现在水平中线的下方,常用于化学元素表达式,下面的示例显示为水分子的分子式:

7、<!-- -->注释标签

注释标签很特别,它是成对出现的,但是不像闭合标签,注释标签是以<!--开始,以-->结束。被注释标签包裹的内容不会在网页上显示,我们主要在注释里放置通知和提醒信息。

<!--以下显示的是水的分子式-->

不要小瞧注释,良好的注释习惯是合格程序员的重要标志,程序员最讨厌别人不写注释了!


接下来我们学习<span>标签,

8、<span>标签 ,学习之前我们先思考一个问题,如果要实现下面这句话的效果应该怎么写?

我们发现这句话里面,“熊”字明显是与其他的字有不同的样式,因此我们应该单独给它设置样式。小朋友可能马上就会想到,我们用<p>标签把“熊”字包裹起来,随后加样式。但是当这样写了以后,发现“熊”字是单独在一行的。因为<p>标签的内容会单独占据一行。

回顾我们之前学习的标签,大部分都是让整行整段起效果的标签,而上一节中那些装饰文字的标签,本身也会给文字带来额外的修饰,用起来不够灵活。

因此我们希望能有一个容器性质的标签,可以给容器内的元素任意设置我们定义的样式,并且也不会给元素带来额外的效果。而<span>标签正是我们需要的。<span>标签没有特定的含义,而仅仅是作为容器的用途。

上面这句话的html是这个样子的,注意“熊”字被<span>标签给包裹,随后我们在标签里写了相应的样式:

因此<span>标签虽然不起眼,但是在实际运用中却无处不在,它就像一个个小小的收纳盒为我们的网页发挥着巨大的作用。小身材,大能量!!


四、后面暂时没有了,我们来总结一下,今天我们主要学习了:

1、文本格式化相关的标签:

<q>引用标签、<blockquote>块引用标签、<bdo>文字方向标签、<pre>预定义格式标签。

2、装饰文字的标签:

<small>小号字、<big>大号字、<em>着重、<b>粗体、 <strong>强调粗体、<i>斜体 。

3、上标、下标、注释:

<sup>上标、<sub>下标、<!--  -->注释。

4、<span>标签:

本身没有特殊含义,仅仅作为元素的容器,不会给标签内的元素带来额外效果。


到目前为止,我们已经讲了很多文字、格式化相关的知识,在视频的最后也演示了一下如何来写一个“考前要点汇总”,因此,从现在开始,小朋友们可以真正的写有些实际用途的页面了!

娃娃们加油,我们的目标是星辰大海!!