|
|
51CTO旗下网站
|
|
移动端

编写你的第一行HTML代码,来帮助蝙蝠侠写一封情书

在你恐慌并处于关键时刻之前,蝙蝠侠说:“我需要你的帮助。我是一个超级极客,但我不懂 HTML。我需要用 HTML 写一封情书,你愿意帮助我吗?”谁会拒绝蝙蝠侠的请求呢,对吧?所以让我们用 HTML 来写一封蝙蝠侠的情书。

作者:Kunal Sarkar来源:Linux中国|2018-12-04 13:00

在一个美好的夜晚,你的肚子拒绝消化你在晚餐吃的大块披萨,所以你不得不在睡梦中冲进洗手间。

在浴室里,当你在思考为什么会发生这种情况时,你听到一个来自通风口的低沉声音:“嘿,我是蝙蝠侠。”

这时,你会怎么做呢?

在你恐慌并处于关键时刻之前,蝙蝠侠说:“我需要你的帮助。我是一个超级极客,但我不懂 HTML。我需要用 HTML 写一封情书,你愿意帮助我吗?”

谁会拒绝蝙蝠侠的请求呢,对吧?所以让我们用 HTML 来写一封蝙蝠侠的情书。

你的***个 HTML 文件

HTML 网页与你电脑上的其它文件一样。就同一个 .doc 文件以 MS Word 打开,.jpg 文件在图像查看器中打开一样,一个 .html 文件在浏览器中打开。

那么,让我们来创建一个 .html 文件。你可以在 Notepad 或其它任何编辑器中完成此任务,但我建议使用 VS Code。在这里下载并安装 VS Code。它是免费的,也是我唯一喜欢的微软产品。

在系统中创建一个目录,将其命名为 “HTML Practice”(不带引号)。在这个目录中,再创建一个名为 “Batman’s Love Letter”(不带引号)的目录,这将是我们的项目根目录。这意味着我们所有与这个项目相关的文件都会在这里。

打开 VS Code,按下 ctrl+n 创建一个新文件,按下 ctrl+s 保存文件。切换到 “Batman’s Love Letter” 文件夹并将其命名为 “loveletter.html”,然后单击保存。

现在,如果你在文件资源管理器中双击它,它将在你的默认浏览器中打开。我建议使用 Firefox 来进行 web 开发,但 Chrome 也可以。

让我们将这个过程与我们已经熟悉的东西联系起来。还记得你***次拿到电脑吗?我做的***件事是打开 MS Paint 并绘制一些东西。你在 Paint 中绘制一些东西并将其另存为图像,然后你可以在图像查看器中查看该图像。之后,如果要再次编辑该图像,你在 Paint 中重新打开它,编辑并保存它。

我们目前的流程非常相似。正如我们使用 Paint 创建和编辑图像一样,我们使用 VS Code 来创建和编辑 HTML 文件。就像我们使用图像查看器查看图像一样,我们使用浏览器来查看我们的 HTML 页面。

HTML 中的段落

我们有一个空的 HTML 文件,以下是蝙蝠侠想在他的情书中写的***段。

“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”

复制这些到 VS Code 中的 loveletter.html。单击 “View -> Toggle Word Wrap (alt+z)” 自动换行。

保存并在浏览器中打开它。如果它已经打开,单击浏览器中的刷新按钮。

瞧!那是你的***个网页!

我们的***段已准备就绪,但这不是在 HTML 中编写段落的推荐方法。我们有一种特定的方法让浏览器知道一个文本是一个段落。

如果你用 <p></p> 来包裹文本,那么浏览器将识别 <p></p> 中的文本是一个段落。我们这样做:

  1. <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” 属性

在上面,你将看到文本覆盖屏幕的整个宽度。

我们不希望这样。没有人想要阅读这么长的行。让我们设定段落宽度为 550px。

我们可以通过使用元素的 style 属性来实现。你可以在其 style 属性中定义元素的样式(例如,在我们的示例中为宽度)。以下行将在 p 元素上创建一个空样式属性:

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

