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

譯自： 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í)，你聽(tīng)到一個(gè)來(lái)自通風(fēng)口的低沉聲音：“嘿，我是蝙蝠俠。”

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

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

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

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

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

那么，讓我們來(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ì)在這里。

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

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

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

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

HTML 中的段落

我們有一個(gè)空的 HTML 文件，以下是蝙蝠俠想在他的情書(shū)中寫(xiě)的第一段。

“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)換行。

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

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

我們的第一段已準(zhǔn)備就緒，但這不是在 HTML 中編寫(xiě)段落的推薦方法。我們有一種特定的方法讓瀏覽器知道一個(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>中編寫(xiě)段落，你創(chuàng)建了一個(gè) HTML 元素。一個(gè)網(wǎng)頁(yè)就是 HTML 元素的集合。

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

“style” 屬性

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

我們不希望這樣。沒(méi)有人想要閱讀這么長(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)沒(méi)有顯示換行符。在代碼中我們?cè)谛碌囊恍兄芯帉?xiě)列表項(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)就像我們想要的那樣！

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

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

我們使用純文本編寫(xiě)列表，但是有兩個(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> 之間
我們沒(méi)有像 <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)之前寫(xiě) “-”。

經(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> 元素之外。

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

讓我們用 <div> 元素包裝整個(gè)情書(shū)，并為其賦予寬度：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é)果很高興，他希望在情書(shū)上標(biāo)題。他想寫(xiě)一個(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 中的圖像

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

并沒(méi)有。

所以，讓我們?cè)谇闀?shū)中添加一個(gè)蝙蝠俠標(biāo)志。

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

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

在我們深入編碼之前，從這里下載蝙蝠俠標(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)簽，所以我們不需要寫(xiě) </img>。在 src 屬性中，我們給出了圖像文件的名稱。這個(gè)名稱應(yīng)與圖像名稱完全相同，包括擴(kuò)展名（.jpeg）及其大小寫(xiě)。

保存并刷新，查看結(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)他的愛(ài)。他有以下文本供你用 HTML 編寫(xiě)：

“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ì)問(wèn)蝙蝠俠：“等等，這是給誰(shuí)的？”蝙蝠俠說(shuō)：

“這是給超人的。”

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

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

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

<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)編寫(xiě)樣式。這是我們迄今為止使用的，但這不是一個(gè)好的實(shí)踐。
嵌入式樣式：我們?cè)谟?<style> 和 </style> 包裹的 “style” 元素中編寫(xiě)所有樣式。
鏈接樣式表：我們?cè)诰哂?.css 擴(kuò)展名的單獨(dú)文件中編寫(xiě)所有元素的樣式。此文件稱為樣式表。

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

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

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

div{
width:550px;
}

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

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

讓我們從 <div> 和 <img> 元素中刪除內(nèi)聯(lián)樣式，將其寫(xiě)入 <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è)大問(wèn)題，如果我們的 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 文件中寫(xiě) <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é)尾沒(méi)有 </link>。因此，<link> 也是一個(gè)自閉合的標(biāo)簽。

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

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

可惜沒(méi)有那么簡(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ù)

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

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

