` 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。
-
<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。比如：
+### 换行与水平分割线
-
<p>从前有个人叫小高<br>
-他说写 HTML 感觉最好<br>
-但他写的代码结构语义一团糟<br>
-他写的标签谁也懂不了。</p>
-
+有时会用到 {{htmlelement("br")}} 和 {{htmlelement("hr")}} 两个元素，需要介绍一下。
-
没有 <br> 元素，这段会直接显示在长长的一行中（如前文所讲，HTML 会忽略大部分空格）；使用 <br> 元素，才使得诗看上去像诗：
+`
` 可在段落中进行换行；`
` 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。比如：
+```html
从前有个人叫小高
- 他说写 HTML 感觉最好
- 但他写的代码结构语义一团糟
- 他写的标签谁也懂不了。
+他说写 HTML 感觉最好
+但他写的代码结构语义一团糟
+他写的标签谁也懂不了。
+```
-
<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。例如：
+没有 `
` 元素，这段会直接显示在长长的一行中（如前文所讲，[HTML 会忽略大部分空格](/zh-CN/docs/learn/HTML/Introduction_to_HTML/Getting_started#HTML中的空白)）；使用 `
` 元素，才使得诗看上去像诗：
-
<p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p>
-<hr>
-<p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p>
+从前有个人叫小高
+他说写 HTML 感觉最好
+但他写的代码结构语义一团糟
+他写的标签谁也懂不了。
-
将渲染成：
+`
` 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。例如：
-
原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。
+
原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。
+
+
却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”
-
却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”
+将渲染成：
-
规划一个简单的网站
+原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。
-
在完成页面内容的规划后，一般应按部就班地规划整个网站的内容，要可能带给用户最好的体验，需要哪些页面、如何排列组合这些页面、如何互相链接等问题不可忽略。这些工作称为{{glossary("Information architecture", "信息架构")}}。在大型网站中，大多数规划工作都可以归结于此，而对于一个只有几个页面的简单网站，规划设计过程可以更简单，更有趣！
+却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”
-
- - 时刻记住，大多数（不是全部）页面会使用一些相同的元素，例如导航菜单以及页脚内容。若网站为商业站点，不妨在所有页面的页脚都加上联系方式。请记录这些对所有页面都通用的内容：
- - 接下来，可为页面结构绘制草图（这里与前文那个站点页面的截图类似）。记录每一块的作用：
- - 下面，对于期望添加进站点的所有其它（通用内容以外的）内容展开头脑风暴，直接罗列出来。
- - 下一步，试着对这些内容进行分组，这样可以让你了解哪些内容可以放在同一个页面。这种做法和 {{glossary("Card sorting", "卡片分类法")}} 非常相似。
- - 接下来，试着绘制一个站点地图的草图，使用一个气泡代表网站的一个页面，并绘制连线来表示页面间的一般工作流。主页面一般置于中心，且链接到其他大多数页面；小型网站的大多数页面都可以从主页的导航栏中链接跳转。也可记录下内容的显示方式。
-
+## 规划一个简单的网站
-
主动学习：创建站点地图
+在完成页面内容的规划后，一般应按部就班地规划整个网站的内容，要可能带给用户最好的体验，需要哪些页面、如何排列组合这些页面、如何互相链接等问题不可忽略。这些工作称为{{glossary("Information architecture", "信息架构")}}。在大型网站中，大多数规划工作都可以归结于此，而对于一个只有几个页面的简单网站，规划设计过程可以更简单，更有趣！
-
自己创造一个网站（什么网站呢？）并尝试执行上述步骤。
+1. 时刻记住，大多数（不是全部）页面会使用一些相同的元素，例如导航菜单以及页脚内容。若网站为商业站点，不妨在所有页面的页脚都加上联系方式。请记录这些对所有页面都通用的内容：
+2. 接下来，可为页面结构绘制草图（这里与前文那个站点页面的截图类似）。记录每一块的作用：
+3. 下面，对于期望添加进站点的所有其它（通用内容以外的）内容展开头脑风暴，直接罗列出来。
+4. 下一步，试着对这些内容进行分组，这样可以让你了解哪些内容可以放在同一个页面。这种做法和 {{glossary("Card sorting", "卡片分类法")}} 非常相似。
+5. 接下来，试着绘制一个站点地图的草图，使用一个气泡代表网站的一个页面，并绘制连线来表示页面间的一般工作流。主页面一般置于中心，且链接到其他大多数页面；小型网站的大多数页面都可以从主页的导航栏中链接跳转。也可记录下内容的显示方式。
-
-
备注： 记得保存你的杰作，今后可能会用到哦。
-
+### 主动学习：创建站点地图
+
+自己创造一个网站（什么网站呢？）并尝试执行上述步骤。
+
+> **备注：** 记得保存你的杰作，今后可能会用到哦。
-
小结
+## 小结
-
现在你应该对如何构建网页/站点有了更好的理解。下一节我们将学习如何调试 HTML。
+现在你应该对如何构建网页/站点有了更好的理解。下一节我们将学习如何调试 HTML。
-
另请参阅
+## 另请参阅
-
+- [使用 HTML 区段和大纲](/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines)：HTML5 语义元素和大纲算法进阶指南。
-
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
-
本章目录
+## 本章目录
-
+- [开始学习 HTML](/zh-CN/docs/learn/HTML/Introduction_to_HTML/Getting_started)
+- [“头”里有什么？HTML 元信息](/zh-CN/docs/learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML)
+- [HTML 文字处理初步](/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals)
+- [创建超链接](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
+- [高级文字格式](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)
+- [文档和站点结构](/zh-CN/docs/learn/HTML/Introduction_to_HTML/文件和网站结构)
+- [HTML 调试](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)
+- [课程测验：为信件排版](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter)
+- [课程测验：构建内容丰富的网页](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content)
diff --git a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
index 8ea9a44dc50cf1..aafdc6c7260bbf 100644
--- a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
@@ -8,65 +8,70 @@ tags:
- 指南
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
---
-
{{LearnSidebar}}
+{{LearnSidebar}}{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
-
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
-
-
本文将从 HTML 最基础的部分讲起，对元素（Element）、属性（Attribute）以及可能涉及的一些重要术语进行介绍，并明确它们在语言中所处的位置。本文还会讲解 HTML 元素和页面的组织方式，以及其他一些重要的基本语言特性。学习的过程中，我们会使用 HTML 做一些好玩的事情。
+本文将从 HTML 最基础的部分讲起，对元素（Element）、属性（Attribute）以及可能涉及的一些重要术语进行介绍，并明确它们在语言中所处的位置。本文还会讲解 HTML 元素和页面的组织方式，以及其他一些重要的基本语言特性。学习的过程中，我们会使用 HTML 做一些好玩的事情。
-
-
- | 预备知识： |
- 具备计算机基础知识，安装了基础软件环境，了解基本的文件组织方法。 |
-
-
- | 学习目标： |
- 熟悉 HTML 语言的基础知识，掌握几个 HTML 元素的基本用法。 |
-
-
+
+
+ | 预备知识： |
+
+ 具备计算机基础知识，安装了基础软件环境，了解基本的文件组织方法。
+ |
+
+
+ | 学习目标： |
+ 熟悉 HTML 语言的基础知识，掌握几个 HTML 元素的基本用法。 |
+
+
-
什么是 HTML?
+## 什么是 HTML?
-
{{glossary("HTML")}} (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（{{Glossary("Element", "elements")}}）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ {{Glossary("Tag", "tags")}}）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如下面一行内容：
+{{glossary("HTML")}} (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的**标记语言**。HTML 可复杂、可简单，一切取决于开发者。它由一系列的**元素（{{Glossary("Element", "elements")}}）**组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ {{Glossary("Tag", "tags")}}）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如下面一行内容：
-
My cat is very grumpy
+ My cat is very grumpy
-
可以将这行文字封装成一个段落（Paragraph）{{htmlelement("p")}}元素来使其在单独一行呈现：
+可以将这行文字封装成一个段落（Paragraph）{{htmlelement("p")}}元素来使其在单独一行呈现：
-
<p>My cat is very grumpy</p>
+```html
+
My cat is very grumpy
+```
-
-
备注： HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 {{htmlelement("title")}} 写作<title>、<TITLE>、<Title>、<TiTlE>，等等都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母。
-
+> **备注：** HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 {{htmlelement("title")}} 写作`
、``<TITLE> `、`<Title>`、`<TiTlE>`，等等都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母。
-<h2 id="剖析一个_HTML_元素">剖析一个 HTML 元素</h2>
+## 剖析一个 HTML 元素
-<p>让我们进一步探讨我们的段落元素：</p>
+让我们进一步探讨我们的段落元素：
-<p><img src="grumpy-cat-small.png"></p>
+
-<p>这个元素的主要部分有：</p>
+这个元素的主要部分有：
-<ol>
- <li><strong>开始标签</strong>（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。</li>
- <li><strong>结束标签</strong>（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。</li>
- <li><strong>内容</strong>（Content）：元素的内容，本例中就是所输入的文本本身。</li>
- <li><strong>元素</strong>（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。</li>
-</ol>
+1. **开始标签**（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
+2. **结束标签**（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
+3. **内容**（Content）：元素的内容，本例中就是所输入的文本本身。
+4. **元素**（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
-<h3 id="主动学习：创建第一个_HTML_元素">主动学习：创建第一个 HTML 元素</h3>
+### 主动学习：创建第一个 HTML 元素
-<p>通过使用标签<code><em></code>和<code></em></code>（在前面放置<code><em></code>打开元素，在后面放置<code></em></code>关闭元素）——这使得行内容变成斜体强调！你可以在“输出”区域中实时查看更改更新。</p>
+通过使用标签`<em>`和`</em>`（在前面放置`<em>`打开元素，在后面放置`</em>`关闭元素）——这使得行内容变成斜体强调！你可以在“输出”区域中实时查看更改更新。
-<p>如果写错了，可随时按【重置】按钮重新开始，如果实在想不出来，可按【显示答案】按钮查看答案。</p>
+如果写错了，可随时按【重置】按钮重新开始，如果实在想不出来，可按【显示答案】按钮查看答案。
-<pre class="brush: html hidden"><!DOCTYPE html>
-<html lang="zh-CN">
- <head>
- <meta charset="utf-8">
- <style>
+```html hidden
+<!DOCTYPE html>
+<html lang="zh-CN">
+ <head>
+ <meta charset="utf-8">
+ <style>
body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; }
h2 { font-size: 16px; }
code, textarea { font-family: Consolas, Menlo, monospace; }
@@ -74,33 +79,33 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
.input { min-height: 100px; width: 95%; }
.a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; }
.controls { width: 96%; text-align: right; }
- </style>
- </head>
- <body>
- <h2>实时输出</h2>
- <div class="output"></div>
-
- <h2>可编辑代码</h2>
- <p class="a11y-label">按 ESC 退出编辑区域，按 Tab 可插入制表符 <code>'\t'</code> </p>
- <textarea id="code" class="input"></textarea>
-
- <div class="controls">
- <button id="btn-reset">重置</button>
- <button id="btn-solution">显示答案</button>
- </div>
- <script>
+ </style>
+ </head>
+ <body>
+ <h2>实时输出</h2>
+ <div class="output"></div>
+
+ <h2>可编辑代码</h2>
+ <p class="a11y-label">按 ESC 退出编辑区域，按 Tab 可插入制表符 <code>'\t'</code> </p>
+ <textarea id="code" class="input"></textarea>
+
+ <div class="controls">
+ <button id="btn-reset">重置</button>
+ <button id="btn-solution">显示答案</button>
+ </div>
+ <script>
const btnReset = document.getElementById('btn-reset');
const btnSolution = document.getElementById('btn-solution');
const blockOutput = document.querySelector('.output');
const blockInput = document.querySelector('.input');
const original = '刀枪剑戟 斧钺钩叉';
- const answer = '<em>刀枪剑戟 斧钺钩叉</em>';
+ const answer = '<em>刀枪剑戟 斧钺钩叉</em>';
let userEntry = "";
init();
btnReset.addEventListener('click', init);
- btnSolution.addEventListener('click', () => {
+ btnSolution.addEventListener('click', () => {
if (btnSolution.textContent === '显示答案') {
blockInput.value =
blockOutput.innerHTML = answer;
@@ -112,7 +117,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
}
});
- blockInput.addEventListener('keydown', (e) => {
+ blockInput.addEventListener('keydown', (e) => {
switch (e.key) {
case 'Tab':
e.preventDefault();
@@ -124,7 +129,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
}
});
- blockInput.addEventListener('keyup', () => {
+ blockInput.addEventListener('keyup', () => {
userEntry = blockInput.value;
blockOutput.innerHTML = blockInput.value;
if (btnSolution.textContent === '隐藏答案') {
@@ -153,105 +158,100 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
blockInput.focus();
blockInput.scrollTop = scrollPos;
}
- </script>
- </body>
-</html></pre>
+ </script>
+ </body>
+</html>
+```
-<p>{{ EmbedLiveSample('主动学习：创建第一个 HTML 元素', 700, 400) }}</p>
+{{ EmbedLiveSample('主动学习：创建第一个 HTML 元素', 700, 400) }}
-<h3 id="嵌套元素">嵌套元素</h3>
+### 嵌套元素
-<p>你也可以把元素放到其它元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将<strong>“very”</strong>嵌套在{{htmlelement("strong")}} 中，意味着这个单词被着重强调：</p>
+你也可以把元素放到其它元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将**“very”**嵌套在{{htmlelement("strong")}} 中，意味着这个单词被着重强调：
-<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre>
+```html
+<p>My cat is <strong>very</strong> grumpy.</p>
+```
-<p>你需要确保元素被正确的嵌套：在上面的例子中我们先打开{{htmlelement("p")}}元素，然后才打开{{htmlelement("strong")}}元素，因此必须先将{{htmlelement("strong")}}元素关闭，然后再去关闭{{htmlelement("p")}}元素。下面的例子是错误的：</p>
+你需要确保元素被正确的嵌套：在上面的例子中我们先打开{{htmlelement("p")}}元素，然后才打开{{htmlelement("strong")}}元素，因此必须先将{{htmlelement("strong")}}元素关闭，然后再去关闭{{htmlelement("p")}}元素。下面的例子是错误的：
-<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre>
+```html example-bad
+<p>My cat is <strong>very grumpy.</p></strong>
+```
-<p>所有的元素都需要正确的打开和关闭，这样才能按你所想的方式展现。如果像上述的例子一样进行了错误的嵌套，那么浏览器会去猜测你想要表达的意思，但很有可能会得出错误的结果。所以永远不要这么做！</p>
+所有的元素都需要正确的打开和关闭，这样才能按你所想的方式展现。如果像上述的例子一样进行了错误的嵌套，那么浏览器会去猜测你想要表达的意思，但很有可能会得出错误的结果。所以永远不要这么做！
-<h3 id="块级元素和内联元素">块级元素和内联元素</h3>
+### 块级元素和内联元素
-<p>在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。</p>
+在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。
-<ul>
- <li>块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。</li>
- <li>内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素{{htmlelement("a")}}或者强调元素{{htmlelement("em")}}和 {{htmlelement("strong")}}。</li>
-</ul>
+- 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
+- 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素{{htmlelement("a")}}或者强调元素{{htmlelement("em")}}和 {{htmlelement("strong")}}。
-<p>看一看下面的例子：</p>
+看一看下面的例子：
-<pre class="brush: html"><em>第一</em><em>第二</em><em>第三</em>
+```html
+<em>第一</em><em>第二</em><em>第三</em>
-<p>第四</p><p>第五</p><p>第六</p>
-</pre>
+<p>第四</p><p>第五</p><p>第六</p>
+```
-<p>{{htmlelement("em")}} 是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而{{htmlelement("p")}}是一个块级元素，所以第二行代码中的每个元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着默认的展示{{htmlelement("p")}}元素的<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a>）。</p>
+{{htmlelement("em")}} 是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而{{htmlelement("p")}}是一个块级元素，所以第二行代码中的每个元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着默认的展示{{htmlelement("p")}}元素的[CSS styling](/en-US/docs/Learn/CSS/Introduction_to_CSS)）。
-<p>{{ EmbedLiveSample('块级元素和内联元素', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('块级元素和内联元素', 700, 200, "", "", "hide-codepen-jsfiddle") }}
-<div class="note">
-<p><strong>备注：</strong> HTML5 重新定义了元素的类别：见 <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">元素内容分类</a>(<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories">译文</a>)。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。</p>
-</div>
+> **备注：** HTML5 重新定义了元素的类别：见 [元素内容分类](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories)([译文](/zh-CN/docs/Web/Guide/HTML/Content_categories))。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。
-<div class="note">
-<p><strong>备注：</strong> 在这篇文章中提到的“块”和“内联”，不应该与 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> 中的同名术语相混淆。尽管他们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。</p>
-</div>
+> **备注：** 在这篇文章中提到的“块”和“内联”，不应该与 [the types of CSS boxes](/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes) 中的同名术语相混淆。尽管他们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。
-<div class="note">
-<p><strong>备注：</strong> 你可以查阅包含了块级元素和内联元素列表的参考页面—see <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p>
-</div>
+> **备注：** 你可以查阅包含了块级元素和内联元素列表的参考页面—see [Block-level elements](/en-US/docs/Web/HTML/Block-level_elements) and [Inline elements](/en-US/docs/Web/HTML/Inline_elements).
-<h3 id="空元素">空元素</h3>
+### 空元素
-<p>不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素{{htmlelement("img")}}是用来在元素{{htmlelement("img")}}所在位置插入一张指定的图片。例子如下：</p>
+不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素{{htmlelement("img")}}是用来在元素{{htmlelement("img")}}所在位置插入一张指定的图片。例子如下：
-<pre class="brush: html"><img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png"></pre>
+```html
+<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">
+```
-<p>显示如下：</p>
+显示如下：
-<p>{{ EmbedLiveSample('空元素', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('空元素', 700, 300, "", "", "hide-codepen-jsfiddle") }}
-<div class="note">
-<p><strong>备注：</strong> 空元素（Empty elements）有时也被叫作 <em>void elements</em>.</p>
-</div>
+> **备注：** 空元素（Empty elements）有时也被叫作 _void elements_.
-<h2 id="属性">属性</h2>
+## 属性
-<p>元素也可以拥有属性，如下：</p>
+元素也可以拥有属性，如下：
-<p><img alt='&amp;lt;p class="editor-note">我的猫咪脾气爆&amp;lt;/p>' src="grumpy-cat-attribute-small.png"></p>
+
-<p>属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。</p>
+属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。
-<p>一个属性必须包含如下内容：</p>
+一个属性必须包含如下内容：
-<ol>
- <li>一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)</li>
- <li>属性名称，后面跟着一个等于号。</li>
- <li>一个属性值，由一对引号“ ”引起来。</li>
-</ol>
+1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
+2. 属性名称，后面跟着一个等于号。
+3. 一个属性值，由一对引号“ ”引起来。
-<h3 id="学习实践：为一个元素添加属性">学习实践：为一个元素添加属性</h3>
+### 学习实践：为一个元素添加属性
-<p>另一个例子是关于元素{{htmlelement("a")}}的——元素{{htmlelement("a")}}是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：</p>
+另一个例子是关于元素{{htmlelement("a")}}的——元素{{htmlelement("a")}}是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：
-<ul>
- <li><code>href</code>: 这个属性声明超链接的 web 地址，当这个链接被点击浏览器会跳转至 href 声明的 web 地址。例如：<code>href="https://www.mozilla.org/"</code>。</li>
- <li><code>title</code>: 标题<code>title</code>属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：<code>title="The Mozilla homepage"</code>。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。</li>
- <li><code>target</code>: 目标<code>target</code>属性用于指定链接如何呈现出来。例如，<code>target="_blank"</code>将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。</li>
-</ul>
+- `href`: 这个属性声明超链接的 web 地址，当这个链接被点击浏览器会跳转至 href 声明的 web 地址。例如：`href="https://www.mozilla.org/"`。
+- `title`: 标题`title`属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：`title="The Mozilla homepage"`。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
+- `target`: 目标`target`属性用于指定链接如何呈现出来。例如，`target="_blank"`将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。
-<p>编辑下面的文本框中的内容，使之变成指向任一个你喜欢的 web 地址的链接。首先，添加<a>元素，然后为它添加 href 属性和 title 属性。你可以即时的在输出区域看到你修改的内容。你应该可以看到一个连接，当鼠标移上此链接时会显示 title 属性值，当点击此链接时会跳转到 href 指定的 web 地址。记住：在元素名和属性名之间以及两个属性之间要有一个空格。</p>
+编辑下面的文本框中的内容，使之变成指向任一个你喜欢的 web 地址的链接。首先，添加\<a>元素，然后为它添加 href 属性和 title 属性。你可以即时的在输出区域看到你修改的内容。你应该可以看到一个连接，当鼠标移上此链接时会显示 title 属性值，当点击此链接时会跳转到 href 指定的 web 地址。记住：在元素名和属性名之间以及两个属性之间要有一个空格。
-<p>如果写错了，可随时按【重置】按钮重新开始，如果实在想不出来，可按【显示答案】按钮查看答案。</p>
+如果写错了，可随时按【重置】按钮重新开始，如果实在想不出来，可按【显示答案】按钮查看答案。
-<pre class="brush: html hidden"><!DOCTYPE html>
-<html lang="zh-CN">
- <head>
- <meta charset="utf-8">
- <style>
+```html hidden
+<!DOCTYPE html>
+<html lang="zh-CN">
+ <head>
+ <meta charset="utf-8">
+ <style>
body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; }
h2 { font-size: 16px; }
code, textarea { font-family: Consolas, Menlo, monospace; }
@@ -259,34 +259,34 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
.input { min-height: 100px; width: 95%; }
.a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; }
.controls { width: 96%; text-align: right; }
- </style>
-
- </head>
- <body>
- <h2>实时输出</h2>
- <div class="output"></div>
-
- <h2>可编辑代码</h2>
- <p class="a11y-label">按 ESC 退出编辑区域，按 Tab 可插入制表符 <code>'\t'</code> </p>
- <textarea id="code" class="input"></textarea>
-
- <div class="controls">
- <button id="btn-reset">重置</button>
- <button id="btn-solution">显示答案</button>
- </div>
- <script>
+ </style>
+
+ </head>
+ <body>
+ <h2>实时输出</h2>
+ <div class="output"></div>
+
+ <h2>可编辑代码</h2>
+ <p class="a11y-label">按 ESC 退出编辑区域，按 Tab 可插入制表符 <code>'\t'</code> </p>
+ <textarea id="code" class="input"></textarea>
+
+ <div class="controls">
+ <button id="btn-reset">重置</button>
+ <button id="btn-solution">显示答案</button>
+ </div>
+ <script>
const btnReset = document.getElementById('btn-reset');
const btnSolution = document.getElementById('btn-solution');
const blockOutput = document.querySelector('.output');
const blockInput = document.querySelector('.input');
- const original = '<p>欲练葵花宝典，需引刀自宫</p>';
- const answer = '<p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>，需引刀自宫</p>';
+ const original = '<p>欲练葵花宝典，需引刀自宫</p>';
+ const answer = '<p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>，需引刀自宫</p>';
let userEntry = "";
init();
btnReset.addEventListener('click', init);
- btnSolution.addEventListener('click', () => {
+ btnSolution.addEventListener('click', () => {
if (btnSolution.textContent === '显示答案') {
blockInput.value =
blockOutput.innerHTML = answer;
@@ -298,7 +298,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
}
});
- blockInput.addEventListener('keydown', (e) => {
+ blockInput.addEventListener('keydown', (e) => {
switch (e.key) {
case 'Tab':
e.preventDefault();
@@ -310,7 +310,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
}
});
- blockInput.addEventListener('keyup', () => {
+ blockInput.addEventListener('keyup', () => {
userEntry = blockInput.value;
blockOutput.innerHTML = blockInput.value;
if (btnSolution.textContent === '隐藏答案') {
@@ -339,134 +339,140 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
blockInput.focus();
blockInput.scrollTop = scrollPos;
}
- </script>
- </body>
-</html>
-</pre>
+ </script>
+ </body>
+</html>
+```
+
+{{ EmbedLiveSample('学习实践：为一个元素添加属性', 700, 350) }}
-<p>{{ EmbedLiveSample('学习实践：为一个元素添加属性', 700, 350) }}</p>
+> **备注：** 可到 Github 在线使用这个“[代码操场](https://roy-tian.github.io/learning-area/extras/tools/playable-code)”。
-<div class="blockIndicator note">
-<p><strong>备注：</strong> 可到 Github 在线使用这个“<a href="https://roy-tian.github.io/learning-area/extras/tools/playable-code">代码操场</a>”。</p>
-</div>
+### 布尔属性
-<h3 id="布尔属性">布尔属性</h3>
+有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如{{htmlattrxref("disabled", "input")}} 属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据。
-<p>有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如{{htmlattrxref("disabled", "input")}} 属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据。</p>
+ <input type="text" disabled="disabled">
-<pre><input type="text" disabled="disabled"></pre>
+方便起见，我们完全可以将其写成以下形式 (我们还提供了一个非禁止输入的表单元素供您参考，以作为对比)：
-<p>方便起见，我们完全可以将其写成以下形式 (我们还提供了一个非禁止输入的表单元素供您参考，以作为对比)：</p>
+```html
+<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
+<input type="text" disabled>
-<pre class="brush: html"><!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
-<input type="text" disabled>
+<!-- 下面这个输入框没有 disabled 属性，所以用户可以向其中输入 -->
+<input type="text">
+```
-<!-- 下面这个输入框没有 disabled 属性，所以用户可以向其中输入 -->
-<input type="text">
-</pre>
+上面两段 HTML 代码产生的效果如下：
-<p>上面两段 HTML 代码产生的效果如下：</p>
+{{ EmbedLiveSample('布尔属性', 700, 100, "", "", "hide-codepen-jsfiddle") }}
-<p>{{ EmbedLiveSample('布尔属性', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+### 省略包围属性值的引号
-<h3 id="省略包围属性值的引号">省略包围属性值的引号</h3>
+当你浏览那些粗糙的 web 网站，你将会看见各种各样奇怪的标记风格，其中就有不给属性值添加引号。在某些情况下它是被允许的，但是其他情况下会破坏你的标记。例如，我们可以写一个只拥有一个 href 属性的链接，如下：
-<p>当你浏览那些粗糙的 web 网站，你将会看见各种各样奇怪的标记风格，其中就有不给属性值添加引号。在某些情况下它是被允许的，但是其他情况下会破坏你的标记。例如，我们可以写一个只拥有一个 href 属性的链接，如下：</p>
+```html example-bad
+<a href=https://www.mozilla.org/>收藏页面</a>
+```
-<pre class="example-bad brush: html"><a href=<code>https://www.mozilla.org/</code>>收藏页面</a></pre>
+然而，当我们再添加一个 title 属性时就会出错，如下：
-<p>然而，当我们再添加一个 title 属性时就会出错，如下：</p>
+```html example-bad
+<a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏页面</a>
+```
-<pre class="example-bad brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>收藏页面</a></pre>
+此时浏览器会误解你的标记，它会把 title 属性理解为三个属性——title 的属性值为"The“，另外还有两个布尔属性“`Mozilla`”和“`homepage`”。看下面的例子，它明显不是我们所期望的，并且在这个编码里面它会报错或者出现异常行为。试一试把鼠标移动到链接上，看会显示什么 title 属性值！
-<p>此时浏览器会误解你的标记，它会把 title 属性理解为三个属性——title 的属性值为"The“，另外还有两个布尔属性“<code>Mozilla</code>”和“<code>homepage</code>”。看下面的例子，它明显不是我们所期望的，并且在这个编码里面它会报错或者出现异常行为。试一试把鼠标移动到链接上，看会显示什么 title 属性值！</p>
+{{ EmbedLiveSample('省略包围属性值的引号', 700, 100, "", "", "hide-codepen-jsfiddle") }}
-<p>{{ EmbedLiveSample('省略包围属性值的引号', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+我们建议始终添加引号——这样可以避免很多问题，并且使代码更易读。
-<p>我们建议始终添加引号——这样可以避免很多问题，并且使代码更易读。</p>
+### 单引号或者双引号？
-<h3 id="单引号或者双引号？">单引号或者双引号？</h3>
+在目前为止，本章内容所有的属性都是由双引号来包裹。也许在一些 HTML 中，你以前也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：
-<p>在目前为止，本章内容所有的属性都是由双引号来包裹。也许在一些 HTML 中，你以前也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：</p>
+```html
+<a href="http://www.example.com">示例站点链接</a>
-<pre class="brush: html"><a href="http://www.example.com">示例站点链接</a>
+<a href='http://www.example.com'>示例站点链接</a>
+```
-<a href='http://www.example.com'>示例站点链接</a></pre>
+但你应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的：
-<p>但你应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的：</p>
+```html example-bad
+<a href="http://www.example.com'>示例站点链接</a>
+```
-<pre class="example-bad brush: html"><a href="http://www.example.com'>示例站点链接</a></pre>
+在一个 HTML 中已使用一种引号，你可以在此引号中嵌套另外一种引号：
-<p>在一个 HTML 中已使用一种引号，你可以在此引号中嵌套另外一种引号：</p>
+```html
+<a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>
+```
-<pre class="brush: html"><a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a></pre>
+如果你想将引号当作文本显示在 html 中，你就必须使用[实体引用](#实体引用：_在HTML中包含特殊字符)。
-<p>如果你想将引号当作文本显示在 html 中，你就必须使用<a href="#实体引用：_在HTML中包含特殊字符">实体引用</a>。</p>
+## 剖析 HTML 文档
-<h2 id="剖析HTML文档">剖析 HTML 文档</h2>
+学习了一些 HTML 元素的基础知识，这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的 HTML 页面的：
-<p>学习了一些 HTML 元素的基础知识，这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的 HTML 页面的：</p>
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>我的测试站点
+
+
+
这是我的页面
+
+
+ usemap="#example-map-1" />
+```
-