web开发——前端基础（2）—— HTML属性的设置

四席城

已于 2022-12-30 21:15:34 修改

阅读量114

点赞数

文章标签：前端 javascript 开发语言

于 2022-12-27 20:37:55 首次发布

本文链接：https://blog.csdn.net/m0_61506131/article/details/128460787

版权

今天来说说HTML的“属性”，在标签中（开始标签或结束标签）还可以设置属性。

怎么在一个简单的网站里添加字体的颜色、字体的大小以及图片。

话不多说，先上效果图：

在<body>的子标签中添加一级标签<h1>,然后在一级标签里添加我们需要的属性。

如：上图

这是我的第三个网页，字体的颜色是绿色的，字体的大小是100。
可以这样写<font color="green" size="100"></font>,这一整段表示字体的颜色和大小。
color="green"表示颜色为绿色，大家也可以改成自己喜欢的颜色，如喜欢红色，可以这样写，color="red",这也是可以的。
大家有没有发现这绿色的字比一般的字还要大，这是因为我把字体设置大小，可以通过size="100"来修改字体的大小。
还有一点需要注意的以上的颜色设置和字体大小的设置一定要写在<font>的里面，设置的内容才会执行。

以上已经说了设置字体的颜色和大小，接下来说一说怎么样把图片添加到网页中呢？

首先，图片的链接我放上来（src="https://iknow-pic.cdn.bcebos.com/fd039245d688d43fba24268c6d1ed21b0ef43b3a?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"）

在<body>标签里在文章的最下面添加<img>标签，在<img>里用src=""里面填入图片的链接。

如下：

<img src="https://iknow-pic.cdn.bcebos.com/fd039245d688d43fba24268c6d1ed21b0ef43b3a?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto">

这样添加就可以了。

最后附上源码图：

<html>
    <head>
        <title>标签的属性</title>
    </head>
    <body>
        <!-- 
            属性，在标签中（开始标签或结束标签）还可以设置属性
            属性是一个名值对（x=y）
            属性用来设置标签中的内容如何显示

            属性和标签名或其他属性应该使用空格来隔开

            属性不能瞎写，应该根据文档中的规定来编写，
            有些属性有属性值，有些没有，如果有属性值，属性应该使用引号引起来

            # font字体，可以设置字体。color字体的颜色，size字体的大小
            在font的后面可以添加颜色和大小来改变字体的形态。
        -->
        <h1>这是我的<font color="green" size="100">第三个</font>网页！</h1>
        <h1>咏鹅[唐]—骆宾王</h1>
        <p>鹅，鹅，鹅，曲项向天歌。</p>
        <p>白毛浮绿水，红掌拨清波。</p>
        <img src="https://iknow-pic.cdn.bcebos.com/fd039245d688d43fba24268c6d1ed21b0ef43b3a?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto">
    </body>
</html>