HTML 学生材料

HTML 是网页的支柱。在本单元中，我们将了解如何为网页构建坚实而有意义的结构。

重点小结

  • 学生了解 HTML 文件结构。
  • 学生知道如何使用常用标记来构建网页。

什么是 HTML？

HTML 是“HyperText Markup Language”（超文本标记语言）的缩写。它是我们用来执行以下操作的代码：

  • 创建存储在万维网上并在浏览器中显示的文档。
  • 为网页提供基本结构 - 网页的骨架。
  • 确保文本和图片能够正确加载，以便我们的浏览器显示。

何时使用 HTML？

您在万维网上看到的每个网页都是使用 HTML 代码编写的。按钮、图片、表单、文本部分 - 这些都是使用 HTML 创建的元素。

如果我们把网页比作人体，那么 HTML 就是骨架。我们可以使用 CSS 为身体添加皮肤和衣服，但前提是先要构建好骨架结构。

HTML 实际应用

HTML 的核心是元素。元素是使用标记创建的。

大多数元素都有一个开始标记和一个结束标记：

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

您希望在网页上显示的内容（文本甚至其他 HTML 元素）可以放在这两个标记之间，就像夹心三明治一样。

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

某些 HTML 内容是使用不需要额外结束标记的自闭合标记创建的：

<img />
<link />

由于此元素的作用是在文档中占位，因此只需这一个标记就足够了。与其他大多数 HTML 元素不同，您无法在这些自闭合元素中嵌套其他元素或信息。

HTML 元素的组成部分

HTML 示例

此代码将显示在浏览器中，如下图所示。

此代码…

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... 使此网页

HTML 参考文档

取景

背景信息和用途

HTML 是“Hyper Text Markup Language”（超文本标记语言）的首字母缩写。这是一种为文本赋予结构化含义的方式。这样，计算机和程序员就可以轻松确定一段文本的用途。

您可以将 HTML 视为网页的框架，它提供结构和内容，而 JavaScript 和 CSS 提供互动性和样式。

学习目标

学生将能够

  • 创建 HTML 文件并在编辑器和浏览器中打开该文件
  • 设置具有适当结构的 HTML 文件
  • 列出并使用一些常用标记向其网站添加结构和内容

使用入门

版块框架和用途

  • HTML 编写在扩展名为 .html 的文件中。
  • 您可以为 HTML 文件指定任何名称，但 index.html 是着陆页最常用的名称，除非开发者有理由将服务器配置为其他名称。
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

迷你挑战

  1. 创建 3 个其他 HTML 文件，并随意命名。
  2. 在文本编辑器和浏览器中打开其中一个文件。

HTML 页面的结构

版块框架和用途

HTML 文档应始终以相同的结构开头：

  • DOCTYPE 标记是特殊的，不会关闭。它也是唯一可以包含非字母数字（字母/数字）值的标记。
  • <head> 包含有关您网站的信息，但不是会显示在网页上的实际内容。
  • <body> 包含网页上将实际显示在屏幕上的所有内容。
  • 您将用于创建网页结构的标记应放置在 <body> 标记之间。
  • 在起始和结束 标记之间，我们插入 元素的文本或“内容”。最终结果如下所示：<example-tag>Content Goes in here</example-tag>。标记也可以放置在其他标记内。
  • 请注意，将一个标记放置在另一个标记内时，您应缩进新标记，以表明它是其父标记的子标记。

词汇

  • 元素 - 使用 HTML 代码创建的项目（例如图片、段落和标题）。
  • 标记 - 指示特定元素开始和结束的代码段。
  • 子元素 - 包含在其他元素内的元素。
  • 父元素 - 包含其他元素的元素。

HTML 示例

注意 ：以下只是一个参考示例；您无需立即理解所有内容，但最好了解一下格式良好的 HTML 可能是什么样子。

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

迷你挑战

  1. 打开您创建的其中一个文件，然后添加基本的 HTML 代码结构。
  2. 设置 HTML 正文以显示您的家谱（或其他人的家谱）。使用 section 标记来保存家人群组。使用 p 标记来保存家庭成员。家庭情况很复杂，但下面是一个示例：
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

共同的标记

版块框架和用途

