《网页设计与前端开发 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
相关文章
|
17天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
96 4
|
1月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
141 68
|
9天前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
53 30
|
10天前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
22 3
|
13天前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
16天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
26 5
|
16天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
56 4
|
17天前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
38 4
|
16天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
24 2
|
17天前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
30 2
下一篇
无影云桌面