正文

在線生成html網(wǎng)頁（學(xué)生個(gè)人網(wǎng)頁制作html）

發(fā)布時(shí)間：2023-03-12 15:38:10 稿源：創(chuàng)意嶺閱讀： 98 問大家

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于在線生成html網(wǎng)頁的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008

本文目錄:

1、如何制作html格式的在線測試頁面
2、html如何制作網(wǎng)站
3、怎樣使網(wǎng)頁全部用html
4、asp如何生成html靜態(tài)網(wǎng)頁

在線生成html網(wǎng)頁（學(xué)生個(gè)人網(wǎng)頁制作html）

一、如何制作html格式的在線測試頁面

HTML介紹：(1):<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first homepage.

</body>

</html> 將此文件保存為“mypage.htm”。啟動(dòng)瀏覽器。在文件菜單中選擇“打開”（或者“打開頁面”），這時(shí)將出現(xiàn)一個(gè)對(duì)話框。選擇“瀏覽”（或者“選擇文件”），定位到你剛才創(chuàng)建的HTML文件——“mypage.htm”，選擇它，單擊“打開”。然后在對(duì)話框中，你將看到這個(gè)文件的地址，比如說：“C:\MyDocuments\mypage.htm”。單擊“確定”，瀏覽器將顯示此頁面。

--------------------------------------------------------------------------------例子解釋HTML文檔中，第一個(gè)標(biāo)簽是<html>。這個(gè)標(biāo)簽告訴瀏覽器這是HTML文檔的開始。HTML文檔的最后一個(gè)標(biāo)簽是</html>，這個(gè)標(biāo)簽告訴瀏覽器這是HTML文檔的終止。在<head>和</head>標(biāo)簽之間文本的是頭信息。在瀏覽器窗口中，頭信息是不被顯示的。在<title>和</title>標(biāo)簽之間的文本是文檔標(biāo)題，它被顯示在瀏覽器窗口的標(biāo)題欄。在<body>和</body>標(biāo)簽之間的文本是正文，會(huì)被顯示在瀏覽器中。在<b>和</b>標(biāo)簽之間的文本會(huì)以加粗字體顯示。

---常見問題問：我編寫完了HTML文件，但是不能在瀏覽器中看見結(jié)果，為什么？

答：請(qǐng)確認(rèn)你保存了文件，并且使用了正確的文件名和擴(kuò)展名，例如：“c:\mypage.htm”，并且確認(rèn)你用瀏覽器打開時(shí)使用同樣的文件名。問：我編輯了HTML文件，但是修改結(jié)果并沒有在瀏覽器中顯示，為什么？

答：瀏覽器緩存了你的頁面，所以它不需要兩次讀取同樣的頁面。你修改了這個(gè)頁面，瀏覽器并不知道。請(qǐng)使用“刷新/重載”按鈕來強(qiáng)迫瀏覽器讀取編輯過的頁面。

-----------------------------------------------------------------------------

HTML基本標(biāo)簽：(2):HTML中最重要的標(biāo)簽是定義標(biāo)題元素，段落和換行的標(biāo)簽。

標(biāo)題元素標(biāo)題元素由標(biāo)簽<h1>到<h6>定義。<h1>定義了最大的標(biāo)題元素，<h6>定義了最小的。

<h1>This is a heading</h1>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

HTML自動(dòng)在一個(gè)標(biāo)題元素前后各添加一個(gè)空行。

(3):段落段落是用<p>標(biāo)簽定義的。

<p>This is another paragraph</p> HTML自動(dòng)在一個(gè)段落前后各添加一個(gè)空行。

--------------------------------------------------------------------------------換行當(dāng)需要結(jié)束一行，并且不想開始新段落時(shí)，使用<br>標(biāo)簽。<br>標(biāo)簽不管放在什么位置，都能夠強(qiáng)制換行。

<p>This <br> is a para<br>graph with line breaks</p> <br>標(biāo)簽是一個(gè)空標(biāo)簽，它沒有結(jié)束標(biāo)記。