那么，瀏覽器如何知道你使用哪個(gè)版本的 HTML 來(lái)編寫(xiě)頁(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” 而不是文件路徑。

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

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

我們學(xué)到了什么

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

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

作者簡(jiǎn)介：開(kāi)發(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)擊“了解更多”可訪問(wèn)文內(nèi)鏈接

作者 | Kevin Vogel 譯者 | 彎月

出品 | CSDN（ID：CSDNnews）

最近，微軟宣布了一項(xiàng)舉世矚目的提案，表示他們將支持 JavaScript 和 TypeScript 的進(jìn)一步開(kāi)發(fā)，該提案幾乎在一夜之間動(dòng)搖了編程語(yǔ)言的基礎(chǔ)。

截止到目前為止，該提案還只是一個(gè)處于 Stage 0 階段的建議，但微軟宣布他們會(huì)按時(shí)將該提案提交給 TC39 委員會(huì)。如果這個(gè)提案被采納并付諸實(shí)施，那么必將在 JavaScript 和 TypeScript 界引發(fā)前所未有的動(dòng)蕩。

JavaScript 的歷史回顧

回溯 20 年前，與現(xiàn)在的 Web 開(kāi)發(fā)做比較，你就會(huì)發(fā)現(xiàn)，雖然 JavaScript 作為一種編程語(yǔ)言已經(jīng)有了很大的發(fā)展，但圍繞 JavaScript 的生態(tài)系統(tǒng)則取得了更大的進(jìn)步。

語(yǔ)言本身與生態(tài)系統(tǒng)的發(fā)展是相輔相成的，一方面在過(guò)去的二十年里 JavaScript 社區(qū)變得越來(lái)越專業(yè)，而另一方面互聯(lián)網(wǎng)本身在現(xiàn)實(shí)生活中的重要性也變得越來(lái)越突出。作為開(kāi)發(fā)人員，我們無(wú)法控制用戶使用哪些瀏覽器。

這意味著用戶只有定期更新瀏覽器才能使用 JavaScript 的現(xiàn)代功能。雖然對(duì)于個(gè)人用戶來(lái)說(shuō)，定期更新并不是難事，因?yàn)槿缃裨S多瀏覽器會(huì)自動(dòng)更新而無(wú)需用戶的指示，但對(duì)于企業(yè)卻并非如此。

各個(gè)公司對(duì)于軟件和軟件更新有著嚴(yán)格的規(guī)定。許多公司都會(huì)使用過(guò)時(shí)的軟件或?yàn)g覽器上網(wǎng)。這是一個(gè)基本問(wèn)題，甚至?xí)绊懙?HTML 和 CSS，此外，由于編程語(yǔ)言必須由各個(gè)瀏覽器解釋，因此也會(huì)對(duì)瀏覽器產(chǎn)生嚴(yán)重的依賴。

轉(zhuǎn)譯與捆綁

作為一名 Web 開(kāi)發(fā)人員，你必須在兩種思路之間做出選擇：第一，依賴現(xiàn)代 JavaScript、CSS 或 HTML，這種方式不僅可以簡(jiǎn)化編程，而且也可以提高易用性；第二，不使用這些現(xiàn)代功能，因?yàn)椴⒎撬腥硕际褂米钚碌臑g覽器，因此采用一些現(xiàn)代功能可能會(huì)導(dǎo)致一定數(shù)量的用戶無(wú)法正常使用。

除此之外，幾十年來(lái)我們還沒(méi)有一個(gè)像樣的 JavaScript 模塊系統(tǒng)。Node.js 從 CommonJS 借鑒了模塊系統(tǒng)，但僅限于服務(wù)器。

在最近的很長(zhǎng)一段時(shí)間里，瀏覽器都沒(méi)有出現(xiàn)太大的提升，于是捆綁器與轉(zhuǎn)譯器應(yīng)運(yùn)而生。盡管我們使用的是 JIT（即時(shí)）編譯的編程語(yǔ)言，但必須經(jīng)過(guò)一個(gè)復(fù)雜的構(gòu)建過(guò)程，將源代碼轉(zhuǎn)換為實(shí)際代碼，然后才能在瀏覽器中執(zhí)行和解釋。

這是大約十年前的情況。

TypeScript 的崛起

微軟推出 TypeScript 也正好是在十年前。微軟認(rèn)為，如果在部署代碼之前，還需要一個(gè)轉(zhuǎn)譯器來(lái)轉(zhuǎn)換 JavaScript 代碼，那么在這個(gè)構(gòu)建過(guò)程中再添加一個(gè)步驟也沒(méi)什么大不了。

作為回報(bào)，你可以獲得一個(gè)良好的轉(zhuǎn)譯器，將現(xiàn)代 JavaScript 轉(zhuǎn)換成原始的 JavaScript。此外，TypeScript 是一個(gè)靜態(tài)類型系統(tǒng)，它不僅提高了 JavaScript 的可擴(kuò)展性，而且還提出了一些新概念，并為提高 JavaScript 的開(kāi)發(fā)效率做出了重大貢獻(xiàn)。

因此，TypeScript 迅速崛起，并成為當(dāng)今企業(yè) JavaScript 開(kāi)發(fā)的標(biāo)準(zhǔn)。

