蝙蝠侠一键改udid软件_对于您的第一个HTML代码，让我们帮助蝙蝠侠写一封情书...

蝙蝠侠一键改udid软件

by Kunal

由Kunal

对于您的第一个HTML代码，让我们帮助蝙蝠侠写一封情书 (For your first HTML code, let’s help Batman write a love letter)

One fine night, your stomach refuses to digest the large Pizza you had at dinner, and you have to rush to the bathroom in the middle of your sleep.

一个美好的夜晚，您的胃不肯消化您在晚餐时吃的大比萨饼，您不得不在睡梦中奔赴洗手间。

In the bathroom, while wondering why this is happening to you, you hear a heavy voice from the vent: “Hey, I am Batman.”

在浴室里，当您想知道为什么会这样时，您从通风Kong听到沉重的声音：“嘿，我是蝙蝠侠。”

What would you do?

你会怎么做？

Before you panic and stand up in middle of the critical process, Batman says, “I need your help. I am a super geek, but I don’t know HTML. I need to write my love letter in HTML — would you do it for me?”

在您惊慌失措并站在关键过程的中间之前，蝙蝠侠说：“我需要您的帮助。 我是一个超级怪胎，但是我不懂HTML。 我需要用HTML写我的情书-你愿意帮我吗？”

Who could refuse a request from Batman, right? Let’s write Batman’s love letter in HTML.

谁可以拒绝蝙蝠侠的要求，对吗？ 让我们用HTML编写蝙蝠侠的情书。

您的第一个HTML文件 (Your first HTML file)

An HTML webpage is like other files on your computer. As a .doc file opens in MS Word, a .jpg file opens in Image Viewer, and a .html file opens in your Browser.

HTML网页就像计算机上的其他文件一样。 在Microsoft Word中打开.doc文件时，在Image Viewer中打开.jpg文件，在浏览器中打开.html文件。

So, let’s create a .html file. You can do this in Notepad, or any other basic editor, but I would recommend using VS Code instead. Download and install VS Code here. It’s free, and the only Microsoft Product I love.

因此，让我们创建一个.html文件。 您可以在记事本或任何其他基本编辑器中执行此操作，但我建议您改用VS Code。 在此处下载并安装VS Code 。 它是免费的，也是我唯一喜欢的Microsoft产品。

Create a directory in your system and name it “HTML Practice” (without quotes). Inside this directory, create one more directory called “Batman’s Love Letter” (without quotes). This will be our project root directory. That means that all our files related to this project will live here.

在系统中创建一个目录，并将其命名为“ HTML Practice”(不带引号)。 在此目录中，再创建一个目录，称为“蝙蝠侠的情书”(不带引号)。 这将是我们的项目根目录。 这意味着我们与此项目相关的所有文件都将驻留在这里。

Open VS Code and press ctrl+n to create a new file and ctrl+s to save the file. Navigate to the “Batman’s Love Letter” folder and name the file “loveletter.html” and click save.

打开VS Code，然后按ctrl + n创建一个新文件，然后按ctrl + s保存该文件。 导航到“蝙蝠侠的情书”文件夹，并将文件命名为“ loveletter.html”，然后单击“保存”。

Now, if you open this file by double-clicking it from your file explorer, it will open in your default browser. I recommend using Firefox for web development, but Chrome is fine too.

现在，如果通过从文件资源管理器中双击该文件来打开它，它将在您的默认浏览器中打开。 我建议使用Firefox进行Web开发，但Chrome也可以。

Let’s relate this process to something we are already familiar with. Remember the first time you got your hands on a computer? The first thing I did was open MS Paint and draw something. You draw something in Paint and save it as an image and then you can view that image in Image Viewer. Then if you want to edit that image again, you re-open it in Paint, edit it, and save it.

让我们将此过程与我们已经熟悉的事物联系起来。 还记得您第一次使用计算机吗？ 我做的第一件事是打开MS Paint并绘制一些东西。 您在“画图”中绘制某些内容并将其另存为图像，然后可以在“图像查看器”中查看该图像。 然后，如果要再次编辑该图像，请在“画图”中将其重新打开，进行编辑并保存。

