文字和图像是网页中最主要、最常用的元素。
在互联网高速发展的今天,网站已经成为一个展示与宣传自我的通信工具(公司或个人可以通过网站介绍公司的服务与产品或介绍自己)。这些都离不开网站中的网页,而网页的内容主要是通过文字和图像来体现的。
3.1 在网页中添加文本
在网页中添加文本的方法有很多,按照文字的类型,可以分为普通文本的添加和特殊字符文本的添加两种。
3.1.1 普通文本的添加
普通文本是指汉字或者在键盘上可以直接输入的字符。
如果有现成的文本,可以使用复制、粘贴的方法,把需要的文本从其他窗口中复制过来。
3.1.2 特殊字符文本的添加
……
3.2 文本排版
3.2.1 换行标记 <br>
3.2.2 段落标记 <p>
3.2.3 标题标记 <h1> ~ <h6>
3.3 文字列表
文字列表可以有序地编排一些信息资源,使其结构化和条理化,并以列表的样式显示出来,以便浏览者能更加快捷地获得相应的信息。
3.3.1 建立无序列表 <ul>
无序列表的项目排列没有顺序,只以符号作为分项标识。
无序列表使用一对 <ul></ul> 标记,其中每一个列表项使用 <li></li>
在无序列表中,使用 <ul></ul> 标记标识这一个无序列表的开始和结束,<li> 则表示一个列表项的开始,在一个无序列表中可以包含多个列表项,并且 <li> 可以省略结束标记。
3.3.2 建立不同类型的无序列表
<ul type="disc">……</ul>
<ul type="circle">……</ul>
<ul type="square">……</ul>
3.3.3 建立有序列表 <ol>
3.3.4 建立不同类型的有序列表
3.3.5 建立嵌套列表
嵌套列表是网页中常用的元素,使用 <ul> 标签可以制作网页中的嵌套列表。—— 在 <li> 的部分使用 <ul>
3.3.6 自定义列表
在 HTML5 中还可以自定义列表。自定义列表的标签是 <dl> 。—— 在 <dl> 里可以定义 <dt></dt>,<dd></dd> 等标签
3.4 网页中的图像 <img>
图片是网页中不可缺少的元素,巧妙地在网页中使用图片,可以为网页增色不少。
网页支持多种图片格式,并且可以对插入的图片设置宽度和高度。(网页中使用的图像可以是 GIF、JPEG、BMP、TIFF、PNG 等格式的图像文件,其中使用最广泛的主要是 GIF 和 JPEG 两种格式)
3.4.1 在网页中插入图像
图像可以美化网页,插入图像使用单标记 <img>
img 标记的属性及描述如下:
alt 定义有关图形的短描述
src 要显示的图像的 url
height 定义图像的高度
width 设置图像的宽度
在插入图片是,用户可以将其他文件夹或服务器的图片显示到网页中。(不知道相对路径相对的是不是当前的页面)
3.4.2 设置图像的宽度和高度
在 HTML 文档中,还可以设置插入图片的显示大小,一般是按原始尺寸显示,但也可以任意显示尺寸。
设置图像尺寸分别用属性 width(宽度)和 height(高度)—— 当只为图片设置一个尺寸属性时,另外一个尺寸就以图片原始的长宽比例来显示。
图片的尺寸单位可以选择百分比或数值。(百分比为相对尺寸,数值是绝对尺寸)
3.4.3 设置图像的提示文字 —— 通过设置 alt 属性
为图像添加提示文字可以方便搜索引擎的检索,除此之外,如果图像没有成功下载,在图像的位置上也会显示提示文字。
3.4.4 将图片设置为网页背景
在插入图片时,用户可以根据需要,将某些图片设置为网页的背景。(GIF 和 JPEG 文件均可用作 HTML 背景)(如果图像小于页面,图像会进行重复)
3.4.5 排列图像
在网页的文字中,如果插入了图片,这时就可以对图片进行排序。常用的排序方式为居中、底部对齐、顶部对齐几种。(通过 aligh 属性实现)
3.7 疑难解惑
疑问1:换行标记和段落标记有什么区别?
换行标记是单标记,不能写结束标记。(段落标记是双标记,可以省略结束标记,也可以不省略)
默认情况下,段落之间的距离和段落内部的行间距是不同的,段落间距比较大,行间距比较小。
HTML 无法调整段落间距和行间距,如果希望调整它们,就必须使用 CSS。
疑问2:无序列表 <ul> 元素的作用是什么?
无序列表元素主要用于条理化和结构化文本信息。
在实际开发中,无序列表在制作导航菜单时使用广泛。(导航菜单的结构一般都使用无序列表来实现)