html腳本與模板分離
❶ php怎麼和html分開寫
？我做PHP程序的時候，一般是把PHP程序和HTML頁面分開的。
只是在要顯示的地方加句PHP語句。
但我看有的人把HTML和PHP程序寫在一個程序里。
這個問題很簡單呀！分開寫：好處是便於維護，把一個html的代碼include進php里，當你的html需要修改的時候，只改一處就行了！如果你真的是嵌入的話修改維護時光查試代碼位置就很麻煩了！由此看對網站的更新也是方便的！把html和php分開寫,也算是某種意義上的「封裝」！如果是大型網站，還是分開為好！合在一起：php本身就是「嵌入式」的腳本語言，一個小的頁面，變化不大，易於修改，二者相嵌則更顯靈活！
倒底是寫在一起，還是分開寫，應該視具體情況而定吧！
分開寫，處理好了，使網站「模塊化」在管理維護上好處是顯示易見的！
如果混在一起，修改維護起來……
學學模板吧，挺好的，是真正實現了表現層和邏輯層的分離，很不錯的
我建議還是分開寫,也許有人認為寫在一起好,可是我的觀點是我們都是程序員,我們要考慮頁面修改人員,他們不懂,所以還是分開寫比較好
如果要考慮那些不懂php的美工，建議分開寫
自己的感覺是很重要的！！！
❷ 如何在 JS 中嵌入 HTML 代碼
答案是不要這么搞，大段的 HTML 嵌入到 JS 里結果就是悲劇。不能代碼高亮不能自動縮進，太難維護了。
我的經驗是，直接把 HTML 單獨寫到一個瀏覽器能訪問到的文件里，比如 template/foo.html。然後 JS 里發一個同步 XHR 請求去讀這個文件，例如：
var html = Template.load('/template/foo.html');
var target = document.getElementById('xxx');
target.innerHTML = html;Template 是一個工具類，負責發送同步 XHR 請求並返回結果。
這樣在開發的時候，模板文件和 JS 代碼分離，非常好維護。
當然這樣做的話，上線的時候總發 XHR 請求也不是辦法。所以在打包 JS 之前，我一般會通過腳本把所有的 Template.load('.*') 提取出來，替換成對應 HTML 的內容。這樣在開發時非常方便，上線時也沒有性能問題。
比如上面的代碼被打包工具跑一下就變成了：
var html = "<ol>\n<li class=\"xxx\">...</li>\n</ol>"; // 引號里是 /template/foo.html 對引號、換行做了轉義之後的內容，由工具自動生成
var target = document.getElementById('xxx');
target.innerHTML = html;
❸ 如何分析網頁模板
ASP網頁模板的應用: 讓程序和界面分離，讓ASP腳本更清晰，更換界面更容易 為了避免ASP程序和HTML代碼混寫造成維護困難的情況，本文介紹了一種方法，利用模板來分離程序和頁面，使程序設計更加輕松。 在使用ASP製作一個站點的時候，常常會出現一個ASP文件中，程序代碼和HTML代碼混合的情況。這樣子做有許多缺點： 1. 且不說編程時就要對頁布局進行設計和編排，造成代碼混亂難懂，不規范； 2. 當需要改變頁面外觀時，你不僅要改變HTML部份，也需要改變ASP代碼，不易維護。 那麼，要如何才能避免這些麻煩呢？ 答案就是使用模板文件，將ASP代碼和HTML頁面分開，一切問題就都解決了。使用網頁模板有以下好處： 1. 在很短的時間內可以替換整個站點的外觀； 2. 使程序員可以抽象編程，而無須接觸HTML代碼； 3. 可以重復利用以前的模板。 使用過PHP的程序就會知道，PHP有個模板程序(FastTemplate)，現在的問題是如何在ASP中實現類似的功能。 Microsoft的ASP帶有兩種腳本：VBScript和JScript。它們都帶有一個 "正則表達式對象" (RegExp)，利用字元串對象和RegExp對象，就可以輕松的實現模板功能。沐楓以此編寫了一個 "Template.JScript.INC" 文件，此文件的內容附在文章後面。有能力的讀者可以根據自己的需要進行改進。 下面介紹一下使用方法。由於此文件是使用JScript編寫的（當然要轉成VBScript也很容易），因此，預設腳本語言要設為JScript，即ASP程序第一行應為：<%@Language=JScript%>，然後再包含模板程序文件：<!--#include file="Template.JScript.INC"-->。 先介紹一下Template類的使用： 1. 建立Template對象：Template(Path) 參數：Path(字元串類型) HTML模板文件的存放路徑。 使用new 操作符建立Template對象。 例子： var tpl = new Template("c:\\template"); 在程序中可以用tpl.TplPath來取得模板路徑，也可以通過tpl.TplPath來改變模板路徑。 如： tpl.TplPath = "d:\\template"; 2. 裝載模板文件：Template.Load(Name, File) 參數：Name(字元串類型) 是一個模板變數名。 File(字元串類型) 模板文件名。此文件存放在HTML模板路徑下。 讀取文件File到模板變數Name中。 例子： tpl.Load("Main", "TEST.HTM"); 此時，模板變數Main就包含了文件TEST.HTM的內容。 你可以用tpl.Main來訪問模板變數"Main"。 例子： <%=tpl.Main%> 將顯示剛才讀進來的TEST.HTM文件內容。 3. 模板分拆：Template.Split(Name) 參數：Name(字元串類型) 是一個模板變數名。 將Name中的子模板分解。 例子： 先假設上例中的TEST.HTM內容為： ------------------- 這是主模板。接下來是：<!--#TPLDEF SUB-->SUB子模板，還有 <!--#TPLDEF THIRD-->THIRD模板。<!--#TPLEND THIRD--> <!--#TPLEND SUB--> ------------------- 那麼： tpl.Split("Main"); 執行以後，就會生成新的模板變數"SUB"，和"THIRD"，它們的內容就是<!--#TPLDEF SUB-->和<!--#TPLEND SUB-->之間語句。 而且"Main"模板變數的內容也會發生改變： tpl.Main 的內容為："這是主模板。接下來是{SUB}" tpl.SUB 的內容為："SUB子模板，還有{THIRD}" tpl.THIRD 的內容為："THIRD模板。" TPLDEF 和 TPLEND 定義的語句塊充許多重嵌套。 4. 模板處理：Template.Parse(Name) 參數：Name(字元串類型) 是一個模板變數。 將模板中用花括弧括起來的字串用同名的模板變數的內容替換。 例子：續上例 <%=tpl.Parse("Main")%> 顯示："這是主模板。接下來是SUB子模板，還有{THIRD}" 由例子可知，Parse只替換"Main"模板中的{SUB}變數，而不能嵌套替換下去。這是為了增加程序靈活性而故意設計的。那麼該怎麼樣完整顯示"Main"模板呢？ 例子： tpl.SUB = tpl.Parse("SUB"); //先處理SUB變數，再處理Main變數。 Response.write(tpl.Parse("Main")); 5. 自定義模板變數。 自定義模板變數很簡單，可以直接用賦值語句來定義和修改任何變數： 例子： tpl.Hahaha = "這是自定義變數"; tpl.THIRD = "改變原模板中的THIRD變數"; 需要注意的是，由於JScrip是區分大小寫的，因此一定要注意大小寫的拼寫。一般來說，HTML模板中定義的模板變數都用大寫。 另外，網站模板中使用的"TplPath"，"Load"，"Parse"，"Split"變數是內部使用的，不要挪做它用，否則程序將可能發生異常。 下面舉個完整的例子： 第一步：先建立Html模板文件。 這里先說明HTML模板文件的組成。首先，它和普通的HTML文件幾乎沒有區別，只不過多了幾個標記。 模板的標記有兩種。讓我們先看一個例子： TEST.HTM ----------------- <!--文件名：TEST.HTM--> <HTML> <TITLE>範例</TITLE> <HEADER> </HEADER> <BODY> 這是一個表格範例。 <TABLE> <!--#TPLDEF MAXX-->10<!--#TPLEND MAXX--> <!--...注意，此處使用了一個技巧即定義了MAXX模板變數並賦值為10。--> <TR> <TD>X</TD><TD>X的平方</TD> </TR> <!--#TPLDEF ROW--> <TR> <TD>{X}</TD><TD>{XX}</TD> </TR> <!--#TPLEND ROW--> </TABLE> 以上共有{COUNT}行數據。 </BODY> </HTML> ----------------- 從上面可以看出，象{X}，{XX}，{COUNT}之類的記號是定義模板變數。它們將會在ASP程序中被替代。 而<!--#TPLDEF ROW-->...<!--#TPLEND ROW-->是定義一個語句塊"ROW"。在ASP程序中就可以將"ROW"塊重復多次。 第二步：設計ASP程序。 TEST.ASP ------------------- <%@Language=JScript%> <!--#include file="Template.JScript.INC"--> <% var tpl = new Template("c:\\Inetpub\\wwwroot"); var str=""; var i; tpl.Load("Main","TEST.HTM"); tpl.Split("Main"); tpl.COUNT = 0; for(i=1;i<=tpl.MAXX;i++) //tpl.MAXX在模板中定義為10。 { tpl.X = i; tpl.XX = i*i; str+=tpl.Parse("ROW"); tpl.COUNT++; } tpl.ROW = str; tpl.MAXX =""; //清空此模板變數，以避免被顯示出來。 %> <%=tpl.Parse("Main"%> ------------------- 上面的程序將顯示一個1到10的平方表。 通常在使用模板的情況下，都只要在最後一行加上顯示頁面的語句。因此整個程序顯得十分清晰。此時，只要對模板文件進行編輯，就可以改變整個頁面的外觀。 至於模板文件，它可以是任何文件，如HTML文件、ASP文件，甚至是程序本身!，而且在一個程序中可以裝載多個模板配合使用，這樣，不僅具有極大靈活性，而且模板文件與ASP程序的相關性可減到最低程度。 好好利用模板，將會使你的工作更加輕松。 附：Template 源程序 ------------------------------------ <!--文件名：Template.JScript.INC--> <% /*********************************************************/ /* Template Class */ /* Author: 沐楓 ([email protected]) */ /* Date: 2000-6-09 */ /*********************************************************/ //Template Method Define function Template_Parse(name) { if(this[name]==null) return ""; var reg = new RegExp("{(\\w*)}","ig"; var str = new String(this[name]); var arr = str.match(reg); var i; if(arr != null) for(i=0;i<arr.length;i++) { key = arr.slice(1,-1); reg = new RegExp(arr,"ig"; if(this[key]!=null) str = str.replace(reg,this[key]); } return str; } function Template_Split(name) { var len = 0; var arr; if(this[name]==null) return; var Template_Exp = new RegExp("<!--#TPLDEF +(\\w*) *-->((.|\\n)*)<!--#TPLEND +\\1 *-->","i"; while(this[name].search(Template_Exp)!=-1) { arr = this[name].match(Template_Exp); this[arr[1]] = arr[2]; this[name] = this[name].replace(Template_Exp,"{"+arr[1]+"}"; this.Split(arr[1]); } } function Template_Load(name,filename) { var fso = new ActiveXObject("Scripting.FileSystemObject"; var file = fso.BuildPath(this.TplPath, filename); if(fso.FileExists(file)) { var f = fso.OpenTextFile(file, 1); this[name] = f.ReadAll(); } } //Template Constructor function Template(path) { //Property this.TplPath = path; //Method this.Parse = Template_Parse; this.Split = Template_Split; this.Load = Template_Load; } %> 希望對你有幫助、希望採納、謝謝
❹ 想要將邏輯運算的PHP代碼 和 HTML代碼分離 循環的內容應該如何寫
HTML文件test.html：
<HTML代碼>{$title}<HTML代碼>
{$for}
<br /><HTML代碼>循環內容{$i}<HTML代碼>
{$end}
PHP文件test.php：
$title = '標題';
$html = file_get_contents('test.html');
$html = str_replace('{$title}','<?php echo $title;?>',$html);
$html= str_replace('{$for}','<?php for ($i=0; $i<10; $i++) { ?>',$html);
$html = str_replace('{$i}','<?php echo $i;?>',$html);
$html = str_replace('{$end}','<?php } ?>',$html);
$fp = fopen('index.php', 'w');
fwrite($fp,$html);
fclose($fp);
生成的PHP文件index.php：
<HTML代碼><?php echo $title;?><HTML代碼>
<?php for ($i=0; $i<10; $i++) { ?>
<br /><HTML代碼>循環內容<?php echo $i;?><HTML代碼>
<?php } ?>
❺ 如何將php腳本與html分開成兩個文件！
用smarty模板 挺簡單的
具體配置與使用： http://e.save95.cn/index.php/video/index/14541/series/1/plid/8028
第27講到29講就是講smarty模板的使用 很適合初學者
❻ PHP頁面怎麼分離為HTML+PHP
前後端分離可以使用ajax，php後台return,如果數據獲取成功，返回list,
ajax代碼如下:
$.ajax({
type: "GET",
url: "test.json",//php請求數據的地址
data: {aaa:'aaa'},//可選，發送到伺服器的數據
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText裡面的所有內容
var html = '<option>查詢後選擇</option>';
$.each(data, function(commentIndex, comment){
html += '<option value="' + comment[0]+ '">"' + comment[1]+ '</option>';
});
$('#resText').html(html);
}
});
select 加上一個id="resText".大概的意思就是這樣，具體根據你的需求在做修改。