Our current process is quite similar. As we use Paint to create and edit images, we use VS Code to create and edit our HTML files. And as we use Image Viewer to view the images, we use the Browser to view our HTML pages.

我们当前的过程非常相似。 当我们使用Paint创建和编辑图像时，我们使用VS Code创建和编辑HTML文件。 当我们使用图像查看器查看图像时，我们也使用浏览器查看HTML页面。

您的第一个HTML段落 (Your first Paragraph in HTML)

We have our blank HTML file, so here’s the first paragraph Batman wants to write in his love letter

我们有空白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.”

“经过我们共同的战斗，经历了所有艰难的时刻，经历了所有的好与坏的时刻，我认为现在是时候让你知道我对你的感觉了。”

Copy the paragraph in your loveletter.html in VS Code. Enable word wrap by clicking View -> Toggle Word Wrap (alt+z).

将段落复制到VS Code中的loveletter.html中。 通过单击查看->切换自动换行(alt + z)启用自动换行。

Save and open the file in your browser. If it’s already open, click refresh on your browser.

保存并在浏览器中打开文件。 如果已打开，请在浏览器上单击刷新。

Voila! That’s your first webpage!

瞧！ 那是您的第一个网页！

Our first paragraph is ready, but this is not the recommended way of writing a paragraph in HTML. We have a specific way to let the browser know that a text is a paragraph.

我们的第一段已经准备好了，但是这不是用HTML编写段落的推荐方式。 我们有一种特定的方式让浏览器知道文本是一个段落。

If you wrap the text with <p> and </p>, then the browser will know that the text inside the <p> and </p> is a paragraph. Let’s do this:

如果用<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>

By writing the paragraph inside <p> and </p> you created an HTML element. A web page is collection of HTML elements.

通过在<p>和</p>内编写段落，您创建了一个HTML元素。 网页是HTML元素的集合。

Let’s get some of the terminologies out of the way first: <p> is the opening tag, </p> is the closing tag, and “p” is the tag name. The text inside the opening and closing tag of an element is that element’s content.

首先让我们排除一些术语： <p>是开始标记， </p>是结束标记，“ p”是标记名称。 元素的开始和结束标记内的文本就是该元素的内容。

“样式”属性 (The “style” attribute)

You will see that the text covers the entire width of the screen.

您会看到文本覆盖了屏幕的整个宽度。

We don’t want that. No one want’s to read such long lines. Let’s give a width of, say, 550px to our paragraph.

我们不想要那个。 没有人想读这么长的篇幅。 让我们为段落设置550px的宽度。

We can do that by using the element’s “style” attribute. You can define an element’s style (for example, width in our case), inside its style attribute. The following line will create an empty style attribute on a “p” element:

我们可以通过使用元素的“样式”属性来做到这一点。 您可以在元素的样式属性内定义元素的样式(例如，本例中的宽度)。 以下行将在“ p”元素上创建一个空样式属性：

<p style="">...</p>

You see that empty ""? That’s where we will define the looks of the element. Right now we want to set the width to 550px. Let’s do that:

你看到那空的""吗？ 那就是我们定义元素外观的地方。 现在，我们要将宽度设置为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>

We set the “width” property to 550px separated by a colon “:” and ended by a semicolon “;”.

我们将“ width”属性设置为550px，以冒号“：”分隔，以分号“;”结尾。

Also, notice how we put the <p> and </p> in separate lines and the text content indented with one tab. Styling your code like this makes it more readable.

另外，请注意我们如何将<p>和</p>放在单独的行中，以及用一个选项卡缩进的文本内容。 像这样对代码进行样式化使其更具可读性。

HTML中的列表 (Lists in HTML)

Next, Batman wants to list some of the virtues of the person that he admires, like this:

接下来，蝙蝠侠想列出他所敬佩的人的一些美德，例如：

“ 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.”

“你用光完成了我的黑暗。 我喜欢：-在最坏的情况下表现良好的方式-处理情绪困难的情况的方式-看待正义的方式我从中学到了很多东西。 随着时间的流逝，您在我心中占据了特殊的位置。”

This looks simple.

这看起来很简单。

Let’s go ahead and copy the required text below the </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:
  - 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>