基本注意點(diǎn)——有用的技巧當(dāng)你寫下HTML文本的時(shí)候，你不能確知在另外一個(gè)瀏覽器中，這些文本將被如何顯示。有人用著大的顯示器，有的人用的小一些。每次用戶調(diào)整窗口大小的時(shí)候，文本都將被重新格式化。不要想在編輯器中寫一些空行和空格來協(xié)助排版。HTML將截掉你文本中的多余空格。不管多少個(gè)空格，處理起來只當(dāng)一個(gè)。一點(diǎn)附加信息：在HTML里面，一個(gè)空行也只被當(dāng)作一個(gè)空格來處理。使用空段落<p>來插入空白行是一個(gè)壞習(xí)慣，請(qǐng)使用<br>標(biāo)簽來替代。（但是不要用<br>標(biāo)簽來創(chuàng)建列表，我們后面會(huì)專門學(xué)習(xí)HTML列表的。）你也許注意到了段落可以不寫結(jié)束標(biāo)記</p>。別依賴它，HTML的下一個(gè)版本將不準(zhǔn)你漏掉任何一個(gè)結(jié)束標(biāo)簽。HTML自動(dòng)在某些元素前后增加額外的空行，就像在段落和標(biāo)題元素的前后一樣。我們使用了水平線（<hr>標(biāo)簽）來分隔我們教程的章節(jié)。

更多示例：a:多個(gè)段落：

<html>

<body>

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

<p>

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

</p>

<p>

The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

</p>

</body>

</html>

(這個(gè)例子說明了段落的一些默認(rèn)行為。)b:換行：

<html>

<body>

<p>

To break<br>lines<br>in a<br>paragraph,<br>use the br tag.

</p>

</body>

</html>

(這個(gè)例子說明了在HTML文檔中換行的使用。)

c:詩歌的問題： <html>

<body>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

<p>Note that your browser simply ignores your formatting!</p>

</body>

</html>

(這個(gè)例子說明了HTML顯示格式的一些問題。)d:標(biāo)題元素： <html>

<body>

<h1>This is heading 1</h1>

<h4>This is heading 2</h4>

<h4>This is heading 3</h4>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>

</body>

</html>

(這個(gè)例子說明了在HTML中顯示標(biāo)題元素的標(biāo)簽。)e:居中的標(biāo)題元素：<html>

<body>

<h1 align="center">This is heading 1</h1>

<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>

</body>

</html>

(這個(gè)例子顯示了一個(gè)居中的標(biāo)題元素。)f:水平線：<html>

<body>

<p>The hr tag defines a horizontal rule:</p>

<hr>

<p>This is a paragraph</p>

<hr>

<p>This is a paragraph</p>

<hr>

<p>This is a paragraph</p>

</body>

</html>

(這個(gè)例子說明了如何插入水平線。)

g:隱藏的注釋：<html>

<body>

<p>This is a regular paragraph</p>

</body>

</html>

(這個(gè)例子說明了在HTML文檔中如何插入隱藏的注釋。)h:背景色：<html>

<h4>Look: Colored Background!</h4>

</body>

</html>

(這個(gè)例子說明了如何給頁面設(shè)置背景色。)

二、html如何制作網(wǎng)站

1，可以直接新建一個(gè).html結(jié)尾的文件，也可以打開編輯器之后，在里面新建一個(gè)文件，然后保存為 .html結(jié)尾的，結(jié)果都一樣。2，然后選擇使用某種編輯器來打開它，如使用Notepad++編輯器來編輯它。3，然后在這個(gè)文件中寫入網(wǎng)頁所需的基本代碼。4，寫好之后，根據(jù)需要設(shè)置編碼格式，一般是utf-8格式，格式設(shè)置不對(duì)，會(huì)出現(xiàn)亂碼的情況；設(shè)置好格式之后，點(diǎn)擊左上角的圖標(biāo)來保存或者是直接按下 ctrl+s快捷鍵來保存。5，保存好之后，然后點(diǎn)擊‘運(yùn)行’菜單，在出現(xiàn)的菜單中根據(jù)需要選擇不同的瀏覽器來查看剛才編輯好的網(wǎng)頁，當(dāng)然也可以按下快捷鍵，如谷歌的是 shift+Ctrl+alt+R 來看看效果如何，這就是簡單的html網(wǎng)頁教程了。以上就是西安文菲科技的html制作流程

