編寫你的第一行 HTML 代碼，來幫助蝙蝠俠寫一封情書

譯自： https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b
作者： Kunal Sarkar
譯者： MjSeven

在一個美好的夜晚，你的肚子拒絕消化你在晚餐吃的大塊披薩，所以你不得不在睡夢中沖進(jìn)洗手間。

在浴室里，當(dāng)你在思考為什么會發(fā)生這種情況時，你聽到一個來自通風(fēng)口的低沉聲音：“嘿，我是蝙蝠俠。”

這時，你會怎么做呢？

在你恐慌并處于關(guān)鍵時刻之前，蝙蝠俠說：“我需要你的幫助。我是一個超級極客，但我不懂 HTML。我需要用 HTML 寫一封情書，你愿意幫助我嗎？”

誰會拒絕蝙蝠俠的請求呢，對吧？所以讓我們用 HTML 來寫一封蝙蝠俠的情書。

你的第一個 HTML 文件

HTML 網(wǎng)頁與你電腦上的其它文件一樣。就同一個 .doc 文件以 MS Word 打開，.jpg 文件在圖像查看器中打開一樣，一個 .html 文件在瀏覽器中打開。

那么，讓我們來創(chuàng)建一個 .html 文件。你可以在 Notepad 或其它任何編輯器中完成此任務(wù)，但我建議使用 VS Code。在這里下載并安裝 VS Code 。它是免費(fèi)的，也是我唯一喜歡的微軟產(chǎn)品。

在系統(tǒng)中創(chuàng)建一個目錄，將其命名為 “HTML Practice”（不帶引號）。在這個目錄中，再創(chuàng)建一個名為 “Batman’s Love Letter”（不帶引號）的目錄，這將是我們的項目根目錄。這意味著我們所有與這個項目相關(guān)的文件都會在這里。

打開 VS Code，按下 ctrl+n 創(chuàng)建一個新文件，按下 ctrl+s 保存文件。切換到 “Batman’s Love Letter” 文件夾并將其命名為 “l(fā)oveletter.html”，然后單擊保存。

現(xiàn)在，如果你在文件資源管理器中雙擊它，它將在你的默認(rèn)瀏覽器中打開。我建議使用 Firefox 來進(jìn)行 web 開發(fā)，但 Chrome 也可以。

讓我們將這個過程與我們已經(jīng)熟悉的東西聯(lián)系起來。還記得你第一次拿到電腦嗎？我做的第一件事是打開 MS Paint 并繪制一些東西。你在 Paint 中繪制一些東西并將其另存為圖像，然后你可以在圖像查看器中查看該圖像。之后，如果要再次編輯該圖像，你在 Paint 中重新打開它，編輯并保存它。

我們目前的流程非常相似。正如我們使用 Paint 創(chuàng)建和編輯圖像一樣，我們使用 VS Code 來創(chuàng)建和編輯 HTML 文件。就像我們使用圖像查看器查看圖像一樣，我們使用瀏覽器來查看我們的 HTML 頁面。

HTML 中的段落

我們有一個空的 HTML 文件，以下是蝙蝠俠想在他的情書中寫的第一段。

“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”

復(fù)制這些到 VS Code 中的 loveletter.html。單擊 “View -> Toggle Word Wrap (alt+z)” 自動換行。

保存并在瀏覽器中打開它。如果它已經(jīng)打開，單擊瀏覽器中的刷新按鈕。

瞧！那是你的第一個網(wǎng)頁！

我們的第一段已準(zhǔn)備就緒，但這不是在 HTML 中編寫段落的推薦方法。我們有一種特定的方法讓瀏覽器知道一個文本是一個段落。

如果你用 <p> 和 </p> 來包裹文本，那么瀏覽器將識別 <p> 和 </p> 中的文本是一個段落。我們這樣做：

<p>After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.</p>

通過在 <p> 和 </p>中編寫段落，你創(chuàng)建了一個 HTML 元素。一個網(wǎng)頁就是 HTML 元素的集合。

讓我們首先來認(rèn)識一些術(shù)語：<p> 是開始標(biāo)簽，</p> 是結(jié)束標(biāo)簽，“p” 是標(biāo)簽名稱。元素開始和結(jié)束標(biāo)簽之間的文本是元素的內(nèi)容。

“style” 屬性

在上面，你將看到文本覆蓋屏幕的整個寬度。

我們不希望這樣。沒有人想要閱讀這么長的行。讓我們設(shè)定段落寬度為 550px。

我們可以通過使用元素的 style 屬性來實現(xiàn)。你可以在其 style 屬性中定義元素的樣式（例如，在我們的示例中為寬度）。以下行將在 p 元素上創(chuàng)建一個空樣式屬性：

<p style="">...</p>

你看到那個空的 "" 了嗎？這就是我們定義元素外觀的地方。現(xiàn)在我們要將寬度設(shè)置為 550px。我們這樣做：

<p style="width:550px;">
After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>

我們將 width 屬性設(shè)置為 550px，用冒號 : 分隔，以分號 ; 結(jié)束。

另外，注意我們?nèi)绾螌?<p> 和 </p> 放在單獨(dú)的行中，文本內(nèi)容用一個制表符縮進(jìn)。像這樣設(shè)置代碼使其更具可讀性。

HTML 中的列表

接下來，蝙蝠俠希望列出他所欽佩的人的一些優(yōu)點，例如：

You complete my darkness with your light. I love:
- the way you see good in the worst things
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over time.

這看起來很簡單。

讓我們繼續(xù)，在 </p> 下面復(fù)制所需的文本：

<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
- the way you see good in the worse
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>

保存并刷新瀏覽器。

哇！這里發(fā)生了什么，我們的列表在哪里？

如果你仔細(xì)觀察，你會發(fā)現(xiàn)沒有顯示換行符。在代碼中我們在新的一行中編寫列表項，但這些項在瀏覽器中顯示在一行中。

如果你想在 HTML（新行）中插入換行符，你必須使用 <br>。讓我們來使用 <br>，看看它長什么樣：

<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love: <br>
- the way you see good in the worse <br>
- the way you handle emotionally difficult situations <br>
- the way you look at Justice <br>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>

保存并刷新：

好的，現(xiàn)在它看起來就像我們想要的那樣！

另外，注意我們沒有寫一個 </br>。有些標(biāo)簽不需要結(jié)束標(biāo)簽（它們被稱為自閉合標(biāo)簽）。

還有一件事：我們沒有在兩個段落之間使用 <br>，但第二個段落仍然是從一個新行開始，這是因為 <p> 元素會自動插入換行符。

我們使用純文本編寫列表，但是有兩個標(biāo)簽可以供我們使用來達(dá)到相同的目的：<ul> and <li>。

讓我們解釋一下名字的意思：ul 代表無序列表(Unordered List)，li 代表列表項目(List Item)。讓我們使用它們來展示我們的列表：

<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>

在復(fù)制代碼之前，注意差異部分：

我們刪除了所有的 <br>，因為每個 <li> 會自動顯示在新行中
我們將每個列表項包含在 <li> 和 </li> 之間
我們將所有列表項的集合包裹在 <ul> 和 </ul> 之間
我們沒有像 <p> 元素那樣定義 <ul> 元素的寬度。這是因為 <ul> 是 <p> 的子節(jié)點，<p> 已經(jīng)被約束到 550px，所以 <ul> 不會超出這個范圍。

讓我們保存文件并刷新瀏覽器以查看結(jié)果：

你會立即注意到在每個列表項之前顯示了重點標(biāo)志。我們現(xiàn)在不需要在每個列表項之前寫 “-”。

經(jīng)過仔細(xì)檢查，你會注意到最后一行超出 550px 寬度。這是為什么？因為 HTML 不允許 <ul> 元素出現(xiàn)在 <p> 元素中。讓我們將第一行和最后一行放在單獨(dú)的 <p> 元素中：

<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
</p>
<ul style="width:550px;">
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p style="width:550px;">
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>

保存并刷新。

注意，這次我們還定義了 <ul> 元素的寬度。那是因為我們現(xiàn)在已經(jīng)將 <ul> 元素放在了 <p> 元素之外。

