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

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

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

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

這時(shí)，你會(huì)怎么做呢？

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

誰(shuí)會(huì)拒絕蝙蝠俠的請(qǐng)求呢，對(duì)吧？所以讓我們用 HTML 來(lái)寫一封蝙蝠俠的情書。

你的第一個(gè) HTML 文件

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

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

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

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

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

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

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

HTML 中的段落

我們有一個(gè)空的 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)” 自動(dòng)換行。

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

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

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

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

<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>

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

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

“style” 屬性

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

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

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

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

你看到那個(gè)空的 "" 了嗎？這就是我們定義元素外觀的地方。現(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，用冒號(hào) : 分隔，以分號(hào) ; 結(jié)束。

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

HTML 中的列表

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

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.

這看起來(lái)很簡(jiǎn)單。

讓我們繼續(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ì)觀察，你會(huì)發(fā)現(xiàn)沒有顯示換行符。在代碼中我們?cè)谛碌囊恍兄芯帉懥斜眄?xiàng)，但這些項(xiàng)在瀏覽器中顯示在一行中。

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

<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)在它看起來(lái)就像我們想要的那樣！

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

還有一件事：我們沒有在兩個(gè)段落之間使用 <br>，但第二個(gè)段落仍然是從一個(gè)新行開始，這是因?yàn)?<p> 元素會(huì)自動(dòng)插入換行符。

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

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

<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>，因?yàn)槊總€(gè) <li> 會(huì)自動(dòng)顯示在新行中
我們將每個(gè)列表項(xiàng)包含在 <li> 和 </li> 之間
我們將所有列表項(xiàng)的集合包裹在 <ul> 和 </ul> 之間
我們沒有像 <p> 元素那樣定義 <ul> 元素的寬度。這是因?yàn)?<ul> 是 <p> 的子節(jié)點(diǎn)，<p> 已經(jīng)被約束到 550px，所以 <ul> 不會(huì)超出這個(gè)范圍。

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

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

經(jīng)過(guò)仔細(xì)檢查，你會(huì)注意到最后一行超出 550px 寬度。這是為什么？因?yàn)?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> 元素的寬度。那是因?yàn)槲覀儸F(xiàn)在已經(jīng)將 <ul> 元素放在了 <p> 元素之外。

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

讓我們用 <div> 元素包裝整個(gè)情書，并為其賦予寬度：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)在看起來(lái)簡(jiǎn)潔多了。

HTML 中的標(biāo)題

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

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

讓我們?cè)诘诙沃笆褂?<h1> 做主標(biāo)題和一個(gè)副標(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)志。你見過(guò)是蝙蝠俠的東西但沒有蝙蝠俠的標(biāo)志嗎？

并沒有。

所以，讓我們?cè)谇闀刑砑右粋€(gè)蝙蝠俠標(biāo)志。

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

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

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

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

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

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

當(dāng)使用 <img> 標(biāo)簽包含圖像時(shí)，默認(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>

你會(huì)注意到，這次我們定義寬度使用了 “%” 而不是 “px”。當(dāng)我們?cè)?“%” 中定義寬度時(shí)，它將占據(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)閱讀到這里時(shí)，你會(huì)問蝙蝠俠：“等等，這是給誰(shuí)的？”蝙蝠俠說(shuō)：

“這是給超人的。”

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

蝙蝠俠說(shuō)：不，這是給超人的，請(qǐng)?jiān)谧詈髮懮?“I love you Superman.”。

好的，我們來(lái)寫：

<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> 以斜體和粗體顯示文本。讓我們來(lái)更新這些更改：

<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 中的樣式

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

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

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

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

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

div{
width:550px;
}

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

我們編寫樣式的方式保持不變：屬性（width）和值（550px）用冒號(hào)（:）分隔，以分號(hào)（;）結(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)保持不變。

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

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

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

<div id="letter-container">

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

#letter-container{
...
}

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

讓我們來(lái)應(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)備好了嵌入式樣式。

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

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

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

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

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

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

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

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

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

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

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

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

可惜沒有那么簡(jiǎn)單，讓我們繼續(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)備好給蝙蝠俠，但還有一些正式的片段。

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

那么，瀏覽器如何知道你使用哪個(gè)版本的 HTML 來(lái)編寫頁(yè)面呢？要告訴瀏覽器你正在使用 HTML5，你需要在頁(yè)面頂部包含 <!DOCTYPE html>。對(duì)于舊版本的 HTML，這行不同，但你不需要了解它們，因?yàn)槲覀儾辉偈褂盟鼈兞恕?/p>

