web编程（三）显示html网页
生活随笔
收集整理的這篇文章主要介紹了
web编程（三）显示html网页
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
之前已經(jīng)搭建好http服務(wù)器，現(xiàn)在我們來利用apache來顯示一些簡(jiǎn)單的html網(wǎng)頁(yè)
一、編寫測(cè)試腳本
下面列出幾個(gè)html腳本，并將其放到/usr/local/apache/htdocs目錄下，該目錄下存放的都是網(wǎng)頁(yè)。
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;">這是一個(gè)測(cè)試用的網(wǎng)頁(yè)，這是測(cè)試！！！！</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;">家住車站路社區(qū)的劉女士，丈夫因病去世，靠打零工獨(dú)自撫養(yǎng)女兒，又不幸遭遇火災(zāi)，造成直接損失2萬多元。街道救助站接到社區(qū)情況反映后，第一時(shí)間趕到火災(zāi)現(xiàn)場(chǎng)，進(jìn)行受災(zāi)情況評(píng)估取證。因其本身為單親家庭，而且經(jīng)濟(jì)方面較為困難，救助站根據(jù)社區(qū)提供的信息和實(shí)地了解的情況，對(duì)其開通救濟(jì)綠色通道，在當(dāng)天下午先期送去了2000元救濟(jì)金，解決災(zāi)戶的燃眉之急。等災(zāi)戶安置好后，再通過社區(qū)進(jìn)行救助申報(bào)。</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;">“對(duì)于火災(zāi)等突發(fā)性事件，我們會(huì)視情況開通應(yīng)急救濟(jì)綠色通道，由社區(qū)和街道落實(shí)救助金在24小時(shí)內(nèi)送達(dá)，確保災(zāi)戶順利度過最艱難的一段時(shí)間。”相關(guān)負(fù)責(zé)人表示。(張亮 通訊員張靜君)</div></div></body> </html>2、顯示一個(gè)圖片
<!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、顯示簡(jiǎn)單表格
<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>（二）、測(cè)試現(xiàn)象
在瀏覽器輸入服務(wù)器的ip和腳本名字，顯示一個(gè)圖片
http://192.168.122.1/picture.html
顯示一個(gè)表格
總結(jié)
以上是生活随笔為你收集整理的web编程（三）显示html网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何将图像保存至计算机G7X,openc
- 下一篇： 实验心得