Save and refresh your browser.

保存并刷新浏览器。

Woah! What happened here, where is our list?

哇！ 这里发生了什么，我们的清单在哪里？

If you look closely, you will observe that line breaks are not displayed. We wrote the list items in new lines in our code, but those are displayed in a single line in the browser.

如果仔细观察，将会发现没有显示换行符。 我们在代码的新行中写入了列表项，但这些列表项在浏览器中显示为一行。

If you want to insert a line break in HTML (newline) you have to mention it using <br>. Let’s use <br> and see how it looks:

如果要在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>

Save and refresh:

保存并刷新：

Okay, now it looks the way we want it to.

好的，现在看起来就像我们想要的那样。

Also, notice that we didn’t write a </br>. Some tags don’t need a closing tag, (and they’re called self-closing tags).

另外，请注意，我们没有编写</br> 。 有些标签不需要结束标签(它们被称为自动关闭标签)。

One more thing: we didn’t use a <br> between the two paragraphs, but still the second paragraph starts from a new line. That’s because the “p” element automatically inserts a line break.

还有一件事：我们在两段之间没有使用<br> ，但是第二段仍然从新行开始。 这是因为“ p”元素会自动插入换行符。

We wrote our list using plain text, but there are two tags we can use for this same purpose: <ul> and <li>.

我们使用纯文本编写了列表，但是可以出于相同的目的使用两个标签： <ul>和<li> 。

To get the naming out of the way: ul stands for Unordered List, and li stands for List Item. Let’s use these to display our list:

为了使命名更简单：ul代表无序列表，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>

Before copying the code, notice the differences we made:

复制代码之前，请注意我们所做的区别：

• We removed all the <br>, since each <li> automatically displays in new line

  我们删除了所有<br> ，因为每个<li>自动显示在新行中

• We wrapped the individual list items between <li> and </li>.

  我们将各个列表项包装在<li>和</li> 。

• We wrapped the collection of all the list items between the <ul> and </ul>

  我们将所有列表项的集合包装在<ul>和</ul>

• We didn’t define the width of the “ul” element as we were doing with the “p” element. This is because “ul” is a child of “p” and “p” is already constrained to 550px, so “ul” won’t go beyond that.
  我们没有像使用“ p”元素那样定义“ ul”元素的宽度。 这是因为“ ul”是“ p”的子代，而“ p”已经被限制为550px，因此“ ul”不会超出此范围。

Let’s save the file and refresh the browser to see the results:

让我们保存文件并刷新浏览器以查看结果：

You will instantly notice that we get bullet points displayed before each list item. We don’t need to write that “-” before each list item now.

您会立即注意到，我们在每个列表项之前显示了项目符号。 现在，我们无需在每个列表项之前都写“-”。

On careful inspection, you will notice that the last line goes beyond 550px width. Why is that? Because a “ul” element is not allowed inside a “p” element in HTML. Let’s put the first and last lines in separate “p” elements:

经过仔细检查，您会发现最后一行超出了550px宽度。 这是为什么？ 因为HTML中的“ p”元素内不允许使用“ ul”元素。 让我们将第一行和最后一行放在单独的“ 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>

Save and reload.

保存并重新加载。

Notice that this time we defined the width of the “ul” element also. That’s because we have now moved our “ul” element out of the “p” element.

注意，这次我们也定义了“ ul”元素的宽度。 这是因为我们现在已经将“ ul”元素从“ p”元素中移出了。

Defining the width of all the elements of our letter can become cumbersome. We have a specific element for this purpose: the “div” element. A “div” element is a generic container which is used to group content so it can be easily styled.

定义信件中所有元素的宽度可能很麻烦。 为此，我们有一个特定的元素：“ div”元素。 “ div”元素是用于对内容进行分组的通用容器，因此可以轻松设置其样式。

Let’s wrap our entire letter with a div element and give width:550px to that div element:

让我们用div元素包装整个字母，然后为该div元素提供width：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>

Great. Our code looks much cleaner now.

大。 现在，我们的代码看起来更简洁了。

HTML中的标题 (Headings in HTML)