你看到那个空的 "" 了吗?这就是我们定义元素外观的地方。现在我们要将宽度设置为 550px。我们这样做:

  1. <p style="width:550px;">
  2. 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.
  3. </p>

我们将 width 属性设置为 550px,用冒号 : 分隔,以分号 ; 结束。

另外,注意我们如何将 <p></p> 放在单独的行中,文本内容用一个制表符缩进。像这样设置代码使其更具可读性。

HTML 中的列表

接下来,蝙蝠侠希望列出他所钦佩的人的一些优点,例如:

  1. You complete my darkness with your light. I love:
  2. - the way you see good in the worst things
  3. - the way you handle emotionally difficult situations
  4. - the way you look at Justice
  5. I have learned a lot from you. You have occupied a special place in my heart over time.

这看起来很简单。

让我们继续,在 </p> 下面复制所需的文本:

  1. <p style="width:550px;">
  2. 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.
  3. </p>
  4. <p style="width:550px;">
  5. You complete my darkness with your light. I love:
  6. - the way you see good in the worse
  7. - the way you handle emotionally difficult situations
  8. - the way you look at Justice
  9. I have learned a lot from you. You have occupied a special place in my heart over the time.
  10. </p>

保存并刷新浏览器。

哇!这里发生了什么,我们的列表在哪里?

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

如果你想在 HTML(新行)中插入换行符,你必须使用 <br>。让我们来使用 <br>,看看它长什么样:

  1. <p style="width:550px;">
  2. 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.
  3. </p>
  4. <p style="width:550px;">
  5. You complete my darkness with your light. I love: <br>
  6. - the way you see good in the worse <br>
  7. - the way you handle emotionally difficult situations <br>
  8. - the way you look at Justice <br>
  9. I have learned a lot from you. You have occupied a special place in my heart over the time.
  10. </p>

保存并刷新:

好的,现在它看起来就像我们想要的那样!

另外,注意我们没有写一个 </br>。有些标签不需要结束标签(它们被称为自闭合标签)。

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

我们使用纯文本编写列表,但是有两个标签可以供我们使用来达到相同的目的:<ul> and <li>

让我们解释一下名字的意思:ul 代表无序列表Unordered List,li 代表列表项目List Item。让我们使用它们来展示我们的列表:

  1. <p style="width:550px;">
  2. 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.
  3. </p>
  1. <p style="width:550px;">
  2. You complete my darkness with your light. I love:
  3. <ul>
  4. <li>the way you see good in the worse</li>
  5. <li>the way you handle emotionally difficult situations</li>
  6. <li>the way you look at Justice</li>
  7. </ul>
  8. I have learned a lot from you. You have occupied a special place in my heart over the time.
  9. </p>

在复制代码之前,注意差异部分:

  • 我们删除了所有的 <br>,因为每个 <li> 会自动显示在新行中
  • 我们将每个列表项包含在 <li></li> 之间
  • 我们将所有列表项的集合包裹在 <ul></ul> 之间
  • 我们没有像 <p> 元素那样定义 <ul> 元素的宽度。这是因为 <ul><p> 的子节点,<p> 已经被约束到 550px,所以 <ul> 不会超出这个范围。

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

你会立即注意到在每个列表项之前显示了重点标志。我们现在不需要在每个列表项之前写 “-”。

经过仔细检查,你会注意到***一行超出 550px 宽度。这是为什么?因为 HTML 不允许 <ul> 元素出现在 <p> 元素中。让我们将***行和***一行放在单独的 <p> 元素中:

  1. <p style="width:550px;">
  2. 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.
  3. </p>
  1. <p style="width:550px;">
  2. You complete my darkness with your light. I love:
  3. </p>
  1. <ul style="width:550px;">
  2. <li>the way you see good in the worse</li>
  3. <li>the way you handle emotionally difficult situations</li>
  4. <li>the way you look at Justice</li>
  5. </ul>
  1. <p style="width:550px;">
  2. I have learned a lot from you. You have occupied a special place in my heart over the time.
  3. </p>