在過(guò)去的十年里，整個(gè)世界也發(fā)生了變化。雖然仍有一部分瀏覽器不會(huì)自動(dòng)更新，而用戶使用的瀏覽器也不是最新版本，但這類用戶的比例已經(jīng)大幅下降了。

這意味著，你只需關(guān)注“常青瀏覽器”（指自動(dòng)升級(jí)到最新版本的瀏覽器），那么非常有希望擺脫轉(zhuǎn)譯器。而且現(xiàn)在我們還可以使用 ESM（ECMAScript 2015 模塊），這是一個(gè)基于 JavaScript 的原生模塊系統(tǒng)，既可用于服務(wù)器端，還可用于客戶端。

也就是說(shuō)，我們不再需要捆綁器，至少?gòu)募夹g(shù)角度來(lái)看是這樣。捆綁器只是構(gòu)建過(guò)程中的另一個(gè)步驟，為的是優(yōu)化 HTTP 請(qǐng)求，這樣就只需從服務(wù)器加載幾個(gè)大文件，而小文件的數(shù)量就大幅縮減了。

TypeScript 將成為一個(gè)障礙？

在這種情況下，構(gòu)建過(guò)程將變得越來(lái)越簡(jiǎn)化，甚至根本不需要。微軟希望將來(lái)只有一個(gè)必要的工具會(huì)保留下來(lái)，那就是 TypeScript 編譯器，因?yàn)?Web 瀏覽器和其他 JavaScript 運(yùn)行時(shí)環(huán)境無(wú)法直接運(yùn)行 TypeScript。

這也就是說(shuō)，屆時(shí)微軟的 TypeScript 會(huì)從一個(gè)非常實(shí)用的工具突然變成一個(gè)很討人厭的東西。然而微軟表示，他們不想成為障礙，相反，他們希望給予開(kāi)發(fā)人員更多啟發(fā)。

微軟擔(dān)心的結(jié)果是，JavaScript 可能會(huì)像 20 年前一樣，朝著高速、直接和高效的方向發(fā)展，因?yàn)槿绻藗儾辉偈褂?TypeScript，那么也就不再需要轉(zhuǎn)譯器了。

將 TypeScript 集成到瀏覽器

最簡(jiǎn)單的解決方法就是將 TypeScript 集成到 Web 瀏覽器和其他運(yùn)行時(shí)環(huán)境中，成為代替 JavaScript 的編程語(yǔ)言。從理論上講，這也并非不可能。Deno（https://deno.land/）已經(jīng)在做這方面的嘗試了。

Node.js 中有一個(gè) npm 包，名叫 ts-node，它采用了與 Deno 類似的解決方案。它會(huì)在構(gòu)建/加載應(yīng)用程序時(shí)將其編譯到內(nèi)存中，就好像可以直接運(yùn)行 TypeScript，但實(shí)際上并非如此。

此外，TypeScript 語(yǔ)言本身如今也變得越來(lái)越復(fù)雜，微軟并不希望將 TypeScript 編譯器的所有功能直接集成到常見(jiàn)的 Web 瀏覽器中，因?yàn)檫@將是一項(xiàng)非常復(fù)雜的任務(wù)，需要蘋(píng)果、Google、Mozilla 等公司通力合作，整合一個(gè)新的大標(biāo)準(zhǔn)。

無(wú)論這個(gè)發(fā)展方向正確與否，微軟都希望回避，目前這個(gè)問(wèn)題的走向尚不明朗，但這項(xiàng)聲明表明這不是他們想要的結(jié)果。

中間方式：JSDoc

根據(jù)微軟最近發(fā)表的建議可以看出，他們想到了另一種不同的方式。除了（a）編寫(xiě)原始的 JavaScript ；(b) 完全切換到 TypeScript，其實(shí)還存在第三種介于二者之間的一種中間方式。

TypeScript 允許你在 JavaScript 上分析代碼，甚至可以在其中存儲(chǔ)類型，即編寫(xiě)適當(dāng)?shù)?JSDoc 注釋即可。對(duì)于某些公司來(lái)說(shuō)，這種方式不僅可以通過(guò) TypeScript 編譯器獲得類型支持，而且無(wú)需將項(xiàng)目完全遷移到 TypeScript。

