大家好

上节课我们学习了

在html页面中的标签和元素的概念

认识了网页的四大核心元素

和四大核心属性

在本节课中我们来学习

在网页中如何进行文本格式化

以及块级元素和行内元素的概念

我们先来了解一下html中的空格

以及浏览器处理长句子

和文本段落的流式的概念

在html中两个单词之间

无论插入多少个空格或者空行

只会显示一个空格

这种处理方式被称为空格压缩

空格压缩有时候是非常有用的

因为它允许你在html程序中

加入额外的空格和空行

而在浏览器中不显示出来

这样对代码进行缩进

大大提高了代码的可读性

我们来看一下这个例子

每行的内容

都会随着屏幕宽度的改变而自动调整

使内容占据屏幕的全部宽度

并在空间不足时

绕至新行进行继续显示

流的概念

我们再来看刚才那个例子

每行的内容

都会随着屏幕宽度的改变自动调整

使内容占据屏幕的全部宽度

并在空间不足时绕至新行进行继续显示

那么空格用@nbSP

换行符用尖括号br

这些都会用相应的特殊字符

和换行元素来代替

文本的格式化

在文本格式化中

会使用到基本文本格式化的标签主要有

各级标题是h1 h2到h6

段落是

以及创建换行也就是回车的符号

是

再来介绍一下块级元素与行内元素的概念

所有的元素都属于以下的两种类型之一

块级元素

在屏幕上显示时

就好像首尾都有一个换行符

例如

还有

等等

这些都属于块级元素

它们都在其新行开始显示内容

并且这些元素之后的任何内容

都会另起一行

行内元素可以出现在同一行的句子中

不会另起一行

例如 ^_等等

严格来说块级元素中

可以包含行内元素

但是行内元素中不能包含块级元素

我们现在先来看一下空格的使用

比如我们在这里加六个空格

来看一下效果

这里只显示了一个空格

这个呢就是空格压缩的效果

那么如果我们想实现六个空格的话呢

我们需要用代表空格的字符

这个字符来代替一个空格

我们输入六个

这样再看一下效果

这里就出现了六个空格

我们现在呢再来看一看

代表回车的元素

代表回车

用的是
这个元素

那么我们先在这里给它加一个


来看一下效果

在这里呢就出现了一个转行

这就是我们
这个元素所带来的作用

如果我们想多加一些回车

我们可以多增加一些
这个元素

看一下效果

增加了四个转行

这就是
元素的作用

再回过头来

在整体的梳理一下我们刚才的代码

例如我们之前用过的这个h2 p元素

这些呢都属于块级元素

我们来看一下效果

在这些元素的开始和结束部分

其实都是新起了一行

那每一个元素都好像是一块一块的

所以我们管它叫块级元素

那么还有一种是行内元素

待会我们再给大家演示一下

在今后涉及到的所有的元素当中呢

都会属于块级元素或者行内元素的一种

那么我们现在呢

来给大家添加一些行内元素

来帮助大家理解一下什么是行内元素

也区别一下块级元素和行内元素的区别

例如我先在这里增加一个u这个元素

看一下效果

好 在u的这部分

我们增加了一个下划线的效果

那么我们看到它的前面和结尾并没有换行

它是在行内来实现的这个功能和效果

因此它呢属于是行内元素

例如我们还可以给它增加一个下标

看一下效果

增加了一个下标

同样也可以增加一个上标

上标

这些都是我们在排版当中会用到的功能

好 大家可以试一下

我们再来看一下这个实例

来排版一个诗歌的文字

我们现在已经把诗歌

放到了这个编程的环境里面

先来看一下效果

现在在浏览器中显示的是

一段毫无排版的诗歌文字

好 回到这

我们把它进行一下排版

首先 第一条

增加一个标题

年代这儿用个h3吧

然后我们看在什么地方回车

先把它做成一个段落

现在我们先来看一下效果

现在已经有了比较明显的分割

标题副标题还有段落

我们现在把段落排列的再美观一些

例如我们每一个标点符号

都给做一个回车

就复制这个
就可以了

好 再来看一下效果

现在就变成了

相对美观一些的一种排列

那么我们现在还可以做的呢

就是把它们都居中

可以在这每一个标签属性上

都加一个居中

好 再来看一下效果

好 现在就全都居中了

我们还可以根据自己

想设计的样式或者需求

来修改我们的这个代码

例如我们想把标题部分变一个颜色

或者把这个副标题部分变一个颜色吧

我们可以在副标题这儿增加一个属性

style属性

让它变成一个紫色

好 再看一下效果

它就变成了一个紫色

现在我们可以自己

再根据自己的需求

来更改一下我们的设计和排版

我们现在呢再来了解一下

每一个标题的尺寸的区别

我们把这个标题从h1到h6

看一下它们的区别

好 看一下效果

好 这就是h1到h6标题的元素

尺寸的区别

在未来我们可以根据实际情况

直接使用h1到h6中的某一个元素

好

由于我们现在也是

在编写一个程序代码吗

所以我们经常会用到一些

标志的这种注释文字

现在我们来学习一下注释文字

在html文档里边是怎么写的

例如我们在这里加一条注释的文字

应该是尖括号 叹号

两个横杠

好 大家看到下面都变灰色了

变灰色的意思就是注释文字了

结束的时候是用两个横杠

一个尖括号

好 现在灰色的只有这个中间的部分了

那我们现在可以在这个中间增加文字

这块就是注释的文字

我们可以看效果

在效果当中不会在浏览器中出现

注释文字就只有在代码中起到一个

提示我们的作用

好 这块是正文部分

看一下效果

并不会出现

这样我们可以大大的增强

我们代码的易读性

很容易就能看出来

某一部分是做什么使用的

并不影响我们的设计结果

好 本课就讲到这里

非常感谢大家的学习

谢谢