時(shí)間：2023-07-03 08:51:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-03 08:51:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
編寫(xiě)你的第一行 HTML 代碼，來(lái)幫助蝙蝠俠寫(xiě)一封情書(shū)：在一個(gè)美好的夜晚，你的肚子拒絕消化你在晚餐吃的大塊披薩，所以你不得不在睡夢(mèng)中沖進(jìn)洗手間。
在線咨詢
ctrl+n 創(chuàng)建一個(gè)新文件，按下 ctrl+s 保存文件。切換到 “Batman’s Love Letter” 文件夾并將其命名為 “l(fā)oveletter.html”，然后單擊保存。<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 元素的集合。<p> 是開(kāi)始標(biāo)簽，</p> 是結(jié)束標(biāo)簽，“p” 是標(biāo)簽名稱。元素開(kāi)始和結(jié)束標(biāo)簽之間的文本是元素的內(nèi)容。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é)束。<p> 和 </p> 放在單獨(dú)的行中，文本內(nèi)容用一個(gè)制表符縮進(jìn)。像這樣設(shè)置代碼使其更具可讀性。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 JusticeI have learned a lot from you. You have occupied a special place in my heart over time.這看起來(lái)很簡(jiǎn)單。</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>保存并刷新瀏覽器。<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>保存并刷新：</br>。有些標(biāo)簽不需要結(jié)束標(biāo)簽（它們被稱為自閉合標(biāo)簽）。<br>，但第二個(gè)段落仍然是從一個(gè)新行開(kāi)始，這是因?yàn)?<p>元素會(huì)自動(dòng)插入換行符。<ul> and <li>。<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)顯示在新行中<li> 和 </li> 之間<ul> 和 </ul> 之間<p> 元素那樣定義 <ul> 元素的寬度。這是因?yàn)?<ul> 是 <p> 的子節(jié)點(diǎn)，<p> 已經(jīng)被約束到 550px，所以 <ul> 不會(huì)超出這個(gè)范圍。<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> 元素之外。<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)潔多了。<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 標(biāo)簽來(lái)添加標(biāo)題，<h1> 是最大的標(biāo)題和最主要的標(biāo)題，<h6> 是最小的標(biāo)題。<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>保存，刷新。<img> 標(biāo)簽讓瀏覽器知道我們需要加載的圖像，而不是單擊菜單。我們?cè)?src屬性中寫(xiě)入文件的位置和名稱。如果圖像在項(xiàng)目根目錄中，我們可以簡(jiǎn)單地在 src 屬性中寫(xiě)入圖像文件的名稱。<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ě)。<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。<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>style 屬性來(lái)編寫(xiě)樣式。這是我們迄今為止使用的，但這不是一個(gè)好的實(shí)踐。<style> 和 </style> 包裹的 “style” 元素中編寫(xiě)所有樣式。<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è)選擇器。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)保持不變。<div> 和 <img> 元素該怎么辦？這樣我們?cè)?<style> 元素中為 div 和 img 定義的樣式就會(huì)應(yīng)用于頁(yè)面上的每個(gè) div 和 img。id 屬性為元素賦予 id 的方法：<div id="letter-container">以下是如何在嵌入式樣式中將此 id 用作選擇器：#letter-container{ ...}注意 # 符號(hào)。它表示它是一個(gè) id，{...} 中的樣式應(yīng)該只應(yīng)用于具有該特定 id 的元素。略HTML 已經(jīng)準(zhǔn)備好了嵌入式樣式。<style></style> 將變得很大。這可能很快會(huì)混亂我們的主 HTML 文件。<style> 標(biāo)簽內(nèi)的內(nèi)容復(fù)制到一個(gè)新文件來(lái)使用鏈接樣式。#letter-container{ width:550px;}#header-bat-logo{ width:100%;}我們不需要在 CSS 文件中寫(xiě) <style> 和 </style>。<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：鏈接文件的類(lèi)型；對(duì)于一個(gè) CSS 文件來(lái)說(shuō)它是 “text/css”。href：超文本參考。鏈接文件的位置。</link>。因此，<link> 也是一個(gè)自閉合的標(biāo)簽。<link rel="gf" type="cute" href="girl.next.door">如果只是得到一個(gè)女朋友，那么很容易：D略“style.css” 內(nèi)容：#letter-container{ width:550px;}#header-bat-logo{ width:100%;}保存文件并刷新，瀏覽器中的輸出應(yīng)保持不變。<!DOCTYPE html>。對(duì)于舊版本的 HTML，這行不同，但你不需要了解它們，因?yàn)槲覀儾辉偈褂盟鼈兞恕?br><html></html> 標(biāo)簽內(nèi)。整個(gè)文件分為兩個(gè)主要部分：頭部在 <head></head> 里面，主體在 <body></body> 里面。這在 HTML5 中不是必須的，但由于兼容性原因，我們?nèi)匀贿@樣做。讓我們用 <Doctype>, <html>、 <head> 和 <body>更新我們的代碼：略主要內(nèi)容在 <body> 里面，元信息在 <head> 里面。所以我們把 <div> 保存在 <body> 里面并加載 <head> 里面的樣式表。<title> 標(biāo)簽來(lái)定義 HTML 文件的標(biāo)題。標(biāo)題標(biāo)簽也像鏈接標(biāo)簽一樣在 <head> 內(nèi)部。讓我們我們?cè)跇?biāo)題中加上 “Bat Letter”：略保存并刷新，你將看到在選項(xiàng)卡上顯示的是 “Bat Letter” 而不是文件路徑。<p></p>）<style>...</style> 中編寫(xiě)元素的樣式（這稱為嵌入式樣式）<link> 在單獨(dú)的文件中編寫(xiě)樣式并鏈接它（這稱為鏈接樣式表）<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)題 關(guān)鍵詞：幫助,蝙蝠,情書(shū),編寫(xiě)
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
