200字范文 > web编程（三）显示html网页

web编程（三）显示html网页

时间：2022-05-31 05:16:11

相关推荐

web编程（三）显示html网页

之前已经搭建好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" /><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title>图文混排模板</title></head><body><div style="padding: 4vw"><divstyle="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">-10-24 11:30</div><divstyle="background-color: #ddd; height: 1Px; margin-bottom: 6vw"></div><divstyle="line-height: 5.6vw;text-align: justify;text-align-last: left;font-size: 4.4vw;text-indent: 2em;color: #666;">家住车站路社区的刘女士，丈夫因病去世，靠打零工独自抚养女儿，又不幸遭遇火灾，造成直接损失2万多元。街道救助站接到社区情况反映后，第一时间赶到火灾现场，进行受灾情况评估取证。因其本身为单亲家庭，而且经济方面较为困难，救助站根据社区提供的信息和实地了解的情况，对其开通救济绿色通道，在当天下午先期送去了2000元救济金，解决灾户的燃眉之急。等灾户安置好后，再通过社区进行救助申报。</div><imgstyle="display: block;width: 100%;height: auto;margin: 5vw auto;max-width: 100%;max-height: 100%;"src="/files/pic/pic9/07/apic42277.jpg"alt=""/><divstyle="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" /><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title>display picture</title></head><body><imgstyle="display: block;width: 20%;height: auto;margin: 5vw auto;max-width: 100%;max-height: 100%;"src="/files/pic/pic9/07/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>