三、怎樣使網(wǎng)頁全部用html

/// <summary>

/// 傳入U(xiǎn)RL返回網(wǎng)頁的html代碼

/// </summary>

/// <param name="Url">URL</param>

/// <returns></returns>

public static string getUrltoHtml(string Url)

{

errorMsg = "";

try

{

System.Net.WebRequest wReq = System.Net.WebRequest.Create(Url);

// Get the response instance.

System.Net.WebResponse wResp =wReq.GetResponse();

// Read an HTTP-specific property

//if (wResp.GetType() ==HttpWebResponse)

//{

//DateTime updated =((System.Net.HttpWebResponse)wResp).LastModified;

//}

// Get the response stream.

System.IO.Stream respStream = wResp.GetResponseStream();

// Dim reader As StreamReader = New StreamReader(respStream)

System.IO.StreamReader reader = new System.IO.StreamReader(respStream, System.Text.Encoding.GetEncoding("gb2312"));

return reader.ReadToEnd();

}

catch(System.Exception ex)

{

errorMsg = ex.Message ;

}

return "";

}

你可以用這個(gè)函數(shù)獲取網(wǎng)頁的客戶端的html代碼，然后保存到.html文件里就可以了。

方案2：

生成單個(gè)的靜態(tài)頁面不是難點(diǎn)，難的是各個(gè)靜態(tài)頁面間的關(guān)聯(lián)和鏈接如何保持完整；

特別是在頁面頻繁更新、修改、或刪除的情況下；

像阿里巴巴的頁面也全部是html的，估計(jì)用的是地址映射的功能

關(guān)于地址映射可參考：

可以看看這個(gè)頁面，分析一下他的“競價(jià)倒計(jì)時(shí)”功能

ASP.Net生成靜態(tài)HTML頁

在Asp中實(shí)現(xiàn)的生成靜態(tài)頁用到的FileSystemObject對(duì)象!

在.Net中涉及此類操作的是System.IO

以下是程序代碼注:此代碼非原創(chuàng)!參考別人代碼

CODE:

//生成HTML頁

public static bool WriteFile(string strText,string strContent,string strAuthor)

{

string path = HttpContext.Current.Server.MapPath("/news/");

Encoding code = Encoding.GetEncoding("gb2312");

// 讀取模板文件

string temp = HttpContext.Current.Server.MapPath("/news/text.html");

StreamReader sr=null;

StreamWriter sw=null;

string str="";

try

{

sr = new StreamReader(temp, code);

str = sr.ReadToEnd(); // 讀取文件

}

catch(Exception exp)

{

HttpContext.Current.Response.Write(exp.Message);

HttpContext.Current.Response.End();

sr.Close();

}

string htmlfilename=DateTime.Now.ToString("yyyyMMddHHmmss")+".html";

// 替換內(nèi)容

// 這時(shí),模板文件已經(jīng)讀入到名稱為str的變量中了

str =str.Replace("ShowArticle",strText); //模板頁中的ShowArticle

str = str.Replace("biaoti",strText);

str = str.Replace("content",strContent);

str = str.Replace("author",strAuthor);

// 寫文件

try

{

sw = new StreamWriter(path + htmlfilename , false, code);

sw.Write(str);

sw.Flush();

}

catch(Exception ex)

{

HttpContext.Current.Response.Write(ex.Message);

HttpContext.Current.Response.End();

}

finally

{

sw.Close();

}

return true;

此函數(shù)放在Conn.CS基類中了

在添加新聞的代碼中引用注：工程名為Hover

if(Hover.Conn.WriteFilethis.Title.Text.ToString),this.Content.Text.ToString),this.Author.Text.ToString)))