此外，在之前的 HTML 版本中，我們?cè)?jīng)將整個(gè)文檔封裝在 <html></html> 標(biāo)簽內(nèi)。整個(gè)文件分為兩個(gè)主要部分：頭部在 <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è)面應(yīng)顯示與之前相同的內(nèi)容。

HTML 的標(biāo)題

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

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

我們可以使用 <title> 標(biāo)簽來(lái)定義 HTML 文件的標(biāo)題。標(biāo)題標(biāo)簽也像鏈接標(biāo)簽一樣在 <head> 內(nèi)部。讓我們我們?cè)跇?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>

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

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

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

我們學(xué)到了什么

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

一個(gè) 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 屬性為一個(gè)元素賦予 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>：用于包裹整個(gè) HTML 文檔
<!DOCTYPE html>：讓瀏覽器知道我們正在使用 HTML5
<head>：包裹元信息，如 <link> 和 <title>
<body>：用于實(shí)際顯示的 HTML 頁(yè)面的主體
<title>：用于 HTML 頁(yè)面的標(biāo)題

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

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

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

作者簡(jiǎn)介：開發(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 校對(duì)： wxy

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

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

小新編譯自 Insight Data Blog

量子位出品 | 公眾號(hào) QbitAI

寫個(gè)網(wǎng)頁(yè)能有多麻煩？在大多數(shù)公司里，這項(xiàng)工作分為三步：

1. 產(chǎn)品經(jīng)理完成用戶調(diào)研任務(wù)后，列出一系列技術(shù)要求；

2. 設(shè)計(jì)師根據(jù)這些要求來(lái)設(shè)計(jì)低保真原型，逐漸修改得到高保真原型和UI設(shè)計(jì)圖；

3. 工程師將這些設(shè)計(jì)圖實(shí)現(xiàn)為代碼，最終變成用戶使用的產(chǎn)品。

這么多環(huán)節(jié)，任何地方出一點(diǎn)問題，都會(huì)拉長(zhǎng)開發(fā)周期。因此，不少公司，比如Airbnb已經(jīng)開始用機(jī)器學(xué)習(xí)來(lái)提高這個(gè)過(guò)程的效率。

△ Airbnb內(nèi)部的AI工具，從圖紙到代碼一步到位

看起來(lái)很美好，但Airbnb還沒公開該模型中端到端訓(xùn)練的細(xì)節(jié)，以及手工設(shè)計(jì)的圖像特征對(duì)該模型的貢獻(xiàn)度。這是該公司特有的閉源解決方案專利，可能不會(huì)進(jìn)行公開。

好在，一個(gè)叫Ashwin Kumar的程序員創(chuàng)建了一個(gè)開源版本，讓開發(fā)者/設(shè)計(jì)師的工作變得更簡(jiǎn)單。

以下內(nèi)容翻譯自他的博客：

理想上，這個(gè)模型可以根據(jù)網(wǎng)站設(shè)計(jì)的簡(jiǎn)單手繪原型，很快地生成一個(gè)可用的HTML網(wǎng)站：

△ SketchCode模型利用手繪線框圖來(lái)生成HTML網(wǎng)站

事實(shí)上，上面例子就是利用訓(xùn)練好的模型在測(cè)試集上生成的一個(gè)實(shí)際網(wǎng)站，代碼請(qǐng)?jiān)L問：https://github.com/ashnkumar/sketch-code。

從圖像標(biāo)注中獲取靈感

目前要解決的問題屬于一種更廣泛的任務(wù)，叫做程序綜合（program synthesis），即自動(dòng)生成工作源代碼。盡管很多程序綜合研究通過(guò)自然語(yǔ)言規(guī)范或執(zhí)行追蹤法來(lái)生成代碼，但在當(dāng)前任務(wù)中，我會(huì)充分利用源圖像，即給出的手繪線框圖來(lái)展開工作。

在機(jī)器學(xué)習(xí)中有一個(gè)十分熱門的研究領(lǐng)域，稱為圖像標(biāo)注（image caption），目的是構(gòu)建一種把圖像和文本連接在一起的模型，特別是用于生成源圖像內(nèi)容的描述。

△ 圖像標(biāo)注模型生成源圖像的文本描述

我從一篇pix2code論文和另一個(gè)應(yīng)用這種方法的相關(guān)項(xiàng)目中獲得靈感，決定把我的任務(wù)按照?qǐng)D像標(biāo)注方式來(lái)實(shí)現(xiàn)，把繪制的網(wǎng)站線框圖作為輸入圖像，并將其相應(yīng)的HTML代碼作為其輸出內(nèi)容。

注：上段提到的兩個(gè)參考項(xiàng)目分別是

pix2code論文：https://arxiv.org/abs/1705.07962