Batman is quite happy looking at the results so far, and he wants a heading on the letter. He wants to make the heading: “Bat Letter”. Of course, you saw this name coming already, didn’t you? :D

蝙蝠侠很高兴看到目前为止的结果，他希望标题中的标题。 他想输入标题：“蝙蝠字母”。 当然，您已经看到这个名字了，不是吗？ ：D

You can add heading using ht, h2, h3, h4, h5, and h6 tags, h1 is the biggest and main heading and h6 the smallest one.

您可以使用ht，h2，h3，h4，h5和h6标签添加标题，h1是最大标题，主标题，h6是最小标题。

Let’s make the main heading using h1 and a subheading before second paragraph:

让我们使用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>

Save, and reload.

保存并重新加载。

HTML中的图像 (Images in HTML)

Our letter is not complete yet, but before proceeding, one big thing is missing — a Bat logo. Have you ever seen anything Batman owns that doesn’t have a Bat logo?

我们的信尚未完成，但是在进行下一步之前，缺少一件大事—蝙蝠徽标。 您有没有看过蝙蝠侠拥有的没有蝙蝠徽标的东西？

Nope.

不。

So, let’s add a Bat logo to our letter.

因此，让我们在信件中添加蝙蝠徽标。

Including an image in HTML is like including an image in a Word file. In MS Word you go to menu -> insert -> image -> then navigate to the location of the image -> select the image -> click on insert.

在HTML中包含图像就像在Word文件中包含图像。 在MS Word中，您转到菜单->插入->图片->然后导航到图片的位置->选择图片->单击插入。

In HTML, instead of clicking on the menu, we use <img> tag to let the browser know that we need to load an image. We write the location and name of the file inside the “src” attribute. If the image is in the project root directory, we can simply write the name of the image file in the src attribute.

在HTML中，我们使用<img>标记而不是单击菜单，以使浏览器知道我们需要加载图像。 我们在“ src”属性中写入文件的位置和名称。 如果图像在项目根目录中，我们可以简单地在src属性中写入图像文件的名称。

Before we dive into coding this, download this Bat logo from here. You might want to crop the extra white space in the image. Copy the image in your project root directory and rename it “bat-logo.jpeg”.

在我们进行编码之前，请从此处下载该Bat徽标。 您可能要裁剪图像中多余的空白。 将图像复制到项目的根目录中，并将其重命名为“ 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>

We included the img tag on line 3. This tag is also a self-closing tag, so we don’t need to write </img>. In the src attribute, we give the name of the image file. This name should be exactly same as your image’s name, including the extension (.jpeg) and its case.

我们在第3行添加了img标签。该标签也是一个自闭合标签，因此我们不需要编写</img> 。 在src属性中，我们提供图像文件的名称。 该名称应与图像的名称完全相同 ，包括扩展名(.jpeg)及其大小写。

Save and refresh to see the result.

保存并刷新以查看结果。

Damn! What just happened?

该死的！ 刚才发生了什么？

When you include an image using the img tag, by default the image will be displayed in its original resolution. In our case, the image is much wider than 550px. Let’s define its width using the style attribute:

当您使用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>

You will notice that this time we defined width with “%” instead of “px”. When we define a width in “%” it will occupy that % of the parent element’s width. So, 100% of 550px will give us 550px.

您会注意到，这次我们将宽度定义为“％”，而不是“ px”。 当我们以“％”定义宽度时，它将占据父元素宽度的那个百分比。 因此，550px的100％将给我们550px。

Save and refresh to see the results.

保存并刷新以查看结果。

Fantastic! This brings a timid smile to Batman’s face :)

太棒了！ 这给蝙蝠侠的脸带来了一个胆小的微笑：)

HTML中的粗体和斜体 (Bold and Italic in HTML)

Now Batman wants to confess his love in the last few paragraphs. He has this text for you to write in HTML:

现在，蝙蝠侠想在最后几段承认自己的爱。 他有以下文本供您用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.”

我没有表现出我的情感，但我认为面具后面的那个男人正在为你而下落。”

While reading this you ask Batman, “Wait, who is this for?” and Batman replies:

在阅读本文时，您会问蝙蝠侠：“等等，这是给谁的？” 蝙蝠侠回复：

