當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML技巧100例(三)

發(fā)布時間：2025/3/19 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML技巧100例(三) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

61. 制作動態(tài)頁面的步驟是怎樣的?

第一步：設(shè)計頁面及尋找頁面需要的材料；

第二步：完成普通頁面的制作，此時無須涉及動態(tài)主頁內(nèi)容；

第三步：為頁面文字增加層疊樣式表，以改變文字顏色，鏈接等；

第四步：為頁面增加交互性內(nèi)容，如cgi,javascirpt,activeX控件等，這是把頁面動態(tài)的關(guān)鍵；

第五步：測試動態(tài)頁面以適應(yīng)更多瀏覽器；

第六步：發(fā)布動態(tài)頁面并在上面標明該頁是動態(tài)頁面(dhtml)。

62. 如何讓訪問者單擊加入站點書簽?

總希望訪問者能能把你的站點，加入到他們的書簽里，這里有個好辦法：

在<HEAD></HEAD>部分加入：

function addbookmark()

{window.external.AddFavorite("http://www.yy0736.com","夜鷹在線");}

//-->
</script>

然后在<BODY></BODY>部分加入：

63. 是否可以利用大寫體來書寫HTML標簽元素?

對于大多數(shù)HTML標簽元素,你可以利用大寫體或小寫體及兩者的混合體來書寫標簽元素。比如：

<html></html>和<HTML></HTML>同等有效。但如果是特殊字符的標簽元素，你只能使用小寫體。比如版權(quán)的字符的標簽元素是：©　顯示?，如果寫成&COPY;，那么頁面將完全顯示?。

64. 如何在頁面利用單擊來關(guān)閉瀏覽窗口?

在<BODY></BODY>部分加入以下代碼：

65.如何為頁面設(shè)置訪問口令?

有時候你需要為某一頁設(shè)置密碼，以讓合適的人進來。在＜head＞＜/head＞部分加入：

在以上代碼中,"bullbat"就是正確的密碼。"flash.htm"是當輸入正確密碼后鏈接的頁面。這種設(shè)置口令的方法并不安全，因為只要訪問者查看頁面源代碼就能知道設(shè)置的密碼了。

66.如何為訪問者設(shè)置正確的軟件下載鏈接?

與其它鏈接一樣，都使用<a></a>標簽。但對于軟件下載鏈接，你需要這樣設(shè)置：

<a href="wbzx.zip">下載wbzx.zip (188kb)</a>

67. 如何刪除圖片鏈接的藍色邊框?

如果我們設(shè)置了圖片為一個鏈接，會發(fā)現(xiàn)圖片四周出現(xiàn)了藍色邊框。要刪除邊框，需要在圖片標簽里加上border="0"。如：<img src="dog.jpg" border="0">

68. 如何為鏈接提供一個按鈕?

</form>

69.如何知道站點的流量來至那里?

如果你擁有站點服務(wù)器的管理權(quán)，那么這是個很簡單的問題，查查服務(wù)器日志就可以了。但目前你沒有那權(quán)力，不過可以由第三方提供流量數(shù)據(jù)。易數(shù)是個不錯的選擇，鏈接到站點http://best.netease.com/申請，然后把代碼加入到頁面即可。當你想知道流量時，單擊易數(shù)圖標，在統(tǒng)計頁面中，單擊分析即可。

70.如何讓瀏覽器正確顯示word文件格式?

為了正確處理word等格式，你需要在HTML文件中設(shè)置好該文件類型，比如：

還有其它經(jīng)常設(shè)置的文件類型：

Application/msword Microsoft Word Document application/pdf PDF Documentapplication/wordperfect6.0 WordPerfect 6.0 Documentapplication/zip ZIP archiveaudio/x-wav WAV audio formataudio/midi MIDI audio formataudio/x-pn-realaudio RealAudioimage/gif GIF image formatimage/jpeg JPEG image formatimage/png PNG image formattext/html HTML documenttext/plain Plain textvideo/mpeg MPEG video formatvideo/quicktime QuickTime video formatvideo/x-msvideo AVI video format

71.如何知道自己的圖片被其它網(wǎng)站使用?

如果你為自己站點的圖片起了一個獨特的名字，也就是不容易重名，比如tt124.jpg.那么鏈接到站點：http://www.altavista.com/，在搜索欄里輸入tt124.jpg.然后開始查找，如果有站點采用了tt124.jpg圖片，該站點就會被列出。AltaVista搜索引擎是一個以機器人搜尋為主的站點，它的機器人會不停地把整個網(wǎng)絡(luò)的頁面作上索引，所以，你可以在那里找到和你相關(guān)的任何東西，把你的名字的拼音輸輸入看看，找到什么啦。 72.如何縮進文本段落?