保存并刷新。

注意,这次我们还定义了 <ul> 元素的宽度。那是因为我们现在已经将 <ul> 元素放在了 <p> 元素之外。

定义情书中所有元素的宽度会变得很麻烦。我们有一个特定的元素用于此目的:<div> 元素。一个 <div> 元素就是一个通用容器,用于对内容进行分组,以便轻松设置样式。

让我们用 <div> 元素包装整个情书,并为其赋予宽度:550px 。

  1. <div style="width:550px;">
  2. <p>
  3. 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.
  4. </p>
  5. <p>
  6. You complete my darkness with your light. I love:
  7. </p>
  8. <ul>
  9. <li>the way you see good in the worse</li>
  10. <li>the way you handle emotionally difficult situations</li>
  11. <li>the way you look at Justice</li>
  12. </ul>
  13. <p>
  14. I have learned a lot from you. You have occupied a special place in my heart over the time.
  15. </p>
  16. </div>

棒极了,我们的代码现在看起来简洁多了。

HTML 中的标题

到目前为止,蝙蝠侠对结果很高兴,他希望在情书上标题。他想写一个标题: “Bat Letter”。当然,你已经看到这个名字了,不是吗?:D

你可以使用 <h1><h2><h3><h4><h5><h6> 标签来添加标题,<h1> 是***的标题和最主要的标题,<h6> 是最小的标题。

让我们在第二段之前使用 <h1> 做主标题和一个副标题:

  1. <div style="width:550px;">
  2. <h1>Bat Letter</h1>
  3. <p>
  4. 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.
  5. </p>
  1. <h2>You are the light of my life</h2>
  2. <p>
  3. You complete my darkness with your light. I love:
  4. </p>
  5. <ul>
  6. <li>the way you see good in the worse</li>
  7. <li>the way you handle emotionally difficult situations</li>
  8. <li>the way you look at Justice</li>
  9. </ul>
  10. <p>
  11. I have learned a lot from you. You have occupied a special place in my heart over the time.
  12. </p>
  13. </div>

保存,刷新。

HTML 中的图像

我们的情书尚未完成,但在继续之前,缺少一件大事:蝙蝠侠标志。你见过是蝙蝠侠的东西但没有蝙蝠侠的标志吗?

并没有。

所以,让我们在情书中添加一个蝙蝠侠标志。

在 HTML 中包含图像就像在一个 Word 文件中包含图像一样。在 MS Word 中,你到 “菜单 -> 插入 -> 图像 -> 然后导航到图像位置为止 -> 选择图像 -> 单击插入”。

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

在我们深入编码之前,从这里下载蝙蝠侠标志。你可能希望裁剪图像中的额外空白区域。复制项目根目录中的图像并将其重命名为 “bat-logo.jpeg”。

  1. <div style="width:550px;">
  2. <h1>Bat Letter</h1>
  3. <img src="bat-logo.jpeg">
  4. <p>
  5. 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.
  6. </p>
  1. <h2>You are the light of my life</h2>
  2. <p>
  3. You complete my darkness with your light. I love:
  4. </p>
  5. <ul>
  6. <li>the way you see good in the worse</li>
  7. <li>the way you handle emotionally difficult situations</li>
  8. <li>the way you look at Justice</li>
  9. </ul>
  10. <p>
  11. I have learned a lot from you. You have occupied a special place in my heart over the time.
  12. </p>
  13. </div>

我们在第 3 行包含了 <img> 标签。这个标签也是一个自闭合的标签,所以我们不需要写 </img>。在 src 属性中,我们给出了图像文件的名称。这个名称应与图像名称完全相同,包括扩展名(.jpeg)及其大小写。

保存并刷新,查看结果。

该死的!刚刚发生了什么?