floydhub教程：https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org

獲取合適的數(shù)據(jù)集

確定圖像標(biāo)注方法后，理想中使用的訓(xùn)練數(shù)據(jù)集會(huì)包含成千上萬(wàn)對(duì)手繪線框圖和對(duì)應(yīng)的HTML輸出代碼。但是，目前還沒有我想要的相關(guān)數(shù)據(jù)集，我只好為這個(gè)任務(wù)來(lái)創(chuàng)建數(shù)據(jù)集。

最開始，我嘗試了pix2code論文給出的開源數(shù)據(jù)集，該數(shù)據(jù)集由1750張綜合生成網(wǎng)站的截圖及其相應(yīng)源代碼組成。

△ pix2code數(shù)據(jù)集中的生成網(wǎng)站圖片和源代碼

這是一個(gè)很好的數(shù)據(jù)集，有幾個(gè)有趣的地方：

該數(shù)據(jù)集中的每個(gè)生成網(wǎng)站都包含幾個(gè)簡(jiǎn)單的輔助程序元素，如按鈕、文本框和DIV對(duì)象。盡管這意味著這個(gè)模型受限于將這些少數(shù)元素作為它的輸出內(nèi)容，但是這些元素可通過(guò)選擇生成網(wǎng)絡(luò)來(lái)修改和擴(kuò)展。這種方法應(yīng)該很容易地推廣到更大的元素詞匯表。
每個(gè)樣本的源代碼都是由領(lǐng)域?qū)Ｓ谜Z(yǔ)言（DSL）的令牌組成，這是該論文作者為該任務(wù)所創(chuàng)建的。每個(gè)令牌對(duì)應(yīng)于HTML和CSS的一個(gè)片段，且加入編譯器把DSL轉(zhuǎn)換為運(yùn)行的HTML代碼。

彩色網(wǎng)站圖像變手繪圖

為了修改我的任務(wù)數(shù)據(jù)集，我要讓網(wǎng)站圖像看起來(lái)像手工繪制出的。我嘗試使用Python中的OpenCV庫(kù)和PIL庫(kù)等工具對(duì)每張圖像進(jìn)行修改，包括灰度轉(zhuǎn)換和輪廓檢測(cè)。

最終，我決定直接修改原始網(wǎng)站的CSS樣式表，通過(guò)執(zhí)行以下操作：

1. 更改頁(yè)面上元素的邊框半徑來(lái)平滑按鈕和DIV對(duì)象的邊緣；

2. 模仿繪制的草圖來(lái)調(diào)整邊框的粗細(xì)，并添加陰影；

3. 將原有字體更改為類似手寫的字體；

最終實(shí)現(xiàn)的流程中還增加了一個(gè)步驟，通過(guò)添加傾斜、移動(dòng)和旋轉(zhuǎn)來(lái)實(shí)現(xiàn)圖像增強(qiáng)，來(lái)模擬實(shí)際繪制草圖中的變化。

使用圖像標(biāo)注模型架構(gòu)

現(xiàn)在，我已經(jīng)處理好數(shù)據(jù)集，接下來(lái)是構(gòu)建模型。

我利用了圖像標(biāo)注中使用的模型架構(gòu)，該架構(gòu)由三個(gè)主要部分組成：

1. 一種使用卷積神經(jīng)網(wǎng)絡(luò)（CNN）的計(jì)算機(jī)視覺模型，從源圖像提取圖像特征；

2. 一種包含門控單元GRU的語(yǔ)言模型，對(duì)源代碼令牌序列進(jìn)行編碼；

3. 一個(gè)解碼器模型，也屬于GRU單元，把前兩個(gè)步驟的輸出作為輸入，并預(yù)測(cè)序列中的下一個(gè)令牌。

△ 以令牌序列為輸入來(lái)訓(xùn)練模型

為了訓(xùn)練模型，我將源代碼拆分為令牌序列。模型的輸入為單個(gè)部分序列及它的源圖像，其標(biāo)簽是文本中的下一個(gè)令牌。該模型使用交叉熵函數(shù)作為損失函數(shù)，將模型的下個(gè)預(yù)測(cè)令牌與實(shí)際的下個(gè)令牌進(jìn)行比較。

在模型從頭開始生成代碼的過(guò)程中，該推理方式稍有不同。圖像仍然通過(guò)CNN網(wǎng)絡(luò)進(jìn)行處理，但文本處理開始時(shí)僅采用一個(gè)啟動(dòng)序列。在每個(gè)步驟中，模型對(duì)序列中輸出的下個(gè)預(yù)測(cè)令牌將會(huì)添加到當(dāng)前輸入序列，并作為新的輸入序列送到模型中；重復(fù)此操作直到模型的預(yù)測(cè)令牌為，或該過(guò)程達(dá)到每個(gè)文本中令牌數(shù)目的預(yù)定義值。