定義情書中所有元素的寬度會變得很麻煩。我們有一個特定的元素用于此目的：<div> 元素。一個 <div> 元素就是一個通用容器，用于對內(nèi)容進(jìn)行分組，以便輕松設(shè)置樣式。

讓我們用 <div> 元素包裝整個情書，并為其賦予寬度：550px 。

<div style="width:550px;">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>

棒極了，我們的代碼現(xiàn)在看起來簡潔多了。

HTML 中的標(biāo)題

到目前為止，蝙蝠俠對結(jié)果很高興，他希望在情書上標(biāo)題。他想寫一個標(biāo)題： “Bat Letter”。當(dāng)然，你已經(jīng)看到這個名字了，不是嗎？:D

你可以使用 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 標(biāo)簽來添加標(biāo)題，<h1> 是最大的標(biāo)題和最主要的標(biāo)題，<h6> 是最小的標(biāo)題。

讓我們在第二段之前使用 <h1> 做主標(biāo)題和一個副標(biāo)題：

<div style="width:550px;">
<h1>Bat Letter</h1>
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>

保存，刷新。

HTML 中的圖像

我們的情書尚未完成，但在繼續(xù)之前，缺少一件大事：蝙蝠俠標(biāo)志。你見過是蝙蝠俠的東西但沒有蝙蝠俠的標(biāo)志嗎？

并沒有。

所以，讓我們在情書中添加一個蝙蝠俠標(biāo)志。

在 HTML 中包含圖像就像在一個 Word 文件中包含圖像一樣。在 MS Word 中，你到 “菜單 -> 插入 -> 圖像 -> 然后導(dǎo)航到圖像位置為止 -> 選擇圖像 -> 單擊插入”。

在 HTML 中，我們使用 <img> 標(biāo)簽讓瀏覽器知道我們需要加載的圖像，而不是單擊菜單。我們在 src 屬性中寫入文件的位置和名稱。如果圖像在項目根目錄中，我們可以簡單地在 src 屬性中寫入圖像文件的名稱。

在我們深入編碼之前，從這里下載蝙蝠俠標(biāo)志。你可能希望裁剪圖像中的額外空白區(qū)域。復(fù)制項目根目錄中的圖像并將其重命名為 “bat-logo.jpeg”。

<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>

我們在第 3 行包含了 <img> 標(biāo)簽。這個標(biāo)簽也是一個自閉合的標(biāo)簽，所以我們不需要寫 </img>。在 src 屬性中，我們給出了圖像文件的名稱。這個名稱應(yīng)與圖像名稱完全相同，包括擴(kuò)展名（.jpeg）及其大小寫。

保存并刷新，查看結(jié)果。

該死的！剛剛發(fā)生了什么？

當(dāng)使用 <img> 標(biāo)簽包含圖像時，默認(rèn)情況下，圖像將以其原始分辨率顯示。在我們的例子中，圖像比 550px 寬得多。讓我們使用 style 屬性定義它的寬度：

<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>

你會注意到，這次我們定義寬度使用了 “%” 而不是 “px”。當(dāng)我們在 “%” 中定義寬度時，它將占據(jù)父元素寬度的百分比。因此，100% 的 550px 將為我們提供 550px。

保存并刷新，查看結(jié)果。

太棒了！這讓蝙蝠俠的臉露出了羞澀的微笑 :)。

HTML 中的粗體和斜體

現(xiàn)在蝙蝠俠想在最后幾段中承認(rèn)他的愛。他有以下文本供你用 HTML 編寫：

“I have a confession to make

It feels like my chest does have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.

I don’t show my emotions, but I think this man behind the mask is falling for you.”

當(dāng)閱讀到這里時，你會問蝙蝠俠：“等等，這是給誰的？”蝙蝠俠說：

“這是給超人的。”

你說：哦！我還以為是給神奇女俠的呢。

蝙蝠俠說：不，這是給超人的，請在最后寫上 “I love you Superman.”。

好的，我們來寫：

<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p>I love you Superman.</p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

這封信差不多完成了，蝙蝠俠另外想再做兩次改變。蝙蝠俠希望在最后段落的第一句中的 “does” 一詞是斜體，而 “I love you Superman” 這句話是粗體的。

我們使用 <em> 和 <strong> 以斜體和粗體顯示文本。讓我們來更新這些更改：

<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

HTML 中的樣式

你可以通過三種方式設(shè)置樣式或定義 HTML 元素的外觀：

內(nèi)聯(lián)樣式：我們使用元素的 style 屬性來編寫樣式。這是我們迄今為止使用的，但這不是一個好的實踐。
嵌入式樣式：我們在由 <style> 和 </style> 包裹的 “style” 元素中編寫所有樣式。
鏈接樣式表：我們在具有 .css 擴(kuò)展名的單獨(dú)文件中編寫所有元素的樣式。此文件稱為樣式表。

讓我們來看看如何定義 <div> 的內(nèi)聯(lián)樣式：

<div style="width:550px;">

我們可以在 <style> 和 </style> 里面寫同樣的樣式：

div{
width:550px;
}

在嵌入式樣式中，我們編寫的樣式是與元素分開的。所以我們需要一種方法來關(guān)聯(lián)元素及其樣式。第一個單詞 “div” 就做了這樣的活。它讓瀏覽器知道花括號 {...} 里面的所有樣式都屬于 “div” 元素。由于這種語法確定要應(yīng)用樣式的元素，因此它稱為一個選擇器。

我們編寫樣式的方式保持不變：屬性（width）和值（550px）用冒號（:）分隔，以分號（;）結(jié)束。

讓我們從 <div> 和 <img> 元素中刪除內(nèi)聯(lián)樣式，將其寫入 <style> 元素：

<style>
div{
width:550px;
}
img{
width:100%;
}
</style>
<div>
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

保存并刷新，結(jié)果應(yīng)保持不變。

但是有一個大問題，如果我們的 HTML 文件中有多個 <div> 和 <img> 元素該怎么辦？這樣我們在 <style> 元素中為 div 和 img 定義的樣式就會應(yīng)用于頁面上的每個 div 和 img。

如果你在以后的代碼中添加另一個 div，那么該 div 也將變?yōu)?550px 寬。我們并不希望這樣。

我們想要將我們的樣式應(yīng)用于現(xiàn)在正在使用的特定 div 和 img。為此，我們需要為 div 和 img 元素提供唯一的 id。以下是使用 id 屬性為元素賦予 id 的方法：

<div id="letter-container">

以下是如何在嵌入式樣式中將此 id 用作選擇器：

#letter-container{
...
}

注意 # 符號。它表示它是一個 id，{...} 中的樣式應(yīng)該只應(yīng)用于具有該特定 id 的元素。

讓我們來應(yīng)用它：

<style>
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
</style>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

HTML 已經(jīng)準(zhǔn)備好了嵌入式樣式。

但是，你可以看到，隨著我們包含越來越多的樣式，<style></style> 將變得很大。這可能很快會混亂我們的主 HTML 文件。

因此，讓我們更進(jìn)一步，通過將 <style> 標(biāo)簽內(nèi)的內(nèi)容復(fù)制到一個新文件來使用鏈接樣式。

在項目根目錄中創(chuàng)建一個新文件，將其另存為 “style.css”：

#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}

我們不需要在 CSS 文件中寫 <style> 和 </style>。

我們需要使用 HTML 文件中的 <link> 標(biāo)簽來將新創(chuàng)建的 CSS 文件鏈接到 HTML 文件。以下是我們?nèi)绾巫龅竭@一點：

<link rel="stylesheet" type="text/css" href="style.css">

我們使用 <link> 元素在 HTML 文檔中包含外部資源，它主要用于鏈接樣式表。我們使用的三個屬性是：

rel：關(guān)系。鏈接文件與文檔的關(guān)系。具有 .css 擴(kuò)展名的文件稱為樣式表，因此我們保留 rel=“stylesheet”。
type：鏈接文件的類型；對于一個 CSS 文件來說它是 “text/css”。
href：超文本參考。鏈接文件的位置。

link 元素的結(jié)尾沒有 </link>。因此，<link> 也是一個自閉合的標(biāo)簽。

<link rel="gf" type="cute" href="girl.next.door">

如果只是得到一個女朋友，那么很容易：D