{

Response.Write("添加成功");

}

else

{

Response.Write("生成HTML出錯(cuò)!");

}

模板頁Text.html代碼

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>ShowArticle</title>

<body>

biaoti

<br>

content<br>

author

</body>

</HTML>

biaoti

<br>

content<br>

author

</body>

</HTML>

提示添加成功后會(huì)出以當(dāng)前時(shí)間為文件名的html文件!上面只是把傳遞過來的幾個(gè)參數(shù)直接寫入了HTML文件中,在實(shí)際應(yīng)用中需要先添加數(shù)據(jù)庫，然后再寫入HTML文件

方案3：

給一個(gè)客戶端參考的例子（SJ）

它的作用在于以客戶端的方式獲取某個(gè)頁面的代碼，然后可以做為其他用途，本例是直接輸出

var oXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

oXmlHttp.open("GET","", false);

oXmlHttp.send()

var oStream = new ActiveXObject("ADODB.Stream");

if(oStream == null)

alert("您的機(jī)器不支持ADODB.Stream.")

else

{

oStream.Type=1;

oStream.Mode=3;

oStream.Open() ;

oStream.Write(oXmlHttp.responseBody);

oStream.Position= 0;

oStream.Type= 2;

oStream.Charset="gb2312";

var result= oStream.ReadText();

oStream.Close();

oStream = null;

var aa = window.open("","")

document.write(result);

aa.document.write(result);

}

</script>

方案4：學(xué)csdn一樣。用xml保存數(shù)據(jù)，模版XSL也只有一個(gè)文件。

使用xml來保存數(shù)據(jù)，使用xsl來定義模板并且生稱數(shù)據(jù)?？梢酝ㄟ^xsl來很方便的在客戶端或者服務(wù)段顯示數(shù)據(jù)。如果要生成靜態(tài)葉面那更簡單了。去查一下.net的xml類包問題解決。

優(yōu)點(diǎn)：可以方便快速轉(zhuǎn)換成你想要的格式和內(nèi)容。

缺點(diǎn)：需要學(xué)習(xí)更多的內(nèi)容，不好入門。

方案5：

思路

1. 利用如Dw-Mx這樣的工具生成html格式的模板，在需要添加格式的地方加入特殊標(biāo)記(如$htmlformat$),動(dòng)態(tài)生成文件時(shí)利用代碼讀取此模板，然后獲得前臺(tái)輸入的內(nèi)容，添加到此模板的標(biāo)記位置中，生成新文件名后寫入磁盤，寫入后再向數(shù)據(jù)庫中寫入相關(guān)數(shù)據(jù)。

2. 使用后臺(tái)代碼硬編碼Html文件，可以使用HtmlTextWriter類來寫html文件。

優(yōu)點(diǎn)

1. 可以建立非常復(fù)雜的頁面，利用包含js文件的方法，在js文件內(nèi)加入document.write()方法可以在所有頁面內(nèi)加入如頁面頭，廣告等內(nèi)容。

2. 靜態(tài)html文件利用MS Windows2000的Index Server可以建立全文搜索引擎，利用asp.net可以以DataTable的方式得到搜索結(jié)果。而Win2000的Index服務(wù)無法查找xml文件的內(nèi)容。如果包括了數(shù)據(jù)庫搜索與Index索引雙重查找，那么此搜索功能將非常強(qiáng)大。

3. 節(jié)省服務(wù)器的負(fù)荷，請(qǐng)求一個(gè)靜態(tài)的html文件比一個(gè)aspx文件服務(wù)器資源節(jié)省許多。

缺點(diǎn)

思路二：如果用硬編碼的方式，工作量非常大，需要非常多的html代碼。調(diào)試?yán)щy。而且使用硬編碼生成的html樣式無法修改，如果網(wǎng)站更換樣式，那么必須得重新編碼，給后期帶來巨大的工作量。

