时间：2023-07-03 08:51:01 | 来源：网站运营
时间：2023-07-03 08:51:01 来源：网站运营
编写你的第一行 HTML 代码，来帮助蝙蝠侠写一封情书：在一个美好的夜晚，你的肚子拒绝消化你在晚餐吃的大块披萨，所以你不得不在睡梦中冲进洗手间。
在线咨询
ctrl+n 创建一个新文件，按下 ctrl+s 保存文件。切换到 “Batman’s Love Letter” 文件夹并将其命名为 “loveletter.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” 是标签名称。元素开始和结束标签之间的文本是元素的内容。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 JusticeI 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>保存并刷新浏览器。<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>。<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>在复制代码之前，注意差异部分：<br>，因为每个 <li> 会自动显示在新行中<li> 和 </li> 之间<ul> 和 </ul> 之间<p> 元素那样定义 <ul> 元素的宽度。这是因为 <ul> 是 <p> 的子节点，<p> 已经被约束到 550px，所以 <ul> 不会超出这个范围。<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>棒极了，我们的代码现在看起来简洁多了。<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>保存，刷新。<img> 标签让浏览器知道我们需要加载的图像，而不是单击菜单。我们在 src属性中写入文件的位置和名称。如果图像在项目根目录中，我们可以简单地在 src 属性中写入图像文件的名称。<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。<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>style 属性来编写样式。这是我们迄今为止使用的，但这不是一个好的实践。<style> 和 </style> 包裹的 “style” 元素中编写所有样式。<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>保存并刷新，结果应保持不变。<div> 和 <img> 元素该怎么办？这样我们在 <style> 元素中为 div 和 img 定义的样式就会应用于页面上的每个 div 和 img。id 属性为元素赋予 id 的方法：<div id="letter-container">以下是如何在嵌入式样式中将此 id 用作选择器：#letter-container{ ...}注意 # 符号。它表示它是一个 id，{...} 中的样式应该只应用于具有该特定 id 的元素。略HTML 已经准备好了嵌入式样式。<style></style> 将变得很大。这可能很快会混乱我们的主 HTML 文件。<style> 标签内的内容复制到一个新文件来使用链接样式。#letter-container{ width:550px;}#header-bat-logo{ width:100%;}我们不需要在 CSS 文件中写 <style> 和 </style>。<link> 标签来将新创建的 CSS 文件链接到 HTML 文件。以下是我们如何做到这一点：<link rel="stylesheet" type="text/css" href="style.css">我们使用 <link> 元素在 HTML 文档中包含外部资源，它主要用于链接样式表。我们使用的三个属性是：rel：关系。链接文件与文档的关系。具有 .css 扩展名的文件称为样式表，因此我们保留 rel=“stylesheet”。type：链接文件的类型；对于一个 CSS 文件来说它是 “text/css”。href：超文本参考。链接文件的位置。</link>。因此，<link> 也是一个自闭合的标签。<link rel="gf" type="cute" href="girl.next.door">如果只是得到一个女朋友，那么很容易：D略“style.css” 内容：#letter-container{ width:550px;}#header-bat-logo{ width:100%;}保存文件并刷新，浏览器中的输出应保持不变。<!DOCTYPE html>。对于旧版本的 HTML，这行不同，但你不需要了解它们，因为我们不再使用它们了。<html></html> 标签内。整个文件分为两个主要部分：头部在 <head></head> 里面，主体在 <body></body> 里面。这在 HTML5 中不是必须的，但由于兼容性原因，我们仍然这样做。让我们用 <Doctype>, <html>、 <head> 和 <body>更新我们的代码：略主要内容在 <body> 里面，元信息在 <head> 里面。所以我们把 <div> 保存在 <body> 里面并加载 <head> 里面的样式表。<title> 标签来定义 HTML 文件的标题。标题标签也像链接标签一样在 <head> 内部。让我们我们在标题中加上 “Bat Letter”：略保存并刷新，你将看到在选项卡上显示的是 “Bat Letter” 而不是文件路径。<p></p>）<style>...</style> 中编写元素的样式（这称为嵌入式样式）<link> 在单独的文件中编写样式并链接它（这称为链接样式表）<p>：用于段落<br>：用于换行<ul>、<li>：显示列表<div>：用于分组我们信件的元素<h1>、<h2>：用于标题和子标题<img>：用于插入图像<strong>、<em>：用于粗体和斜体文字样式<style>：用于嵌入式样式<link>：用于包含外部样式表<html>：用于包裹整个 HTML 文档<!DOCTYPE html>：让浏览器知道我们正在使用 HTML5<head>：包裹元信息，如 <link> 和 <title><body>：用于实际显示的 HTML 页面的主体<title>：用于 HTML 页面的标题 关键词：帮助,蝙蝠,情书,编写