在<head></head>部分加入：

P { text-indent: 1% }

P標簽為HTML文本段落的標簽，1%為縮進的范圍。

72. 如何正確使用分隔線?

如果你使用FrongPage98，這里我再假設(shè)你需要分隔頁面左右兩部分內(nèi)容，先利用表格工具拖出三個橫行表格，把內(nèi)容分別放置到左右兩個單元，然后把中間的單元的寬度設(shè)置為1個Pixels,并填入所需要的顏色。你還需要把所有表格及單元的大小單位都設(shè)置為Pixels即可。

73.為什么有的站點下載很慢?

因為網(wǎng)頁用了過多的圖片，為了追求COOL的效果用了大量的Java Applet，過多使用<TABLE>，這些都是不可取的。對于圖片必須要用的壓縮再用，對于Java Applet絕對不用，它會讓機器配置低的訪問者的硬盤狂讀不止。對于需要的動態(tài)頁面，可利用CSS和JavaScript實現(xiàn)。

74. 如何讓字體顯示的更舒服?

這需要利用到CSS(層疊樣式表)，目前約定俗成的字體是：{ font-family:宋體(GB); font-size: 9pt; line-height: 16px }，把這段代碼加入到<head></head>之間。如：

<head>
<style>
</style>
</head>
<body><p class="font">計算機世界報<br>網(wǎng)頁制作常見問題解答</p>
</body>

font-family:宋體(GB)是設(shè)置的字體；font-size: 9pt是字體的大小；line-height: 16px是文本行的上下間隔。

75. 如何讓網(wǎng)頁兼容IE和NN兩種瀏覽器?

完全的兼容是不可能的。目前IE瀏覽器占有量大大超過NN瀏覽器，所以你只需要兼容IE瀏覽器即可。當然你也可以制作兩套網(wǎng)頁，利用JavaScript來檢測不同瀏覽器以裝入相應(yīng)網(wǎng)頁。

76. 如何正確使用字體?

設(shè)置文本字體是網(wǎng)頁制作中很重要的的環(huán)節(jié)，但因為并不是每一位訪問者都有你設(shè)置的字體，所以盡量使用操作系統(tǒng)默認的字體宋體，黑體，楷體。對于其它類型字體可以用圖形方式實現(xiàn)。 78.如何制作繁體版本網(wǎng)頁?

