《网页设计与前端开发 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
对大多数浏览器而言,其默认的背景颜色为白色或灰白色。使用
语法:
body bgcolor="背景颜色"
说明:
在该语法中的body就是页面的主体标记,bgcolor的值可以是一个已命名的颜色,也可以是一个十六进制的颜色值。
实例:
![b0a87bca0c4033f19d60877ac75eba4885d6483d](https://yqfile.alicdn.com/b0a87bca0c4033f19d60877ac75eba4885d6483d.png)
代码中加粗部分的代码标记是为页面设置背景颜色,在浏览器中预览效果,如图2-6所示。
![743e9d805c688624b3158f9a3d58994001bacd3c](https://yqfile.alicdn.com/743e9d805c688624b3158f9a3d58994001bacd3c.png)
背景颜色在网页上非常常见,如图2-7所示的网页使用了大面积的黄色背景。
![c0bbb50ce2419c5fd0c6deff42233e8ffeec4fe4](https://yqfile.alicdn.com/c0bbb50ce2419c5fd0c6deff42233e8ffeec4fe4.png)
2.4.2 网页背景图片background
使用恰当的图片作为背景,能够使页面看上去更加生动美观。使用background属性可以将图片设置为背景,还可以设置背景图片的平铺方式、显示方式等。
语法:
body background="图片的地址"
说明:
图片的地址可以是相对地址,也可以是绝对地址。在默认情况下,用户可以省略此属性,这时图片会按照水平和垂直方向不断重复出现,直到铺满整个页面。
实例:
![bbf576843116dbc96742259327509f7062068c0a](https://yqfile.alicdn.com/bbf576843116dbc96742259327509f7062068c0a.png)
代码中加粗部分的代码标记为设置的网页背景图片,在浏览器中预览可以看到背景图像,如图2-8所示。
![e46a58a434944e637bbf1d5212fe8d7129955f95](https://yqfile.alicdn.com/e46a58a434944e637bbf1d5212fe8d7129955f95.png)
在网络上除了可以看到各种背景色的页面之外,还可以看到一些以图片作为背景的网页。如图2-9所示的网页使用了背景图像。
![697e9e5010e6ac2752151185bdd6bc3dd1f8515d](https://yqfile.alicdn.com/697e9e5010e6ac2752151185bdd6bc3dd1f8515d.png)
2.4.3 文字颜色text
可以通过text标记来设置文字的颜色。在没有对文字的颜色进行单独定义时,这一属性可以对页面中所有的文字起作用。
语法:
body text="文字的颜色"
说明:
在该语法中,text的属性值与设置页面背景色的相同。
实例:
![dae892b48bfd00f220abc7d735cf309a1f0dd569](https://yqfile.alicdn.com/dae892b48bfd00f220abc7d735cf309a1f0dd569.png)
在代码中加粗部分的代码标记为设置的文字颜色,在浏览器中预览可以看到文档中文字的颜色,如图2.10所示。
![5059d68b04979d15d6f7c8c61ffca600873f2e0b](https://yqfile.alicdn.com/5059d68b04979d15d6f7c8c61ffca600873f2e0b.png)
在网页中需要根据网页整体色彩的搭配来设置文字的颜色,图2-11所示的文字和整个网页的颜色相协调。
![b61a5579444c6f938424a084f287be49a2b40a20](https://yqfile.alicdn.com/b61a5579444c6f938424a084f287be49a2b40a20.png)
2.4.4 链接文字属性link
超级链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超级链接的形式关联在一起的,正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超级链接中以文字链接最多,在默认情况下,浏览器以蓝色作为超链接文字的颜色,访问过的文字颜色变为暗红色。可以通过link参数修改链接文字的颜色。
语法:
body link="颜色"
说明:
这一属性的设置与前面几个设置颜色的参数类似,都是与body标签放置在一起,表明它对网页中所有未单独设置的元素起作用。
实例:
![fea552904f2619df9c44df1a5808a3569cd412c4](https://yqfile.alicdn.com/fea552904f2619df9c44df1a5808a3569cd412c4.png)
在代码中加粗部分的代码标记是为链接文字设置颜色,在浏览器中预览效果,可以看到链接的文字已经不是默认的蓝色,如图2-12所示。
![d8bcbba60a6c091d2cedc5ec56e9781145b9b00a](https://yqfile.alicdn.com/d8bcbba60a6c091d2cedc5ec56e9781145b9b00a.png)
使用alink可以设置正在访问的文字颜色,举例如下。
![2c1a9e2d0a96c1e3a34f16826366c5a5fc153f3c](https://yqfile.alicdn.com/2c1a9e2d0a96c1e3a34f16826366c5a5fc153f3c.png)
代码中加粗部分的代码标记是为单击链接的文字时设置颜色,在浏览器中预览效果,可以看到单击链接的文字时,文字已经改变了颜色,如图2-13所示。
![829a8aa4f88c608c41247780ce1a76f5802bf626](https://yqfile.alicdn.com/829a8aa4f88c608c41247780ce1a76f5802bf626.png)
使用vlink可以设置访问后的链接文字的颜色,举例如下。
![e9cb7c8bad9b2eebea4ecf8e78fe7cb8b30a62d2](https://yqfile.alicdn.com/e9cb7c8bad9b2eebea4ecf8e78fe7cb8b30a62d2.png)
代码中加粗部分的代码标记是为链接的文字设置访问后的颜色,在浏览器中预览效果,可以看到单击链接后文字的颜色已经发生改变,如图2-14所示。
![29f9ab109105a52c0a6be9d44104682e41a0109b](https://yqfile.alicdn.com/29f9ab109105a52c0a6be9d44104682e41a0109b.png)
在网页中,一般文字上的超链接都是蓝色(当然,也可以自己设置成其他颜色),文字下面有一条下划线。当移动鼠标指针到该超链接上时,鼠标指针就会变成一只手的形状,这时候用鼠标左键单击,就可以直接跳到与这个超链接相连接的网页。如果已经浏览过某个超链接,这个超链接的文本颜色就会发生改变。如图2-15所示网页中的超链接文字颜色。
![0abb7bf9fab192ae444652c537f2e3f96c0ac40e](https://yqfile.alicdn.com/0abb7bf9fab192ae444652c537f2e3f96c0ac40e.png)
好程序员web前端教程分享网页设计需要学那些东西? **好程序员**web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老师就来跟大家讲解下这两个方向分别要学什么。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
相关文章
- 使用JavaScript调用手机平台上的原生API
- 第一百零三节,JavaScript对象和数组
- JavaScript经典代码【一】【javascript HTML控件获取值】
- [Javascript] Broadcaster + Operator + Listener pattern -- 7. Create a broadcaster forOf
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Getter and Setter Abstractions
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] JavaScript Array Methods in Depth - push
- JavaScript 错误处理, Throw、Try 和 Catch入门
- [Javascript] Natively Format JavaScript Dates and Times
- [Javascript] Decorators in JavaScript
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] Redirect the browser using JavaScript
- 生日祝福(HTML+CSS+JavaScript+jQuery)
- 【华为OD机试 2023】 对称美学(C++ Java JavaScript Python)
- javaScript解决Form的嵌套
- web前端Javascript开发学习之JavaScript中的预编译如何进行