--- show: step version: 1.0 enable_checker: true --- # 博客页面布局 ## 实验介绍嗨！欢迎来到从零趣味学习 Web 前端的课堂～初次见面，我们先来认识一下前端三剑客（[HTML](https://www.w3schools.com/html/)、[CSS](https://www.w3schools.com/css/)、[JavaScript](https://www.w3schools.com/js/)）中的 HTML。 HTML，英文全称为 HyperTextMarkupLanguage，翻译为超文本标记语言，其用于页面布局。例如我们在蓝桥云课首页上，使用 [Chrome](https://www.google.com/intl/zh-CN/chrome/) 浏览器的开发者工具（按 F12），可以发现网页是由 `<>` 这样的结构组成的。 ![图片描述](https://doc.shiyanlou.com/courses/4378/1347963/8257884928caa36b2cc5b4686bb337f4-0) 这些 `<>` 的符号被称为**标签**。从上图可以看出大部分标签都是成对出现的。我们一般把 `<>` 称为**开始标签**，把 `` 称为**结束标签**。这些标签就是 HTML 的元素，构成了我们整个页面的结构。下面放个图，帮助大家更好滴理解标签～ ![图片描述](https://doc.shiyanlou.com/courses/4384/1347963/bb5b828ebc68cf683aebea68bab4b9af-0) 本节实验中，我将带大家入门 HTML，我们一起从零开始实现一个博客页面布局。 #### 知识点 - 列表 - 表单 - 超链接 - 标题 - 段落 ## 创建第一个 HTML 文档我们在那里创建 HTML 文档呢？工具很多，如 [VS Code](https://code.visualstudio.com/)、[HbuilderX](https://www.dcloud.io/hbuilderx.html)、[Dreamweaver](https://www.adobe.com/cn/products/dreamweaver.html) 等。在本课程中我们使用蓝桥云课的云环境（VS Code）来演示。在创建文件之前，我们先来了解一下创建 HTML 文档的规则，如下所示： - HTML 文档需要有 `.html` 文件扩展名。 - 通常一个站点的主页被命名为 `index.html`。`index` 表示这是浏览器将加载的默认文件。 - 只能在页面名称中使用字母、数字、破折号、下划线、波浪号。 - 不要在文件名中使用空格。 - 命名 HTML 文件时使用小写字母。 - HTML 资源的名称通常用在 URL 中，URL 通常区分大小写。了解规则之后，请大家跟着我在云课环境中创建一个 `index.html` 文件吧～ ![创建 index.html](https://doc.shiyanlou.com/courses/8605/1777469/4754b8342b6c841a4531fbdee929f77c-0/wm) ## 创建 HTML 文档的基本结构现在我们有了一个 HTML 文件，我们可以开始编写一些 HTML 代码来创建我们的网页，HTML 有一个固定的结构，这个结构我们可以使用快捷方式来生成。打开 `index.html` 文件，在文件中输入英文 `!`，然后按 `tab` 键即可，如下图所示： ![快速生成 html 模板](https://doc.shiyanlou.com/courses/8605/1777469/585539b3cec391ef4bedd7df3b168b51-0) ```html Document ``` 我们来认识一下这些标签～ `` 是一个文档类型的声明，`DOCTYPE` 用来保证文档能够正确读取，它**必须**是 HTML 文件中的第一行，并且不需要结束标记，详情可参考 [W3school DOCTYPE 声明](https://www.w3school.com.cn/tags/tag_doctype.asp)。 `...` 是文档的根，其他元素都是 `html` 元素的后代，把元素放在其中表示告诉浏览器该元素内的所有内容都是 HTML。`html` 元素通常会有一个结束标记，但在某些情况下它不是必需的。它还具有 `lang` 指示文档语言的属性，并有助于语音合成。详情可参考 [W3school `` 标签](https://www.w3school.com.cn/tags/tag_html.asp)。 `...` 用于包含有关文档的元数据，通俗来讲就是与页面相关的描述信息，但不会显示到页面上，其中可能包含标题、脚本、CSS 样式表等内容，常见的头部元素如下所示： | 标签 | 描述 | | ---------- | ---------------------------------------------------------------------------- | | `` | 定义页面标题内容。 | | `<meta>` | 有关文档本身的元信息，例如：文档的作者，用于查询的关键词，关于文档的描述等。 | | `<style>` | 定义 CSS 层叠样式表的内容。 | | `<link>` | 定义外部文件的链接，最常见的用途是链接外部样式表。 | | `<script>` | 定义页面中程序脚本的内容。 | 详情可参考[W3school `<head>` 标签](https://www.w3school.com.cn/tags/tag_head.asp)。 `<meta/>` 用于提供关于页面的元信息，能够提供文档作者、关键字、描述等多种信息，在 HTML 的头部可以包括任意数量的 `meta` 标签。详情可参考 [W3school meta 标签](https://www.w3school.com.cn/tags/tag_meta.asp)。在 HTML 基础结构中包含三个 `meta` 元素，如下： - 第一个 `meta` 元素中包含属性 `charset="UTF-8"` 表示文档使用 [utf-8](https://www.w3schools.com/charsets/ref_html_utf8.asp) 的字符编码，`charset` 属性用来设置字符编码声明。这表示使用哪种字符编码来存储或传输文档。 - 第二个 `meta` 元素中包含属性 `http-equiv="X-UA-Compatible"` 和 `content="IE=edge"` 代表允许开发者去选择 IE 浏览器的版本。 - 第三个 `meta` 元素中包含属性 `name` 和 `content`，被称为“视口”，用于修改窗口的大小和比例。`width=device-width` 表示将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。当浏览器首次加载页面时，`initial-scale=1.0` 部分设置初始缩放级别。详情可参考 [W3school 视口](https://www.w3school.com.cn/css/css_rwd_viewport.asp)。 `<title>...` 是标题元素，它将代表文档的名称，会出现在浏览器选项卡中。例如：将 “Document” 改成 “如何使用 HTML 创建网页”。详情可参考 [W3school title 标签](https://www.w3school.com.cn/tags/tag_title.asp)。 ```html 如何使用 HTML 创建网页 ``` 点击右下方 `Go Live` 启动 8080 端口，打开 Web 服务。 ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/83a6283b6c16473b3ed93743410555b3-0) 打开页面后在浏览器选项卡中可以看到如下效果： ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/1d457e8f2084dd8c7fa54a15594fef8a-0) `...` 代表文档的内容，写在 `body` 元素中的内容都会显示到页面上。一个文档中只能有一对 `body` 元素。详情可参考 [W3school body 标签](https://www.w3school.com.cn/tags/tag_body.asp)。细心的朋友可能注意到一些元素现在是缩进的，这样做是为了使代码更易于阅读。每个人都有自己的喜好，但只要它是一致的并且有助于提高可读性，那么你就可以使用任何你喜欢的风格。接下来我们就开始页面布局了。 ## 头部导航部分下面我们来认识一下，头部导航部分会用到的元素。现在我们的页面还是一片空白，因为我们还没有向 `body` 元素添加任何内容。接下来让我们在这个网页上添加一些内容，在写内容之前，我们需要认识几个常用的头部导航标签。 - `

