web编程（三）显示html网页

最新推荐文章于 2024-05-21 11:22:42 发布

无聊的阿乐

最新推荐文章于 2024-05-21 11:22:42 发布

阅读量708

点赞数

分类专栏：网络编程 Linux 杂记文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_44618297/article/details/125950111

版权

Linux 同时被 3 个专栏收录

72 篇文章 2 订阅

订阅专栏

杂记

70 篇文章 1 订阅

订阅专栏

网络编程

13 篇文章 0 订阅

订阅专栏

之前已经搭建好http服务器，现在我们来利用apache来显示一些简单的html网页

一、编写测试脚本

下面列出几个html脚本，并将其放到/usr/local/apache/htdocs目录下，该目录下存放的都是网页。

1、图文混排

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>图文混排模板</title>
  </head>
  <body>
    <div style="padding: 4vw">
      <div
        style="
          line-height: 6vw;
          text-align: justify;
          text-align-last: left;
          font-size: 5vw;
          font-weight: bold;
          color: #333;
        "
      >
        这是一个测试用的网页，这是测试！！！！
      </div>
      <div style="margin: 3vw 0; font-size: 4vw; color: #999">
        2022-10-24 11:30
      </div>
      <div
        style="background-color: #ddd; height: 1Px; margin-bottom: 6vw"
      ></div>
      <div
        style="
          line-height: 5.6vw;
          text-align: justify;
          text-align-last: left;
          font-size: 4.4vw;
          text-indent: 2em;
          color: #666;
        "
      >
        家住车站路社区的刘女士，丈夫因病去世，靠打零工独自抚养女儿，又不幸遭遇火灾，造成直接损失2万多元。街道救助站接到社区情况反映后，第一时间赶到火灾现场，进行受灾情况评估取证。因其本身为单亲家庭，而且经济方面较为困难，救助站根据社区提供的信息和实地了解的情况，对其开通救济绿色通道，在当天下午先期送去了2000元救济金，解决灾户的燃眉之急。等灾户安置好后，再通过社区进行救助申报。
      </div>
 
      <img
        style="
          display: block;
          width: 100%;
          height: auto;
          margin: 5vw auto;
          max-width: 100%;
          max-height: 100%;
        "
	src="https://scpic.chinaz.net/files/pic/pic9/202207/apic42277.jpg"
        alt=""
      />
 
      <div
        style="
          line-height: 5.6vw;
          text-align: justify;
          text-align-last: left;
          font-size: 4.4vw;
          text-indent: 2em;
          color: #666;
        "
      >
        “对于火灾等突发性事件，我们会视情况开通应急救济绿色通道，由社区和街道落实救助金在24小时内送达，确保灾户顺利度过最艰难的一段时间。”相关负责人表示。(张
        亮 通讯员张静君)
      </div>
    </div>
  </body>
</html>

2、显示一个图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>display picture</title>
  </head>
  <body>
      <img
        style="
          display: block;
          width: 20%;
          height: auto;
          margin: 5vw auto;
          max-width: 100%;
          max-height: 100%;
        "
	src="https://scpic.chinaz.net/files/pic/pic9/202207/apic42277.jpg"
        alt=""
      />
 
  </body>
</html>

3、显示简单表格

<html>

<head>

<style type="text/css">

#customers

{

	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

	width:100%;

	border-collapse:collapse;

}

#customers td, #customers th

{

	font-size:1em;

	border:1px solid #98bf21;

	padding:3px 7px 2px 7px;

}

#customers th

{

	font-size:1.1em;

	text-align:left;

	padding-top:5px;

	padding-bottom:4px;

	background-color:#A7C942;

	color:#ffffff;

}

#customers tr.alt td

{

	color:#000000;

	background-color:#EAF2D3;

}

</style>

</head>

<body>

<table id="customers">

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Apple</td>

<td>Steven Jobs</td>

<td>USA</td>

</tr>

<tr class="alt">

<td>Baidu</td>

<td>Li YanHong</td>

<td>China</td>

</tr>

<tr>

<td>Google</td>

<td>Larry Page</td>

<td>USA</td>

</tr>

<tr class="alt">

<td>Lenovo</td>

<td>Liu Chuanzhi</td>

<td>China</td>

</tr>

<tr>

<td>Microsoft</td>

<td>Bill Gates</td>

<td>USA</td>

</tr>

<tr class="alt">

<td>Nokia</td>

<td>Stephen Elop</td>

<td>Finland</td>

</tr>

</table>

</body>

</html>

4、显示一句话

<html><body><h1>test hahaha !</h1></body></html>

（二）、测试现象

在浏览器输入服务器的ip和脚本名字，显示一个图片

http://192.168.122.1/picture.html

在这里插入图片描述
显示一个表格

http://192.168.122.1/sheet.html

在这里插入图片描述

无聊的阿乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web编程（三）显示html网页

下面列出几个html脚本，并将其放到/usr/local/apache/htdocs目录下，该目录下存放的都是网页。在浏览器输入服务器的ip和脚本名字，显示一个图片。
复制链接

扫一扫

专栏目录