可惜沒有那么簡單，讓我們繼續(xù)前進(jìn)。

這是我們 “l(fā)oveletter.html” 的內(nèi)容：

<link rel="stylesheet" type="text/css" href="style.css">
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

“style.css” 內(nèi)容：

#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}

保存文件并刷新，瀏覽器中的輸出應(yīng)保持不變。

一些手續(xù)

我們的情書已經(jīng)準(zhǔn)備好給蝙蝠俠，但還有一些正式的片段。

與其他任何編程語言一樣，HTML 自出生以來（1990 年）經(jīng)歷過許多版本，當(dāng)前版本是 HTML5。

那么，瀏覽器如何知道你使用哪個版本的 HTML 來編寫頁面呢？要告訴瀏覽器你正在使用 HTML5，你需要在頁面頂部包含 <!DOCTYPE html>。對于舊版本的 HTML，這行不同，但你不需要了解它們，因為我們不再使用它們了。

此外，在之前的 HTML 版本中，我們曾經(jīng)將整個文檔封裝在 <html></html> 標(biāo)簽內(nèi)。整個文件分為兩個主要部分：頭部在 <head></head> 里面，主體在 <body></body> 里面。這在 HTML5 中不是必須的，但由于兼容性原因，我們?nèi)匀贿@樣做。讓我們用 <Doctype>, <html>、 <head> 和 <body> 更新我們的代碼：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
</body>
</html>

主要內(nèi)容在 <body> 里面，元信息在 <head> 里面。所以我們把 <div> 保存在 <body> 里面并加載 <head> 里面的樣式表。

保存并刷新，你的 HTML 頁面應(yīng)顯示與之前相同的內(nèi)容。

HTML 的標(biāo)題

我發(fā)誓，這是最后一次改變。

你可能已經(jīng)注意到選項卡的標(biāo)題正在顯示 HTML 文件的路徑：

我們可以使用 <title> 標(biāo)簽來定義 HTML 文件的標(biāo)題。標(biāo)題標(biāo)簽也像鏈接標(biāo)簽一樣在 <head> 內(nèi)部。讓我們我們在標(biāo)題中加上 “Bat Letter”：

<!DOCTYPE html>
<html>
<head>
<title>Bat Letter</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
</body>
</html>

保存并刷新，你將看到在選項卡上顯示的是 “Bat Letter” 而不是文件路徑。

蝙蝠俠的情書現(xiàn)在已經(jīng)完成。

恭喜！你用 HTML 制作了蝙蝠俠的情書。

我們學(xué)到了什么

我們學(xué)習(xí)了以下新概念：

一個 HTML 文檔的結(jié)構(gòu)
在 HTML 中如何寫元素（<p></p>）
如何使用 style 屬性在元素內(nèi)編寫樣式（這稱為內(nèi)聯(lián)樣式，盡可能避免這種情況）
如何在 <style>...</style> 中編寫元素的樣式（這稱為嵌入式樣式）
在 HTML 中如何使用 <link> 在單獨(dú)的文件中編寫樣式并鏈接它（這稱為鏈接樣式表）
什么是標(biāo)簽名稱，屬性，開始標(biāo)簽和結(jié)束標(biāo)簽
如何使用 id 屬性為一個元素賦予 id
CSS 中的標(biāo)簽選擇器和 id 選擇器

我們學(xué)習(xí)了以下 HTML 標(biāo)簽：

<p>：用于段落
<br>：用于換行
<ul>、<li>：顯示列表
<div>：用于分組我們信件的元素
<h1>、<h2>：用于標(biāo)題和子標(biāo)題
<img>：用于插入圖像
<strong>、<em>：用于粗體和斜體文字樣式
<style>：用于嵌入式樣式
<link>：用于包含外部樣式表
<html>：用于包裹整個 HTML 文檔
<!DOCTYPE html>：讓瀏覽器知道我們正在使用 HTML5
<head>：包裹元信息，如 <link> 和 <title>
<body>：用于實際顯示的 HTML 頁面的主體
<title>：用于 HTML 頁面的標(biāo)題

我們學(xué)習(xí)了以下 CSS 屬性：

width：用于定義元素的寬度
CSS 單位：“px” 和 “%”

朋友們，這就是今天的全部了，下一個教程中見。

作者簡介：開發(fā)者 + 作者 | supersarkar.com | twitter.com/supersarkar

via: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b

作者： Kunal Sarkar 譯者： MjSeven 校對： wxy

本文由 LCTT 原創(chuàng)編譯， Linux中國榮譽(yù)推出

點擊“了解更多”可訪問文內(nèi)鏈接

lt;marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=left></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定卷動距離

<marquee scrolldelay=300>...</marquee>設(shè)定卷動時間

<!>字體效果

<h1>...</h1>標(biāo)題字(最大)

<h6>...</h6>標(biāo)題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強(qiáng)調(diào))

<i>...</i>斜體字

<em>...</em>斜體字(強(qiáng)調(diào))

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =font-size:100 px>...</font>無限增大

<!>區(qū)斷標(biāo)記

<hr>水平線

<hr size=9>水平線(設(shè)定大小)

<hr width=80%>水平線(設(shè)定寬度)

<hr color=ff0000>水平線(設(shè)定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結(jié)格式

<base href=位址>(預(yù)設(shè)好連結(jié)路徑)

<a href=位址></a>外部連結(jié)

<a href=位址 target=_blank></a>外部連結(jié)(另開新視窗)

<a href=位址 target=_top></a>外部連結(jié)(全視窗連結(jié))

<a href=位址 target=頁框名></a>外部連結(jié)(在指定頁框連結(jié))

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設(shè)定圖片寬度

<img src=圖片位址 height=30>設(shè)定圖片高度

<img src=圖片位址 alt=提示文字>設(shè)定圖片提示文字

<img src=圖片位址 border=1>設(shè)定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設(shè)定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲存格合并列的列數(shù)(使用數(shù)字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調(diào)整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

<! - - ... - -> 注解

<a href target> 指定超連結(jié)的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結(jié)

<a href> 指定超連結(jié)

<a name=錨的名稱> 被連結(jié)點的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結(jié)的分割視窗

<basefont size> 更改預(yù)設(shè)字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設(shè)定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設(shè)定表格標(biāo)題位置

<caption>...</caption> 為表格加上標(biāo)題

<center> 向中對齊

<cite>...<cite> 用於引經(jīng)據(jù)典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設(shè)定定義列表的項目解說

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標(biāo)簽

<dl>...</dl> 設(shè)定定義列表的標(biāo)簽

<dt> 設(shè)定定義列表的項目

<em> 強(qiáng)調(diào)之用

<font face> 任意指定所用的字形

<font size> 設(shè)定字體大小

<form action> 設(shè)定戶動式表單的處理方式

<form method> 設(shè)定戶動式表單之資料傳送方式

<frame marginheight> 設(shè)定視窗的上下邊界

<frame marginwidth> 設(shè)定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設(shè)定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設(shè)定文字大小

<head> 標(biāo)示文件資訊

<hr> 加上分格線

<html> 文件的開始與結(jié)束

<i> 斜體字

<img align> 調(diào)整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預(yù)設(shè)圖形大小

<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界

<img lowsrc> 預(yù)載圖片功能

<img src border> 設(shè)定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項目 ( 可指定符號 )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標(biāo)簽

<multiple> 可同時選擇多項的列表欄

<noframe> 定義不出現(xiàn)分割視窗的文字

<ol>...</ol> 有序號的列表

<option> 定義表單中列表欄的項目

<p align> 設(shè)定對齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強(qiáng)語氣

<sub> 下標(biāo)字

<sup> 上標(biāo)字

<table border=n> 調(diào)整表格的寬線高度

<table cellpadding> 調(diào)整資料欄位之邊界

<table cellspacing> 調(diào)整表格線的寬度

<table height> 調(diào)整表格的高度

<table width> 調(diào)整表格的寬度

<table>...</table> 產(chǎn)生表格的標(biāo)簽

<td align> 調(diào)整表格欄位之左右對齊

<td bgcolor> 設(shè)定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設(shè)定表格欄位不換行

<td valign> 調(diào)整表格欄位之上下對齊

<td width> 調(diào)整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動否換行

<th>...</th> 定義表格的標(biāo)頭欄位

<title> 文件標(biāo)題

<tr>...</tr> 定義表格美一行

<tt> 打字機(jī)字體

<u> 文字加底線

<ul type>...</ul> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數(shù)

)貼圖：<img src="圖片地址">

2)加入連接：<a href="所要連接的相關(guān)地址">寫上你想寫的字</a>

