HTML 入门
概述：HTML 简介
下一步
在本文中，我们将介绍 HTML 的绝对基础知识。为了帮助您入门，本文将定义元素、属性以及您可能听说过的所有其他重要术语。它还将解释这些术语如何在 HTML 中如何适用。您将学习 HTML 元素的结构、典型 HTML 页面的结构以及其他重要的基本语言功能。同时，您将有机会尝试使用 HTML！
先决条件
已安装基本软件，以及对文件操作 的基本了解。
目标
对 HTML 有基本的了解，并练习编写一些 HTML 元素。
什么是 HTML？HTML（超文本标记语言）是一种标记语言，它告诉网页浏览器如何结构化您访问的网页。它可以像网页开发者想要的那样复杂或简单。HTML 由一系列元素组成，您可以使用这些元素来包围、包裹或标记内容的不同部分，使其以某种方式显示或运行。包围的标签可以使内容成为指向另一个页面的超链接、使文字斜体等等。例如，考虑以下文本行
My cat is very grumpy
如果我们想要让文本独立显示，我们可以指定它是一个段落，方法是将其包围在一个段落 (
) 元素中
html
My cat is very grumpy
注意：HTML 中的标签不区分大小写。这意味着它们可以写成大写或小写。例如，一个
标签可以写成 <title>、<TITLE>、<Title>、<TiTlE> 等等，它都会起作用。但是，为了保持一致性和可读性，最好将所有标签写成小写。</p>
<p>HTML 元素的结构让我们进一步探索上一节中的段落元素</p>
<p>我们元素的结构是</p>
<p>开始标签：它由元素名称（在本例中为段落，使用 p 表示）组成，并用开始和结束尖括号包围。开始标签标记元素开始或开始生效的位置。在本例中，它出现在段落文本的开头。</p>
<p>内容：这是元素的内容。在本例中，它是段落文本。</p>
<p>结束标签：它与开始标签相同，只是在元素名称之前包含一个斜杠。它标记元素结束的位置。忘记包含结束标签是常见的初学者错误，它会导致奇怪的结果。</p>
<p>元素是开始标签，后跟内容，最后是结束标签。</p>
<p>主动学习：创建您的第一个 HTML 元素在“可编辑代码”区域中编辑下面的行，方法是将其用 <em> 和 </em> 标签包围。要打开元素，请将开始标签 <em> 放置在行的开头。要关闭元素，请将结束标签 </em> 放置在行的末尾。这样做应该会使该行具有斜体文本格式！您会在输出区域中看到您的更改实时更新。</p>
<p>如果您犯了错误，可以使用重置按钮清除您的工作。如果您真的卡住了，请按下显示解决方案按钮查看答案。</p>
<p><h2>Live output</h2></p>
<p><div class="output" style="min-height: 50px;"></div></p>
<p><h2>Editable code</h2></p>
<p><p class="a11y-label"></p>
<p>Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
<p></p></p>
<p><textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"></p>
<p>This is my text.</p>
<p></textarea></p>
<p><div class="controls"></p>
<p><input id="reset" type="button" value="Reset" /></p>
<p><input id="solution" type="button" value="Show solution" /></p>
<p></div></p>
<p>html {</p>
<p>font-family: "Open Sans Light", Helvetica, Arial, sans-serif;</p>
<p>}</p>
<p>h2 {</p>
<p>font-size: 16px;</p>
<p>}</p>
<p>.a11y-label {</p>
<p>margin: 0;</p>
<p>text-align: right;</p>
<p>font-size: 0.7rem;</p>
<p>width: 98%;</p>
<p>}</p>
<p>body {</p>
<p>margin: 10px;</p>
<p>background: #f5f9fa;</p>
<p>}</p>
<p>const textarea = document.getElementById("code");</p>
<p>const reset = document.getElementById("reset");</p>
<p>const solution = document.getElementById("solution");</p>
<p>const output = document.querySelector(".output");</p>
<p>const code = textarea.value;</p>
<p>let userEntry = textarea.value;</p>
<p>function updateCode() {</p>
<p>output.innerHTML = textarea.value;</p>
<p>}</p>
<p>const htmlSolution = "<em>This is my text.</em>";</p>
<p>let solutionEntry = htmlSolution;</p>
<p>reset.addEventListener("click", () => {</p>
<p>textarea.value = code;</p>
<p>userEntry = textarea.value;</p>
<p>solutionEntry = htmlSolution;</p>
<p>solution.value = "Show solution";</p>
<p>updateCode();</p>
<p>});</p>
<p>solution.addEventListener("click", () => {</p>
<p>if (solution.value === "Show solution") {</p>
<p>textarea.value = solutionEntry;</p>
<p>solution.value = "Hide solution";</p>
<p>} else {</p>
<p>textarea.value = userEntry;</p>
<p>solution.value = "Show solution";</p>
<p>}</p>
<p>updateCode();</p>
<p>});</p>
<p>textarea.addEventListener("input", updateCode);</p>
<p>window.addEventListener("load", updateCode);</p>
<p>// stop tab key tabbing out of textarea and</p>
<p>// make it write a tab at the caret position instead</p>
<p>textarea.onkeydown = (e) => {</p>
<p>if (e.code === "Tab") {</p>
<p>e.preventDefault();</p>
<p>insertAtCaret("\t");</p>
<p>}</p>
<p>if (e.code === "Escape") {</p>
<p>textarea.blur();</p>
<p>}</p>
<p>};</p>
<p>function insertAtCaret(text) {</p>
<p>const scrollPos = textarea.scrollTop;</p>
<p>let caretPos = textarea.selectionStart;</p>
<p>const front = textarea.value.substring(0, caretPos);</p>
<p>const back = textarea.value.substring(</p>
<p>textarea.selectionEnd,</p>
<p>textarea.value.length,</p>
<p>);</p>
<p>textarea.value = front + text + back;</p>
<p>caretPos += text.length;</p>
<p>textarea.selectionStart = caretPos;</p>
<p>textarea.selectionEnd = caretPos;</p>
<p>textarea.focus();</p>
<p>textarea.scrollTop = scrollPos;</p>
<p>}</p>
<p>// Update the saved userCode every time the user updates the text area code</p>
<p>textarea.onkeyup = () => {</p>
<p>// We only want to save the state when the user code is being shown,</p>
<p>// not the solution, so that solution is not saved over the user code</p>
<p>if (solution.value === "Show solution") {</p>
<p>userEntry = textarea.value;</p>
<p>} else {</p>
<p>solutionEntry = textarea.value;</p>
<p>}</p>
<p>updateCode();</p>
<p>};</p>
<p>嵌套元素元素可以放置在其他元素内部。这称为嵌套。如果我们想说明我们的猫非常暴躁，我们可以将单词 非常 包含在一个<strong> 元素中，这意味着该单词将具有强(更强)的文本格式</p>
<p>html<p>My cat is <strong>very</strong> grumpy.</p></p>
<p>嵌套有正确和错误的方式。在上面的示例中，我们首先打开了p元素，然后打开了strong元素。为了正确嵌套，我们应该先关闭strong元素，然后再关闭p元素。</p>
<p>以下是嵌套的错误方式示例</p>
<p>html<p>My cat is <strong>very grumpy.</p></strong></p>
<p>标签必须以一种它们彼此包含或排除的方式打开和关闭。对于上面的示例中那种重叠，浏览器必须猜测你的意图。这种猜测会导致意外的结果。</p>
<p>空元素并非所有元素都遵循打开标签、内容和关闭标签的模式。某些元素仅包含一个标签，通常用于在文档中插入/嵌入某些内容。这些元素称为空元素。例如，<img>元素将图像文件嵌入到页面中。</p>
<p>html<img</p>
<p>src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"</p>
<p>alt="Firefox icon" /></p>
<p>这将输出以下内容</p>
<p>注意：在HTML中，没有要求在空元素标签的末尾添加/，例如：<img src="images/cat.jpg" alt="cat" />。但是，它也是有效的语法，当你想让你的HTML符合XML规范时，你可以这样做。</p>
<p>属性元素也可以有属性。属性看起来像这样</p>
<p>属性包含有关元素的额外信息，这些信息不会出现在内容中。在本例中，class属性是一个用于标识名称，用于将元素与样式信息进行关联。</p>
<p>属性应该有</p>
<p>它与元素名称之间有一个空格。(对于具有多个属性的元素，属性也应该用空格隔开。)</p>
<p>属性名称，后跟一个等号。</p>
<p>属性值，用开始和结束引号括起来。</p>
<p>主动学习：向元素添加属性<img>元素可以接受许多属性，包括</p>
<p>src</p>
<p>src属性是必需属性，它指定图像的位置。例如：src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"。</p>
<p>alt</p>
<p>alt属性指定图像的文本描述。例如：alt="The Firefox icon"。</p>
<p>width</p>
<p>width属性指定图像的宽度，单位为像素。例如：width="300"。</p>
<p>height</p>
<p>height属性指定图像的高度，单位为像素。例如：height="300"。</p>
<p>在输入区域中编辑下面的行，将其变成一个图像。</p>
<p>在网上找到你喜欢的图像，右键单击它，然后按复制图像链接/地址。</p>
<p>回到下面的区域，添加src属性并用步骤 1 中的链接填充它。</p>
<p>设置alt属性。</p>
<p>添加width和height属性。</p>
<p>你将在输出区域中看到实时更改。</p>
<p>如果你犯了错误，你可以随时使用重置按钮将其重置。如果你真的卡住了，按显示解决方案按钮查看答案。</p>
<p><h2>Live output</h2></p>
<p><div class="output" style="min-height: 50px;"></div></p>
<p><h2>Editable code</h2></p>
<p><p class="a11y-label"></p>
<p>Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
<p></p></p>
<p><textarea id="code" class="input" style="min-height: 100px;width: 95%"></p>
<p><img alt="I should be an image" ></p>
<p></textarea></p>
<p><div class="playable-buttons"></p>
<p><input id="reset" type="button" value="Reset" /></p>
<p><input id="solution" type="button" value="Show solution" /></p>
<p></div></p>
<p>html {</p>
<p>font-family: sans-serif;</p>
<p>}</p>
<p>h2 {</p>
<p>font-size: 16px;</p>
<p>}</p>
<p>.a11y-label {</p>
<p>margin: 0;</p>
<p>text-align: right;</p>
<p>font-size: 0.7rem;</p>
<p>width: 98%;</p>
<p>}</p>
<p>body {</p>
<p>margin: 10px;</p>
<p>background: #f5f9fa;</p>
<p>}</p>
<p>const textarea = document.getElementById("code");</p>
<p>const reset = document.getElementById("reset");</p>
<p>const solution = document.getElementById("solution");</p>
<p>const output = document.querySelector(".output");</p>
<p>const code = textarea.value;</p>
<p>let userEntry = textarea.value;</p>
<p>function updateCode() {</p>
<p>output.innerHTML = textarea.value;</p>
<p>}</p>
<p>const htmlSolution =</p>
<p>'<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" alt="Firefox icon" width="100" height="100" />';</p>
<p>let solutionEntry = htmlSolution;</p>
<p>reset.addEventListener("click", () => {</p>
<p>textarea.value = code;</p>
<p>userEntry = textarea.value;</p>
<p>solutionEntry = htmlSolution;</p>
<p>solution.value = "Show solution";</p>
<p>updateCode();</p>
<p>});</p>
<p>solution.addEventListener("click", () => {</p>
<p>if (solution.value === "Show solution") {</p>
<p>textarea.value = solutionEntry;</p>
<p>solution.value = "Hide solution";</p>
<p>} else {</p>
<p>textarea.value = userEntry;</p>
<p>solution.value = "Show solution";</p>
<p>}</p>
<p>updateCode();</p>
<p>});</p>
<p>textarea.addEventListener("input", updateCode);</p>
<p>window.addEventListener("load", updateCode);</p>
<p>// stop tab key tabbing out of textarea and</p>
<p>// make it write a tab at the caret position instead</p>
<p>textarea.onkeydown = (e) => {</p>
<p>if (e.code === "Tab") {</p>
<p>e.preventDefault();</p>
<p>insertAtCaret("\t");</p>
<p>}</p>
<p>if (e.code === "Escape") {</p>
<p>textarea.blur();</p>
<p>}</p>
<p>};</p>
<p>function insertAtCaret(text) {</p>
<p>const scrollPos = textarea.scrollTop;</p>
<p>let caretPos = textarea.selectionStart;</p>
<p>const front = textarea.value.substring(0, caretPos);</p>
<p>const back = textarea.value.substring(</p>
<p>textarea.selectionEnd,</p>
<p>textarea.value.length,</p>
<p>);</p>
<p>textarea.value = front + text + back;</p>
<p>caretPos += text.length;</p>
<p>textarea.selectionStart = caretPos;</p>
<p>textarea.selectionEnd = caretPos;</p>
<p>textarea.focus();</p>
<p>textarea.scrollTop = scrollPos;</p>
<p>}</p>
<p>// Update the saved userCode every time the user updates the text area code</p>
<p>textarea.onkeyup = () => {</p>
<p>// We only want to save the state when the user code is being shown,</p>
<p>// not the solution, so that solution is not saved over the user code</p>
<p>if (solution.value === "Show solution") {</p>
<p>userEntry = textarea.value;</p>
<p>} else {</p>
<p>solutionEntry = textarea.value;</p>
<p>}</p>
<p>updateCode();</p>
<p>};</p>
<p>布尔属性有时你会看到没有值的属性。这是完全可以接受的。这些被称为布尔属性。布尔属性只能有一个值，通常与属性名称相同。例如，考虑disabled属性，你可以将其分配给表单输入元素。(你用它来禁用表单输入元素，这样用户就无法输入内容。禁用的元素通常会呈现为灰显。) 例如</p>
<p>html<input type="text" disabled="disabled" /></p>
<p>作为简写，可以接受以下写法</p>
<p>html<!-- using the disabled attribute prevents the end user from entering text into the input box --></p>
<p><input type="text" disabled /></p>
<p><!-- text input is allowed, as it doesn't contain the disabled attribute --></p>
<p><input type="text" /></p>
<p>作为参考，上面的示例还包括一个未禁用的表单输入元素。上面的示例中的HTML产生以下结果</p>
<p>省略属性值周围的引号如果你查看许多其他网站的代码，你可能会发现许多奇怪的标记样式，包括没有引号的属性值。在某些情况下允许这样做，但在其他情况下会导致标记出现问题。下面代码片段中的元素<a>称为锚点。锚点将文本包含起来，并将它们变成链接。href属性指定链接指向的网址。你可以这样写下面的基本版本，仅包含href属性，</p>
<p>html<a href=https://www.mozilla.org/>favorite website</a></p>
<p>锚点还可以具有title属性，它是指向页面的描述。但是，一旦我们以与href属性相同的方式添加title，就会出现问题</p>
<p>html<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></p>
<p>如上所述，浏览器会错误地解释标记，将title属性误认为三个属性：一个值为The的title属性，以及两个布尔属性Mozilla和homepage。显然，这不是我们想要的！它会导致错误或意外行为，正如你可以在下面的实时示例中看到的那样。尝试将鼠标悬停在链接上以查看标题文本！</p>
<p>始终包含属性引号。它可以避免此类问题，并使代码更易读。</p>
<p>单引号还是双引号？在本文中，你还会注意到属性用双引号括起来。但是，你可能在某些HTML代码中看到单引号。这只是一个风格问题。你可以随意选择你喜欢的哪一个。这两行是等效的</p>
<p>html<a href='https://www.example.com'>A link to my example.</a></p>
<p><a href="https://www.example.com">A link to my example.</a></p>
<p>确保不要混合使用单引号和双引号。下面的示例展示了一种会出错的引号混合方式</p>
<p>html<a href="https://www.example.com'>A link to my example.</a></p>
<p>但是，如果你使用了一种类型的引号，你可以在属性值内部包含另一种类型的引号</p>
<p>html<a href="https://www.example.com" title="Isn't this fun?"></p>
<p>A link to my example.</p>
<p></a></p>
<p>要在相同类型（单引号或双引号）的其他引号内部使用引号，请使用字符引用。例如，这将失效</p>
<p>html<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a></p>
<p>相反，你需要这样做</p>
<p>html<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a></p>
<p>HTML 文档的结构单独的HTML元素本身并没有多大用处。接下来，让我们来看看单个元素如何组合起来形成一个完整的HTML页面。</p>
<p>html<!doctype html></p>
<p><html lang="en-US"></p>
<p><head></p>
<p><meta charset="utf-8" /></p>
<p><title>My test page
This is my page