# 花艺瓶项目 Part 1: HTML 简介 ![HTML 简介](/sketchnotes/webdev101-html.png) > 由 [Tomomi Imura](https://twitter.com/girlie_mac) 绘制 ## 课前测试 [课前测试](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=zh_cn) ### 介绍 HTML,全称 HyperText Markup Language,它是网页的骨架。如果说 CSS 在装扮你的 HTML,并且 JavaScript 让它活起来,HTML 则是你的网页应用程序的身体。而 HTML 的语法也正好能证明这种看法,它包含了名为 "head"(头部)、 "body"(身子) 和 "footer"(脚部) 的标签。 在这次课程中,我们将会使用 HTML 去布局我们的虚拟**花艺瓶**界面的骨架。它将包含一个标题和三列内容:左右两列放置的可以拖拽的植物,中间的区域放置的是一个玻璃造型的花艺瓶。完成这堂课的内容,你应该可以看到放置着植物的列,但界面可能看起来有点奇怪。但没必要担心,在后面的内容里你会使用 CSS 编写样式使得它变得好看起来。 ### 任务 在你的电脑上,创建一个名为 'terrarium' 的文件夹,并且在其中创建 'index.html'。你可以在 Visual Studio Code 中打开一个新的 VS Code 窗口去创建你的 terrarium 文件夹,点击「打开文件夹」来查看你的文件目录。在侧边管理面板中点击微小的「文档」按钮來创建新的文件: ![VS Code 的侧边管理面板](../images/vs-code-index.png) 也可以这样 在 git bash 中执行以下命令: * `mkdir terrarium` * `cd terrarium` * `touch index.html` * `code index.html` 或是 `nano index.html` > index.html 文件会被你的浏览器识别为文件夹中的默认要打开的文件。例如这个网址:`https://anysite.com/test` 所对应的项目,是以包含着名为 `test` 目录且该目录存在 `index.html` 文件的结构构建的。并且 `index.html` 不需要展示在网址的末尾。 --- ## DocType(文档类型声明) 和 html 标签 HTML 文件的第一行就是文档类型声明。要将这一行内容放在文档的最顶端的位置实在会让人有点惊讶,但是它却能告诉旧版本浏览器,它应该使用当前指定的 HTML 规范以标准的模式来渲染页面。 > 提示:在 VS Code 中,你可以把鼠标悬浮在标签上,以此来获取 MDN 参考指南中关于其使用的信息。 文档的第二行就应该是 `` 的起始标签,后面应该跟着的是 `` 的结束标签。这对标签是我们编写的界面的根元素。 ### 任务 把这几行内容写到你的 `index.html` 文档开头: ```HTML ``` ✅ 通过设置带有查询字符串(query string)的 DocType 可以设定几种不同的模式:[怪异模式与标准模式](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。这些模式用于支持现在非常不常用的古老浏览器(Netscape Navigator 4 和 Internet Explorer 5)。你仍可以使用标准的文档类型声明。 --- ## 文档的 'head'(脑袋) HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息,它也被称作[元数据(metadata)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)。在我们的例子中,我们告诉 web 服务器这个页面将依据哪些信息被发送进行渲染,主要是四种: - 网页的标题 - 网页的元数据,它包含: - 字符集(Character Set),说明在页面中使用的字符编码。 - 浏览器信息,包括 `x-ua-compatible`,表示支持 IE=edge 浏览器 - 关于视图在加载时应该如何表现的信息。将视口设置为初始比例为 1 可以控制页面首次加载时的缩放级别。 ### 任务 在文档中,新增 'head' 部分在 `` 的标签里。 ```html
hello
` 就表明是一个段落。 使用一组 `` 标签放在 `` 标签中以创建你界面的身体部分,现在你的文档应该变成下面这样: ### 任务 ```html