` 用户定义文档的页眉（介绍信息）。详情可参考 [W3school header 标签](https://www.w3schools.com/tags/tag_header.asp) - `` 定义超链接，从一个页面链接到另一个页面。详情可参考[W3school a 标签](https://www.w3school.com.cn/tags/tag_a.asp) ![图片描述](https://doc.shiyanlou.com/courses/4378/1347963/16363c13092604a7ca5b4b21e1674fbe-0) - `

` 定义导航部分。详情可参考 [W3school nav 标签](https://www.w3schools.com/tags/tag_nav.asp) ![图片描述](https://doc.shiyanlou.com/courses/4378/1347963/bdb3f0e74b2c5a1824d4955d1f6340fd-0) - `

` 和无序列表 `

` 中。详情可参考[W3school li 标签](https://www.w3school.com.cn/tags/tag_li.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/3882d0e5904570fa1af7a2dfc8ea82b3-0) 接下来，我们在 `index.html` 文件中添加一个头部导航，在文件中写入以下代码。 ```html

` 表示文档的某个部分，起到划分内容的作用。在这个例子中，网页将有一个导航部分、一个介绍部分、一个表单部分。详情可参考 [W3school section 标签](https://www.w3school.com.cn/tags/tag_section.asp) - `

`、`

`、`h3`、`h4`、`h5` 和 `h6` 表示文档中的标题元素。标题具有 SEO （搜索引擎优化）价值，对于可访问性也很重要。详情可参考 [W3school h1~h6 标签](https://www.w3school.com.cn/tags/tag_hn.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/8b2b01f75f663074cee3ddc8b50ac128-0) - `
` 代表段落文本。详情可参考[W3school p 元素](https://www.w3schools.com/tags/tag_p.asp) 我们在 `index.html` 文件中写入以下内容： ```html

HTML初学者训练营

介绍

HyperTextMarkupLanguage: 超文本标记语言