当使用 <img> 标签包含图像时,默认情况下,图像将以其原始分辨率显示。在我们的例子中,图像比 550px 宽得多。让我们使用 style 属性定义它的宽度:

  1. <div style="width:550px;">
  2. <h1>Bat Letter</h1>
  3. <img src="bat-logo.jpeg" style="width:100%">
  4. <p>
  5. 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.
  6. </p>
  1. <h2>You are the light of my life</h2>
  2. <p>
  3. You complete my darkness with your light. I love:
  4. </p>
  5. <ul>
  6. <li>the way you see good in the worse</li>
  7. <li>the way you handle emotionally difficult situations</li>
  8. <li>the way you look at Justice</li>
  9. </ul>
  10. <p>
  11. I have learned a lot from you. You have occupied a special place in my heart over the time.
  12. </p>
  13. </div>

你会注意到,这次我们定义宽度使用了 “%” 而不是 “px”。当我们在 “%” 中定义宽度时,它将占据父元素宽度的百分比。因此,100% 的 550px 将为我们提供 550px。

保存并刷新,查看结果。

太棒了!这让蝙蝠侠的脸露出了羞涩的微笑 :)。

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

当阅读到这里时,你会问蝙蝠侠:“等等,这是给谁的?”蝙蝠侠说:

“这是给超人的。”

你说:哦!我还以为是给神奇女侠的呢。

蝙蝠侠说:不,这是给超人的,请在***写上 “I love you Superman.”。

好的,我们来写:

  1. <div style="width:550px;">
  2. <h1>Bat Letter</h1>
  3. <img src="bat-logo.jpeg" style="width:100%">
  4. <p>
  5. 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.
  6. </p>
  1. <h2>You are the light of my life</h2>
  2. <p>
  3. You complete my darkness with your light. I love:
  4. </p>
  5. <ul>
  6. <li>the way you see good in the worse</li>
  7. <li>the way you handle emotionally difficult situations</li>
  8. <li>the way you look at Justice</li>
  9. </ul>
  10. <p>
  11. I have learned a lot from you. You have occupied a special place in my heart over the time.
  12. </p>
  13. <h2>I have a confession to make</h2>
  14. <p>
  15. 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.
  16. </p>
  17. <p>
  18. I don't show my emotions, but I think this man behind the mask is falling for you.
  19. </p>
  20. <p>I love you Superman.</p>
  21. <p>
  22. Your not-so-secret-lover, <br>
  23. Batman
  24. </p>
  25. </div>

这封信差不多完成了,蝙蝠侠另外想再做两次改变。蝙蝠侠希望在***段落的***句中的 “does” 一词是斜体,而 “I love you Superman” 这句话是粗体的。

我们使用 <em><strong> 以斜体和粗体显示文本。让我们来更新这些更改:

  1. <div style="width:550px;">
  2. <h1>Bat Letter</h1>
  3. <img src="bat-logo.jpeg" style="width:100%">
  4. <p>
  5. 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.
  6. </p>
  1. <h2>You are the light of my life</h2>
  2. <p>
  3. You complete my darkness with your light. I love:
  4. </p>
  5. <ul>
  6. <li>the way you see good in the worse</li>
  7. <li>the way you handle emotionally difficult situations</li>
  8. <li>the way you look at Justice</li>
  9. </ul>
  10. <p>
  11. I have learned a lot from you. You have occupied a special place in my heart over the time.
  12. </p>
  13. <h2>I have a confession to make</h2>
  14. <p>
  15. 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.
  16. </p>
  17. <p>
  18. I don't show my emotions, but I think this man behind the mask is falling for you.
  19. </p>
  20. <p><strong>I love you Superman.</strong></p>
  21. <p>
  22. Your not-so-secret-lover, <br>
  23. Batman
  24. </p>
  25. </div>

HTML 中的样式

你可以通过三种方式设置样式或定义 HTML 元素的外观:

  • 内联样式:我们使用元素的 style 属性来编写样式。这是我们迄今为止使用的,但这不是一个好的实践。
  • 嵌入式样式:我们在由 <style></style> 包裹的 “style” 元素中编写所有样式。
  • 链接样式表:我们在具有 .css 扩展名的单独文件中编写所有元素的样式。此文件称为样式表。

让我们来看看如何定义 <div> 的内联样式:

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

