” 自动换行。</p>
<p>保存并在浏览器中打开它。如果它已经打开，单击浏览器中的刷新按钮。</p>
<p>瞧！那是你的第一个网页！</p>
<p>我们的第一段已准备就绪，但这不是在 HTML 中编写段落的推荐方法。我们有一种特定的方法让浏览器知道一个文本是一个段落。</p>
<p>如果你用 <p> 和 </p> 来包裹文本，那么浏览器将识别 <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>通过在 <p> 和 </p>中编写段落，你创建了一个 HTML 元素。一个网页就是 HTML 元素的集合。</p>
<p>让我们首先来认识一些术语：<p> 是开始标签，</p> 是结束标签，“p” 是标签名称。元素开始和结束标签之间的文本是元素的内容。</p>
<h1>“style” 属性</h1><p>在上面，你将看到文本覆盖屏幕的整个宽度。</p>
<p>我们不希望这样。没有人想要阅读这么长的行。让我们设定段落宽度为 550px。</p>
<p>我们可以通过使用元素的 style 属性来实现。你可以在其 style 属性中定义元素的样式（例如，在我们的示例中为宽度）。以下行将在 p 元素上创建一个空样式属性：</p>
<p><p style=)
你看到那个空的 ""/>
我们可以使用 <title> 标签来定义 HTML 文件的标题。标题标签也像链接标签一样在 <head> 内部。让我们我们在标题中加上 “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>
保存并刷新，你将看到在选项卡上显示的是 “Bat Letter” 而不是文件路径。
蝙蝠侠的情书现在已经完成。
恭喜！你用 HTML 制作了蝙蝠侠的情书。
我们学到了什么
我们学习了以下新概念：
一个 HTML 文档的结构在 HTML 中如何写元素（<p></p>）如何使用 style 属性在元素内编写样式（这称为内联样式，尽可能避免这种情况）如何在 <style>...</style> 中编写元素的样式（这称为嵌入式样式）在 HTML 中如何使用 <link> 在单独的文件中编写样式并链接它（这称为链接样式表）什么是标签名称，属性，开始标签和结束标签如何使用 id 属性为一个元素赋予 idCSS 中的标签选择器和 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” 和 “%”朋友们，这就是今天的全部了，下一个教程中见。
作者简介：开发者 + 作者 | 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 校对： wxy
本文由 LCTT 原创编译， Linux中国 荣誉推出