這種方式最大的優(yōu)勢(shì)在于，代碼仍然是純粹的 JavaScript，不僅不需要編譯，而且只需刪除所有 JSDoc 注釋，就可以褪去 TypeScript 的外殼。我曾使用過(guò) JSDoc，不得不說(shuō)感覺(jué)更像是 TypeScript 的廉價(jià)替代品。

需要編寫(xiě)的代碼更多，而且非常繁瑣，幾乎無(wú)法實(shí)現(xiàn)更復(fù)雜的類型，但總比沒(méi)有類型好。

建議：將 TypeScript 作為注釋

所以微軟的建議是，TypeScript 沿用 JSDoc 的套路，這樣就不必編譯 TypeScript 了。

類型注釋和關(guān)鍵字（例如“public”或“private”）將成為注釋，在執(zhí)行 JavaScript 代碼時(shí)會(huì)被忽略。這意味著，你可以編寫(xiě) TypeScript，而無(wú)需將 TypeScript 編譯成 JavaScript 代碼。

但是，你仍然可以使用 TypeScript 編譯器來(lái)觸發(fā)類型檢查，只不過(guò)不必編譯代碼來(lái)運(yùn)行。而“d.ts”文件將會(huì)被淘汰，因?yàn)?JavaScript 代碼中也包含這些類型。

這樣，TypeScript 編譯器就會(huì)變成一個(gè)可選的插件，就像 ESLint 之類的 linter，所有類型注釋都不會(huì)包含在執(zhí)行的代碼中。

因此，該提案被稱為“將 TypeScript 作為注釋”。

將 TypeScript 作為注釋的缺點(diǎn)

這個(gè)思路聽(tīng)起來(lái)不錯(cuò)，但我看到了一些缺點(diǎn)。

我們不要忘記，TypeScript 不僅包含函數(shù)參數(shù)的原始類型，而且還有接口、聯(lián)合類型、類型關(guān)鍵字、非常復(fù)雜的類型和嵌套類型、“as”關(guān)鍵字、公共/私有/受保護(hù)關(guān)鍵字、泛型類型等等。

代碼本身就包含一些注釋，而且還包含兩種類型的注釋（單行注釋和塊注釋），如今再加上 TypeScript，那么我們就必須不使用多種類型的注釋來(lái)表達(dá)關(guān)鍵字。

所以，我不得不思考這是不是一個(gè)好方法，因?yàn)槲液芟矚g當(dāng)前的解決方案，即使它并不完美。畢竟，人們選擇 TypeScript 而不是使用 Flow 或 JSDoc 等替代方案是有原因的。TypeScript 比這些替代方案更受歡迎也是有其背后的原因的。

此外，我們編寫(xiě)代碼時(shí)無(wú)法使用枚舉，因?yàn)樗鼈兪侵岛皖愋偷幕旌象w。還有命名空間、TypeScript 的 JSX 支持、參數(shù)屬性等，這些都無(wú)法使用。所以如果你想使用枚舉，就必須編譯代碼；如果不想編譯，就不能使用枚舉。

這個(gè)建議并沒(méi)有真正分割 JavaScript 與 TypeScript。我非常懷疑這是否應(yīng)該成為 TypeScript 未來(lái)的發(fā)展方向。

在我看來(lái)，這種方式會(huì)導(dǎo)致 TypeScript 開(kāi)發(fā)人員陷入混亂，并形成兩個(gè)陣營(yíng)。一些人堅(jiān)持使用當(dāng)前版本的 TypeScript，而另一些人將轉(zhuǎn)戰(zhàn)“將 TypeScript 作為注釋”。

最后的想法

在我看來(lái)，TypeScript 的發(fā)展有兩個(gè)方向：要么保持完整性，盡管所有代碼都需要編譯；要么給 JavaScript 創(chuàng)建一個(gè)可選的靜態(tài)類型系統(tǒng)。

這意味著，TypeScript 會(huì)成為新一代的 JavaScript，但微軟已經(jīng)否決了這個(gè)思路。因此，我的結(jié)論是，TypeScript 不應(yīng)該通過(guò)這種方式從根本上發(fā)生改變，尤其是不應(yīng)該以微軟目前提議或支持的方式。

未來(lái)幾個(gè)月或幾年內(nèi) TypeScript 究竟會(huì)如何發(fā)展，就讓我們拭目以待吧。