“It’s for Superman.”

“这是给超人的。”

You: Oh! I was going to guess Wonder Woman.

你：哦！ 我本来想猜神奇女侠。

Batman: No, it’s Sups, please write “I love you Superman” at the end.

蝙蝠侠：不，是Sups，请在结尾处写下“我爱你超人”。

Fine, let’s do it then:

好吧，那就做吧：

<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>

The letter is almost done, and Batman wants just two more changes. Batman wants the word “does” in the first sentence of the confession paragraph to be italic, and the sentence “I love you Superman” to be in bold.

这封信快要完成了，蝙蝠侠只想再做两个改动。 蝙蝠侠希望表白第一句中的“确实”一词为斜体，而“我爱你超人”一词则为粗体。

We use <em> and <strong> to display text in italic and bold. Let’s update these changes:

我们使用<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样式 (Styling in HTML)

There are three ways you can style or define the look of an HTML element:

您可以通过三种方式来样式化或定义HTML元素的外观：

• Inline styling: We write styles using “style” attribute of the elements. This is what we have done up until now. This is not a good practice.
  内联样式：我们使用元素的“样式”属性来编写样式。 这就是我们到目前为止所做的。 这不是一个好习惯。
• Embedded styling: We write all the styles within a “style” element wrapped by <style> and </style>.
  嵌入式样式：我们将所有样式写在由<style>和</ style>包裹的“ style”元素中。
• Linked stylesheet: We write styles of all the elements in a separate file with .css extension. This file is called Stylesheet.
  链接的样式表：我们将所有元素的样式写在一个扩展名为.css的单独文件中。 该文件称为样式表。

Let’s have a look at how we defined the inline style of the “div” until now:

让我们看看到目前为止如何定义“ div”的内联样式：

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

We can write this same style inside <style> and </style> like this:

我们可以在<style>和</style>编写相同的样式，如下所示：

div{
  width:550px;
}

In embedded styling, the styles we write are separate from the elements. So we need a way to relate the element and its style. The first word “div” does exactly that. It lets the browser know that whatever style is inside the curly braces {…} belongs to the “div” element. Since this phrase determines which element to apply the style to, it’s called a selector.

在嵌入式样式中，我们编写的样式与元素分开。 因此，我们需要一种将元素及其样式相关联的方法。 第一个单词“ div”正是这样做的。 它使浏览器知道花括号{…}内的任何样式都属于“ div”元素。 由于此短语确定了将样式应用于哪个元素，因此称为选择器。

The way we write style remains same: property(width) and value(550px) separated by a colon(:) and ended by a semicolon(;).

我们编写样式的方式保持不变：property(width)和value(550px)由冒号(:)分隔并以分号(;)结尾。

Let’s remove inline style from our “div” and “img” element and write it inside the <style> element:

让我们从“ 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>

Save and refresh, and the result should remain the same.

保存并刷新，结果应保持不变。

There is one big problem though — what if there is more than one “div” and “img” element in our HTML file? The styles that we defined for div and img inside the “style” element will apply to every div and img on the page.

但是，有一个大问题-如果我们HTML文件中有多个“ div”和“ img”元素，该怎么办？ 我们在“ style”元素中为div和img定义的样式将应用于页面上的每个div和img。

If you add another div in your code in the future, then that div will also become 550px wide. We don’t want that.

如果以后在代码中添加另一个div，则该div的宽度也将变为550px。 我们不想要那个。

We want to apply our styles to the specific div and img that we are using right now. To do this, we need to give our div and img element unique ids. Here’s how you can give an id to an element using its “id” attribute:

我们想将样式应用于当前正在使用的特定div和img。 为此，我们需要为div和img元素赋予唯一的ID。 这是使用元素的“ id”属性为元素赋予ID的方法：

<div id="letter-container">

and here’s how to use this id in our embedded style as a selector:

以下是我们以嵌入样式使用此id作为选择器的方法：

#letter-container{
  ...
}

Notice the “#” symbol. It indicates that it is an id, and the styles inside {…} should apply to the element with that specific id only.

注意“＃”符号。 它表示它是一个id，{…}中的样式应仅应用于具有该特定id的元素。

