《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——2.4 网页的主体标记body

简介:

本节书摘来自异步社区《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》一书中的第2章,第2.4节,作者: 何新起 , 任慎存 , 田月梅更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 网页的主体标记body

网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置,包括网页的背景设置、文字属性设置和链接设置等。

2.4.1 网页背景色bgcolor
对大多数浏览器而言,其默认的背景颜色为白色或灰白色。使用

标记的bgcolor属性可以为整个网页定义背景颜色。

语法:

<body bgcolor="背景颜色">

说明:

在该语法中的body就是页面的主体标记,bgcolor的值可以是一个已命名的颜色,也可以是一个十六进制的颜色值。

实例:


b0a87bca0c4033f19d60877ac75eba4885d6483d

代码中加粗部分的代码标记是为页面设置背景颜色,在浏览器中预览效果,如图2-6所示。


743e9d805c688624b3158f9a3d58994001bacd3c

背景颜色在网页上非常常见,如图2-7所示的网页使用了大面积的黄色背景。


c0bbb50ce2419c5fd0c6deff42233e8ffeec4fe4

2.4.2 网页背景图片background
使用恰当的图片作为背景,能够使页面看上去更加生动美观。使用background属性可以将图片设置为背景,还可以设置背景图片的平铺方式、显示方式等。

语法:

<body background="图片的地址">

说明:

图片的地址可以是相对地址,也可以是绝对地址。在默认情况下,用户可以省略此属性,这时图片会按照水平和垂直方向不断重复出现,直到铺满整个页面。

实例:


bbf576843116dbc96742259327509f7062068c0a

代码中加粗部分的代码标记为设置的网页背景图片,在浏览器中预览可以看到背景图像,如图2-8所示。

e46a58a434944e637bbf1d5212fe8d7129955f95

在网络上除了可以看到各种背景色的页面之外,还可以看到一些以图片作为背景的网页。如图2-9所示的网页使用了背景图像。


697e9e5010e6ac2752151185bdd6bc3dd1f8515d

2.4.3 文字颜色text

可以通过text标记来设置文字的颜色。在没有对文字的颜色进行单独定义时,这一属性可以对页面中所有的文字起作用。

语法:

<body text="文字的颜色">

说明:

在该语法中,text的属性值与设置页面背景色的相同。

实例:


dae892b48bfd00f220abc7d735cf309a1f0dd569

在代码中加粗部分的代码标记为设置的文字颜色,在浏览器中预览可以看到文档中文字的颜色,如图2.10所示。

5059d68b04979d15d6f7c8c61ffca600873f2e0b

在网页中需要根据网页整体色彩的搭配来设置文字的颜色,图2-11所示的文字和整个网页的颜色相协调。


b61a5579444c6f938424a084f287be49a2b40a20

2.4.4 链接文字属性link
超级链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超级链接的形式关联在一起的,正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超级链接中以文字链接最多,在默认情况下,浏览器以蓝色作为超链接文字的颜色,访问过的文字颜色变为暗红色。可以通过link参数修改链接文字的颜色。

语法:

<body link="颜色">

说明:

这一属性的设置与前面几个设置颜色的参数类似,都是与body标签放置在一起,表明它对网页中所有未单独设置的元素起作用。

实例:


fea552904f2619df9c44df1a5808a3569cd412c4

在代码中加粗部分的代码标记是为链接文字设置颜色,在浏览器中预览效果,可以看到链接的文字已经不是默认的蓝色,如图2-12所示。


d8bcbba60a6c091d2cedc5ec56e9781145b9b00a

使用alink可以设置正在访问的文字颜色,举例如下。


2c1a9e2d0a96c1e3a34f16826366c5a5fc153f3c

代码中加粗部分的代码标记是为单击链接的文字时设置颜色,在浏览器中预览效果,可以看到单击链接的文字时,文字已经改变了颜色,如图2-13所示。


829a8aa4f88c608c41247780ce1a76f5802bf626

使用vlink可以设置访问后的链接文字的颜色,举例如下。


e9cb7c8bad9b2eebea4ecf8e78fe7cb8b30a62d2

代码中加粗部分的代码标记是为链接的文字设置访问后的颜色,在浏览器中预览效果,可以看到单击链接后文字的颜色已经发生改变,如图2-14所示。


29f9ab109105a52c0a6be9d44104682e41a0109b

在网页中,一般文字上的超链接都是蓝色(当然,也可以自己设置成其他颜色),文字下面有一条下划线。当移动鼠标指针到该超链接上时,鼠标指针就会变成一只手的形状,这时候用鼠标左键单击,就可以直接跳到与这个超链接相连接的网页。如果已经浏览过某个超链接,这个超链接的文本颜色就会发生改变。如图2-15所示网页中的超链接文字颜色。


0abb7bf9fab192ae444652c537f2e3f96c0ac40e
相关文章
|
2天前
|
移动开发 前端开发 JavaScript
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
22 4
|
9天前
|
移动开发 HTML5
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
38 0
HTML5实现好看的中秋节网页源码
|
5月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
297 1
|
16天前
|
移动开发 前端开发 JavaScript
HTML5实现好看的端午节网页源码
HTML5实现好看的端午节网页源码,包含十个页面:网站首页、端午节介绍、由来、习俗、文化、美食、故事、民谣、联系我们及登录/注册。页面设计简洁美观,内容丰富,兼容手机端,代码规范且注释完整,易于扩展和修改。提供完整的源码下载和视频演示,方便学习和使用。
39 2
|
1月前
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `&lt;audio&gt;` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
|
5月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
332 0
|
2月前
|
存储 JavaScript 算法
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
|
3月前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
141 22
|
3月前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
149 2
利用 html_table 函数轻松获取网页中的表格数据
|
4月前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
57 5

热门文章

最新文章