``` 显示效果： ![图片描述](https://doc.shiyanlou.com/courses/8605/1777469/1610e0350b399badfabb7cefac20857b-0/wm) ## 格式化文本现在我们有了更多内容，让我们为文本添加一些格式。格式化将改变文本的外观并有助于使页面更具可读性。我们可以使用几种不同的元素来实现这一点： - `` 表示粗体文本。它用于引起对特定文本的注意或传达额外的重要性。详情可参考 [W3school b 元素](https://www.w3schools.com/tags/tag_b.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/bce787eca4a56673ea1bf1bb21413f44-0) - `` 与 `` 相似，也是用来加粗文字，但是 `` 是语义化的，有助于描述它周围的文本。详情可参考 [W3school strong 元素](https://www.w3schools.com/tags/tag_strong.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/36ea214dab07b6845592c26292447c1c-0) - `` 表示斜体文本。详情可参考 [W3school i 元素](https://www.w3schools.com/tags/tag_i.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/57a5b370327b108f3545b75eab953e33-0) - `` 与 `` 元素相似，标志着文本有重点。详情可参考 [W3school em 元素](https://www.w3schools.com/tags/tag_em.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/38a2cec4b62028f8ff210f4fdb1093e7-0) - `` 表示突出显示或标记以供参考的文本。详情可参考 [W3school mark 元素](https://www.w3schools.com/tags/tag_mark.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/31cb47d93d2fad0ed96f38bda9335a5a-0) - `` 表示旁注，文本的字大小将会比周围的文字小。详情请参考 [W3school small 元素](https://www.w3schools.com/tags/tag_small.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/5a345a921053518751f6b31dc284c538-0) - `` 表示已删除的文本。详情请参考 [W3school del 元素](https://www.w3schools.com/tags/tag_del.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/09fdfa0a7b11309ea7dea2b4b61c2053-0) - `` 表示插入的文本，`ins` 元素和 `del` 元素都用于帮助跟踪文档的更改。详情请参考 [W3school ins 元素](https://www.w3schools.com/tags/tag_ins.asp) ![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/35e623e65550fff6916cd97c280a806d-0) - `_{` 代表下标文本。下标以较低的基线和较小的文本呈现。详情请参考 [W3school sub 元素](https://www.w3schools.com/tags/tag_sub.asp)

![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/fd9daff408ede571781231624891d483-0)

- `^{` 表示上标文本。文本以凸起的基线和较小的文本呈现。详情请参考 [W3school sup 元素](https://www.w3schools.com/tags/tag_sup.asp)

![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/8953837bf91365659acac8cc4fd854bf-0)

让我们继续在 `index.html` 文件中添加元素。

```html

初识HTML

HTML
文档应该有.html文件扩展名。通常一个站点的主页被命名为“index.html”。
“index”表示这是浏览器将加载的默认文件。命名 HTML
文件时使用小写字母。HTML 资源的名称通常用在 URL 中。 URL
通常区分大小写。

HTML 学习如何搭建页面结构和内容 (盖房子毛坯房)
CSS 学习如何美化页面 (装修)
JavaScript 学习如何给页面添加动态效果
jQuery JS语言框架,简化原生JS开发

Bootstrap 前端框架对 html/css/JavaScript/jQuery
进行封装,目的是提高前端页面的开发效率

```

显示效果：

![图片描述](https://doc.shiyanlou.com/courses/8605/1777469/dc304a125766fc502e8b6b1776518d22-0/wm)

## 联系表单

在联系表单的布局中我们要用到以下三个元素：

- `` 定义文档中的分区或节（division/section），它可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。详情请参考 [W3school div 元素](https://www.w3schools.com/tags/tag_div.asp)
- `` 用于搜集用户信息，根据不同的 `type` 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。`placeholder` 属性可以帮助用户填写输入字段的提示。详情请参考 [W3school input 元素](https://www.w3schools.com/tags/tag_input.asp)

![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/79f4eb0b461c3e175d01d9660f081ed2-0)

- `` 表示多行文本域，根据 `cols` 和 `rows` 属性可以定义文本框允许输入文字的行数和列数。详情请参考 [W3school textarea 元素](https://www.w3schools.com/tags/tag_textarea.asp)

![图片描述](https://doc.shiyanlou.com/courses/7835/1347963/2cd7ae993edbaccdd10423d9f2c25474-0)

我们在 `index.html` 文件中添加联系表单。

```html
<h2>联系我们</h2>
<div>
<div>
<div>
<div>
<input placeholder="你的名字*" />
</div>
<div>
<input placeholder="你的邮件*" />
</div>
<div>
<input placeholder="你的电话*" />
</div>
</div>
<div>
<textarea placeholder="你的信息*">

发送

```

显示效果：

![联系表单](https://doc.shiyanlou.com/courses/8605/1777469/3ed3bcf4207d6bdff79c8afbe5ba91d2-0/wm)

完整代码下载地址：[https://labfile.oss.aliyuncs.com/courses/8605/1.zip](https://labfile.oss.aliyuncs.com/courses/8605/1.zip)

## 实验总结

本节实验我们学习了如何创建 HTML 文档，我们了解了一些常用元素，例如列表、表单、超链接、标题和段落。

同学们现在肯能觉得这个页面效果很丑，那是因为我们还没有用到 CSS 来美化布局，下节实验我们就会请 CSS 来给我们的博客页面化个妆。}}

“28 个案例趣学 Web 前端”实验报告