当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > （3）文本格式化、块级元素与行内元素 > 文本格式化、块级元素与行内元素
大家好
上节课我们学习了
在html页面中的标签和元素的概念
认识了网页的四大核心元素
和四大核心属性
在本节课中我们来学习
在网页中如何进行文本格式化
以及块级元素和行内元素的概念
我们先来了解一下html中的空格
以及浏览器处理长句子
和文本段落的流式的概念
在html中两个单词之间
无论插入多少个空格或者空行
只会显示一个空格
这种处理方式被称为空格压缩
空格压缩有时候是非常有用的
因为它允许你在html程序中
加入额外的空格和空行
而在浏览器中不显示出来
这样对代码进行缩进
大大提高了代码的可读性
我们来看一下这个例子
每行的内容
都会随着屏幕宽度的改变而自动调整
使内容占据屏幕的全部宽度
并在空间不足时
绕至新行进行继续显示
流的概念
我们再来看刚才那个例子
每行的内容
都会随着屏幕宽度的改变自动调整
使内容占据屏幕的全部宽度
并在空间不足时绕至新行进行继续显示
那么空格用@nbSP
换行符用尖括号br
这些都会用相应的特殊字符
和换行元素来代替
文本的格式化
在文本格式化中
会使用到基本文本格式化的标签主要有
各级标题是h1 h2到h6
段落是
以及创建换行也就是回车的符号
是
再来介绍一下块级元素与行内元素的概念
所有的元素都属于以下的两种类型之一
块级元素
在屏幕上显示时
就好像首尾都有一个换行符
例如
还有
这些都属于块级元素
它们都在其新行开始显示内容
并且这些元素之后的任何内容
都会另起一行
行内元素可以出现在同一行的句子中
不会另起一行
例如 等等
严格来说块级元素中
可以包含行内元素
但是行内元素中不能包含块级元素
我们现在先来看一下空格的使用
比如我们在这里加六个空格
来看一下效果
这里只显示了一个空格
这个呢就是空格压缩的效果
那么如果我们想实现六个空格的话呢
我们需要用代表空格的字符
这个字符来代替一个空格
我们输入六个
这样再看一下效果
这里就出现了六个空格
我们现在呢再来看一看
代表回车的元素
代表回车
用的是
这个元素
那么我们先在这里给它加一个
来看一下效果
在这里呢就出现了一个转行
这就是我们
这个元素所带来的作用
如果我们想多加一些回车
我们可以多增加一些
这个元素
看一下效果
增加了四个转行
这就是
元素的作用
再回过头来
在整体的梳理一下我们刚才的代码
例如我们之前用过的这个h2 p元素
这些呢都属于块级元素
我们来看一下效果
在这些元素的开始和结束部分
其实都是新起了一行
那每一个元素都好像是一块一块的
所以我们管它叫块级元素
那么还有一种是行内元素
待会我们再给大家演示一下
在今后涉及到的所有的元素当中呢
都会属于块级元素或者行内元素的一种
那么我们现在呢
来给大家添加一些行内元素
来帮助大家理解一下什么是行内元素
也区别一下块级元素和行内元素的区别
例如我先在这里增加一个u这个元素
看一下效果
好 在u的这部分
我们增加了一个下划线的效果
那么我们看到它的前面和结尾并没有换行
它是在行内来实现的这个功能和效果
因此它呢属于是行内元素
例如我们还可以给它增加一个下标
看一下效果
增加了一个下标
同样也可以增加一个上标
上标
这些都是我们在排版当中会用到的功能
好 大家可以试一下
我们再来看一下这个实例
来排版一个诗歌的文字
我们现在已经把诗歌
放到了这个编程的环境里面
先来看一下效果
现在在浏览器中显示的是
一段毫无排版的诗歌文字
好 回到这
我们把它进行一下排版
首先 第一条
增加一个标题
年代这儿用个h3吧
然后我们看在什么地方回车
先把它做成一个段落
现在我们先来看一下效果
现在已经有了比较明显的分割
标题副标题还有段落
我们现在把段落排列的再美观一些
例如我们每一个标点符号
都给做一个回车
就复制这个
就可以了
好 再来看一下效果
现在就变成了
相对美观一些的一种排列
那么我们现在还可以做的呢
就是把它们都居中
可以在这每一个标签属性上
都加一个居中
好 再来看一下效果
好 现在就全都居中了
我们还可以根据自己
想设计的样式或者需求
来修改我们的这个代码
例如我们想把标题部分变一个颜色
或者把这个副标题部分变一个颜色吧
我们可以在副标题这儿增加一个属性
style属性
让它变成一个紫色
好 再看一下效果
它就变成了一个紫色
现在我们可以自己
再根据自己的需求
来更改一下我们的设计和排版
我们现在呢再来了解一下
每一个标题的尺寸的区别
我们把这个标题从h1到h6
看一下它们的区别
好 看一下效果
好 这就是h1到h6标题的元素
尺寸的区别
在未来我们可以根据实际情况
直接使用h1到h6中的某一个元素
好
由于我们现在也是
在编写一个程序代码吗
所以我们经常会用到一些
标志的这种注释文字
现在我们来学习一下注释文字
在html文档里边是怎么写的
例如我们在这里加一条注释的文字
应该是尖括号 叹号
两个横杠
好 大家看到下面都变灰色了
变灰色的意思就是注释文字了
结束的时候是用两个横杠
一个尖括号
好 现在灰色的只有这个中间的部分了
那我们现在可以在这个中间增加文字
这块就是注释的文字
我们可以看效果
在效果当中不会在浏览器中出现
注释文字就只有在代码中起到一个
提示我们的作用
好 这块是正文部分
看一下效果
并不会出现
这样我们可以大大的增强
我们代码的易读性
很容易就能看出来
某一部分是做什么使用的
并不影响我们的设计结果
好 本课就讲到这里
非常感谢大家的学习
谢谢
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