當(dāng)模型生成一組預(yù)測(cè)令牌后，編譯器就會(huì)將DSL令牌轉(zhuǎn)換為HTML代碼，這些HTML代碼可以在任何瀏覽器中運(yùn)行。

用BLEU分?jǐn)?shù)評(píng)估模型

我決定使用BLEU分?jǐn)?shù)來(lái)評(píng)估模型。這是機(jī)器翻譯任務(wù)中常用的一種度量標(biāo)準(zhǔn)，通過(guò)在給定相同輸入的情況下，衡量機(jī)器生成的文本與人類可能產(chǎn)生內(nèi)容的近似程度。

實(shí)際上，BLEU通過(guò)比較生成文本和參考文本的N元序列，以創(chuàng)建修改后的準(zhǔn)確版本。它非常適用于這個(gè)項(xiàng)目，因?yàn)樗鼤?huì)影響生成HTML代碼中的實(shí)際元素，以及它們之間的相互關(guān)系。

最棒的是，我還可以通過(guò)檢查生成的網(wǎng)站來(lái)比較當(dāng)前的實(shí)際BLEU分?jǐn)?shù)。

△ 觀察BLEU分?jǐn)?shù)

當(dāng)BLEU分?jǐn)?shù)為1.0時(shí)，則說(shuō)明給定源圖像后該模型能在正確位置設(shè)置合適的元素，而較低的BLEU分?jǐn)?shù)這說(shuō)明模型預(yù)測(cè)了錯(cuò)誤元素或是把它們放在相對(duì)不合適的位置。我們最終模型在評(píng)估數(shù)據(jù)集上的BLEU分?jǐn)?shù)為0.76。

福利：定制網(wǎng)頁(yè)風(fēng)格

后來(lái)，我還想到，由于該模型只生成當(dāng)前頁(yè)面的框架，即文本的令牌，因此我可以在編譯過(guò)程中添加一個(gè)定制的CSS層，并立刻得到不同風(fēng)格的生成網(wǎng)站。

△ 一個(gè)手繪圖生成多種風(fēng)格的網(wǎng)頁(yè)

把風(fēng)格定制和模型生成兩個(gè)過(guò)程分開，在使用模型時(shí)帶來(lái)了很多好處：

1.如果想要將SketchCode模型應(yīng)用到自己公司的產(chǎn)品中，前端工程師可以直接使用該模型，只需更改一個(gè)CSS文件來(lái)匹配該公司的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格；

2. 該模型內(nèi)置的可擴(kuò)展性，即通過(guò)單一源圖像，模型可以迅速編譯出多種不同的預(yù)定義風(fēng)格，因此用戶可以設(shè)想出多種可能的網(wǎng)站風(fēng)格，并在瀏覽器中瀏覽這些生成網(wǎng)頁(yè)。

總結(jié)和展望

受到圖像標(biāo)注研究的啟發(fā)，SketchCode模型能夠在幾秒鐘內(nèi)將手繪網(wǎng)站線框圖轉(zhuǎn)換為可用的HTML網(wǎng)站。

但是，該模型還存在一些問題，這也是我接下來(lái)可能的工作方向：

1. 由于這個(gè)模型只使用了16個(gè)元素進(jìn)行訓(xùn)練，所以它不能預(yù)測(cè)這些數(shù)據(jù)以外的令牌。下一步方向可能是使用更多元素來(lái)生成更多的網(wǎng)站樣本，包括網(wǎng)站圖片，下拉菜單和窗體，可參考啟動(dòng)程序組件（https://getbootstrap.com/docs/4.0/components/buttons/）來(lái)獲得思路；

2. 在實(shí)際網(wǎng)站構(gòu)建中，存在很多變化。創(chuàng)建一個(gè)能更好反映這種變化的訓(xùn)練集，是提高生成效果的一種好方法，可以通過(guò)獲取更多網(wǎng)站的HTML/CSS代碼以及內(nèi)容截圖來(lái)提高；

3. 手繪圖紙也存在很多CSS修改技巧無(wú)法捕捉到的變化。解決這個(gè)問題的一種好方法是使用生成對(duì)抗網(wǎng)絡(luò)GAN來(lái)創(chuàng)建更逼真的繪制網(wǎng)站圖像。

標(biāo)簽	描述
<script>	定義了客戶端腳本
<noscript>	定義了不支持腳本瀏覽器輸出的文本

整合營(yíng)銷服務(wù)商