因此這里采用的是第一種思路

示列代碼

1.定義(template.htm)html模板頁面

＜html＞

＜head＞

＜title＞＜/title＞

＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞

＜/head＞

＜body ＞

＜table $htmlformat[0] height="100%" border="0" width="100%" cellpadding="10" cellspacing="0" bgcolor="#eeeeee" style="border:1px solid #000000"＞

＜tr＞

＜td width="100%" valign="middle" align="left"＞

＜span style="color: $htmlformat[1];font-size: $htmlformat[2]"＞$htmlformat[3]＜/span＞

＜/td＞

＜/tr＞

＜/table＞

＜/body＞

＜/html＞

2.asp.net代碼：

//---------------------讀html模板頁面到stringbuilder對(duì)象里----

string[] format=new string[4];//定義和htmlyem標(biāo)記數(shù)目一致的數(shù)組

StringBuilder htmltext=new StringBuilder();

try

{

using (StreamReader sr = new StreamReader("存放模板頁面的路徑和頁面名"))

{

String line;

while ((line = sr.ReadLine()) != null)

{

htmltext.Append(line);

}

sr.Close();

}

catch

{

Response.Write("＜Script＞alert('讀取文件錯(cuò)誤')＜/Script＞");

}

//---------------------給標(biāo)記數(shù)組賦值------------

format[0]="background="bg.jpg"";//背景圖片

format[1]= "#990099";//字體顏色

format[2]="150px";//字體大小

format[3]= "＜marquee＞生成的模板html頁面＜/marquee＞";//文字說明

//----------替換htm里的標(biāo)記為你想加的內(nèi)容

for(int i=0;i＜4;i++)

{

htmltext.Replace("$htmlformat["+i+"]",format[i]);

}

//----------生成htm文件------------------――

try

{

using(StreamWriter sw=new StreamWriter("存放路徑和頁面名",false,System.Text.Encoding.GetEncoding("GB2312")))

{

sw.WriteLine(htmltext);

sw.Flush();

sw.Close();

}

catch

{

Response.Write ("The file could not be wirte:");

}

小結(jié)

用此方法可以方便的生成html文件。程序使用了是循環(huán)替換，因此對(duì)需替換大量元素的模板速度非常快。

另外,團(tuán)IDC網(wǎng)上有許多產(chǎn)品團(tuán)購,便宜有口碑

四、asp如何生成html靜態(tài)網(wǎng)頁

生成HTML方法主要步驟只有兩個(gè)：

一、獲取要生成的html文件的內(nèi)容

二、將獲取的html文件內(nèi)容保存為html文件

目前常用獲取html文件的內(nèi)容的方法有以下幾種：

1、

str="<html標(biāo)記>內(nèi)容</html標(biāo)記>"

str=str&"<html標(biāo)記>內(nèi)容</html標(biāo)記><html標(biāo)記>數(shù)據(jù)庫讀取內(nèi)容....</html標(biāo)記>....."

這種方法與是在腳本內(nèi)寫要生成的html內(nèi)容，不太方便預(yù)覽生成頁面的內(nèi)容，無法可視化布局頁面，更改html模板時(shí)會(huì)更加復(fù)雜。

用這種方法的人很多，但我感覺這種方法是最不方便的。

2、制作單獨(dú)的HTML模板頁，動(dòng)態(tài)的內(nèi)容用特定的字符作為標(biāo)記(如：有人用$title$標(biāo)記為網(wǎng)頁標(biāo)題)，用ADODB.Stream或者Scripting.FileSystemObject將其模板內(nèi)容載入，然后再用替換方法把原先定好的標(biāo)記替換為動(dòng)態(tài)內(nèi)容

如：

Replace(載入的模板內(nèi)容,"$title$",rs("title" ) )

3、用XMLHTTP或serverXMLHTTP獲取動(dòng)態(tài)頁所顯示的HTML內(nèi)容，

以上就是關(guān)于在線生成html網(wǎng)頁相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。