Let’s apply this to our code:

让我们将其应用于我们的代码：

<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>

Our HTML is ready with embedded styling.

我们HTML已准备好具有嵌入式样式。

However, you can see that as we include more styles, the <style></style> will get bigger. This can quickly clutter our main html file. So let’s go one step further and use linked styling by copying the content inside our style tag to a new file.

但是，您会看到，随着我们包含更多样式，<style> </ style>将会变大。 这会很快使我们的主要html文件混乱。 因此，让我们更进一步，通过将样式标签中的内容复制到新文件中来使用链接样式。

Create a new file in the project root directory and save it as style.css:

在项目根目录中创建一个新文件，并将其另存为style.css：

#letter-container{
  width:550px;
}

#header-bat-logo{
  width:100%;
}

We don’t need to write <style> and </style> in our CSS file.

我们不需要在CSS文件中编写<style>和</style> 。

We need to link our newly created CSS file to our HTML file using the <link> tag in our html file. Here’s how we can do that:

我们需要使用html文件中的<link>标记将新创建CSS文件<link>到HTML文件。 我们可以这样做：

<link rel="stylesheet" type="text/css" href="style.css">

We use the link element to include external resources inside your HTML document. It is mostly used to link Stylesheets. The three attributes that we are using are:

我们使用link元素在HTML文档中包括外部资源。 它主要用于链接样式表。 我们使用的三个属性是：

• rel: Relation. What relationship the linked file has to the document. The file with the .css extension is called a stylesheet, and so we keep rel=“stylesheet”.
  rel：关系。 链接文件与文档之间有什么关系。 扩展名为.css的文件称为样式表，因此我们保留rel =“ stylesheet”。
• type: the Type of the linked file; it’s “text/css” for a CSS file.
  type：链接文件的类型； 它是CSS文件的“文本/ css”。
• href: Hypertext Reference. Location of the linked file.
  href：超文本参考。 链接文件的位置。

There is no </link> at the end of the link element. So, <link> is also a self-closing tag.

link元素的末尾没有</ link>。 因此，<link>也是一个自闭标签。

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

If only getting a Girlfriend was so easy :D

如果只找一个女朋友那么容易：D

Nah, that’s not gonna happen, let’s move on.

不，那不会发生，让我们继续前进。

Here’s the content of our loveletter.html:

这是我们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>

and our style.css:

和我们的style.css：

#letter-container{
  width:550px;
}

#header-bat-logo{
  width:100%;
}

Save both the files and refresh, and your output in the browser should remain the same.

保存文件并刷新，浏览器中的输出应保持不变。

少量手续 (A Few Formalities)

Our love letter is almost ready to deliver to Batman, but there are a few formal pieces remaining.

我们的情书几乎已经准备好寄给蝙蝠侠了，但还有一些正式的片段。

Like any other programming language, HTML has also gone through many versions since its birth year(1990). The current version of HTML is HTML5.

像任何其他编程语言一样，HTML自1990年诞生以来也经历了许多版本。 HTML的当前版本是HTML5。

So, how would the browser know which version of HTML you are using to code your page? To tell the browser that you are using HTML5, you need to include <!DOCTYPE html> at top of the page. For older versions of HTML, this line used to be different, but you don’t need to learn that because we don’t use them anymore.

那么，浏览器如何知道您使用哪种版本HTML对页面进行编码？ 要告诉浏览器您正在使用HTML5，需要在页面顶部包含<!DOCTYPE html> 。 对于较旧HTML版本，此行以前是不同的，但是您无需学习它，因为我们不再使用它们。

Also, in previous HTML versions, we used to encapsulate the entire document inside <html></html> tag. The entire file was divided into two major sections: Head, inside <head></head>, and Body, inside <body></body>. This is not required in HTML5, but we still do this for compatibility reasons. Let’s update our code with <Doctype>, <html>, <head> and <body>:

另外，在以前HTML版本中，我们曾经将整个文档封装在<html></html>标记内。 整个文件分为两个主要部分： <head></head>内的Head和<body></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>

The main content goes inside <body> and meta information goes inside <head>. So we keep the div inside <body> and load the stylesheets inside <head>.

