Web(二)html5基础-图像的运用

缺乏、安全感 2023-09-24 14:39 17阅读 0赞

## web编程训练\_html5\_图像的运用 ##

### 第1关\_新媒体新闻网页的设计 ###

#### 编程要求 ####

在右侧编辑器中的`Begin - End`区域内补充代码，具体要求是：

1.为网页添加背景图像，图像的url地址为[https://data.educoder.net/api/attachments/2308369][https_data.educoder.net_api_attachments_2308369]

2.将第一行文字“新媒体的大势所趋”设置为2级标题；

（1）给h2标签添加居中的对齐属性

（2）在h2标签中嵌套font标签，使文字“新媒体的大势所趋”呈现“微软雅黑”的字体

3.将第二行文字“更新时间：2021年8月30日14时08分 来源：开源社区”设置为一个段落：

（1)为该p标签添加居中的对齐属性

（2)在该p标签中嵌套font标签，使该段落所有文字的颜色值设置为\#979797，字号大小设置为2 （3）在该p标签的font标签中再次嵌套font标签，使其中的文本“开源社区”的颜色值设置为blue。

4.在第二行文字下方添加一条水平线。使水平线的size值设置为2，颜色值设置为\#CCCCCC。

5.将第三行开始的文字“近年来，...的需求岗位。”设置为一个段落。在该p标签中嵌套两对font标签，分别使其中的文本“移动互联网”和“两微一抖”的颜色值设置为blue。

<!doctype html>
 <html><head>
 <meta charset="utf-8">
 <title>新媒体新闻网页的设计</title>
 </head>
 
 <body background="https://www.educoder.net/api/attachments/2308369">
 
 <h2 align="center">
 新媒体的大势所趋
 </h2>
 
 更新时间：2021年11月18日14时08分 来源：开源社区
 
 
 <hr size="2" color="#CCCCCC"/>
 
 近年来，随着移动互联网的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑“两微一抖”，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。
 
 
 </body>
 
 </html>

### 第2关\_带插图的新媒体新闻网页的设计 ###

#### 编程要求 ####

在右侧编辑器中的`Begin - End`区域内补充代码，具体要求是： 在该位置处插入图像标签：

（1）图像的地址为[https://data.educoder.net/api/attachments/2334243][https_data.educoder.net_api_attachments_2334243]

（2）为图像设置title属性，使得鼠标停留在图片上时显示文字“这是一张插图”

（3）设置图像宽为150，高为100

（4）设置图文对齐属性align值为left

（5）设置图像左右两侧间隙为30

（6）为图像设置alt属性，在图像未载入时显示文字“新媒体插图”

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>新媒体新闻网页的设计</title>
 </head>
 <body background="https://www.educoder.net/api/attachments/2308369">
 
 <h2 align="center">新媒体的大势所趋</h2>
 更新时间：2021年11月18日14时08分 来源：开源社区
 <hr size="2" color="#CCCCCC" />
 
 
 <img src="https://www.educoder.net/api/attachments/2334243" title="这是一张插图" width="150" height="100" align="left" hspace="30" alt="新媒体插图">
 
 近年来，随着移动互联网的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑“两微一抖”，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。
 </body>
 </html>

[https_data.educoder.net_api_attachments_2308369]: https://data.educoder.net/api/attachments/2308369
[https_data.educoder.net_api_attachments_2334243]: https://data.educoder.net/api/attachments/2334243