1)貼圖：<img src="圖片地址">

2)加入連接：<a href="所要連接的相關(guān)地址">寫上你想寫的字</a>

3)在新窗口打開連接：<a href="相關(guān)地址" target="_blank">寫上要寫的字</a>

消除連接的下劃線在新窗口打開連接：

<a href="相關(guān)地址" style="text-decoration:none" target="_blank">寫上你想寫的字</a>

4)移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

5)字體加粗：<b>寫上你想寫的字</b>

6)字體斜體：<i>寫上你想寫的字</i>

7)字體下劃線: <u>寫上你想寫的字</u>

8)字體刪除線: <s>寫上你想寫的字</s>

9)字體加大: <big>寫上你想寫的字</big>

10)字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

11)更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進(jìn)制)之間

12)消除連接的下劃線：<a href="相關(guān)地址" style="text-decoration:none">寫上你想寫的字</a>

13)貼音樂：<embed src=音樂地址 width=300 height=45 type=audio/mpeg autostart="false">

14)貼flash: <embed src="flash地址" width="寬度" height="高度">

15)貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

16)換行：<br>

17)段落：<p>段落</p>

18)原始文字樣式：<pre>正文</pre>

19)換帖子背景：<body background="背景圖片地址">

20)固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body

bgproperties=fixed>

21)定制帖子背景顏色：<body bgcolor="#value">(value值見10)

22)帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>

23)貼網(wǎng)頁：<iframe src="相關(guān)地址" width="寬度" height="高度"></iframe>

/----------------------------------------HTML特效代碼--------------------------------/

1。忽視右鍵

　或

2。加入背景音樂

　 IE:<bgsound src="*.mid" loop=infinite>

　 NS:<embed src="*.mid" autostart=true hidden=true loop=true>

　 </embed>

　 *.mid你的背景音樂的midi格式文件

3。簡單的window.open方法

　 <a href="#"

　 onclick="javascript :window.open(文件路徑/文件名,newwindow,

　 toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,

　 width=400,height=300);">文字或圖片</a>

　參數(shù)解釋：

　 <SCRIPT LANGUAGE="javascript"> js腳本開始；

　 window.open 彈出新窗口的命令；

　文件路徑/文件名彈出窗口的文件名；

　 newwindow 彈出窗口的名字（不是文件名），非必須，可用空代替；

　 width=400 窗口寬度；

　 height=300 窗口高度；

　 top=0 窗口距離屏幕上方的象素值；

　 left=0 窗口距離屏幕左側(cè)的象素值；

　 toolbar=no 是否顯示工具欄，yes為顯示；

　 menubar，scrollbars 表示菜單欄和滾動欄。

　 resizable=no 是否允許改變窗口大小，yes為允許；

　 location=no 是否顯示地址欄，yes為允許；

　 status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；

　 </SCRIPT> js腳本結(jié)束

4。簡單的頁面加密

<!--

　 function loopy(){

var sWord ="";

while(sWord!="login"){sWord=prompt("請輸入你的登陸密碼");}

alert("登陸成功！");

　 }

　 loopy()

　 //-->

　 </script>

5。拉動頁面時背景圖不動

　 <style>

　 body{background-image:url(logo.gif);

　 background-repeat:no-repeat;background-position:center}

　 </style>

6。讓瀏覽器在保存頁面時保存失敗

7。隨機(jī)替換圖片

　 document.write(<img src="img/+parseInt(Math.random()*(5))

　 +.gif"height="40" width="50">

　 </script>

　圖片文件名為0.gif 1.gif 2.gif 3.gif 4.gif

8。窗口定時關(guān)閉

　先將如下代碼網(wǎng)頁文件的區(qū)：

　 function closeit() { setTimeout("self.close()",10000) //毫秒 }

　 </script>

　然后再在<body>標(biāo)內(nèi)加入如：<body onload="closeit()">

9。網(wǎng)頁自動關(guān)閉

　 <html>

　 <head>

　 <object id=closes type="application/x-oleobject"

　 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

　 </object>

　 </head>

　這個窗口會在10秒過后自動關(guān)閉,而且不會出現(xiàn)提示.

　 </body>

　 </html>

10。網(wǎng)頁自動刷新

　在head部記入

　其中20為20秒后自動刷新，你可以更改為任意值。

11。網(wǎng)頁自動轉(zhuǎn)頁

12。保持layer在最前面，而不被Iframe、Object所覆蓋

　在Layer中再插Iframe 或 Object 設(shè)z-Index值

　 <div z-Index:2><object xxx></object> ＃前面

　 <div z-Index:1><object xxx></object> ＃后面

　 <div id="Layer2" style="position:absolute; top:40;width:400px;

　 height:95px;z-index:2"> height=100% width=100%>

　 </div>

　 <div id="Layer1" style="position:absolute; top:50;width:200px;

　 height:115px;z-index:1">

　 </div>

13。返回上一頁

　 <a href=javascript :history.back(1)>『返回上一頁』</a>

14。關(guān)閉窗口

15。關(guān)于iframe的透明背景

　 <IFRAME ID="iFrame1" SRC="iframe.htm"

　 allowTransparency="true"

　 style="background-color: green"></IFRAME>

16. oncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標(biāo)右鍵

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

17. <body onselectstart="return false"> 取消選取、防止復(fù)制

18.onpaste="return false" 不準(zhǔn)粘貼

19.oncopy="return false;" oncut="return false;" 防止復(fù)制

20. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)

21. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)

22. <input style="ime-mode:disabled"> 關(guān)閉輸入法

23. 永遠(yuǎn)都會帶著框架

if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網(wǎng)頁

// --></script>

24. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

25. 網(wǎng)頁將不能被另存為

26. 查看網(wǎng)頁源代碼

27.刪除時確認(rèn)

28.屏蔽功能鍵Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!"); //可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

29. 網(wǎng)頁不會被緩存

或者<META HTTP-EQUIV="expires" CONTENT="0">

30.怎樣讓表單沒有凹凸感？

或 <input type=text style="border-left:none; border-right:none; border -top:none; border-bottom: 1 solid #000000"></textarea>

31.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

32.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

33.電子郵件處理提交表單

</form>

34.在打開的子窗口刷新父窗口的代碼里如何寫？

window.opener.location.reload()

35.如何設(shè)定打開頁面的大小

打開頁面的位置<body onload="top.moveBy(300,200);">

36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

37. 檢查一段字符串是否全由數(shù)字組成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

38. 獲得一個窗口的大小

document.body.clientWidth; document.body.clientHeight

39. 怎么判斷是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

else alert("全是字符");

40.TEXTAREA自適應(yīng)文字行數(shù)的多少

</textarea>

41. 日期減去天數(shù)等于第二個日期

function cc(dd,dadd)

{

//可以加上錯誤處理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

</script>

42. 選擇了哪一個Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>Style

<INPUT name="radio1" type="radio" value="barcode">Barcode

</BODY></HTML>

43.腳本永不出錯

</SCRIPT>

44.ENTER鍵可以讓光標(biāo)移到下一個輸入框

45. 檢測某個網(wǎng)站的鏈接速度：

把如下代碼加入<body>區(qū)域中:

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="www.cctv.com"

function butt(){

document.write("<form name=autof>")

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value=測試中

……> =》<input type=text

name=url"+i+" size=40> =》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>")

document.write("<input type=submit value=刷新></form>")

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="鏈接超時"}

else

{document.forms[0]["txt"+b].value="時間"+tim/10+"秒"} b++ }

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 nerror=auto("http://"+autourl+"")>")}

run()</script>

46. 各種樣式的光標(biāo)

auto ：標(biāo)準(zhǔn)光標(biāo)

default ：標(biāo)準(zhǔn)箭頭

hand ：手形光標(biāo)

wait ：等待光標(biāo)

text ：I形光標(biāo)