原文鏈接：https://betterprogramming.pub/how-microsoft-wants-to-destroy-typescript-1f1a53b18de6

END

《新程序員001-004》全面上市，對(duì)話世界級(jí)大師，報(bào)道中國(guó)IT行業(yè)創(chuàng)新創(chuàng)造

成就一億技術(shù)人

片來(lái)源：攝圖網(wǎng)

一、在線學(xué)習(xí)平臺(tái)Udemy遞交IPO申請(qǐng)，2020年?duì)I收4.30億美元

10月5日，在線學(xué)習(xí)平臺(tái)Udemy向納斯達(dá)克提交招股書(shū)，股票代碼擬為“UDMY”，主承銷商為摩根士丹利和摩根大通。

Udemy成立于2009年，總部位于美國(guó)舊金山，是一家為學(xué)生、企業(yè)和政府提供在線學(xué)習(xí)平臺(tái)。據(jù)介紹，Udemy為超過(guò)4400萬(wàn)用戶提供了超過(guò)18萬(wàn)種課程，涵蓋75種語(yǔ)言和180多個(gè)國(guó)家及地區(qū)。

原文鏈接：https://www.jiemodui.com/N/128704.html

二、弘成立業(yè)更新招股書(shū)，2021年上半年?duì)I收2.32億元

近日，北京弘成立業(yè)科技股份有限公司（以下簡(jiǎn)稱“弘成立業(yè)”）向深交所創(chuàng)業(yè)板更新招股書(shū)，擬發(fā)行7080萬(wàn)股，占發(fā)行后總股本比例不低于10%。9月16日，因發(fā)行人及保薦人更新財(cái)務(wù)資料，弘成立業(yè)主動(dòng)申請(qǐng)中止發(fā)行上市審核程序，并于9月30日完成財(cái)務(wù)資料更新，恢復(fù)發(fā)行上市審核。

原文鏈接：https://www.jiemodui.com/N/128700.html

三、蘋(píng)果推出兒童編程指南，擴(kuò)大編程學(xué)習(xí)覆蓋年齡段

蘋(píng)果官網(wǎng)10月5日消息，蘋(píng)果為小學(xué)生與教育工作者推出新的“人人能編程：早期學(xué)習(xí)者”活動(dòng)指南，實(shí)現(xiàn)編程課程資源范圍從幼兒園到大學(xué)的覆蓋。

編程學(xué)習(xí)是蘋(píng)果切入教育的途徑之一。蘋(píng)果曾于2017年面向世界各地高校和學(xué)生發(fā)起“人人能編程”計(jì)劃，該計(jì)劃依托其推出的開(kāi)源編程語(yǔ)言Swift開(kāi)發(fā)App。2019年，蘋(píng)果推出經(jīng)重新設(shè)計(jì)的“人人能編程”課程，讓更多小學(xué)生和中學(xué)生進(jìn)入編程世界。在全球逾5000所學(xué)校中，已有上百萬(wàn)名學(xué)生參加“人人能編程”課程。

原文鏈接：https://www.jiemodui.com/N/128689.html

四、天津?yàn)I海新區(qū)明確“營(yíng)轉(zhuǎn)非”認(rèn)定標(biāo)準(zhǔn)

據(jù)“濱海發(fā)布”微信公眾號(hào)消息，近日，天津?yàn)I海新區(qū)召開(kāi)學(xué)科類培訓(xùn)機(jī)構(gòu)“營(yíng)轉(zhuǎn)非”專題培訓(xùn)會(huì)，明確學(xué)科類培訓(xùn)機(jī)構(gòu)進(jìn)行“營(yíng)轉(zhuǎn)非”資格認(rèn)定的標(biāo)準(zhǔn)，要求機(jī)構(gòu)在消課過(guò)程中，有家長(zhǎng)要求退費(fèi)要無(wú)條件退費(fèi)，不能產(chǎn)生退費(fèi)糾紛。

原文鏈接：https://www.jiemodui.com/N/128697.html

本文圖文均來(lái)源于芥末堆，如有侵權(quán)，請(qǐng)與我們聯(lián)系。

在線咨詢

上一篇：表單標(biāo)簽對(duì)齊方式如何選？
下一篇：CSS盒子（Box）模型入門

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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