我们可以在 <style></style> 里面写同样的样式:

  1. div{
  2. width:550px;
  3. }

在嵌入式样式中,我们编写的样式是与元素分开的。所以我们需要一种方法来关联元素及其样式。***个单词 “div” 就做了这样的活。它让浏览器知道花括号 {...} 里面的所有样式都属于 “div” 元素。由于这种语法确定要应用样式的元素,因此它称为一个选择器。

我们编写样式的方式保持不变:属性(width)和值(550px)用冒号(:)分隔,以分号(;)结束。

让我们从 <div><img> 元素中删除内联样式,将其写入 <style> 元素:

  1. <style>
  2. div{
  3. width:550px;
  4. }
  5. img{
  6. width:100%;
  7. }
  8. </style>
  1. <div>
  2. <h1>Bat Letter</h1>
  3. <img src="bat-logo.jpeg">
  4. <p>
  5. 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.
  6. </p>
  1. <h2>You are the light of my life</h2>
  2. <p>
  3. You complete my darkness with your light. I love:
  4. </p>
  5. <ul>
  6. <li>the way you see good in the worse</li>
  7. <li>the way you handle emotionally difficult situations</li>
  8. <li>the way you look at Justice</li>
  9. </ul>
  10. <p>
  11. I have learned a lot from you. You have occupied a special place in my heart over the time.
  12. </p>
  13. <h2>I have a confession to make</h2>
  14. <p>
  15. 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.
  16. </p>
  17. <p>
  18. I don't show my emotions, but I think this man behind the mask is falling for you.
  19. </p>
  20. <p><strong>I love you Superman.</strong></p>
  21. <p>
  22. Your not-so-secret-lover, <br>
  23. Batman
  24. </p>
  25. </div>

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

但是有一个大问题,如果我们的 HTML 文件中有多个 <div><img> 元素该怎么办?这样我们在 <style> 元素中为 div 和 img 定义的样式就会应用于页面上的每个 div 和 img。

如果你在以后的代码中添加另一个 div,那么该 div 也将变为 550px 宽。我们并不希望这样。

我们想要将我们的样式应用于现在正在使用的特定 div 和 img。为此,我们需要为 div 和 img 元素提供唯一的 id。以下是使用 id 属性为元素赋予 id 的方法:

  1. <div id="letter-container">

以下是如何在嵌入式样式中将此 id 用作选择器:

  1. #letter-container{
  2. ...
  3. }

注意 # 符号。它表示它是一个 id,{...} 中的样式应该只应用于具有该特定 id 的元素。

让我们来应用它:

  1. <style>
  2. #letter-container{
  3. width:550px;
  4. }
  5. #header-bat-logo{
  6. width:100%;
  7. }
  8. </style>
  1. <div id="letter-container">
  2. <h1>Bat Letter</h1>
  3. <img id="header-bat-logo" src="bat-logo.jpeg">
  4. <p>
  5. 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.
  6. </p>
  1. <h2>You are the light of my life</h2>
  2. <p>
  3. You complete my darkness with your light. I love:
  4. </p>
  5. <ul>
  6. <li>the way you see good in the worse</li>
  7. <li>the way you handle emotionally difficult situations</li>
  8. <li>the way you look at Justice</li>
  9. </ul>
  10. <p>
  11. I have learned a lot from you. You have occupied a special place in my heart over the time.
  12. </p>
  13. <h2>I have a confession to make</h2>
  14. <p>
  15. 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.
  16. </p>
  17. <p>
  18. I don't show my emotions, but I think this man behind the mask is falling for you.
  19. </p>
  20. <p><strong>I love you Superman.</strong></p>
  21. <p>
  22. Your not-so-secret-lover, <br>
  23. Batman
  24. </p>
  25. </div>

HTML 已经准备好了嵌入式样式。

但是,你可以看到,随着我们包含越来越多的样式,<style></style> 将变得很大。这可能很快会混乱我们的主 HTML 文件。

因此,让我们更进一步,通过将 <style> 标签内的内容复制到一个新文件来使用链接样式。