vertical-text ：水平I形光標(biāo)

no-drop ：不可拖動光標(biāo)

not-allowed ：無效光標(biāo)

help ：?幫助光標(biāo)

all-scroll ：三角方向標(biāo)

move ：移動標(biāo)

crosshair ：十字標(biāo)

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

47、禁止鼠標(biāo)右鍵，把Demo的圖片全都設(shè)為表格的背景，表格的大小與圖片的大小一樣。這樣做看起來是一樣的，主要是防止鼠標(biāo)經(jīng)過圖片時會出現(xiàn)另存的按鈕。禁止鼠標(biāo)右鍵的代碼很簡單：

function click() { if (event.button==2)

{alert(呵呵，不好意思，你甭想使用右鍵下載圖片：）); } } document.onmousedown=click

</script>

48、在網(wǎng)頁的Head部分加入如下代碼，這段代碼的主要功能是屏蔽PrintScreen鍵，不斷清空剪貼版，防止圖片被用文件——另存為菜單另存。

<!--

function testclip(){

try {

if(clipboardData.getData("Text")||clipboardData.getData("HTML")||clipboardData.getData("URL"))

{

null;

}

catch(e){

clipboardData.setData("Text","")

}

setTimeout("testclip()",500)

}

testclip();

//-->

</script>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1. 將徹底屏蔽鼠標(biāo)右鍵

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body> 取消選取、防止復(fù)制

3. 不準(zhǔn)粘貼

4. 防止復(fù)制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)

7. <input style="ime-mode:-Disabled"> 關(guān)閉輸入法

8. 永遠(yuǎn)都會帶著框架

if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網(wǎng)頁

// --></script>

9. 防止被人frame

<SCRIPT LANGUAGE=javascript><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

10. 網(wǎng)頁將不能被另存為

11. <input type=button value=查看網(wǎng)頁源代碼

onclick="window.location = `view-source:`+ http://www.51js.com/`";>

12.刪除時確認(rèn)

<a href=`javascript：if(confirm("確實要刪除嗎?"location="boos.asp?&areyou=刪除&page=1"`>刪

除</a>

13. 取得控件的絕對位置

//javascript

function getIE(E){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

alert("top="+t+"/nleft="+l);

}

</script>

//VBScript

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

14. 光標(biāo)是停在文本框文字的最后

function cc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart(`character`,e.value.length);

r.collapse(true);

r.select();

}

</script>

15. 判斷上一頁的來源

javascript：

document.referrer

16. 最小化、最大化、關(guān)閉窗口

本例適用于IE

17.屏蔽功能鍵Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!"; //可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

18. 網(wǎng)頁不會被緩存

或者<META HTTP-EQUIV="expires" CONTENT="0">

19.怎樣讓表單沒有凹凸感？

或

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 solid #000000"></textarea>

20.<div><span>&<layer>的區(qū)別？

<div>(division)用來定義大段的頁面元素，會產(chǎn)生轉(zhuǎn)行

<span>用來定義同一行內(nèi)的元素，跟<div>的唯一區(qū)別是不產(chǎn)生轉(zhuǎn)行

<layer>是ns的標(biāo)記，ie不支持，相當(dāng)于<div>

21.讓彈出窗口總是在最上面:

<body>

22.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

23.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

24.電子郵件處理提交表單

</form>

25.在打開的子窗口刷新父窗口的代碼里如何寫？

window.opener.location.reload()

26.如何設(shè)定打開頁面的大小

<body>

打開頁面的位置<body>

27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<style>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</style>

28. 檢查一段字符串是否全由數(shù)字組成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"

