整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
人們的不斷探索下，「使用人工智能自動生成網(wǎng)頁」的方法已經(jīng)變得越來越接近實用化了。本文介紹的這種名為 SketchCode 的卷積神經(jīng)網(wǎng)絡能夠把網(wǎng)站圖形用戶界面的設計草圖直接轉(zhuǎn)譯成代碼行，為前端開發(fā)者們分擔部分設計流程。目前，該模型在訓練后的 BLEU 得分已達 0.76。
你可以在 GitHub 上找到這個項目的代碼：https://github.com/ashnkumar/sketch-code
為用戶創(chuàng)造直觀、富有吸引力的網(wǎng)站是各家公司的重要目標，而且這是個快速進行原型、設計、用戶測試循環(huán)的過程。像 Facebook 這樣的大公司有著讓整個團隊專注于設計流程的人力，改動可能需要幾周的時間，并涉及到多種利益相關者；而小型企業(yè)就沒有這樣的資源，因此其用戶界面可能受到一些影響。
我在 Insight 當中的目標是使用現(xiàn)代深度學習算法大大簡化設計工作流程，并使得任何規(guī)模的公司都能快速地創(chuàng)造并測試網(wǎng)頁。
現(xiàn)有的設計工作流程
現(xiàn)有工作流程涉及多個利益相關者
一個典型的設計工作流程如下所示：
產(chǎn)品經(jīng)理進行用戶研究，從而制定技術(shù)參數(shù)表
設計人員將接受這些要求并嘗試創(chuàng)建低保真原型，最終創(chuàng)建高保真原型
工程師將這些設計轉(zhuǎn)化為代碼并最終將產(chǎn)品交付給用戶
開發(fā)周期的時間長度很快就會變成瓶頸，像 Airbnb 這樣的公司已經(jīng)開始使用機器學習來提高這個過程的效率了。（參見：https://airbnb.design/sketching-interfaces/）
Airbnb 內(nèi)部 AI 工具演示：從草圖到代碼
雖然這種工具很有希望成為機器輔助設計的例子，但是尚不清楚這種模型在端到端的情況下能完全訓練到什么程度，也不清楚它在多大程度上依賴于手工制作的圖像特征。這肯定是無法知道的，因為它目前還是 Airbnb 專有的非開源方案。我想創(chuàng)造一個「從繪圖到代碼」技術(shù)的開源版本，可供更多開發(fā)者和設計者使用。
理想情況下，我的模型可以采用簡單的網(wǎng)站設計手繪原型，并立即從該圖像生成一個可用的 HTML 網(wǎng)站：
SketchCode 模型需要繪制好的網(wǎng)站線框圖并能生成 HTML 代碼
實際上，上面的例子是一個從我模型測試集圖像生成的實際網(wǎng)站！你可以在我的 Github 頁面中查看它：https://github.com/ashnkumar/sketch-code
從圖像標注中獲取靈感
我正在解決的問題屬于程序綜合（https://en.wikipedia.org/wiki/Program_synthesis）這個廣義任務范疇，即工作源代碼的自動生成。盡管很多程序綜合能處理從自然語言要求或執(zhí)行軌跡所生成的代碼，但在我這個案例中，我可以從一個源圖像（手繪線框圖）開始，自動獲得想要的代碼。
機器學習領域中，有一個名為圖像字幕生成的領域（https://cs.stanford.edu/people/karpathy/deepimagesent/），該領域有著充分的研究，旨在學習將圖像和文本相連的模型，特別是生成關于源圖片內(nèi)容的描述。
圖像標注模型生成源圖片的描述
我從最近一篇名為 pix2code 的論文和 Emil Wallner 使用該方法的一個相關項目獲得了靈感（參見：前端慌不慌？用深度學習自動生成 HTML 代碼），并決定將我的任務重構(gòu)成圖像字幕生成問題的一部分，即將線框圖作為輸入圖像，將對應的 HTML 代碼作為輸出文本。
獲取正確的數(shù)據(jù)集
考慮到圖像標注的方法，我心中理想的訓練數(shù)據(jù)集是成千上萬對手繪線框圖和它們 HTML 代碼的等價物。不出所料，我無法找到這種數(shù)據(jù)集，因此我不得不為該任務創(chuàng)建自己的數(shù)據(jù)。
我從 pix2code 論文中提到的一個開源數(shù)據(jù)集（https://github.com/tonybeltramelli/pix2code）入手，它由 1750 張人工生成的網(wǎng)頁截圖和其對應源代碼構(gòu)成。
pix2code 中生成的網(wǎng)站圖像及其源代碼數(shù)據(jù)集
這個數(shù)據(jù)集對我而言是個很好的開始，其中有一些有趣的地方：
數(shù)據(jù)集中每個生成的網(wǎng)站都包含幾個簡單的 Bootstrap 元素例如按鈕、文本框和 DIV。雖然這意味著我的模型將會因把這幾個元素作為「詞匯」（模型可選擇用于生成網(wǎng)站的元素）而受限制，這種方法應該很容易推廣到更大的元素詞匯表中。
每個示例的源代碼包含領域?qū)Ｓ谜Z言（DSL）的標記，這些符號是由論文作者創(chuàng)建的。每個標記對應于 HTML 和 CSS 的片段，且有一個編譯器將 DSL 轉(zhuǎn)化為工作使用的 HTML 代碼。
讓圖片更像手繪的
將網(wǎng)站的多彩主題切換成手寫主題。
為了調(diào)整數(shù)據(jù)集以適應我的任務，我得把網(wǎng)站的圖片弄得像是手繪的。對圖片的手繪化都得益于 OpenCV 和 PIL library 的灰度轉(zhuǎn)換和輪廓檢測功能。
最終，我決定直接通過一系列操作來直接修改原網(wǎng)站的 CSS 樣式表：
通過改變頁面元素的邊框半徑實現(xiàn)按鈕和 div 的圓潤化
調(diào)整邊框的粗細以模仿手繪素描，并添加陰影
將字體改為類手寫字體
我的最終版本又增加了一個步驟，通過加入傾斜，偏移和旋轉(zhuǎn)來進行數(shù)據(jù)增強，以模仿實際繪制的素描的不確定性。
使用圖像標注模型架構(gòu)
現(xiàn)在我已經(jīng)準備好我的數(shù)據(jù)了，我可以把它輸入模型進行訓練了！
我用的這個用于圖像標注的模型包括三個主要部分：
一個卷積神經(jīng)網(wǎng)路（CNN）視覺模型用于提取源圖片特征
一種由編碼源代碼標記序列的門控循環(huán)單元（GRU）組成的語言模型
一個解碼器模型（也是一個 GRU），它以前兩個步的輸出作為輸入，預測序列中的下一個標記
使用標記序列作為輸入來訓練模型
為了訓練這個模型，我把源代碼分成標記序列。其中一個序列及其源圖像是模型的單個輸入，其標簽是文檔中的下一個標記。該模型使用交叉熵成本（cross-entropy cost）作為其損失函數(shù)，將模型預測的下一個標記與實際的標記進行比較。
在模型從頭開始生成代碼的推理階段，該過程稍有不同。該圖像仍然通過 CNN 網(wǎng)絡進行處理，但文本處理僅提供一個開始序列。在每一步中，模型對序列中下一個標記的預測將返回到當前輸入序列，同時作為新的輸入序列輸入到模型中。重復此操作直到模型預測出 <END> 標記或進程達到每個文檔的標記數(shù)的預定義上限。
一旦從模型中生成了一組預測標記，編譯器就會將 DSL 標記轉(zhuǎn)換為 HTML，這些 HTML 可以在任何瀏覽器中展示出來。
用 BLEU 得分評估模型
我決定用 BLEU 評分（https://machinelearningmastery.com/calculate-bleu-score-for-text-python/）來評估模型。這是機器翻譯任務中經(jīng)常會用到的評估標準，它試圖在給定相同輸入的情況下，評估機器生成的文本與人類可能寫的文本的近似程度。
實質(zhì)上，BLEU 通過比較生成文本和參考文本的 n-元 序列，生成精修改后的文本。它非常適合這個項目，因為它會影響生成的 HTML 中的實際元素，以及它們之間的相互關系。
然后這是最棒的——我完全可以通過檢查生成的網(wǎng)站來理解 BLEU 得分！
BLEU 得分可視化
一個完美的 1.0 的 BLEU 分數(shù)將在正確的位置生成源圖像的正確元素，而較低的得分可以預測錯誤的元素和/或?qū)⑺鼈兎旁谙鄬τ诒舜隋e誤的位置。最終我的模型能夠在測試集上得到 0.76 的 BLEU 分數(shù)。
福利 - 定制樣式
我覺察到的一個額外福利是，由于模型只生成頁面的骨架（文檔的標記），我可以在編譯過程中添加一個自定義的 CSS 層，并且可以即時看到網(wǎng)站的不同風格。
一次轉(zhuǎn)換 => 同時生成多種樣式
將樣式與模型生成過程分離，給使用模型帶來了很多好處：
想要將 SketchCode 模型應用到自己公司產(chǎn)品中的前端工程師可以按原樣使用該模型，只需更改一個 CSS 文件以符合其公司的樣式要求
可擴展性已內(nèi)置 - 使用一張源圖像，模型輸出可立即編譯為 5、10 或 50 種不同的預定義樣式，因此用戶可以看到他們網(wǎng)站的多個版本，并在瀏覽器中瀏覽這些網(wǎng)站
總結(jié)與展望
通過利用圖像標注的研究成果，SketchCode 能夠在幾秒鐘內(nèi)將手繪網(wǎng)站線框圖轉(zhuǎn)換為可用的 HTML 網(wǎng)站。
該模型有些局限性，大概包括以下幾點：
由于這個模型是用一個只有 16 個元素的詞匯進行訓練的，它不能預測訓練數(shù)據(jù)之外的標記。下一步可能是使用更多元素（如圖像，下拉菜單和表單）生成其他樣例網(wǎng)站——Bootstrap components 是個練手的好網(wǎng)站：https://getbootstrap.com/docs/4.0/components/buttons/
實際生產(chǎn)環(huán)境中，網(wǎng)站有很多變化。創(chuàng)建一個更能反映這種變化的訓練數(shù)據(jù)集的好方法是去爬取實際的網(wǎng)站，捕獲他們的 HTML / CSS 代碼以及網(wǎng)站內(nèi)容的截圖
手繪素描也有很多變化，CSS 修改技巧沒有被模型完全學會。在手繪素描上生成更多變化的一種好方法是使用生成對抗網(wǎng)絡來創(chuàng)建逼真的繪制網(wǎng)站圖像
我很期待看到項目的進一步發(fā)展！
TML可以將文檔分割為若干段落
段落通過<p>標簽定義，注意不要忘記結(jié)束標簽
THML折行
可以使用如下例子測試
HTML輸出-使用提醒
對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。
譯自： https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b
作者： Kunal Sarkar
譯者： MjSeven
在一個美好的夜晚，你的肚子拒絕消化你在晚餐吃的大塊披薩，所以你不得不在睡夢中沖進洗手間。
在浴室里，當你在思考為什么會發(fā)生這種情況時，你聽到一個來自通風口的低沉聲音：“嘿，我是蝙蝠俠。”
這時，你會怎么做呢？
在你恐慌并處于關鍵時刻之前，蝙蝠俠說：“我需要你的幫助。我是一個超級極客，但我不懂 HTML。我需要用 HTML 寫一封情書，你愿意幫助我嗎？”
誰會拒絕蝙蝠俠的請求呢，對吧？所以讓我們用 HTML 來寫一封蝙蝠俠的情書。
HTML 網(wǎng)頁與你電腦上的其它文件一樣。就同一個 .doc 文件以 MS Word 打開，.jpg 文件在圖像查看器中打開一樣，一個 .html 文件在瀏覽器中打開。
那么，讓我們來創(chuàng)建一個 .html 文件。你可以在 Notepad 或其它任何編輯器中完成此任務，但我建議使用 VS Code。 在這里下載并安裝 VS Code 。它是免費的，也是我唯一喜歡的微軟產(chǎn)品。
在系統(tǒng)中創(chuàng)建一個目錄，將其命名為 “HTML Practice”（不帶引號）。在這個目錄中，再創(chuàng)建一個名為 “Batman’s Love Letter”（不帶引號）的目錄，這將是我們的項目根目錄。這意味著我們所有與這個項目相關的文件都會在這里。
打開 VS Code，按下 ctrl+n 創(chuàng)建一個新文件，按下 ctrl+s 保存文件。切換到 “Batman’s Love Letter” 文件夾并將其命名為 “l(fā)oveletter.html”，然后單擊保存。
現(xiàn)在，如果你在文件資源管理器中雙擊它，它將在你的默認瀏覽器中打開。我建議使用 Firefox 來進行 web 開發(fā)，但 Chrome 也可以。
讓我們將這個過程與我們已經(jīng)熟悉的東西聯(lián)系起來。還記得你第一次拿到電腦嗎？我做的第一件事是打開 MS Paint 并繪制一些東西。你在 Paint 中繪制一些東西并將其另存為圖像，然后你可以在圖像查看器中查看該圖像。之后，如果要再次編輯該圖像，你在 Paint 中重新打開它，編輯并保存它。
我們目前的流程非常相似。正如我們使用 Paint 創(chuàng)建和編輯圖像一樣，我們使用 VS Code 來創(chuàng)建和編輯 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.”
復制這些到 VS Code 中的 loveletter.html。單擊 “View -> Toggle Word Wrap (alt+z)” 自動換行。
保存并在瀏覽器中打開它。如果它已經(jīng)打開，單擊瀏覽器中的刷新按鈕。
瞧！那是你的第一個網(wǎng)頁！
我們的第一段已準備就緒，但這不是在 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 元素的集合。
讓我們首先來認識一些術(shù)語：<p> 是開始標簽，</p> 是結(jié)束標簽，“p” 是標簽名稱。元素開始和結(jié)束標簽之間的文本是元素的內(nèi)容。
在上面，你將看到文本覆蓋屏幕的整個寬度。
我們不希望這樣。沒有人想要閱讀這么長的行。讓我們設定段落寬度為 550px。
我們可以通過使用元素的 style 屬性來實現(xiàn)。你可以在其 style 屬性中定義元素的樣式（例如，在我們的示例中為寬度）。以下行將在 p 元素上創(chuàng)建一個空樣式屬性：
<p style="">...</p>
你看到那個空的 "" 了嗎？這就是我們定義元素外觀的地方。現(xiàn)在我們要將寬度設置為 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 屬性設置為 550px，用冒號 : 分隔，以分號 ; 結(jié)束。
另外，注意我們?nèi)绾螌?<p> 和 </p> 放在單獨的行中，文本內(nèi)容用一個制表符縮進。像這樣設置代碼使其更具可讀性。
接下來，蝙蝠俠希望列出他所欽佩的人的一些優(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> 下面復制所需的文本：
<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ā)生了什么，我們的列表在哪里？
如果你仔細觀察，你會發(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>。有些標簽不需要結(jié)束標簽（它們被稱為自閉合標簽）。
還有一件事：我們沒有在兩個段落之間使用 <br>，但第二個段落仍然是從一個新行開始，這是因為 <p> 元素會自動插入換行符。
我們使用純文本編寫列表，但是有兩個標簽可以供我們使用來達到相同的目的：<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>
在復制代碼之前，注意差異部分：
讓我們保存文件并刷新瀏覽器以查看結(jié)果：
你會立即注意到在每個列表項之前顯示了重點標志。我們現(xiàn)在不需要在每個列表項之前寫 “-”。
經(jīng)過仔細檢查，你會注意到最后一行超出 550px 寬度。這是為什么？因為 HTML 不允許 <ul> 元素出現(xiàn)在 <p> 元素中。讓我們將第一行和最后一行放在單獨的 <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)容進行分組，以便輕松設置樣式。
讓我們用 <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)在看起來簡潔多了。
到目前為止，蝙蝠俠對結(jié)果很高興，他希望在情書上標題。他想寫一個標題： “Bat Letter”。當然，你已經(jīng)看到這個名字了，不是嗎？:D
你可以使用 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 標簽來添加標題，<h1> 是最大的標題和最主要的標題，<h6> 是最小的標題。
讓我們在第二段之前使用 <h1> 做主標題和一個副標題：
<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>
保存，刷新。
我們的情書尚未完成，但在繼續(xù)之前，缺少一件大事：蝙蝠俠標志。你見過是蝙蝠俠的東西但沒有蝙蝠俠的標志嗎？
并沒有。
所以，讓我們在情書中添加一個蝙蝠俠標志。
在 HTML 中包含圖像就像在一個 Word 文件中包含圖像一樣。在 MS Word 中，你到 “菜單 -> 插入 -> 圖像 -> 然后導航到圖像位置為止 -> 選擇圖像 -> 單擊插入”。
在 HTML 中，我們使用 <img> 標簽讓瀏覽器知道我們需要加載的圖像，而不是單擊菜單。我們在 src 屬性中寫入文件的位置和名稱。如果圖像在項目根目錄中，我們可以簡單地在 src 屬性中寫入圖像文件的名稱。
在我們深入編碼之前，從 這里 下載蝙蝠俠標志。你可能希望裁剪圖像中的額外空白區(qū)域。復制項目根目錄中的圖像并將其重命名為 “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> 標簽。這個標簽也是一個自閉合的標簽，所以我們不需要寫 </img>。在 src 屬性中，我們給出了圖像文件的名稱。這個名稱應與圖像名稱完全相同，包括擴展名（.jpeg）及其大小寫。
保存并刷新，查看結(jié)果。
該死的！剛剛發(fā)生了什么？
當使用 <img> 標簽包含圖像時，默認情況下，圖像將以其原始分辨率顯示。在我們的例子中，圖像比 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”。當我們在 “%” 中定義寬度時，它將占據(jù)父元素寬度的百分比。因此，100% 的 550px 將為我們提供 550px。
保存并刷新，查看結(jié)果。
太棒了！這讓蝙蝠俠的臉露出了羞澀的微笑 :)。
現(xià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.”
當閱讀到這里時，你會問蝙蝠俠：“等等，這是給誰的？”蝙蝠俠說：
“這是給超人的。”
你說：哦！我還以為是給神奇女俠的呢。
蝙蝠俠說：不，這是給超人的，請在最后寫上 “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 元素的外觀：
讓我們來看看如何定義 <div> 的內(nèi)聯(lián)樣式：
<div style="width:550px;">
我們可以在 <style> 和 </style> 里面寫同樣的樣式：
div{
width:550px;
}
在嵌入式樣式中，我們編寫的樣式是與元素分開的。所以我們需要一種方法來關聯(lián)元素及其樣式。第一個單詞 “div” 就做了這樣的活。它讓瀏覽器知道花括號 {...} 里面的所有樣式都屬于 “div” 元素。由于這種語法確定要應用樣式的元素，因此它稱為一個選擇器。
我們編寫樣式的方式保持不變：屬性（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é)果應保持不變。
但是有一個大問題，如果我們的 HTML 文件中有多個 <div> 和 <img> 元素該怎么辦？這樣我們在 <style> 元素中為 div 和 img 定義的樣式就會應用于頁面上的每個 div 和 img。
如果你在以后的代碼中添加另一個 div，那么該 div 也將變?yōu)?550px 寬。我們并不希望這樣。
我們想要將我們的樣式應用于現(xiàn)在正在使用的特定 div 和 img。為此，我們需要為 div 和 img 元素提供唯一的 id。以下是使用 id 屬性為元素賦予 id 的方法：
<div id="letter-container">
以下是如何在嵌入式樣式中將此 id 用作選擇器：
#letter-container{
...
}
注意 # 符號。它表示它是一個 id，{...} 中的樣式應該只應用于具有該特定 id 的元素。
讓我們來應用它：
<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)準備好了嵌入式樣式。
但是，你可以看到，隨著我們包含越來越多的樣式，<style></style> 將變得很大。這可能很快會混亂我們的主 HTML 文件。
因此，讓我們更進一步，通過將 <style> 標簽內(nèi)的內(nèi)容復制到一個新文件來使用鏈接樣式。
在項目根目錄中創(chuàng)建一個新文件，將其另存為 “style.css”：
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
我們不需要在 CSS 文件中寫 <style> 和 </style>。
我們需要使用 HTML 文件中的 <link> 標簽來將新創(chuàng)建的 CSS 文件鏈接到 HTML 文件。以下是我們?nèi)绾巫龅竭@一點：
<link rel="stylesheet" type="text/css" href="style.css">
我們使用 <link> 元素在 HTML 文檔中包含外部資源，它主要用于鏈接樣式表。我們使用的三個屬性是：
link 元素的結(jié)尾沒有 </link>。因此，<link> 也是一個自閉合的標簽。
<link rel="gf" type="cute" href="girl.next.door">
如果只是得到一個女朋友，那么很容易：D
可惜沒有那么簡單，讓我們繼續(xù)前進。
這是我們 “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%;
}
保存文件并刷新，瀏覽器中的輸出應保持不變。
我們的情書已經(jīng)準備好給蝙蝠俠，但還有一些正式的片段。
與其他任何編程語言一樣，HTML 自出生以來（1990 年）經(jīng)歷過許多版本，當前版本是 HTML5。
那么，瀏覽器如何知道你使用哪個版本的 HTML 來編寫頁面呢？要告訴瀏覽器你正在使用 HTML5，你需要在頁面頂部包含 <!DOCTYPE html>。對于舊版本的 HTML，這行不同，但你不需要了解它們，因為我們不再使用它們了。
此外，在之前的 HTML 版本中，我們曾經(jīng)將整個文檔封裝在 <html></html> 標簽內(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 頁面應顯示與之前相同的內(nèi)容。
我發(fā)誓，這是最后一次改變。
你可能已經(jīng)注意到選項卡的標題正在顯示 HTML 文件的路徑：
我們可以使用 <title> 標簽來定義 HTML 文件的標題。標題標簽也像鏈接標簽一樣在 <head> 內(nèi)部。讓我們我們在標題中加上 “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 制作了蝙蝠俠的情書。
我們學習了以下新概念：
我們學習了以下 HTML 標簽：
我們學習了以下 CSS 屬性：
朋友們，這就是今天的全部了，下一個教程中見。
作者簡介：開發(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中國 榮譽推出
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