一般来说，我们不会创建自己的元素类型。相反，有一组预定义元素，它们已关联了相应的功能。

如需查看代码块示例的细分，请参阅 HTML 参考文档

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

迷你挑战

  1. 修改上述所有内容，以反映您的兴趣。
  2. 在您在课程开始时创建的另一个空白 HTML 文件中，假设您正在准备一篇包含标题、标题和副标题的新闻报道（想不出内容？写一篇关于您旅行中某天的文章。想想您去过的小旅行、到访过的地点、吃过的美食）。
  3. 使用相关代码并添加一些内容，以便在您的网站上显示新闻报道。
  4. 验证您的内容是否显示在浏览器中！
  5. 拓展练习：创建一个表单，让其他人填写该表单，以便向您发送有关您文章的评论。虽然它还无法正常运行（我们尚未将其与 JavaScript 关联），但使用 HTML 创建此表单可以让我们了解如何创建可正常运行的表单。

上下文

HTML 是万维网上的内容所使用的语言。

您将使用命令行来导航至并打开 HTML 文件。您的 HTML 文件将通过使用 JavaScript 脚本（由各种函数组成）编写的 CSS 样式和行为进行扩充。HTML 文件也将是 Google App Engine 使用的模板，并从数据库中填充数据。

HTML 实际应用

HTML 入门

HTML 编写在扩展名为 .html 的文件中。

查看您的 Facebook 页面

在 Mac 上预览 HTML 文件：在命令行中，前往包含 HTML 页面的文件夹，然后输入“open filename”，将“filename”替换为 HTML 文件的名称。

常规语法

<tag>
  Content
</tag>

元素已嵌套

HTML 元素可以放置在其他元素内：

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

HTML 页面的结构

每个网页都具有相同的基本结构。如下所示：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <head> 包含有关您网站的信息，但不是会显示在网页上的实际内容（可将其视为网页的“大脑”）。
  • <body> 包含网页上将实际显示在屏幕上的所有内容。

常见元素

在 <body> 和 </body> 标记内使用这些常见元素可向网页添加内容。

段落

如需创建段落，请使用 p 开头和结尾标记：

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

评论

使用注释可让您的代码更易于阅读，同时不会影响最终呈现的 HTML。

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

标题

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

通用 <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

列表

列表项 (<li>) 的列表会封装在无序列表标记 (<ul>) 或有序列表标记 (<ol>) 中。

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

图片

<img> 标记需要使用 src 属性指定图片的地址，而可选的 alt 属性用于实现无障碍功能，包括屏幕阅读器。

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

对于超链接，<a> 标记需要使用 href 属性指定超链接目的地的地址。

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

水平线

<!-- This self-closing tag creates a line across your web page. -->
<hr>

休息时间

<!-- This self-closing tag creates a line break between elements. -->
<br>

表单

<form> 用于向用户收集信息。为了使 <form> 正常运行，它需要将收集的数据发送到某个位置进行处理或处理。因此，<form>通常需要额外的属性：

  • action - 提交表单时表单数据的目标位置
  • method - 指示是否应使用 GET 或 POST 类型的请求来处理数据。
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

输入

<input> 是 <form> 用于收集信息的元素。

<input> 元素通常还具有 name 属性，数据库会使用该属性来标识提交的数据所属的字段。

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

<input> 元素非常灵活：通过指定 type 属性，它可以呈现为文本字段、日历样式的日期选择器、单选按钮、下拉菜单等。您可以参阅一些外部文档，查看更完整的列表。

提示和技巧

  • 通过检查网页的代码，了解其他开发者使用了哪些标记向网页添加内容，从而了解可用的 HTML 标记。
  • 如果您找不到要添加的内容，请参阅开发者文档。以下是一些包含所有可能 HTML 元素的列表：https://www.w3schools.com/Tags/、https://developer.mozilla.org/en-US/docs/Web/HTML/Element、http://html-css-js.com/html/tags/
  • 编写 HTML 时，对于需要起始标记和结束标记的元素，最好先添加起始标记和结束标记，然后再在标记之间添加内容。这样，您就不会留下悬空标记。
  • 为了更好地查看代码中 HTML 元素的嵌套性质，请缩进位于其他元素内的元素。这有助于您快速识别 HTML 内容的结构。
  • 使用大量注释！这些提示有助于您自行排查代码问题，并在您请他人审核代码时提供帮助。
  • html5boilerplate.com 等网站上的资源可帮助您快速开始编写 HTML。