alert(checkNum("123214214a1"

// --></script>

29. 獲得一個窗口的大小

document.body.clientWidth; document.body.clientHeight

30. 怎么判斷是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字";

else alert("全是字符";

31.TEXTAREA自適應(yīng)文字行數(shù)的多少

</textarea>

32. 日期減去天數(shù)等于第二個日期

function cc(dd,dadd)

{

//可以加上錯誤處理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(A)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日"

}

cc("12/23/2002",2)

</script>

33. 選擇了哪一個Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>style

<INPUT name="radio1" type="radio" value="barcode">Barcode

</BODY></HTML>

34.腳本永不出錯

<!-- Hide

function killErrors() {

return true;

}

window.onerror = killErrors;

// -->

</SCRIPT>

35.ENTER鍵可以讓光標(biāo)移到下一個輸入框

<input>

36. 檢測某個網(wǎng)站的鏈接速度：

把如下代碼加入<body>區(qū)域中:

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="http://www.njcatv.net/";

autourl[2]="javacool.3322.net"

autourl[3]="http://www.sina.com.cn/";

autourl[4]="http://www.nuaa.edu.cn/";

autourl[5]="http://www.cctv.com/";

function butt(){

document.write("<form name=autof>"

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value=測試中……> =》<input type=text

name=url"+i+" size=40> =》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>"

document.write("<input type=submit value=刷新></form>"

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="鏈接超時"}

else

{document.forms[0]["txt"+b].value="時間"+tim/10+"秒"}

b++

}

function run(){for(var i=1;i<autourl.length;i++)document.write("<img

src=http://"+autourl+"/"+Math.random()+" width=1 height=1

onerror=auto(http://";+autourl+"`)>"}

run()</script>

37. 各種樣式的光標(biāo)

auto ：標(biāo)準(zhǔn)光標(biāo)

default ：標(biāo)準(zhǔn)箭頭

hand ：手形光標(biāo)

wait ：等待光標(biāo)

text ：I形光標(biāo)

vertical-text ：水平I形光標(biāo)

no-drop ：不可拖動光標(biāo)

not-allowed ：無效光標(biāo)

help ：?幫助光標(biāo)

all-scroll ：三角方向標(biāo)

move ：移動標(biāo)

crosshair ：十字標(biāo)

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

38.頁面進(jìn)入和退出的特效

進(jìn)入頁面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出頁面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

這個是頁面被載入和調(diào)出時的一些特效。Duration表示特效的持續(xù)時間，以秒為單位。Transition表示使

用哪種特效，取值為1-23:

0 矩形縮小

1 矩形擴(kuò)大

2 圓形縮小

3 圓形擴(kuò)大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 豎百葉窗

9 橫百葉窗

10 錯位橫百葉窗

11 錯位豎百葉窗

12 點擴(kuò)散

13 左右到中間刷新

14 中間到左右刷新

15 中間到上下

16 上下到中間

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 橫條

22 豎條

23 以上22種隨機(jī)選擇一種

39.在規(guī)定時間內(nèi)跳轉(zhuǎn)

40.網(wǎng)頁是否被檢索

其中屬性值有以下一些:

屬性值為"all": 文件將被檢索，且頁上鏈接可被查詢；

屬性值為"none": 文件不被檢索，而且不查詢頁上的鏈接；

屬性值為"index": 文件將被檢索；

屬性值為"follow": 查詢頁上的鏈接；

屬性值為"noindex": 文件不檢索，但可被查詢鏈接；

屬性值為"nofollow": 文件不被檢索，但可查詢頁上的鏈接。

41.變換網(wǎng)頁的鼠標(biāo)光標(biāo)

42.怎樣實現(xiàn)在任務(wù)欄顯示小圖標(biāo)的效果？ (要使用絕對地址)

有些站點，訪問時會在地址欄地址前顯出小圖標(biāo)，添加到收藏夾后也在收藏欄中顯示圖標(biāo)，

這樣很好的與其它站點有了區(qū)別。

要達(dá)到這個效果，先需做出這個圖標(biāo)文件，圖像為16*16像素，不要超過16色。文件格式為ico，然后上傳至你的網(wǎng)站。

然后，在需要的頁面中，加上以下html語句到文件的<head>和</head>之間（假設(shè)以上ico文件的地址http://happyisland.126.com/icon.ico）。

如果訪問者的瀏覽器是IE5.0，就不需加任何代碼，只要將圖標(biāo)文件上傳到網(wǎng)站的根目錄下即可。

1,META標(biāo)簽里的代碼是什么意思？

<META>是放于<HEAD>與</HEAD>之間的標(biāo)記.以下是我總結(jié)它在網(wǎng)頁中最常見的幾種。

該網(wǎng)頁的關(guān)鍵字，作用于搜索引擎的登錄，事實上它在現(xiàn)在的網(wǎng)站中并沒什么用。

設(shè)定這是 HTML 文件及其編碼語系，簡體中文網(wǎng)頁使用charset=gb2312，繁體中文使用charset=big5，或者不設(shè)編碼也可，純英文網(wǎng)頁建議使用 iso-8859-1。

這只表示該網(wǎng)頁由什么編輯器寫的。

這行較為實用，能于預(yù)定秒數(shù)內(nèi)自動轉(zhuǎn)到指定網(wǎng)址。原代碼中 10 表示 10秒。

2，怎么改變滾動條的顏色，只有ie5.5版本以上才能支持。

這是使用CSS語言，在次說明一下，它和我的瀏覽器版本有一定的關(guān)系。

scrollbar-arrow-color：上下按鈕上三角箭頭的顏色。

scrollbar-base-color：滾動條的基本顏色。

scrollbar-dark-shadow-color：立體滾動條強(qiáng)陰影的顏色

scrollbar-face-color：立體滾動條凸出部分的顏色

scrollbar-highlight-color：滾動條空白部分的顏色

scrollbar-shadow-color立體滾動條陰影的顏色。

scrollbar-track-color:#99CC33;

scrollbar-3dlight-color:#A8CBF1;

代碼如下：

<style>

<!--

BODY {

scrollbar-face-color:#99CC33;//(立體滾動條凸出部分的顏色)

scrollbar-highlight-color:#A8CBF1;//(滾動條空白部分的顏色)

scrollbar-shadow-color:#A8CBF1;//(立體滾動條陰影的顏色)

scrollbar-arrow-color:#FF9966;//(上下按鈕上三角箭頭的顏色)

scrollbar-base-color:#A8CBF1; //(滾動條的基本顏色)

scrollbar-darkshadow-color:#A8CBF1; //(立體滾動條強(qiáng)陰影的顏色)

scrollbar-track-color:#99CC33;

scrollbar-3dlight-color:#A8CBF1;

}

-->

</style>

//以下是其它的網(wǎng)頁的代碼

在這我補(bǔ)充幾點：

1.讓瀏覽器窗口永遠(yuǎn)都不出現(xiàn)滾動條。

2，沒有水平滾動條

3，沒有垂直滾動條

3,如何給圖片抖動怎做的.

<!--

var rector=2

var stopit=0

var a=1

var count=0

function init(which){

stopit=0

shake=which

shake.style.left=0

shake.style.top=0

}

function rattleimage(){

if ((!document.all&&!document.getElementById)||stopit==1||count==100)

return

count++

if (a==1){

shake.style.top=parseInt(shake.style.top)+rector

}

else if (a==2){

shake.style.left=parseInt(shake.style.left)+rector

}

else if (a==3){

shake.style.top=parseInt(shake.style.top)-rector

}

else{

shake.style.left=parseInt(shake.style.left)-rector

}

if (a<4)

a++

else

a=1

setTimeout("rattleimage()",50)

}

function stoprattle(which){

stopit=1

count=0

which.style.left=0

which.style.top=0

}

//-->

</SCRIPT>

</style>

4，在DW如何給水平線加顏色。

在DW中沒有此項設(shè)置，你只能在HTML中加入代碼：<hr color=red noshade>按F12的預(yù)覽在能看到。由于在NC中不支持<hr>的COLOR屬性，所以在DW中沒有此項設(shè)置。

5，如何在網(wǎng)頁中實現(xiàn)flash的全屏播放？

只要在調(diào)用swf文件的HTML中將WIDTH和HEIGHT的參數(shù)設(shè)為100％即可，當(dāng)然也可以在Flash導(dǎo)出HTML文件的設(shè)置中進(jìn)行設(shè)置，方法是：打開File菜單；選Publish Settings彈出導(dǎo)出設(shè)置對話框；在HTML標(biāo)簽下的Dimensions選項,下拉后選中Percent（百分比）,并在WIDTH 和HEIGHT框中填100.就行了。

6,為什么我在DW中插入的Flash動畫缺看不找！

如果你沒有正確地安裝Dreamweaver和Flash，那么在你預(yù)覽的時候，Dreamweaver會提示你缺少播放的插件，請你按裝InstallAXFlash.exe 并從新啟動計算機(jī)。現(xiàn)在IE6已經(jīng)捆綁這個程序。

7，在Flash中，如果屏蔽鼠標(biāo)右鍵?FS命令都是什么意思?

fscommand ("fullscreen", "true/false";（全屏設(shè)置，TRUE開，F(xiàn)ALSE關(guān)）

fscommand ("showmenu", "true/false";（右鍵菜單設(shè)置，TRUE顯示，F(xiàn)ALSE不顯示）

fscommand ("allowscale", "true/false";（縮放設(shè)置，TRUE自由縮放，F(xiàn)ALSE調(diào)整畫面不影響影片本身的尺寸）

fscommand ("trapallkeys", "true/false";（快捷鍵設(shè)置，TRUE快捷鍵開，F(xiàn)ALSE快捷鍵關(guān)）

fscommand ("exec";（EXE程序調(diào)用）

fscommand ("quit";（退出關(guān)閉窗口）

8，F(xiàn)lash中什么是隱形按鈕。

利用button中的hit幀來制作只有感應(yīng)區(qū)域而完全透明的按鈕。

9，如何給Flash動畫做鏈接。

Dreamweaver是不能給Flash制作鏈接的，只能在Flash中用geturl()加鏈接，然后再插入Dreamweaver中。

10，DW中的層的技巧。

層是可以嵌套的，我個人給大家一個技巧，在層面板中按住CTRL再拖放層到你想去成為其子層的地方就行了，我認(rèn)為這是最簡單直觀的方法了。

11，如何改變鼠標(biāo)的形狀？

在Dreamweaver4中CSS樣式面板：

按CTR+SHIFT+E--出現(xiàn)樣式表對話框,點擊NEW，出現(xiàn)編輯對話框,在左邊最后一項extensions-cursor 選擇你要改的指針形式就可以了，然后把你要想改變的地方運(yùn)用樣式表，如果整頁都有在<body bgcolor="#003063" text="#ffffff" id=all>中加入就行了。

這里選擇（文本）作為對象，還可以自己改為其他的，如link等。

x可以等于=hand（手形）、crosshair（十字）、text（文本光標(biāo)）、wait（顧名思義啦）、default（默認(rèn)效果）、help（問號）、e-size（向右箭頭）、ne-resize（向右上的箭頭）、nw-resize（向左上的箭頭）、w-resize（向左的箭頭）、sw-resize（左下箭頭）、s-resize（向下箭頭）、se-resize（向右下箭頭）、auto（系統(tǒng)自動給出效果）。

12，用CSS做郵票，看看吧！

13，經(jīng)常上網(wǎng)的朋友可能會到過這樣一些網(wǎng)站，一進(jìn)入首頁立刻會彈出一個窗口，怎么做呢！

這javascript代碼即可實現(xiàn)，摘錄藍(lán)色論壇。

【1、最基本的彈出窗口代碼】

其實代碼非常簡單：

<!--

window.open (`page.html`)

-->

</SCRIPT>

因為著是一段javascripts代碼，所以它們應(yīng)該放在<SCRIPT LANGUAGE="javascript">標(biāo)簽和</script>之間。是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標(biāo)簽中的代碼作為文本顯示出來。要養(yǎng)成這個好習(xí)慣啊。

window.open (`page.html`) 用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應(yīng)寫明路徑，絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以，只是不要混用。

這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body bgcolor="#003063" text="#ffffff" id=all>間</body>也可以，越前越早執(zhí)行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。

【2、經(jīng)過設(shè)置后的彈出窗口】

下面再說一說彈出窗口的設(shè)置。只要再往上面的代碼中加一點東西就可以了。

我們來定制這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應(yīng)該頁面的具體情況。

<!--

window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)

//寫成一行

-->

</SCRIPT>

參數(shù)解釋：

<SCRIPT LANGUAGE="javascript"> js腳本開始；

window.open 彈出新窗口的命令；

`page.html` 彈出窗口的文件名；

`newwindow` 彈出窗口的名字（不是文件名），非必須，可用空``代替；

height=100 窗口高度；

width=400 窗口寬度；

top=0 窗口距離屏幕上方的象素值；

left=0 窗口距離屏幕左側(cè)的象素值；

toolbar=no 是否顯示工具欄，yes為顯示；

menubar，scrollbars 表示菜單欄和滾動欄。

resizable=no 是否允許改變窗口大小，yes為允許；

location=no 是否顯示地址欄，yes為允許；

status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；

</SCRIPT> js腳本結(jié)束

【3、用函數(shù)控制彈出窗口】

下面是一個完整的代碼。

<html>

<head>

<!--

function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=

no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"

//寫成一行

}

//-->

</script>

</head>

<body>

…任意的頁面內(nèi)容…

</body>

</html>

這里定義了一個函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個窗口。在調(diào)用它之前沒有任何用途。

怎么調(diào)用呢？

方法一：<body> 瀏覽器讀頁面時彈出窗口；

方法二：<body> 瀏覽器離開頁面時彈出窗口；

方法三：用一個連接調(diào)用：

<a href="#">打開一個窗口</a>

注意：使用的“#”是虛連接。

方法四：用一個按鈕調(diào)用：

14，沒有用表格寫的，讓大家隨便看看，沒什么。

<html>

<head>

<title>江南荷花扇面</title>

<!--

.font1 { font-size: 12px; color: #999999; text-decoration: none}

a { font-size: 12px; color: #999999; text-decoration: none}

a:hover { font-size: 12px; color: #000000; text-decoration: none}

-->

</style>

</head>

<p>盛夏尚　濤　

<p><a href="index.htm">一夜露痕黃粉香　袁運(yùn)甫 </a>

<p>瑤池昨夜新涼王金嶺

<p>一朵白蓮隨意開　吳冠南

<p>新雨迎秋欲滿塘　齊辛民

<p>十里荷香齊辛民

<p>濯清蓮而不妖盧世曙

</div>

</body>

</html>

15,IE6已支持自定義cursor!

語法格式 cursor:url(圖標(biāo)) //cur或是ani文件.

cur就是WINDOWS中的光標(biāo)(cursor)文件，光標(biāo)文件與圖標(biāo)（ICON)文件除了文件頭有一個位置的值不同外，實際是一樣的。

ani是WINDOWS中的動畫光標(biāo)（圖標(biāo)）文件。

<!--

.unnamed1 { cursor:url(arrow2c.cur)}

-->

</style>

16,用marquee做的滾動字幕.這也我剛看到論壇的朋友在問。

語法：

align=# | top | middle| bottom //對齊方式)

BEHAVIOR=ALTERNATE | SCROLL | SLIDE //移動的方式

BGCOLOR=color//底色區(qū)域顏色

DIRECTION=DOWN | LEFT | RIGHT | UP //移動的方向

Loop=n //循環(huán)次數(shù)（默認(rèn)是循環(huán)不止）

Scrolldelay=milliseconds//延時

height=# width=# //區(qū)域面積

hspace=# vspace=# //空白區(qū)域

scrollamount=# //移動的速度

17，在FLASH5中也存在一些字體，打散后變成一團(tuán)的事是為什么？有解決的辦法嗎。

這是大家很常見的問題！可能是對字庫支持的不好！我個是做成透明的gif圖片格式，然后倒入。

18，flash的網(wǎng)頁里“加入收藏夾”功能怎么實現(xiàn)？

在as中加getUrl("java script:window.external.addFavorite(http://skydesigner.51.net`,`我的工作室`)"

19，在Flash中，文本的動態(tài)屬性和輸入屬性的區(qū)別。

input text在運(yùn)行時可被用戶或程序改變其值。

ynamic text僅允許被程序修改。

20,怎樣在IE中調(diào)用Dreamweaver進(jìn)行編輯.

相信很多在使用WinME或Window2000的朋友，會遇見是個問題。很簡單，把我們筆記本程序打開，保存為一個 *.reg 文件。雙擊它將信息添加到注冊表即可。

REGEDIT4

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]

@="\"c:\Program Files\Macromedia\Dreamweaver 4\dreamweaver.exe\" \"%1\""

21，設(shè)置表格虛線。

方法一：作一個1X2的圖。半黑半白，再利用表格作成線。

方法二：在css里面設(shè)，要IE5。5才支持這種效果。

style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"

22,看看在網(wǎng)頁中調(diào)用HHCtrl控件效果。

代碼如下：

22，如何讓一張圖片有淺到深的漸變。

<!--

function high(which2){

theobject=which2

highlighting=setInterval("highlightit(theobject)",50)

}

function low(which2){

clearInterval(highlighting)

which2.filters.alpha.opacity=40

}

function highlightit(cur2){

if (cur2.filters.alpha.opacity<100)

cur2.filters.alpha.opacity+=10

else if (window.highlighting)

clearInterval(highlighting)

}

</script>

23,雙擊鼠標(biāo)左鍵來滾動背景，單擊停止。

var currentpos,timer;

function initialize()

{

timer=setInterval("scrollwindow()",16);

}

function sc(){

clearInterval(timer);

}

function scrollwindow()

{

currentpos=document.body.scrollTop;

window.scroll(0,++currentpos);

if (currentpos != document.body.scrollTop)

sc();

}

document.onmousedown=sc

document.ondblclick=initialize

</SCRIPT>

24,如何在同一頁面設(shè)置不同文字鏈接效果的樣式.

代碼如下：

<HTML><HEAD><TITLE>如何在同一頁面設(shè)置不同文字鏈接效果的樣式</TITLE>

<!--

a:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}

a:link { font-size: 9pt; color: #006699; text-decoration: underline}

a:visited { font-size: 9pt; color: #006699; text-decoration: underline}

a:active { font-size: 9pt; color: #FF0000; text-decoration: none}

a.r1:hover { font-size: 9pt; color: #FF0000; text-decoration: underline overline}

a.r1:link { font-size: 9pt; color: #000000; text-decoration: underline overline}

a.r1:visited { font-size: 9pt; color: #99CC00; text-decoration: underline overline}

a.r1:active { font-size: 9pt; color: #000000; text-decoration: underline overline}

-->

</style>

</head>

<a href="#">下劃線鏈接 </a>

<p></p>

<a href="#" class="r1">雙下劃線鏈接</a>

</BODY>

</HTML>

補(bǔ)充說明：

a:hover 表示鼠標(biāo)劃過時的樣式.

a:link 表示鏈接的樣式.

a:active 表示當(dāng)前活動連接的樣式.

a:visited 表示已經(jīng)訪問過的連接的樣式.

25, 用CSS給文字加入陰影效果和文字描邊效果。

.glow{FONT-SIZE: 9pt; FILTER: Glow(Color=#000000, Strength=1)}

//文字描邊效果

.shadow {FONT-SIZE: 9pt; FILTER: DropShadow(OffX=1, OffY=1, DropShadow(OffX=1, OffY=1, color:#111111); COLOR: #ffffff; FONT-FAMILY: "宋體"}

//加入陰影效果

補(bǔ)充說明：

這兩種濾鏡要想實現(xiàn)效果，必須加在如：<td class=glow或shadow ><div>xxxxxxxxx</div></td>上

，并且要留有足夠的空間能夠顯示陰影或描邊，否則會出現(xiàn)半截的陰影或描邊現(xiàn)象。

26,如何給做帶顏色的下拉菜單。

<option selected>:: Dreamweaver4 ::</option>

<option>::Flash5::</option>

<option>::Firewoks4::</option>

</select>

27,關(guān)于DW4的表格中的亮邊框和暗邊框問題。

在DW4的表格面板中并沒有亮邊框和暗邊框的屬性設(shè)置，因為NC不支持,只有你在代碼中添加了。

bordercolorlight="#999999" bordercolordark="#000000"

你也可以用Css定義一個class。例如：

<style>

.bordercolor { bordercolorlight: #999999; bordercolordark: #000000 }

</style>

然后在要加效果的表格里加上<table class="bordercolor">

28,自動顯示主頁最后更新日期.

document.write("最后更新日期："+document.lastModified+""

</script>愛電臺有我

29,如何讓滾動條出現(xiàn)在左邊？

我想居然在論壇中有人發(fā)表了這段代碼，很有意思，它的確照顧一些左撇子，呵呵！

<tr>

<td bgcolor="#FF0000" >是不是你的滾動條在左邊啊</td>

</tr>

</table>

</body>

</html>

30,如何加入網(wǎng)址前面的小圖標(biāo)？

首先,您必須了解所謂的圖標(biāo)（Icon）是一種特殊的圖形文件格式，它是以 .ico 作為擴(kuò)展名。你可用在網(wǎng)上找一個制作圖標(biāo)軟件，它具有特有的規(guī)格：圖標(biāo)的大小為 16 * 16（以像素為單位）；顏色不得超過 16 色。在該網(wǎng)頁文件的 HEAD 部分加入下面的內(nèi)容：<LINK REL="SHORTCUT ICON" HREF=" http://skydesigner.51.net/圖標(biāo)文件名">,并放在該網(wǎng)頁的根目錄下。

31,在800*600顯示器中，如何不讓網(wǎng)頁水平出現(xiàn)滾動條！

設(shè)至<body leftmargin="0" topmargin="0">，網(wǎng)頁中的表格寬度為778。

32,關(guān)于<!DOTYPE>的說明解釋。

在網(wǎng)頁中，經(jīng)常會看到〈!DOCTYPE HTML PUBLIC`-//W3C//DTD HTML 4.01//EN`>，是聲明HTML文件的版本信息。

33, 用圖片來關(guān)閉窗體.

補(bǔ)充說明：如何使用了ACTIVEX！,不再警告窗口？

<html>

<head>

classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

</head>

<body bgcolor="#003063" text="#ffffff" id=all> <a href="#">關(guān)閉窗口無提示</a>

</body>

</html>

34,禁止鼠標(biāo)右鍵查看網(wǎng)頁源代碼。

function click()

{if (event.button==2) {alert(`你好,歡迎光臨！`) }}

document.onmousedown=click

</SCRIPT>

補(bǔ)充說明：

鼠標(biāo)完全被封鎖,可以屏蔽鼠標(biāo)右鍵和網(wǎng)頁文字。

< body>

35,通過按鈕來查看網(wǎng)頁源代碼。

36,怎么用文字聯(lián)結(jié)實現(xiàn)按鈕的SUBMIT功能？

這段文字要放在form里。formname是這里要寫在form中的name,<form name=form111>那么就應(yīng)該是form111.submit()

37,如何做一個空鏈接？

加#

38,利用<IFRAME>來給網(wǎng)頁中插入網(wǎng)頁。

經(jīng)常我看到很多網(wǎng)頁中又有一個網(wǎng)頁，還以為是用了框架，其實不然，是用了<IFRAME>,它只適用于IE，NS可是不支持<IFRAME>的，但圍著的字句只有在瀏覽器不支援 iframe 標(biāo)記時才會顯示，如<noframes>一樣，可以放些提醒字句之類的話。

你注意啊！下面請和我學(xué)習(xí)它的用法。

分析代碼：<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe>

src="iframe.html"

用來顯示<IFRAME>中的網(wǎng)頁來源，必要加上相對或絕對路徑。

name="test"

這是連結(jié)標(biāo)記的 target 參數(shù)所需要的。

align="MIDDLE"

可選值為 left, right, top, middle, bottom，作用不大。

width="300" height="100"

框窗的寬及長，以 pixels 為單位。

marginwidth="1" marginheight="1"

該插入的文件與框邊所保留的空間。

frameborder="1"

使用 1 表示顯示邊框， 0 則不顯示。（可以是 yes 或 no）

scrolling="Yes"

使用 Yes 表示容許卷動（內(nèi)定）， No 則不容許卷動。

39,請問＜tbody＞的用法？

tbody用法據(jù)說是加強(qiáng)對表格的控制能力的.例如：

tbody代碼如果不是你用手寫的話,只有在你用IE5打開一個網(wǎng)頁的時候，把它另存為

一下，你的另存為的文件在表格中就會生成tbody代碼。(即便你的表格根本就沒有

tbody代碼，IE5另存為的時候也會給你生成)。

40,Alt和Title都是提示性語言標(biāo)簽，請注意它們之間的區(qū)別。

在我們?yōu)g覽網(wǎng)頁時，當(dāng)鼠標(biāo)停留在圖片對象或文字鏈接上時，在鼠標(biāo)的右下角有時會出現(xiàn)一個提示信息框。對目標(biāo)進(jìn)行一定的注釋說明。在一些場合，它的作用是很重要的。

alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。

用法如下：

補(bǔ)充知識：<TITLE><ALT>里面如何多行換行？在源代碼里Enter回車。

<a href="#" Title="個人簡歷

姓名：張培

網(wǎng)名：我是閃夢

性別：男的，不是女的。

愛好：網(wǎng)頁制作，軟件開發(fā)">個人簡歷</a>

例如：個人簡歷

41, 用javascript代碼來實現(xiàn)閃爍按鈕。

<body>

</form>

if (document.all&&document.all.flashit)

{

var flashelement=document.all.flashit

if (flashelement.length==null)

flashelement[0]=document.all.flashit

function changecolor(which)

{

if (flashelement[which].style.color==`#800000`)

flashelement[which].style.color="#0063A4"

else

flashelement[which].style.color="#800000"

}

if (flashelement.length==null)

setInterval("changecolor(0)",1000)

else

for (i=0;i<flashelement.length;i++)

{

var tempvariable=`setInterval("changecolor(`+i+`)",`+`1000)`

eval(tempvariable)

}

</script>

</body>

42,CSS給圖片定義顏色邊框。

img { border: 1px solid red}

43,在DW中如何使插入的FLASH透明。

方法一：選中swf,打開原代碼窗口，在</object>前輸入:<param name="wmode" value="transparent">

方法二：在Flash中的Flie→Publist Settings→HTML→Window Mode選擇transparent

44,在DW編輯文本中，如何輸入一個空格呢？

輸入空格的問題，在DW似乎已成了一個老生常談的問題。通過將輸入法調(diào)整到全角模式就可以避免了。本以人工智能ABC為例.按Shift+Space切換到全角狀態(tài)。

45,為何我的DW中圖形顯示不正常。

第一種：可能是因為你定義并正在使用一個site，而你的HTML文件或者圖片不在這個site包含的區(qū)域之內(nèi)，因此dreamweaver使用file協(xié)議來

描述圖象的絕對路徑，可惜IE不支持src中使用file協(xié)議，所以圖象就顯示不出來了。

第二種：可能是放圖片的文件夾或圖片名為中文，也顯示不到網(wǎng)頁中去。

46,如何在本地機(jī)器上測試flash影片的loading？

我想這可能是很多人在問的題了，其實很簡單，在Test時，選選View->Show Streaming就可以看到了。

47,在網(wǎng)頁中做出一根豎的線有幾種辦法.

第一種方法：用一個像素圖的辦法！

如果你用Dreamwever的Edit→Preferences…→Layout View中的Spacer Image給你創(chuàng)建了一個缺省名為：spacer.gif的一個像素圖文件。

代碼中：

<tr>

</tr>

</table>

第二種方法：用表格填顏色的辦法！把<td> </td>中的刪掉 .

<tr>

</tr>

</table>

第三種方法：用水平條。

48, 關(guān)于鼠標(biāo)拖動,改變層大小。──看看微軟的做法.

document.execCommand("2D-position",false,true);

</script>

<DIV>

</DIV>

在線咨詢

上一篇：3 行 Handtrack.js 代碼搞定手部動作跟蹤，愉快摸魚？
下一篇：Word轉(zhuǎn)HTML，輕松轉(zhuǎn)換，讓你成為網(wǎng)頁編輯大師！

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

編寫你的第一行 HTML 代碼，來幫助蝙蝠俠寫一封情書

你的第一個 HTML 文件

HTML 中的段落

“style” 屬性

HTML 中的列表

HTML 中的標(biāo)題

HTML 中的圖像

HTML 中的粗體和斜體

HTML 中的樣式

一些手續(xù)

HTML 的標(biāo)題

我們學(xué)到了什么

點擊“了解更多”可訪問文內(nèi)鏈接

您的項目需求