整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
“小白，HTML標簽看完了么？文檔對象模型看了么？”
“看了，我終于知道你昨天問我的那個關于網頁結構的問題了，原來根據文檔對象模型，網頁就是一個對象嵌套的結構，最外層是html標簽，里面是head和body標簽，head和body里面又有各自的子標簽，可以一直嵌套。”
“嗯，大概就是這個意思，好了現在你打開WebStorm軟件，新建一個項目，項目的位置你看著設定就可以了，創建好項目以后我告你第一步怎么做。”
“我創建了一個mylearn項目，現在我該怎么做呢？”
“在mylearn上面點右鍵，新建一個html頁面”
“創建好以后，看一下HTML文檔的結構，是不是跟你之前看的DOM模型一致？”
“這里面的幾個標簽你應該都認識吧？”，老朱說到。
“認識，head是網頁的頭部對象，body是網頁的主體部分。title是網頁的標題。”
“好了，給title設定一個標題吧！比如‘我的H5第一課’，設定好標題以后在當前頁面里面放一個div層上去，并且給他一個id號main”。
“好嘞，馬上去辦~”，小白興奮的開始了他的第一次動手學習。
小白做完以后找到老朱，“朱哥，做好了！”
老朱看完以后對小白說：“我說的要求你已經實現了，可是你有沒有注意在你創建的頁面中，默認的meta和title標簽都跟他們的父標簽有一定的縮進？在我們寫標簽的時候一定要注意這個問題，每個級別的標簽縮進距離都要有區分。你把光標移到div前面，點一下Tab鍵就可以了。”
“好了，在你的html頁面上點右鍵，選擇瀏覽器中查看，然后選擇chrome瀏覽器，看看效果吧！”
“網頁打開了，除了網頁標題是我的H5第一課，整個網頁都是空的！”
“好的，今天就這樣吧！”
小白很驚訝，“怎么今天就讓我做了一個空的頁面啊，我感覺什么都沒干啊~”
“小白，你今天已經學不少東西了，你用WebStorm創建了項目、在項目中創建了Html頁面、了解了HTML標簽的縮進、還在瀏覽器中查看了這個頁面，看上去沒有什么技術含量，可這些都是你以后會經常碰到的事情，我希望你能把今天學的這點東西好好練習一下，另外下午有時間把CSS看一下，不用記住CSS每個屬性怎么寫，你了解一下CSS能控制什么樣式，可以用在頁面中什么地方就可以了。”
想學H5的朋友可以關注老爐，您的關注是我持續更新《小白H5成長之路》的動力！
譯自： https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b
作者： Kunal Sarkar
譯者： MjSeven
在一個美好的夜晚，你的肚子拒絕消化你在晚餐吃的大塊披薩，所以你不得不在睡夢中沖進洗手間。
在浴室里，當你在思考為什么會發生這種情況時，你聽到一個來自通風口的低沉聲音：“嘿，我是蝙蝠俠。”
這時，你會怎么做呢？
在你恐慌并處于關鍵時刻之前，蝙蝠俠說：“我需要你的幫助。我是一個超級極客，但我不懂 HTML。我需要用 HTML 寫一封情書，你愿意幫助我嗎？”
誰會拒絕蝙蝠俠的請求呢，對吧？所以讓我們用 HTML 來寫一封蝙蝠俠的情書。
HTML 網頁與你電腦上的其它文件一樣。就同一個 .doc 文件以 MS Word 打開，.jpg 文件在圖像查看器中打開一樣，一個 .html 文件在瀏覽器中打開。
那么，讓我們來創建一個 .html 文件。你可以在 Notepad 或其它任何編輯器中完成此任務，但我建議使用 VS Code。 在這里下載并安裝 VS Code 。它是免費的，也是我唯一喜歡的微軟產品。
在系統中創建一個目錄，將其命名為 “HTML Practice”（不帶引號）。在這個目錄中，再創建一個名為 “Batman’s Love Letter”（不帶引號）的目錄，這將是我們的項目根目錄。這意味著我們所有與這個項目相關的文件都會在這里。
打開 VS Code，按下 ctrl+n 創建一個新文件，按下 ctrl+s 保存文件。切換到 “Batman’s Love Letter” 文件夾并將其命名為 “loveletter.html”，然后單擊保存。
現在，如果你在文件資源管理器中雙擊它，它將在你的默認瀏覽器中打開。我建議使用 Firefox 來進行 web 開發，但 Chrome 也可以。
讓我們將這個過程與我們已經熟悉的東西聯系起來。還記得你第一次拿到電腦嗎？我做的第一件事是打開 MS Paint 并繪制一些東西。你在 Paint 中繪制一些東西并將其另存為圖像，然后你可以在圖像查看器中查看該圖像。之后，如果要再次編輯該圖像，你在 Paint 中重新打開它，編輯并保存它。
我們目前的流程非常相似。正如我們使用 Paint 創建和編輯圖像一樣，我們使用 VS Code 來創建和編輯 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)” 自動換行。
保存并在瀏覽器中打開它。如果它已經打開，單擊瀏覽器中的刷新按鈕。
瞧！那是你的第一個網頁！
我們的第一段已準備就緒，但這不是在 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>中編寫段落，你創建了一個 HTML 元素。一個網頁就是 HTML 元素的集合。
讓我們首先來認識一些術語：<p> 是開始標簽，</p> 是結束標簽，“p” 是標簽名稱。元素開始和結束標簽之間的文本是元素的內容。
在上面，你將看到文本覆蓋屏幕的整個寬度。
我們不希望這樣。沒有人想要閱讀這么長的行。讓我們設定段落寬度為 550px。
我們可以通過使用元素的 style 屬性來實現。你可以在其 style 屬性中定義元素的樣式（例如，在我們的示例中為寬度）。以下行將在 p 元素上創建一個空樣式屬性：
<p style="">...</p>
你看到那個空的 "" 了嗎？這就是我們定義元素外觀的地方。現在我們要將寬度設置為 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，用冒號 : 分隔，以分號 ; 結束。
另外，注意我們如何將 <p> 和 </p> 放在單獨的行中，文本內容用一個制表符縮進。像這樣設置代碼使其更具可讀性。
接下來，蝙蝠俠希望列出他所欽佩的人的一些優點，例如：
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.
這看起來很簡單。
讓我們繼續，在 </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>
保存并刷新瀏覽器。
哇！這里發生了什么，我們的列表在哪里？
如果你仔細觀察，你會發現沒有顯示換行符。在代碼中我們在新的一行中編寫列表項，但這些項在瀏覽器中顯示在一行中。
如果你想在 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>
保存并刷新：
好的，現在它看起來就像我們想要的那樣！
另外，注意我們沒有寫一個 </br>。有些標簽不需要結束標簽（它們被稱為自閉合標簽）。
還有一件事：我們沒有在兩個段落之間使用 <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>
在復制代碼之前，注意差異部分：
讓我們保存文件并刷新瀏覽器以查看結果：
你會立即注意到在每個列表項之前顯示了重點標志。我們現在不需要在每個列表項之前寫 “-”。
經過仔細檢查，你會注意到最后一行超出 550px 寬度。這是為什么？因為 HTML 不允許 <ul> 元素出現在 <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> 元素的寬度。那是因為我們現在已經將 <ul> 元素放在了 <p> 元素之外。
定義情書中所有元素的寬度會變得很麻煩。我們有一個特定的元素用于此目的：<div> 元素。一個 <div> 元素就是一個通用容器，用于對內容進行分組，以便輕松設置樣式。
讓我們用 <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>
棒極了，我們的代碼現在看起來簡潔多了。
到目前為止，蝙蝠俠對結果很高興，他希望在情書上標題。他想寫一個標題： “Bat Letter”。當然，你已經看到這個名字了，不是嗎？: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>
保存，刷新。
我們的情書尚未完成，但在繼續之前，缺少一件大事：蝙蝠俠標志。你見過是蝙蝠俠的東西但沒有蝙蝠俠的標志嗎？
并沒有。
所以，讓我們在情書中添加一個蝙蝠俠標志。
在 HTML 中包含圖像就像在一個 Word 文件中包含圖像一樣。在 MS Word 中，你到 “菜單 -> 插入 -> 圖像 -> 然后導航到圖像位置為止 -> 選擇圖像 -> 單擊插入”。
在 HTML 中，我們使用 <img> 標簽讓瀏覽器知道我們需要加載的圖像，而不是單擊菜單。我們在 src 屬性中寫入文件的位置和名稱。如果圖像在項目根目錄中，我們可以簡單地在 src 屬性中寫入圖像文件的名稱。
在我們深入編碼之前，從 這里 下載蝙蝠俠標志。你可能希望裁剪圖像中的額外空白區域。復制項目根目錄中的圖像并將其重命名為 “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）及其大小寫。
保存并刷新，查看結果。
該死的！剛剛發生了什么？
當使用 <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”。當我們在 “%” 中定義寬度時，它將占據父元素寬度的百分比。因此，100% 的 550px 將為我們提供 550px。
保存并刷新，查看結果。
太棒了！這讓蝙蝠俠的臉露出了羞澀的微笑 :)。
現在蝙蝠俠想在最后幾段中承認他的愛。他有以下文本供你用 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> 的內聯樣式：
<div style="width:550px;">
我們可以在 <style> 和 </style> 里面寫同樣的樣式：
div{
width:550px;
}
在嵌入式樣式中，我們編寫的樣式是與元素分開的。所以我們需要一種方法來關聯元素及其樣式。第一個單詞 “div” 就做了這樣的活。它讓瀏覽器知道花括號 {...} 里面的所有樣式都屬于 “div” 元素。由于這種語法確定要應用樣式的元素，因此它稱為一個選擇器。
我們編寫樣式的方式保持不變：屬性（width）和值（550px）用冒號（:）分隔，以分號（;）結束。
讓我們從 <div> 和 <img> 元素中刪除內聯樣式，將其寫入 <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>
保存并刷新，結果應保持不變。
但是有一個大問題，如果我們的 HTML 文件中有多個 <div> 和 <img> 元素該怎么辦？這樣我們在 <style> 元素中為 div 和 img 定義的樣式就會應用于頁面上的每個 div 和 img。
如果你在以后的代碼中添加另一個 div，那么該 div 也將變為 550px 寬。我們并不希望這樣。
我們想要將我們的樣式應用于現在正在使用的特定 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 已經準備好了嵌入式樣式。
但是，你可以看到，隨著我們包含越來越多的樣式，<style></style> 將變得很大。這可能很快會混亂我們的主 HTML 文件。
因此，讓我們更進一步，通過將 <style> 標簽內的內容復制到一個新文件來使用鏈接樣式。
在項目根目錄中創建一個新文件，將其另存為 “style.css”：
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
我們不需要在 CSS 文件中寫 <style> 和 </style>。
我們需要使用 HTML 文件中的 <link> 標簽來將新創建的 CSS 文件鏈接到 HTML 文件。以下是我們如何做到這一點：
<link rel="stylesheet" type="text/css" href="style.css">
我們使用 <link> 元素在 HTML 文檔中包含外部資源，它主要用于鏈接樣式表。我們使用的三個屬性是：
link 元素的結尾沒有 </link>。因此，<link> 也是一個自閉合的標簽。
<link rel="gf" type="cute" href="girl.next.door">
如果只是得到一個女朋友，那么很容易：D
可惜沒有那么簡單，讓我們繼續前進。
這是我們 “loveletter.html” 的內容：
<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” 內容：
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
保存文件并刷新，瀏覽器中的輸出應保持不變。
我們的情書已經準備好給蝙蝠俠，但還有一些正式的片段。
與其他任何編程語言一樣，HTML 自出生以來（1990 年）經歷過許多版本，當前版本是 HTML5。
那么，瀏覽器如何知道你使用哪個版本的 HTML 來編寫頁面呢？要告訴瀏覽器你正在使用 HTML5，你需要在頁面頂部包含 <!DOCTYPE html>。對于舊版本的 HTML，這行不同，但你不需要了解它們，因為我們不再使用它們了。
此外，在之前的 HTML 版本中，我們曾經將整個文檔封裝在 <html></html> 標簽內。整個文件分為兩個主要部分：頭部在 <head></head> 里面，主體在 <body></body> 里面。這在 HTML5 中不是必須的，但由于兼容性原因，我們仍然這樣做。讓我們用 <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>
主要內容在 <body> 里面，元信息在 <head> 里面。所以我們把 <div> 保存在 <body> 里面并加載 <head> 里面的樣式表。
保存并刷新，你的 HTML 頁面應顯示與之前相同的內容。
我發誓，這是最后一次改變。
你可能已經注意到選項卡的標題正在顯示 HTML 文件的路徑：
我們可以使用 <title> 標簽來定義 HTML 文件的標題。標題標簽也像鏈接標簽一樣在 <head> 內部。讓我們我們在標題中加上 “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” 而不是文件路徑。
蝙蝠俠的情書現在已經完成。
恭喜！你用 HTML 制作了蝙蝠俠的情書。
我們學習了以下新概念：
我們學習了以下 HTML 標簽：
我們學習了以下 CSS 屬性：
朋友們，這就是今天的全部了，下一個教程中見。
作者簡介：開發者 + 作者 | 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 原創編譯， Linux中國 榮譽推出
CSS 是什么？
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表。
屬性和屬性值用冒號隔開，以分號結尾。
CSS 四種引入方式：
1.行內式
行內式是在標簽的style屬性中設定CSS樣式。
<div style="..."></div>2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head>標簽的<style></style>標簽對中。
<head>
...
<style type="text/css">
...此處寫CSS樣式
</style>
</head>3.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用@import 引入外部CSS文件，<style>標記也是寫在<head>標記中。
導入式會在整個網頁裝載完后再裝載CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此處注意.css文件的路徑
</style>
</head>4.鏈接式
將一個獨立的.css文件引入到HTML文件中，使用<link>標記寫在<head>標記中。
鏈接式會以網頁文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
樣式應用順序：
.nick {
color: yellow !important;
}基本選擇器：
1.通用元素選擇器
* 表示應用到所有的標簽。
* {color: yellow}2.標簽選擇器
匹配所有使用 div 標簽的元素（可以匹配所有標簽）
div {color: yellow}3.類選擇器
匹配所有class屬性中包含info的元素。
語法：.類名{樣式}（類名不能以數字開頭，類名要區分大小寫。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>4.ID選擇器
使用id屬性來調用樣式，在一個網頁中id的值都是唯一的（是W3C規范而不是規則，所以不會報錯）。
語法：#ID名{樣式}（ID名不能以數字開頭）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>組合選擇器：
1.多元素選擇器
同時匹配h3,h4標簽，之間用逗號分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素選擇器
匹配所有div標簽里嵌套的P標簽，之間用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>3.子元素選擇器
匹配所有div標簽里嵌套的子P標簽，之間用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>4.毗鄰元素選擇器
匹配所有緊隨div標簽之后的同級標簽P，之間用+分隔（只能匹配一個）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>屬性選擇器：
1.[title] & P[title]
設置所有具有title屬性的標簽元素；
設置所有具有title屬性的P標簽元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>2.[title=Nick]
設置所有title屬性等于“Nick”的標簽元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>3.[title~=Nick]
設置所有title屬性具有多個空格分隔的值、其中一個值等于“Nick”的標簽元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>4.[title|=Nick]
設置所有title屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"Nick"開頭的標簽元素。
例：lang屬性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
設置屬性值以指定值開頭的每個標簽元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>6.[title$=Nick]
設置屬性值以指定值結尾的每個標簽元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>7.[title*=Nick]
設置屬性值中包含指定值的每個元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>偽類選擇器：
1. link、hover、active、visited
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>2. before、after
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p> 1. 顏色屬性：
color
transparent
opacity
2. 字體屬性:
font-style: 用于規定斜體文本
font-weight: 設置文本的粗細
font-size: 設置字體的大小
font-family：字體名稱
font：簡寫屬性
3. 文本屬性:
white-space: 設置元素中空白的處理方式
direction: 規定文本的方向
text-align: 文本的水平對齊方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直對齊方式
text-indent: 文本縮進
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個單詞之間的空白
text-transform: 屬性控制文本的大小寫
text-overflow: 文本溢出樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
</body>
</html>text-decoration: 文本的裝飾
text-shadow：文本陰影
word-wrap：自動換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 150px;
height: 160px;
background-color: #FFA500;
/*邊框陰影*/
box-shadow: 10px 10px 5px #888;
/*自動換行*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<p>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</p>
<h1>索寧</h1>
</body>
</html> a {
text-decoration: none;
/*去除a標簽下劃線*/
}4. 背景屬性
background-color: 背景顏色
background-image 設置圖像為背景
background-position 設置背景圖像的位置坐標
background-repeat 設置背景圖像不重復平鋪
background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動
background 簡寫
5. 列表屬性
list-style-type: 列表項標志的類型
list-style-image：將圖象設置為列表項標志
list-style-position：列表項標志的位置
list-style：縮寫
1. 邊框
border-style：邊框樣式
border-color：邊框顏色
border-width：邊框寬度
border-radius：圓角
border: 簡寫
box-shadow：邊框陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
</style>
</head>
<body>
<div>
點贊哦！dear.
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.radius1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20px;
}
.radius2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 35px;
}
.radius3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20px 35px 50px;
}
.radius4 {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
border-radius: 20px 35px 50px 60px;
}
</style>
</head>
<body>
<div>
<span class="radius1"></span>
<span class="radius2"></span>
<span class="radius3"></span>
<span class="radius4"></span>
</div>
</body>
</html>邊框實現各種三角符號：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
}
.triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-stree"></div>
<div class="triangle-four"></div>
<div class="triangle-five"></div>
<div class="triangle-six"></div>
<div class="triangle-seven"></div>
<div class="triangle-eight"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
.back-in {
position: absolute;
width: 1020px;
height: 45px;
left: -20px;
top: 50px;
background-color: #2F4F4F;
}
.back-img {
border: 20px solid transparent;
border-top: 10px solid dimgrey;
border-right: 0;
display: inline-block;
position: absolute;
top: 95px;
left: -20px;
}
.back-font {
line-height: 9px;
margin-left: 30px;
color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="back-in"><h3 class="back-font">妹子求關注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>2.★ 盒子模型
一個標準的盒子模型：
padding:用于控制內容與邊框之間的距離;
margin: 用于控制元素與元素之間的距離;
一個參數，應用于四邊。
兩個參數，第一個用于上、下，第二個用于左、右。
三個參數，第一個用于上，第二個用于左、右，第三個用于下。
邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子，外層還有html，
在默認情況下，body距離html會有若干像素的margin，所以body中的盒子不會緊貼瀏覽器窗口的邊框了。
解決方法：
body {
margin: 0;
}3.★ display
4. visibility
5.★ float 浮動
讓一行顯示兩個塊級標簽，會脫離文檔流
clear 清除浮動：
6. clip 剪裁圖像
rect 剪裁定位元素：
7. overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容
8.★ position 規定元素的定位類型
9. z-index 元素層疊順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
</body>
</html>10. outline 邊框輪廓
11. zoom 縮放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
</style>
</head>
<body>
<div class="zoom1">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>12. cursor 鼠標的類型形狀
鼠標放在以下單詞上，There will be a miracle：
url: 自定義光標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
body {
cursor: url("mouse.png"), auto;
/*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
}
</style>
</head>
<body>
<div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html> Auto: 默認
Default: 默認
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help
not-allowed
13. transform、transition 動畫效果
transform 轉換，變形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;
/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Transition 平滑過渡
#property 指定屬性對應類型
1、color： 通過紅、綠、藍和透明度組件變換（每個數值單獨處理），如：background-color，border-color，color，outline-color等CSS屬性；
2、length：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；
3、percentage：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；
4、integer 離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換為整數時發生，如：outline-offset，z-index等屬性；
5、number真實的（浮點型）數值，如：zoom，opacity，font-weight等屬性；
6、transform list。
7、rectangle：通過x、 y、 width和height（轉為數值）變換，如：crop；
8、visibility：離散步驟，在0到1數字范圍之內，0表示“隱藏”，1表示完全“顯示”,如：visibility；
9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；
10、gradient：通過每次停止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數值以便執行動畫，如：background-image；
11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；
12、space-separated list of above：如果列表有相同的項目數值，則列表每一項按照上面的規則進行變化，否則無變化；
13、a shorthand property：如果縮寫的所有部分都可以實現動畫，則會像所有單個屬性變化一樣變化。#支持執行transition效果的屬性
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer鼠標放在以下圖片上，There will be a miracle：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
.img-see-2016-7-2 {
background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
background-size: 660px;
background-repeat: no-repeat;
height: 300px;
width: 600px;
transition-duration: 30s;
transition-timing-function: ease;
transition-property: background-size;
}
.img-see-2016-7-2:hover {
background-size: 2000px;
}
</style>
</head>
<body>
<div class="img-see-2016-7-2"></div>
</body>
</html>作者：suoning
原文鏈接：https://www.cnblogs.com/suoning/p/5625582.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
