您现在的位置是:首页 > 前端学习 > Web前端Web前端
网页的文本设计(第三节)(图文)
第十三双眼睛2019-10-27【Web前端】人已围观
简介静态页面中的绝大部分内容由4类属性的物质组成,文本,图像,视频音频等多媒体文件和超链接。本章的知识点如下:
1了解HTML语言,区分清楚旧的使用规则和新规则CSS之间的联系和不同。
2文本排版格式,学会如何使用标签实现在页面中规范写作格式
3文本样式学会如何改变页面中文本的基本属性和如何使用一些特殊的符号。
4文本列表,学会在页面中使用无序列表和有序列表来罗列条目
5通过实例,学会在页面中编写文本,项目列表
早期的HTML版本中使用一些特殊的标签来编辑文本,比如使用<em>...</em>来将文本倾斜显示,但是这种方法使用起来非常繁琐,对于不同段落的编辑需要重复使用,工作量很大,并且对之后的再次修改带来很多麻烦,后来再1994年,出现了一种叫做层叠样式表的东西,就是现在的CSS,通过一个小例子来对比一下新旧方法的区别。
旧方法:
<body>
<p>
<em>床前明月光,疑是地上霜,</em>
</p>
<p>
<em>举头望明月,低头思故乡。</em>
</p>
</body>
新方法:
<style>
.style {
font-size:50px;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<p class="style">
床前明月光,疑是地上霜,
</p>
<p class="style">
举头望明月,低头思故乡。
</p>
</body>
正是由于CSS的出现,将页面的表现和页面的结构完全划分开,虽然这样增加了前端页面的开发难度,但是却带来了更快的效率,不仅如此,CSS还能有更多有效的效果。
文本的排版格式
HTML中使用不同的标签来设计文本的排版,试想一下,在阅读一份报纸的时候,人们可以忍受这份报纸字体大小不一,标题位置混乱,排版更是糟糕无比吗?
写一行换一行
一般页面文本每行的字数在35字左右,整个没有规定,原则上只要每行控制在恰当的长度就可以了,太短了浏览者需要频繁的阅读下一行,太长了浏览者又需要左右移动视线,会让人很不舒服。在HTML文档中,可以使用下面的<p></p>标签或者<br/>标签来使文本换行。他们的写法是:
<p>你的内容</p>
你的内容<br/>
使用<p></p>标签使文本换行时,是单倍行距,而使用<br/>标签使文本换行时,是0倍行距
在页面文本中空格
在正规格式的文本中,每一段落的开头会空2格,而在HTML的源文档中,连续输入的空格键会被默认为只有一个空格,这时候,就需要使用特殊的空格符号放置在文本中,空格符号的写法是 ,使用时,在想要放入空格的地方输入此符号即可。
空格符号属于HTML中的一种特殊符号,如果设计者不想使用 ,而又想保持连续的空格,则可以使用一个特殊的标签,该标签的写法是,<pre>内容</pre>,
此标签的作用是使文本格式化为等宽字体,不仅能够保留文本中的空格,又能使文本分行被保留,意思就是编辑的时候是啥样子,展现出来就是啥样子
文本的段落对其
编排版面时,时常需要设计一系列的文本段落按照啊统一格式对齐,如左对齐,右对齐,和居中对齐,实际操作的时候,设计者当然不是使用一堆空格来编排文本位置,在HTML文本中,是通过align属性来实现的,通常把align放在<p>标签内使用,如,<p align="center>如:
<body>
<p align="left">
床前明月光,疑是地上霜,
</p>
<p align="center">
举头望明月,低头思故乡。
</p>
</body>
效果如下:
不一样的文字大小
早期的HTML语言中,有很多不同的标签来实现粗体,斜体,以及一些特殊的文字字体,虽然大部分现在已经很少用,但是一些特殊的标签比如粗体,斜体,对于理解学习HTML语言有很好的帮助。例如使用<em></em>标签,它的作用就是使内部的字倾斜显示。
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<strong>粗体</strong>
<em>斜体</em>
<b>粗体</b>
<i>斜体</i>
<var>变量</var>
<cite>引文</cite>
<dfn>定义</dfn>
<address>地址</address>
<samp>样本</samp>
<code>原始代码</code>
<kbd>键盘输入</kbd>
<small>小体字</small>
<sup>上标</sup>
<sub>下标</sub>
</body>
奇妙的特殊符号
之前介绍了空格的特殊符号,但是,在HTML中,特殊符号还有很多,,一般情况下,他们不常用,所以不常见,但是在某些需要的时候,设计者又不得不使用这些特殊符号,所以了解这些特殊符号没有坏处。特殊符号通常都又固定得格式,基本格式为,&...,例如有两个很重要得特殊符号,注册商标®和版权商标©
<body>
<h2 align="center">®</h2>
<h2 align="center">©</h2>
</p>
</body>
常用得特殊符号
<body>
" 引号
& 和号
£ 英镑符号
¦竖直线
§ 节号
° 度数符号
±加减号
² 上标2
³ 上标3
× 乘号
÷除号
Æ AE组合
æ Ae组合
½二分之一
¼四分之一
·居中得点
</body>
文本加标注
在书本中,如果需要给某一段文本中得某个名字加注释时,只能在名字右上角添加标注,然后在页脚得位置给出解释,而网页的一个优势是设计者可以使用很多的标签来做到在书本中无法做到的事情,在网页中,如果希望给某一个名词加注释,可以用<acronym title="">...</acronym>,注释的内容放在title中,被注释的内容放在标签内,如:
<body>
<h2><acronym title="唐代著名诗人">李白</acronym></h2>
</body>
效果如下:
整齐的文本列表
就像一本书一定要有目录,网上的信息有时也需要用列表的形式展现出来,如一些目录列表,菜单介绍,计划类条目,以此来帮助浏览者更便捷的获取有用的信息,者就是文本列表,页面中文本列表可以分为无序列表,定义列表,合理使用列表,不仅能传达页面信息,有时候还能起到美化网页的作用。
无序列表
没有编号的列表称为无序列表,无序列表经常见于项目说明,这是一种并列关系的列表,如果结合CSS的修饰作用,还可以表现为导航栏,无序列表以<ul>标签开始,</ul>结束,中间放入<li>...</li>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
有序列表
有序列表中的条目按照顺序排列,有序列表和无序列表之间的唯一区别提现在代码上,就是有序列表是<ol></ol>
定义列表
定义列表是一种缩进式的列表,设计的本意是要用于定义术语,代码中用<dl>来创建定义列表,在列表中使用<dt>来定义页面中的每一行,与有序列表和无序列表不同的是,在定义列表中,列表中会添加缩进来展示整个列表的条目,使用<dd>标签来定义缩进行,它的代码写法如下:
<body>
<dl>
<dt>李白</dt>
<dd>著名唐代诗人</dd>
<dt>杜甫</dt>
<dd>著名唐代诗人</dd>
<dt>陆游</dt>
<dd>著名宋代诗人</dd>
</dl>
</body>
旧方法:
<body>
<p>
<em>床前明月光,疑是地上霜,</em>
</p>
<p>
<em>举头望明月,低头思故乡。</em>
</p>
</body>
新方法:
<style>
.style {
font-size:50px;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<p class="style">
床前明月光,疑是地上霜,
</p>
<p class="style">
举头望明月,低头思故乡。
</p>
</body>
正是由于CSS的出现,将页面的表现和页面的结构完全划分开,虽然这样增加了前端页面的开发难度,但是却带来了更快的效率,不仅如此,CSS还能有更多有效的效果。
文本的排版格式
HTML中使用不同的标签来设计文本的排版,试想一下,在阅读一份报纸的时候,人们可以忍受这份报纸字体大小不一,标题位置混乱,排版更是糟糕无比吗?
写一行换一行
一般页面文本每行的字数在35字左右,整个没有规定,原则上只要每行控制在恰当的长度就可以了,太短了浏览者需要频繁的阅读下一行,太长了浏览者又需要左右移动视线,会让人很不舒服。在HTML文档中,可以使用下面的<p></p>标签或者<br/>标签来使文本换行。他们的写法是:
<p>你的内容</p>
你的内容<br/>
使用<p></p>标签使文本换行时,是单倍行距,而使用<br/>标签使文本换行时,是0倍行距
在页面文本中空格
在正规格式的文本中,每一段落的开头会空2格,而在HTML的源文档中,连续输入的空格键会被默认为只有一个空格,这时候,就需要使用特殊的空格符号放置在文本中,空格符号的写法是 ,使用时,在想要放入空格的地方输入此符号即可。
空格符号属于HTML中的一种特殊符号,如果设计者不想使用 ,而又想保持连续的空格,则可以使用一个特殊的标签,该标签的写法是,<pre>内容</pre>,
此标签的作用是使文本格式化为等宽字体,不仅能够保留文本中的空格,又能使文本分行被保留,意思就是编辑的时候是啥样子,展现出来就是啥样子
文本的段落对其
编排版面时,时常需要设计一系列的文本段落按照啊统一格式对齐,如左对齐,右对齐,和居中对齐,实际操作的时候,设计者当然不是使用一堆空格来编排文本位置,在HTML文本中,是通过align属性来实现的,通常把align放在<p>标签内使用,如,<p align="center>如:
<body>
<p align="left">
床前明月光,疑是地上霜,
</p>
<p align="center">
举头望明月,低头思故乡。
</p>
</body>
效果如下:
不一样的文字大小
早期的HTML语言中,有很多不同的标签来实现粗体,斜体,以及一些特殊的文字字体,虽然大部分现在已经很少用,但是一些特殊的标签比如粗体,斜体,对于理解学习HTML语言有很好的帮助。例如使用<em></em>标签,它的作用就是使内部的字倾斜显示。
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<strong>粗体</strong>
<em>斜体</em>
<b>粗体</b>
<i>斜体</i>
<var>变量</var>
<cite>引文</cite>
<dfn>定义</dfn>
<address>地址</address>
<samp>样本</samp>
<code>原始代码</code>
<kbd>键盘输入</kbd>
<small>小体字</small>
<sup>上标</sup>
<sub>下标</sub>
</body>
奇妙的特殊符号
之前介绍了空格的特殊符号,但是,在HTML中,特殊符号还有很多,,一般情况下,他们不常用,所以不常见,但是在某些需要的时候,设计者又不得不使用这些特殊符号,所以了解这些特殊符号没有坏处。特殊符号通常都又固定得格式,基本格式为,&...,例如有两个很重要得特殊符号,注册商标®和版权商标©
<body>
<h2 align="center">®</h2>
<h2 align="center">©</h2>
</p>
</body>
常用得特殊符号
<body>
" 引号
& 和号
£ 英镑符号
¦竖直线
§ 节号
° 度数符号
±加减号
² 上标2
³ 上标3
× 乘号
÷除号
Æ AE组合
æ Ae组合
½二分之一
¼四分之一
·居中得点
</body>
文本加标注
在书本中,如果需要给某一段文本中得某个名字加注释时,只能在名字右上角添加标注,然后在页脚得位置给出解释,而网页的一个优势是设计者可以使用很多的标签来做到在书本中无法做到的事情,在网页中,如果希望给某一个名词加注释,可以用<acronym title="">...</acronym>,注释的内容放在title中,被注释的内容放在标签内,如:
<body>
<h2><acronym title="唐代著名诗人">李白</acronym></h2>
</body>
效果如下:
整齐的文本列表
就像一本书一定要有目录,网上的信息有时也需要用列表的形式展现出来,如一些目录列表,菜单介绍,计划类条目,以此来帮助浏览者更便捷的获取有用的信息,者就是文本列表,页面中文本列表可以分为无序列表,定义列表,合理使用列表,不仅能传达页面信息,有时候还能起到美化网页的作用。
无序列表
没有编号的列表称为无序列表,无序列表经常见于项目说明,这是一种并列关系的列表,如果结合CSS的修饰作用,还可以表现为导航栏,无序列表以<ul>标签开始,</ul>结束,中间放入<li>...</li>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
有序列表
有序列表中的条目按照顺序排列,有序列表和无序列表之间的唯一区别提现在代码上,就是有序列表是<ol></ol>
定义列表
定义列表是一种缩进式的列表,设计的本意是要用于定义术语,代码中用<dl>来创建定义列表,在列表中使用<dt>来定义页面中的每一行,与有序列表和无序列表不同的是,在定义列表中,列表中会添加缩进来展示整个列表的条目,使用<dd>标签来定义缩进行,它的代码写法如下:
<body>
<dl>
<dt>李白</dt>
<dd>著名唐代诗人</dd>
<dt>杜甫</dt>
<dd>著名唐代诗人</dd>
<dt>陆游</dt>
<dd>著名宋代诗人</dd>
</dl>
</body>
很赞哦! ()
上一篇:网页的结构(第二节)(图文)
下一篇:网页中的图像(第四节)(图文)
相关文章
随机图文
-
了解网页(第一节)(图文)
本章开始,将介绍一些于互联网相关的常用技术解释,以及制作网页时通常要涉及到的领域,需要考虑的问题,本章的知识点很多但是不难理解。本章的知识点如下: 1网页的概念和分类,了解网页的概念,区别静态网页和动态网页的不同 2涉及网页的原则,和工具,了解网页开发的常用工具。 3网页浏览器的工作原理,知道网页浏览器的工作原理。 4HTML,XHTML,HTML5这几个概念的区别。 5HTML的应用,自己写出一个简单的HTML页面 -
下拉导航(图文)
自己学习前端时,靠自己写出来的第一个下拉导航,记录一下。 -
文本、背景、边框不再单调(第十三章)(图文)
再制作网页的时候,经常会围绕文本,背景和边框几个方面进行样式表设置,但在CSS2.0中,如果涉及如阴影、圆角、多重背景等效果,常常因为不能实现,转而寻求其他办法,再颜色选择及半透明颜色使用方面也极不方便,这些问题,再CSS3中都有很好的解决方案。本章知识点如下: 1文本与字体的设计 2色彩模式和不透明度的设置 3背景和边框的使用 -
音频和视频(第七节)
在HTML5之前,在线的视频和音频都是节主FLASH或者第三方工具实现的,现在的HTML5也支持了这方面的功能,在一个支持HTML5的浏览器中,不需要安装任何插件就能播放视频和音频,原生的支持视频和音频,为HTML5注入了巨大的发展潜力,本章将介绍两个重要的元素,audio,video,分别用于实现音频和视频,又称为多媒体,对于这两个元素,HTML5为开发者提供了标准的,集成的API 本章的重要知识点如下: 1AUDTIO和VIDEO的基础知识 2HTML5中的AUDIO和VIDEO 3网页中的音