如果你使用E-Port的網(wǎng)頁作坊工具制作頁面，那就可以利用工具菜單下的GB轉(zhuǎn)BIG5來把簡體網(wǎng)頁變成繁體網(wǎng)頁。如果你用其它工具也可以利用網(wǎng)頁作坊的GB轉(zhuǎn)BIG5來制作繁體網(wǎng)頁，利用網(wǎng)頁作坊打開頁面，點選工具菜單下的GB轉(zhuǎn)BIG5轉(zhuǎn)換網(wǎng)頁并保存。要注意的是，你需要把原<meta http-equiv="Content-Type" content="text/html; charset=gb2312">中的charset=gb2312改為charset=big5，這樣，訪問者的瀏覽器就會自動識別了。(E-Port的網(wǎng)頁作坊下載地址：http://e-port.soim.net/)

77. 利用水平線(HR)制作垂直線?

插入HR很簡單：<hr size="1">。如何讓它垂直呢，更簡單：<hr size="100" width="1">

78. 與其它站點交換連接需要什么?

當然，你首先要有一個個人站點，然后準備好兩個站點LOGO。一般來說，400x40和88x31兩種LOGO是必需的，其它也可以準備一個100x31的LOGO。400x40的LOGO用于象網(wǎng)盟這樣的廣告交換站點，88x31和100x31用于個人站點之間的交換。

79. 如何讓下拉式菜單中的鏈接來打開一個新的窗口?

先把下拉式菜單設(shè)置好，如：

然后把<select name="D1" size="1">改為

<select onChange="javascript:window.open(this.options[this.selectedIndex].value)">即可。

80. 如何正確對齊文本？

有時，我們需要對一段文本的左右，上下的邊距(指文本至瀏覽器的距離)加以指定以使文本正確對齊，CSS(層疊樣式表)提供這樣的功能：

在<head></head>中加入

.tt為類名，以便你在HTML標簽中應(yīng)有。而在{ }中的屬性及指分別為邊距左，右，上，下的距離。當它們的邊距都相等時比如都是60px，可以簡寫為：.tt { margin: 60px }.

當在文本中引用了該CSS，你會發(fā)現(xiàn)文本對的非常整齊。

81.如何正確使用圖片格式?

目前在網(wǎng)絡(luò)上的圖片準標準格式為JPG和GIF。當圖片顏色數(shù)很多時，就選擇JPG，它的壓縮比高，而GIF適合顏色數(shù)少的圖片。

82. 如何在網(wǎng)頁上顯示訪問者系統(tǒng)信息?

把以下代碼加入到<Body></Body>:
<script Language="JavaScript">
document.write(navigator.appVersion)
</script>

83. 如何正確放置JavaScript?

JavaScript為動態(tài)主頁的實現(xiàn)工具，一般來說JavaScript放置于<head></head>或者<body></body>之間。對于放置在<body></body>之間的JavaScript，你需要把它放置在適當位置。如果你用FrontPage98工具，先把光標移到想放置JavaScript的地方，然后選擇Insert/Advanced/script，在打開的文本框中輸入JavaScript，這樣就放置好了。預(yù)覽頁面，JavaScript出現(xiàn)在你放置的地方。你也可以把JavaScript放置到表格中，這樣可以精確定位。

84. 個人站點需要那些交互功能?

交互是網(wǎng)絡(luò)的魅力所在，作為個人站點也需要這些交互性的工具，以便和訪問者隨時進行溝通。以下是目前個人站點必備的交互工具：

留言板-讓訪問者給你的站點提提意見;
論壇-討論某一個特定主題的地方，它和留言板的區(qū)別是留言板可以包含任何內(nèi)容;
調(diào)查表單-利用個人站點，你可以對某一問題進行調(diào)查，然后看看各意見的支持率;
訂閱表單-通過郵件給訂閱者提供站點的更新信息;

聊天室-一個即時的對話場所，特別可以對一個特定主題組辦一個網(wǎng)絡(luò)討論;

搜索引擎-當站點內(nèi)容過多時，搜索引擎可以讓訪問者快速找到想看的內(nèi)容;

85. 如何點擊一個鏈接同時在兩個frame 內(nèi)變化?

對于一個由topFrame、leftFrame、mainFrame 構(gòu)成的頁面，如果想在leftFrame 中點擊鏈接，同時在其他兩個frame 內(nèi)變化，代碼如下：
<a href="x1.htm" οnclick="parent.topFrame.location.href=''x2.htm''" target="mainframe">
90.前進、后退和刷新
<a href="javascript:history.back()">后退</a>
<a href="javascript:history.go()">前進</a>
<a href="javascript:location.reload()">刷新</a>

86. 打印按鈕
<form>
<input name="Print" onClick="window.print();
return false" type="button" value="Print">
</form>

87. 查看源碼按鈕

88. 如何去掉頁面滾動條?

在body 中加入樣式表控制，代碼如下：
<body bgcolor="#000000" leftmargin="0" topmargin="0"
style="overflow-x: hidden; overflow-y: hidden; width: 100%">

89.如何在Dreamweaver 插入空格？

在FrontPage 中，插入空格只需要在選定的文本前按下鍵盤空格鍵就可以了，但在Dreamweaver 中不行。空格的標簽是可以開啟HTML Source 視窗直接加入標簽，也可以在指定的文本前，按下Ctrl+Shift+Space。

90. 如何在DW中設(shè)置Flash 動畫的背景透明？

在SWF文件的屬性面板中，點parameters，添加參數(shù)wmode，值選擇transparent；
或者直接修改網(wǎng)頁的代碼，在標志SWF文件屬性的代碼中添加：
<param name="wmode" value="transparent">

91. 如何正確使用分隔線?

這里我再假設(shè)你需要分隔頁面左右兩部分內(nèi)容，先利用表格工具拖出三個橫行表格，把內(nèi)容分別放置到左右兩個單元，然后把中間的單元的寬度設(shè)置為1個pixels(像素)，并填入所需要的顏色。你還需要把所有表格及單元的大小單位都設(shè)置為pixels 即可。

92. 如何讓瀏覽器正確顯示word 文件格式?

為了正確處理word 等格式，你需要在HTML文件中設(shè)置好該文件類型，比如：
<meta http-equiv="Content-Type" content="application/msword"> 還有其它經(jīng)常設(shè)置的文件類型：

application/msword Microsoft Word Document
application/pdf PDF Document
application/wordperfect6.0 WordPerfect 6.0 Document
application/zip ZIP archive
audio/x-wav WAV audio format
audio/midi MIDI audio format
audio/x-pn-realaudio RealAudio
image/gif GIF image format
image/jpeg JPEG image format
image/png PNG image format
text/html HTML document
text/plain Plain text
video/mpeg MPEG video format
video/quicktime QuickTime video format
video/x-msvideo AVI video format

93. 如何實現(xiàn)一個頁面兩種顏色鏈接變化?

在CSS中設(shè)置不同的CLASS類，如下例所示：
a.r:link{text-decoration:none;color:#000066}
a.r:visited{text-decoration:none;color:#333333}
a.r:hover{color:#0000ff;text-decoration:underline}
a.r1:link{text-decoration:none;color:#000066; font-weight:bold}
a.r1:visited{text-decoration:none;color:#000066; font-weight:bold}
a.r1:hover{color:#FF0000; font-weight:bold}
a.r2:link{text-decoration:none;color:#ffffff}
a.r2:visited{text-decoration:none;color:#ffffff}
a.r2:hover{color:#000000;}

94. DW中如何準確地定位層？

就目前來說，還沒有好的方法實現(xiàn)非常精確地定位使得層在編輯中和瀏覽中的位置不變，即便是使用“標尺”和“網(wǎng)格”輔助定位，仍然會有差別，而且在IE和NC中顯示的層的位置會有偏差，大約偏差3個象素。最好的方法是對照瀏覽器的顯示來調(diào)整層的位置。

95. 怎樣把別人網(wǎng)頁上的背景音樂保存下來?

A:瀏覽該網(wǎng)頁后,在你的 Windows\Temporary Internet Files 文件夾下可以找到該背景音樂的緩存文件，拷貝出來即可使用。如果還是找不見該文件，可以打開網(wǎng)頁的源文件，找到音樂文件的 URL 路徑，用“螞蟻”等 FTP 軟件進行下載。

96. 避免有人從你分幀的主頁的幀中徑直進入網(wǎng)站,而不是從 index.htm 中進入?

A:在幀中的網(wǎng)頁的<head></head>之間加入以下腳本代碼:
<Script language="JavaScript">
if (top==self)
self.location.href="index.htm";
</Script>
這樣,當有人從幀中進入網(wǎng)站時,就會自動重定向到主頁文件 index.htm。

97. IE5.0 的部分快捷鍵：

A:打開查找功能：Ctrl+F
關(guān)閉瀏覽器窗口：Ctrl+W
打開地址欄下拉列表框：F4
刷新：F5
將當前Web頁保存到收藏夾列表：Ctrl+D
打開當前 IE 窗口的一個拷貝：Ctrl+N
停止下載當前網(wǎng)頁：Esc
光標迅速移動到網(wǎng)頁的開頭：Home
光標迅速移動到網(wǎng)頁的尾部：End
打開新的地址鍵入窗口：Ctrl+O
打開收藏夾：Ctrl+I
打開歷史記錄文件夾：Ctrl+H
打開瀏覽器設(shè)定的默認主頁：Alt+HOME

98. 如何使網(wǎng)頁在不同分辯率下都全屏鋪開？

用表格（不要使用層），做好內(nèi)容后，將最外表格設(shè)置寬為100%，再適當調(diào)整。

99. 如何定時關(guān)閉網(wǎng)頁？

在head區(qū)加入

setTimeout('window.close();',2000);
</SCRIPT>

表示兩秒后自動關(guān)閉窗口。

100. 如何實現(xiàn)不提示，直接關(guān)閉窗口？

(1) 直接關(guān)閉，無任何提示：

在<body></body>內(nèi)加以下代碼：

在要顯示“關(guān)閉窗口”文字或圖片或按鈕的位置加以下代碼：

關(guān)閉窗口

<input name="button" type=button id="btn"

onClick="closes.Click();" value="關(guān)閉窗口">

(2) 有提示框顯示是否確認關(guān)閉：

關(guān)閉窗口

關(guān)閉窗口

或關(guān)閉按鈕：

<input name="button" type=button id="btn"

onClick="javascript:self.close();" value="關(guān)閉窗口">

轉(zhuǎn)載于:https://www.cnblogs.com/guodapeng/archive/2007/11/13/958319.html

總結(jié)

以上是生活随笔為你收集整理的HTML技巧100例(三)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

html
技巧

上一篇：病毒式营销案例：多芬让“病毒”的诱惑自发
下一篇： 2017年html5行业报告,云适配发布