最佳实践摘要

  • 有关网页的信息会放在 HTML 文档的 <head> 中：标题、元数据、样式链接等。
  • 网页上的信息位于 HTML 文档的 中。<body>
  • 开发者可以使用许多元素来构建 HTML 文档的内容，包括：<p>、<h1>-<h6>、<div>、<li>、<img>、<a>、<hr>、<br>、<!-- --> 等。
  • 有些元素需要使用开始标记和结束标记：<p></p>。
  • 其他元素是自闭合的，因此只需要一个开始标记：<img>。
  • 标记可以包含属性（src、alt、id 等），这些属性可提供有关元素应如何运行的更多信息：<img src="filename.png" alt="description">。
  • 注释 (<!-- -->) 可为开发者提供有助于了解网页各个部分用途的备注。
  • 使用浏览器中的内置开发者工具检查网页的 HTML 代码，以了解网页的构建方式。

问题 1

以下哪个元素是子元素？（在本练习中忽略 body/html 元素）

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 和 p

问题 2

在 HTML 文档中，__ 位于 <head> 元素中，而 __ 位于 <body> 元素中。

  1. 结构、元数据
  2. 元数据、结构
  3. 标题、较小的内容
  4. 网站的标头、网站的主要内容

问题 3

以下哪些不是缩进嵌套元素的好理由？

  1. 缩进可让您更轻松地查看哪些元素包含在其他元素中
  2. 缩进有助于人类更轻松地阅读网页结构
  3. 缩进可让机器人/搜索引擎更轻松地读取网页的结构
  4. 缩进有助于更轻松地识别同级元素

问题 4

以下哪项是 HTML 元素的属性？

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. 边栏
  4. Sidebar goes here!

问题 5

以下 HTML 元素具有多少个属性？

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

问题 6

在以下展示关系的 HTML 代码段中，哪个元素是父元素？

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

问题 7

以下 HTML 代码段中有多少元素是父元素的子元素？

（不包括外层封装的 <body> 或 <html> 元素）

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

问题 8

虽然某些浏览器会正确呈现以下 HTML 代码段，但它存在什么问题？

<img src=puppies.png width=400 />
  1. 没有结束标记
  2. 属性值应使用引号括起来
  3. 提供 width 属性还需要提供 height 属性
  4. 缺少必需的属性

问题 1

以下哪个元素是子元素？（在本练习中忽略 body/html 元素）

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

a 元素是一个子元素，因为它包含在另一个元素中。

问题 2

在 HTML 文档中，__ 位于 <head> 元素中，而 __ 位于 <body> 元素中。

元数据位于 <head> 元素中，结构位于 <body> 元素中。<head> 元素中的任何内容都不会显示在网页本身上。

问题 3

以下哪些不是缩进嵌套元素的好理由？

缩进并不能让机器人/搜索引擎更轻松地读取网页的结构 - 当机器人读取网站时，即使 HTML 代码全部位于一行中，它也能读取。

问题 4

以下哪项是 HTML 元素的属性？

<div class="sidebar">Sidebar goes here!</div>

class 是属性 - 属性位于 HTML 元素内，通常（但不一定）具有值。

问题 5

以下 HTML 元素具有多少个属性？

<input type="text" placeholder="username" name="username" />

上面的 input 元素具有 3 个属性：type、placeholder 和 name。

问题 6

在以下展示关系的 HTML 代码段中，哪个元素是父元素？

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> 是父元素，因为它包含其他元素。

问题 7

以下 HTML 代码段中有多少元素是父元素的子元素？

（不包括外层封装的 <body> 或 <html> 元素）

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

此代码段中有 4 个子元素 - 基本上，任何具有父元素的元素（<div> 元素除外）都是子元素 - <h1>、<p>、<i>、<a>。

问题 8

虽然某些浏览器会正确呈现以下 HTML 代码段，但它存在什么问题？

<img src=puppies.png width=400 />

属性值应使用引号括起来。<img /> 是一个自闭合标记，没有必需的属性。可以有 width 而没有 height，反之亦然。