HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試

PHP主要作用是輔助HTML網頁設計,因此當然可以直接內嵌於HTML中作為特殊標籤,在此先介紹如何撰寫多行PHP程式碼,進而整合到HTML中,於Adobe Dreamweaver及瀏覽器測試。

一、 HTML網頁文件

範例是一個簡易的HTML網頁,網頁內容為論語電子書,從截圖中可以發現有運用一些HTML標籤進行樣式的設定,注意到副檔名為「html」,是常見的HTML網頁文件。

關於HTML標題和段落的樣式設定,可以參考贊贊小屋相關文章

HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試 1

二、 PHP echo語句

接著改以PHP程式碼編寫,利用echo語句呈現同樣的資料內容,副檔名是「php」,表示瀏覽器也能解析PHP程式文件,不過從編碼中沒有看到任何的樣式設定。

關於如何簡單用記事本編寫PHP程式碼,可以參考贊贊小屋相關文章

HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試 3

三、 多行PHP標籤

編寫PHP程式代碼的時候,如果程式語句或資料內容比較多,可以像HTML標籤一樣,直接把句子分開成多個標籤;從右側的預覽結果而言,瀏覽器都是純粹顯示資料的部分,因此從表面上是看不出來有任何差異。

HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試 5

四、 PHP內嵌HTML

想讓PHP代碼呈現樣式效果的方法很簡單,直接加入帶有HTML標籤的文字,例如截圖所框示的標題一;注意到是的副檔名為「php」的程式文件,在Adobe Dreamweaver可以有直接預覽的效果。

HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試 7

五、 HTML內嵌PHP

假如將PHP代碼內嵌到HTML網頁上,由於它是副檔名為「html」的標準網頁文件,即使和上個步驟是同樣的PHP程式碼,但是在Adobe Dreamweaver仍沒辦法如實呈現。

HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試 9

六、瀏覽器顯示PHP

在瀏覽器測試同樣的HTML網頁文件,會發現樣式效果其實可以呈現出來,讀者如果遇到瀏覽器沒有顯示內嵌PHP代碼的HTML網頁的情形,有可能是Apache伺服器設置的問題,這部分可以參考贊贊小屋相關文章

HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試 11

七、Dreamweaver測試

接著再嘗試把多個PHP語句都寫在同一個標籤內,可以看到Adobe Dreamweaver仍然沒有辦法完整呈現HTML中內嵌的PHP程式碼。

HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試 13

八、瀏覽器完整測試

和先前第六個步驟一樣,如果是在瀏覽器讀取有內嵌PHP語句的HTML文件,標籤裡的樣式都有解析出來,包括標題、段落以及區塊自動換行,效果相當完美。

HTML網頁如何內嵌PHP代碼?Dreamweaver與瀏覽器測試 15

PHP程式語言的特色

這篇文章瞭解到能直接將PHP程式碼內嵌於HTML網頁,包括資料容與HTML標籤,由於PHP在本質上就是程式語言,因此能在網頁裡進行程式相關的資料處理計算,這便是PHP的特性跟優點。

不同的程式語言雖然大致都有一些共通的架構,但原則上仍然會有各自擅長的領域和使用的場景,例如以PHP和目前主流熱門的Python兩相比較,剛開始接觸也許覺得兩者都是相同的層次概念,然而進展到較為進階的應用或實務案例時,很快會發現PHP畢竟還是網頁設計相關的程式語言,應用面向還是跟網站架設和經營有關,例如資料庫、Wordpress、網站運作等。

最後,經過這一節的範例操作足以確認,將PHP內置到HTML網頁是沒有問題的,只不過在Adobe Dreamweaver上無法立即呈現,因此贊贊小屋在設計期間會傾向於先編寫單獨PHP程式碼文件,等到最後專案測試的階段,才會考慮將它內嵌於HTML網頁文件。

每天學習,每天充電:php文章合集

最新文章: