【HTML】图像标签、文本、表格的颜色及其背景色

最新推荐文章于 2025-02-28 00:15:00 发布

YI_DIAN_DIAN

最新推荐文章于 2025-02-28 00:15:00 发布

阅读量5.5w

点赞数 42

分类专栏： ❸JavaEE ---- ----①HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_35415600/article/details/70343189

版权

❸JavaEE 同时被 2 个专栏收录

46 篇文章

订阅专栏

---- ----①HTML

11 篇文章

订阅专栏

文本的颜色：

在body的属性中，可以使用以下几种属性改变文本的颜色。

1. text属性

该属性用来设置文本的颜色。该“文本”可以是标题、正文及表中的文字，但不能用于超链接的文字。使用格式为：<text=#rrggbb>

2.link属性

设置超链接文字的颜色，默认为蓝色，格式：<link=#rrggbb>

3.vlink属性

设置鼠标指向超链接文字时，该链接文字的颜色，默认为红色，使用格式为：<vlink=#rrggbb>

4. `<font>`标记的color属性

以上几种属性所都是指定整个网页中某一类文字的色彩，用<font>标记的color属性可指定任意一段文字的色彩。<font color=#rrggbb>

表格的背景色：

1. `<table>`标记的bgcolor属性

用来指定整个表格的背景颜色，使用格式为：<table bgcolor=#rrggbb>

2.`<td>`标记的bgcolor属性

用来指定表格中一行的背景颜色，使用格式为： <td bgcolor=#rrggbb>

3.`<th>`标记的bgcolor属性

用来指定表格中栏目行的背景颜色，使用格式为：<th bgcolor=#rrggbb>

4.`<hr>`标记的color属性

用来指定分隔线的颜色，使用格式为：<hr color=#rrggbb />

5.`<font>`标记的face和color属性

指定字体与颜色，格式：<font face=“字体名” color=#rrggbb >

文本颜色代码演示：

<html>
    <head>
        <title >演示对文本颜色的设置</title>
    </head>

    <!-- 
        text属性：body的text属性，用来设置文本的颜色。
        该”文本“包括：标题、正文、及表中的文字，但不能用于
        超链接的文字。
     -->
    <body text="red">
        <!-- 设置标题颜色为red -->
        <h1>湖南城市学院</h1>
        <!-- 设置正文颜色为red -->
        我是body中的正文！<br/><br/>
        <!-- 设置表中的文字为red -->
        <table border="1">
            <tr><th>姓名</th><th>年龄</th><th>电话</th></tr>
            <tr><td>Rose</td><td>23</td><td>12345678910</td></tr>
            <tr><td>Tom</td><td>11</td><td>12345678910</td></tr>
        </table>
        <br/><br/>
        <!-- 验证超链接的颜色是否有改变：结果没有改变，可以手动设置 -->
        超链接颜色未设置：<br><a href="http://www.hncu.net">湖南城市学院首页</a><br>
    </body>
</html>

运行结果：

这里写图片描述

超链接颜色代码演示：

<html>
    <head>
        <title>演示超链接的颜色</title>
    </head>

    <!--
         link属性：设置超链接文字的颜色，默认为蓝色，格式：<link=#rrggbb>
        vlink属性：设置鼠标指向超链接文字时，该链接文字的颜色，默认为红色，使用格式为：<vlink=#rrggbb>
        font属性：以上几种属性所都是指定整个网页中某一类文字的色彩，
                        用<font>标记的color属性可指定任意一段文字的色彩。<font color=#rrggbb> 
     -->

    <body  text="yellow" link="red" vlink="red" >
        <font color="cyan">font设置</font>
        <a href="http://www.hncu.net">湖南城市学院</a>
    </body>
</html>

运行结果：

超链接点击之前：

这里写图片描述

超链接点击之后：

这里写图片描述

表格背景颜色代码演示：

<html>
    <head>
        <title>演示表格颜色</title>
    </head>
    <body text="red">
        <!--
             <table>标记的bgcolor属性：用来指定整个表格的背景颜色，使用格式为： <table bgcolor=#rrggbb>
         -->
        <table bgcolor="cyan" border="2" width="80%" height="60%" cellpadding="0" cellspacing="0">
            <caption>演示设置表格颜色</caption>
            <!-- 
                <th>标记的bgcolor属性：用来指定表格中栏目行的背景颜色，使用格式为：<th bgcolor=#rrggbb>
                <th>标记的background属性：用来指定表格中栏目行的背景图片，使用格式为：<th background="src">
                <th>标记的bordercolor属性：用来指定表格中栏目行的边框颜色，使用格式为：<th bordercolor="#rrggbb">
             -->
            <tr><th bgcolor="#FFFFDF">姓名</th><th background="image按钮.png">年龄</th><th bordercolor="#6F00D2">生日</th></tr>
            <!-- 
                <td>标记的bgcolor属性：用来指定表格中一行的背景颜色，使用格式为：<td bgcolor=#rrggbb>
             -->
            <tr><td>Jack</td><td>23</td><td bgcolor="#E6CAFF">1990-1-1</td></tr>
            <tr><td>Rose</td><td>11</td><td>2001-1-1</td></tr>
            <!-- 
                <font>标记的face和color属性：指定字体与颜色，格式：<font face=“字体名” color=#rrggbb >
             -->
            <tr><td><font face="幼圆" color="#4B0091" size="20pt">张三</font></td><td>21</td><td>1981-12-29</td></tr>
        </table>
        <!-- 
            <hr>标记的color属性：用来指定分隔线的颜色，使用格式为：<hr color=#rrggbb />
         -->
        <hr color="green" size="10pt">
    </body>
</html>

运行结果：

这里写图片描述

☆图像标签：

属性说明：
        src:连接一个文件
        align:属性定义图片的排列方式
        border用来设置图像的边框
        height和width为显示的高宽。

<html>
    <head><title>图像标签</title></head>
    <body >
        <img alt="第一个图像标签" src="pics/zp1.jpg" align="bottom"  width="400" height="300" border="20" >
    </body>
</html>