在项目根目录中创建一个新文件,将其另存为 “style.css”:

  1. #letter-container{
  2. width:550px;
  3. }
  4. #header-bat-logo{
  5. width:100%;
  6. }

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

我们需要使用 HTML 文件中的 <link> 标签来将新创建的 CSS 文件链接到 HTML 文件。以下是我们如何做到这一点:

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

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

  • rel:关系。链接文件与文档的关系。具有 .css 扩展名的文件称为样式表,因此我们保留 rel=“stylesheet”。
  • type:链接文件的类型;对于一个 CSS 文件来说它是 “text/css”。
  • href:超文本参考。链接文件的位置。

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

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

如果只是得到一个女朋友,那么很容易:D

可惜没有那么简单,让我们继续前进。

这是我们 “loveletter.html” 的内容:

  1. <link rel="stylesheet" type="text/css" href="style.css">
  2. <div id="letter-container">
  3. <h1>Bat Letter</h1>
  4. <img id="header-bat-logo" src="bat-logo.jpeg">
  5. <p>
  6. 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.
  7. </p>
  8. <h2>You are the light of my life</h2>
  9. <p>
  10. You complete my darkness with your light. I love:
  11. </p>
  12. <ul>
  13. <li>the way you see good in the worse</li>
  14. <li>the way you handle emotionally difficult situations</li>
  15. <li>the way you look at Justice</li>
  16. </ul>
  17. <p>
  18. I have learned a lot from you. You have occupied a special place in my heart over the time.
  19. </p>
  20. <h2>I have a confession to make</h2>
  21. <p>
  22. 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.
  23. </p>
  24. <p>
  25. I don't show my emotions, but I think this man behind the mask is falling for you.
  26. </p>
  27. <p><strong>I love you Superman.</strong></p>
  28. <p>
  29. Your not-so-secret-lover, <br>
  30. Batman
  31. </p>
  32. </div>

“style.css” 内容:

  1. #letter-container{
  2. width:550px;
  3. }
  4. #header-bat-logo{
  5. width:100%;
  6. }

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

一些手续

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

与其他任何编程语言一样,HTML 自出生以来(1990 年)经历过许多版本,当前版本是 HTML5。

那么,浏览器如何知道你使用哪个版本的 HTML 来编写页面呢?要告诉浏览器你正在使用 HTML5,你需要在页面顶部包含 <!DOCTYPE html>。对于旧版本的 HTML,这行不同,但你不需要了解它们,因为我们不再使用它们了。

此外,在之前的 HTML 版本中,我们曾经将整个文档封装在 <html></html> 标签内。整个文件分为两个主要部分:头部在 <head></head> 里面,主体在 <body></body> 里面。这在 HTML5 中不是必须的,但由于兼容性原因,我们仍然这样做。让我们用 <Doctype>, <html><head><body> 更新我们的代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="style.css">
  5. </head>
  6. <body>
  7. <div id="letter-container">
  8. <h1>Bat Letter</h1>
  9. <img id="header-bat-logo" src="bat-logo.jpeg">
  10. <p>
  11. 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.
  12. </p>
  13. <h2>You are the light of my life</h2>
  14. <p>
  15. You complete my darkness with your light. I love:
  16. </p>
  17. <ul>
  18. <li>the way you see good in the worse</li>
  19. <li>the way you handle emotionally difficult situations</li>
  20. <li>the way you look at Justice</li>
  21. </ul>
  22. <p>
  23. I have learned a lot from you. You have occupied a special place in my heart over the time.
  24. </p>
  25. <h2>I have a confession to make</h2>
  26. <p>
  27. 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.
  28. </p>
  29. <p>
  30. I don't show my emotions, but I think this man behind the mask is falling for you.
  31. </p>
  32. <p><strong>I love you Superman.</strong></p>
  33. <p>
  34. Your not-so-secret-lover, <br>
  35. Batman
  36. </p>
  37. </div>
  38. </body>
  39. </html>

主要内容在 <body> 里面,元信息在 <head> 里面。所以我们把 <div> 保存在 <body> 里面并加载 <head> 里面的样式表。

保存并刷新,你的 HTML 页面应显示与之前相同的内容。

HTML 的标题

我发誓,这是***一次改变。

你可能已经注意到选项卡的标题正在显示 HTML 文件的路径:

我们可以使用 <title> 标签来定义 HTML 文件的标题。标题标签也像链接标签一样在 <head> 内部。让我们我们在标题中加上 “Bat Letter”:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bat Letter</title>
  5. <link rel="stylesheet" type="text/css" href="style.css">
  6. </head>
  7. <body>
  8. <div id="letter-container">
  9. <h1>Bat Letter</h1>
  10. <img id="header-bat-logo" src="bat-logo.jpeg">
  11. <p>
  12. 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.
  13. </p>
  14. <h2>You are the light of my life</h2>
  15. <p>
  16. You complete my darkness with your light. I love:
  17. </p>
  18. <ul>
  19. <li>the way you see good in the worse</li>
  20. <li>the way you handle emotionally difficult situations</li>
  21. <li>the way you look at Justice</li>
  22. </ul>
  23. <p>
  24. I have learned a lot from you. You have occupied a special place in my heart over the time.
  25. </p>
  26. <h2>I have a confession to make</h2>
  27. <p>
  28. 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.
  29. </p>
  30. <p>
  31. I don't show my emotions, but I think this man behind the mask is falling for you.
  32. </p>
  33. <p><strong>I love you Superman.</strong></p>
  34. <p>
  35. Your not-so-secret-lover, <br>
  36. Batman
  37. </p>
  38. </div>
  39. </body>
  40. </html>

保存并刷新,你将看到在选项卡上显示的是 “Bat Letter” 而不是文件路径。

蝙蝠侠的情书现在已经完成。

恭喜!你用 HTML 制作了蝙蝠侠的情书。

我们学到了什么

我们学习了以下新概念:

  • 一个 HTML 文档的结构
  • 在 HTML 中如何写元素(<p></p>
  • 如何使用 style 属性在元素内编写样式(这称为内联样式,尽可能避免这种情况)
  • 如何在 <style>...</style> 中编写元素的样式(这称为嵌入式样式)
  • 在 HTML 中如何使用 <link> 在单独的文件中编写样式并链接它(这称为链接样式表)
  • 什么是标签名称,属性,开始标签和结束标签
  • 如何使用 id 属性为一个元素赋予 id
  • CSS 中的标签选择器和 id 选择器

我们学习了以下 HTML 标签:

  • <p>:用于段落
  • <br>:用于换行
  • <ul><li>:显示列表
  • <div>:用于分组我们信件的元素
  • <h1><h2>:用于标题和子标题
  • <img>:用于插入图像
  • <strong><em>:用于粗体和斜体文字样式
  • <style>:用于嵌入式样式
  • <link>:用于包含外部样式表
  • <html>:用于包裹整个 HTML 文档
  • <!DOCTYPE html>:让浏览器知道我们正在使用 HTML5
  • <head>:包裹元信息,如 <link><title>
  • <body>:用于实际显示的 HTML 页面的主体
  • <title>:用于 HTML 页面的标题

我们学习了以下 CSS 属性:

  • width:用于定义元素的宽度

  • CSS 单位:“px” 和 “%”

朋友们,这就是今天的全部了,下一个教程中见。

【编辑推荐】

  1. Lisp 是怎么成为上帝的编程语言的
  2. ***的编程语言?美国出数据了,Java吃香,PHP败了
  3. 2019年可能大火的编程语言清单已出炉!
  4. 使用MDwiki将Markdown发布成HTML
  5. 12 月编程语言排行榜:Python 夺回前三,Go 跌出前十
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

289人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

645人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

Java Web标签应用开发

Java Web程序员直接在JSP页面中书写Java代码的做法,使得页面中混杂有JavaScript、HTML、Java等多种语言的程序代码,可读性差,可复用性也...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客