主要内容位于<body>内部，而元信息位于<head>内部。 因此，我们将div保留在<body> ，并将样式表加载到<head> 。

Save and refresh, and your HTML page should display the same as earlier.

保存并刷新，您HTML页面应显示与以前相同。

HTML标题 (Title in HTML)

This is the last change. I promise.

这是最后一次更改。 我承诺。

You might have noticed that the title of the tab is displaying the path of the HTML file:

您可能已经注意到选项卡的标题显示了HTML文件的路径：

We can use <title> tag to define a title for our HTML file. The title tag also, like the link tag, goes inside head. Let’s put “Bat Letter” in our title:

我们可以使用<title>标签为HTML文件定义标题。 标题标签也和链接标签一样，位于头部内部。 让我们在标题中添加“蝙蝠字母”：

<!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>

Save and refresh, and you will see that instead of the file path, “Bat Letter” is now displayed on the tab.

保存并刷新，您会看到该标签上现在显示了“ Bat Letter”而不是文件路径。

Batman’s Love Letter is now complete.

蝙蝠侠的情书现已完成。

Congratulations! You made Batman’s Love Letter in HTML.

恭喜你！ 您使用HTML制作了蝙蝠侠的情书。

我们学到了什么 (What we learned)

We learned the following new concepts:

我们学习了以下新概念：

• The structure of an HTML document
  HTML文档的结构
• How to write elements in HTML (<p></p>)
  如何用HTML(<p> </ p>)编写元素
• How to write styles inside the element using the style attribute (this is called inline styling, avoid this as much as you can)
  如何使用style属性在元素内编写样式(这称为内联样式，请尽可能避免这种情况)
• How to write styles of an element inside <style>…</style> (this is called embedded styling)
  如何在<style>…</ style>内编写元素的样式(这称为嵌入式样式)
• How to write styles in a separate file and link to it in HTML using <link> (this is called a linked stylesheet)
  如何在单独的文件中编写样式并使用<link>在HTML中链接到样式(这称为链接样式表)
• What is a tag name, attribute, opening tag, and closing tag
  什么是标签名称，属性，开始标签和结束标签
• How to give an id to an element using id attribute
  如何使用id属性为元素赋予id
• Tag selectors and id selectors in CSS
  CSS中的标签选择器和ID选择器

We learned the following HTML tags:

我们学习了以下HTML标签：

• <p>: for paragraphs
  <p>：用于段落
• <br>: for line breaks
  <br>：用于换行符
• <ul>, <li>: to display lists
  <ul>，<li>：显示列表
• <div>: for grouping elements of our letter
  <div>：用于对字母进行分组
• <h1>, <h2>: for heading and sub heading
  <h1>，<h2>：用于标题和子标题
• <img>: to insert an image
  <img>：插入图像
• <strong>, <em>: for bold and italic text styling
  <strong>，<em>：用于粗体和斜体文本样式
• <style>: for embedded styling
  <style>：用于嵌入式样式
• <link>: for including external an stylesheet
  <link>：用于包含外部样式表
• <html>: to wrap the entire HTML document
  <html>：包装整个HTML文档
• <!DOCTYPE html>: to let the browser know that we are using HTML5
  <！DOCTYPE html>：让浏览器知道我们正在使用HTML5
• <head>: to wrap meta info, like <link> and <title>
  <head>：包装元信息，例如<link>和<title>
• <body>: for the body of the HTML page that is actually displayed
  <body>：用于实际显示HTML页面的正文
• <title>: for the title of the HTML page
  <title>：用于HTML页面的标题

We learned the following CSS properties:

我们了解了以下CSS属性：

• width: to define the width of an element
  width：定义元素的宽度
• CSS units: “px” and “%”
  CSS单位：“ px”和“％”

That’s it for the day friends, see you in the next tutorial.

当天的朋友就这样了，在下一个教程中见。

Want to learn Web Development with fun and engaging tutorials?

是否想通过有趣而引人入胜的教程来学习Web开发？

Click here to get new Web Development tutorials every week.

单击此处每周获取新的Web开发教程。

翻译自: https://www.freecodecamp.org/news/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b/

蝙蝠侠一键改udid软件