web编程（三）显示html网页
生活随笔
收集整理的這篇文章主要介紹了
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">2022-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="https://scpic.chinaz.net/files/pic/pic9/202207/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="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
顯示一個表格
總結
以上是生活随笔為你收集整理的web编程（三）显示html网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何将图像保存至计算机G7X,openc
- 下一篇： 实验心得