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

Lvv@

已于 2022-11-24 11:07:06 修改

阅读量774

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Web practice of Educoder 文章标签：前端 html5 html

于 2022-11-24 11:06:06 首次发布

本文链接：https://blog.csdn.net/m0_63324772/article/details/128014217

Web practice of Educoder 专栏收录该内容

36 篇文章

订阅专栏

web编程训练_html5_图像的运用

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

编程要求

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

1.为网页添加背景图像，图像的url地址为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>
<!-- ********* Begin ********* -->
<body background="https://www.educoder.net/api/attachments/2308369">

<h2 align="center">
  <font face="微软雅黑">新媒体的大势所趋</font>
</h2>
<p align="center"  >
  <font color="#979797" size="2">更新时间：2021年11月18日14时08分 来源：<font color="blue">开源社区</font>
  </font>
</p>
<hr size="2" color="#CCCCCC"/>
<p>
  近年来，随着<font color="blue">移动互联网</font>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<font color="blue">“两微一抖”</font>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。

</p>
</body>
<!-- ********* Begin ********* -->
</html>

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

编程要求

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

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