整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 代碼約定
很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。
在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。
而針對于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫，可以使用以下代碼：
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風(fēng)格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個元素都要添加關(guān)閉標(biāo)簽。
不推薦:
<section>
<p>這是一個段落。
<p>這是一個段落。
</section>
推薦:
<section>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：
我們可以這么寫：
<meta charset="utf-8">
也可以這么寫：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面，使用這種風(fēng)格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時使用大小寫是非常不好的習(xí)慣。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5 屬性值可以不用引號。
屬性值我們推薦使用引號:
如果屬性值含有空格需要使用引號。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號易于閱讀。
以下實例屬性值包含空格，沒有使用引號，所以不能起作用:
<table class=table striped>
以下使用了雙引號，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸，在加載時可以預(yù)留指定空間，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器，左右滾動代碼是不方便的。
每行代碼盡量少于 80 個字符。
空行和縮進(jìn)
不要無緣無故添加空行。
為每個邏輯功能塊添加空行，這樣更易于閱讀。
縮進(jìn)使用兩個空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進(jìn)。
不必要的空行和縮進(jìn):
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想,
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。</p>
</body>
表格實例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表實例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。
以下 HTML5 文檔是正確的:
實例:
<!DOCTYPE html>
<head>
<title>頁面標(biāo)題</title>
</head>
<h1>這是一個標(biāo)題</h1>
<p>這是一個段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文檔的根元素，用于描述頁面的語言：
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會發(fā)生錯誤。
省略 <head>?
在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。
默認(rèn)情況下，瀏覽器會將 <body> 之前的內(nèi)容添加到一個默認(rèn)的 <head> 元素上。
實例
<!DOCTYPE html>
<html>
<title>頁面標(biāo)題</title>
<body>
<h1>這是一個標(biāo)題</h1>
<p>這是一個段落。</p>
</body>
</html>
嘗試一下 ?
| 現(xiàn)在省略 head 標(biāo)簽還不推薦使用。 |
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁面的主題:
<title>菜鳥教程</title>
標(biāo)題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫：
<!--
這是一個較長評論。 這是 一個較長評論。這是一個較長評論。
這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
-->
長評論第一個字符縮進(jìn)兩個空格，更易于閱讀。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進(jìn)。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結(jié)尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。
| 在逗號和分號后添加空格是常用的一個規(guī)則。 |
在 HTML 中載入 JavaScript
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個糟糕的 HTML 格式可能會導(dǎo)致 JavaScript 執(zhí)行錯誤。
以下兩個 JavaScript 語句會輸出不同結(jié)果:
實例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
訪問 JavaScript 代碼規(guī)范。
使用小寫文件名
大多 Web 服務(wù)器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。
其他 Web 服務(wù)器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫的文件名。
文件擴(kuò)展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 服務(wù)器都會把它們當(dāng)作 HTML 文件來處理。
區(qū)別在于：
.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個字符。
在 Unix 系統(tǒng)中后綴沒有特別限制，一般用 .html。
技術(shù)上區(qū)別
如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是，通常服務(wù)器可以設(shè)置多個默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。
不管怎樣，HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
譯自： 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 網(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 文件，以下是蝙蝠俠想在他的情書中寫的第一段。
“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)容。
在上面，你將看到文本覆蓋屏幕的整個寬度。
我們不希望這樣。沒有人想要閱讀這么長的行。讓我們設(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> 放在單獨的行中，文本內(nèi)容用一個制表符縮進(jìn)。像這樣設(shè)置代碼使其更具可讀性。
接下來，蝙蝠俠希望列出他所欽佩的人的一些優(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ù)制代碼之前，注意差異部分：
讓我們保存文件并刷新瀏覽器以查看結(jié)果：
你會立即注意到在每個列表項之前顯示了重點標(biāo)志。我們現(xiàn)在不需要在每個列表項之前寫 “-”。
經(jīng)過仔細(xì)檢查，你會注意到最后一行超出 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)容進(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)在看起來簡潔多了。
到目前為止，蝙蝠俠對結(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>
保存，刷新。
我們的情書尚未完成，但在繼續(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é)果。
太棒了！這讓蝙蝠俠的臉露出了羞澀的微笑 :)。
現(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>
你可以通過三種方式設(shè)置樣式或定義 HTML 元素的外觀：
讓我們來看看如何定義 <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 文檔中包含外部資源，它主要用于鏈接樣式表。我們使用的三個屬性是：
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)保持不變。
我們的情書已經(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)容。
我發(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é)習(xí)了以下新概念：
我們學(xué)習(xí)了以下 HTML 標(biāo)簽：
我們學(xué)習(xí)了以下 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中國 榮譽(yù)推出
TML: HyperText Markup Language 超文本標(biāo)記語言
HTML代碼不區(qū)分大小寫, 包括HTML標(biāo)記、屬性、屬性值都不區(qū)分大小寫;
任何空格或回車鍵在代碼中都無效，插入空格或回車有專用的標(biāo)記，分別是 、<br>
HTML標(biāo)記中不要有空格，否則瀏覽器可能無法識別。
如何添加注釋(comment:評論;注釋)
<!-- -->
<comment></comment>
<!-- --> 不能留有空格字符集
<meta http-equiv="Content-Type" content="text/html;charset=#"/><base target="_blank">可以將a鏈接的默認(rèn)屬性設(shè)置為_blank屬性
單個標(biāo)簽要有最好有結(jié)束符(可以沒有結(jié)束符)
<br/> <img src="" width="" /> 便于兼容XHTML(XHTML必須要有結(jié)束符)
HTML標(biāo)簽的屬性值可以有引號,可以沒有引號,為了提高代碼的可讀性,推薦使用引號(單引號和雙引號)，盡管屬性值是整數(shù)，也推薦加上引號。
<marquee behavior="slide"></marquee> 便于兼容XHTML(XHTML必須要有引號)
<marquee behavior=slide></marquee>經(jīng)過測試,以上程序都可以正確運(yùn)行
HTML標(biāo)簽涉及到的顏色值格式:
color_name 規(guī)定顏色值為顏色名稱的文本顏色(比如 "red")。
hex_number 規(guī)定顏色值為十六進(jìn)制值的文本顏色(比如 "#ff0000")。
rgb_number 規(guī)定顏色值為 rgb 代碼的文本顏色(比如 "rgb(255,0,0)")。
transparent 透明色 color:transparent
rgba(紅0-255,綠0-255,藍(lán)0-255,透明度0-1)
opacity屬性: 就是葫蘆娃兄弟老六(技能包隱身)
css:
div{opacity:0.1} /*取值為0-1*/英文(顏色值)不區(qū)分大小寫
HTML中顏色值：采用十六進(jìn)制兼容性最好(十六進(jìn)制顯示顏色效果最佳)
CSS中顏色值：不存在兼容性
紅色 #FF0000
綠色 #00FF00
藍(lán)色 #0000FF
黑色： #000000
灰色 #CCCCCC
白色 #FFFFFF
青色 #00FFFF
洋紅 #FF00FF
黃色 #FFFF00
請問后綴 html 和 htm 有什么區(qū)別?
答: 1. 如果一個網(wǎng)站有 index.html和index.htm，默認(rèn)情況下，優(yōu)先訪問.html
2. htm后綴是為了兼容以前的DOS系統(tǒng)8.3的命名規(guī)范
XHTML與HTML之間的關(guān)系?
XHTML是EXtensible HyperText Markup Language的英文縮寫,即可擴(kuò)展的超文本標(biāo)記語言.
XHTML語言是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行.
XHTML是用來代替HTML的, 是2000年w3c公布發(fā)行的.
XHTML是一種增強(qiáng)了的HTML,它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求.
XHTML是基于XML的應(yīng)用.
XHTML更簡潔更嚴(yán)謹(jǐn).
XHTML也可以說就是HTML一個升級版本.(w3c描述它為'HTML 4.01')
XHTML是大小寫敏感的,XHTML與HTML是不一樣的;HTML不區(qū)分大小寫,標(biāo)準(zhǔn)的XHTML標(biāo)簽應(yīng)該使用小寫.
XHTML屬性值必須使用引號,而HTML屬性值可用引號,可不要引號
XHTML屬性不能簡寫：如checked必須寫成checked="checked"
單標(biāo)記<br>, XHTML必須有結(jié)束符<br/>,而HTML可以使用<br>,也可以使用<br/>
除此之外XHTML和HTML基本相同.
網(wǎng)頁寬度設(shè)置多少為最佳?
960px
target屬性值理解
_self 在當(dāng)前窗口中打開鏈接文件,是默認(rèn)值
_blank 開啟一個新的窗口打開鏈接文件
_parent 在父級窗口中打開文件,常用于框架頁面
_top 在頂層窗口中打開文件,常用語框架頁面
字符集：
charset=utf-8
Gb2312 簡單中文字符集, 最常用的中文字符
Gbk 簡繁體字符集, 中文字符集
Big5 繁體字符集, 臺灣等等
Utf-8 世界性語言的字符集
ANSI編碼格式編碼格式的擴(kuò)展字符集有g(shù)b2312和gbk
單位問題：
HTML屬性值數(shù)值型的一般不帶單位, CSS必須帶單位;
強(qiáng)制刷新
ctrl+F5
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
