博客页面布局

实验介绍

嗨！欢迎来到从零趣味学习 Web 前端的课堂～

初次见面，我们先来认识一下前端三剑客（HTML、CSS、JavaScript）中的 HTML。

HTML，英文全称为 HyperTextMarkupLanguage，翻译为超文本标记语言，其用于页面布局。例如我们在蓝桥云课首页上，使用 Chrome 浏览器的开发者工具（按 F12），可以发现网页是由 <> 这样的结构组成的。

图片描述

这些 <> 的符号被称为标签。从上图可以看出大部分标签都是成对出现的。我们一般把 <> 称为开始标签，把 </> 称为结束标签。这些标签就是 HTML 的元素，构成了我们整个页面的结构。下面放个图，帮助大家更好滴理解标签～

图片描述

本节实验中，我将带大家入门 HTML，我们一起从零开始实现一个博客页面布局。

知识点

列表
表单
超链接
标题
段落

创建第一个 HTML 文档

我们在那里创建 HTML 文档呢？

工具很多，如 VS Code、HbuilderX、Dreamweaver 等。在本课程中我们使用蓝桥云课的云环境（VS Code）来演示。

在创建文件之前，我们先来了解一下创建 HTML 文档的规则，如下所示：

HTML 文档需要有 .html 文件扩展名。
通常一个站点的主页被命名为 index.html。index 表示这是浏览器将加载的默认文件。
只能在页面名称中使用字母、数字、破折号、下划线、波浪号。
不要在文件名中使用空格。
命名 HTML 文件时使用小写字母。
HTML 资源的名称通常用在 URL 中，URL 通常区分大小写。

了解规则之后，请大家跟着我在云课环境中创建一个 index.html 文件吧～

创建 index.html

创建 HTML 文档的基本结构

现在我们有了一个 HTML 文件，我们可以开始编写一些 HTML 代码来创建我们的网页，HTML 有一个固定的结构，这个结构我们可以使用快捷方式来生成。

打开 index.html 文件，在文件中输入英文 !，然后按 tab 键即可，如下图所示：

快速生成 html 模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

我们来认识一下这些标签～

<!DOCTYPE html> 是一个文档类型的声明，DOCTYPE 用来保证文档能够正确读取，它必须是 HTML 文件中的第一行，并且不需要结束标记，详情可参考 W3school DOCTYPE 声明。

<html>...</html> 是文档的根，其他元素都是 html 元素的后代，把元素放在其中表示告诉浏览器该元素内的所有内容都是 HTML。html 元素通常会有一个结束标记，但在某些情况下它不是必需的。它还具有 lang 指示文档语言的属性，并有助于语音合成。详情可参考 W3school <html> 标签。

<head>...</head> 用于包含有关文档的元数据，通俗来讲就是与页面相关的描述信息，但不会显示到页面上，其中可能包含标题、脚本、CSS 样式表等内容，常见的头部元素如下所示：

标签	描述
`<title>`	定义页面标题内容。
`<meta>`	有关文档本身的元信息，例如：文档的作者，用于查询的关键词，关于文档的描述等。
`<style>`	定义 CSS 层叠样式表的内容。
`<link>`	定义外部文件的链接，最常见的用途是链接外部样式表。
`<script>`	定义页面中程序脚本的内容。

详情可参考W3school <head> 标签。

<meta/> 用于提供关于页面的元信息，能够提供文档作者、关键字、描述等多种信息，在 HTML 的头部可以包括任意数量的 meta 标签。详情可参考 W3school meta 标签。

在 HTML 基础结构中包含三个 meta 元素，如下：

第一个 meta 元素中包含属性 charset="UTF-8" 表示文档使用 utf-8 的字符编码，charset 属性用来设置字符编码声明。这表示使用哪种字符编码来存储或传输文档。
第二个 meta 元素中包含属性 http-equiv="X-UA-Compatible" 和 content="IE=edge" 代表允许开发者去选择 IE 浏览器的版本。
第三个 meta 元素中包含属性 name 和 content，被称为“视口”，用于修改窗口的大小和比例。width=device-width 表示将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。详情可参考 W3school 视口。

<title>...</title> 是标题元素，它将代表文档的名称，会出现在浏览器选项卡中。例如：将 “Document” 改成 “如何使用 HTML 创建网页”。详情可参考 W3school title 标签。

1	<title>如何使用 HTML 创建网页</title>

点击右下方 Go Live 启动 8080 端口，打开 Web 服务。

图片描述

打开页面后在浏览器选项卡中可以看到如下效果：

图片描述

<body>...</body> 代表文档的内容，写在 body 元素中的内容都会显示到页面上。一个文档中只能有一对 body 元素。详情可参考 W3school body 标签。

细心的朋友可能注意到一些元素现在是缩进的，这样做是为了使代码更易于阅读。每个人都有自己的喜好，但只要它是一致的并且有助于提高可读性，那么你就可以使用任何你喜欢的风格。

接下来我们就开始页面布局了。

头部导航部分

下面我们来认识一下，头部导航部分会用到的元素。

现在我们的页面还是一片空白，因为我们还没有向 body 元素添加任何内容。接下来让我们在这个网页上添加一些内容，在写内容之前，我们需要认识几个常用的头部导航标签。

<header> 用户定义文档的页眉（介绍信息）。详情可参考 W3school header 标签
<a> 定义超链接，从一个页面链接到另一个页面。详情可参考W3school a 标签
<nav> 定义导航部分。详情可参考 W3school nav 标签
<li> 定义列表项目，可用在有序列表 <ol> 和无序列表 <ul> 中。详情可参考W3school li 标签

接下来，我们在 index.html 文件中添加一个头部导航，在文件中写入以下代码。

<header>
  <nav>
    <a href="http://haiyong.site/">海拥</a>
    <ul>
      <li>
        <a href="#">服务</a>
      </li>
      <li>
        <a href="#">博客</a>
      </li>
      <li>
        <a href="#">关于</a>
      </li>
      <li>
        <a href="#">联系</a>
      </li>
    </ul>
  </nav>
</header>

显示效果如下：

头部导航部分

因为现在还没加 CSS，所以看起来比较简陋，后面介绍 CSS 的章节会教大家加上样式。

页面内容部分

接下来，我们在 index.html 文件中添加页面主体内容。

我们来认识几个常用的内容标签：

<section> 表示文档的某个部分，起到划分内容的作用。在这个例子中，网页将有一个导航部分、一个介绍部分、一个表单部分。详情可参考 W3school section 标签
<h1>、<h2>、h3、h4、h5 和 h6 表示文档中的标题元素。标题具有 SEO （搜索引擎优化）价值，对于可访问性也很重要。详情可参考 W3school h1~h6 标签
<p> 代表段落文本。详情可参考W3school p 元素

我们在 index.html 文件中写入以下内容：

<h1>HTML初学者训练营</h1>
<section>
  <h2>介绍</h2>
  <p>HyperTextMarkupLanguage: 超文本标记语言</p>
</section>

显示效果：

图片描述

格式化文本

现在我们有了更多内容，让我们为文本添加一些格式。格式化将改变文本的外观并有助于使页面更具可读性。我们可以使用几种不同的元素来实现这一点：

<b> 表示粗体文本。它用于引起对特定文本的注意或传达额外的重要性。详情可参考 W3school b 元素
<strong> 与 <b> 相似，也是用来加粗文字，但是 <strong> 是语义化的，有助于描述它周围的文本。详情可参考 W3school strong 元素
<i> 表示斜体文本。详情可参考 W3school i 元素
<em> 与 <i> 元素相似，标志着文本有重点。详情可参考 W3school em 元素
<mark> 表示突出显示或标记以供参考的文本。详情可参考 W3school mark 元素
<small> 表示旁注，文本的字大小将会比周围的文字小。详情请参考 W3school small 元素
<del> 表示已删除的文本。详情请参考 W3school del 元素
<ins> 表示插入的文本，ins 元素和 del 元素都用于帮助跟踪文档的更改。详情请参考 W3school ins 元素
<sub> 代表下标文本。下标以较低的基线和较小的文本呈现。详情请参考 W3school sub 元素
<sup> 表示上标文本。文本以凸起的基线和较小的文本呈现。详情请参考 W3school sup 元素

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

<section>
  <h2>初识HTML</h2>
  <p>
    HTML
    文档应该有<mark>.html</mark>文件扩展名。通常一个站点的主页被命名为<strong>“index.html”</strong>。
    “index”表示这是浏览器将加载的默认文件。命名 HTML
    文件时使用<em>小写字母</em>。HTML 资源的名称通常用在 URL 中。 URL
    通常区分大小写。
  </p>
  <ul>
    <li>HTML 学习如何搭建页面结构和内容 (盖房子 毛坯房)</li>
    <li>CSS 学习如何美化页面 (装修)</li>
    <li>JavaScript 学习如何给页面添加动态效果</li>
    <li>jQuery JS语言框架,简化原生JS开发</li>
    <li>
      <a href="https://www.bootcss.com/">
        Bootstrap 前端框架对 html/css/JavaScript/jQuery
        进行封装,目的是提高前端页面的开发效率
      </a>
    </li>
  </ul>
</section>

显示效果：

图片描述

联系表单

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

<div> 定义文档中的分区或节（division/section），它可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。详情请参考 W3school div 元素
<input> 用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。placeholder 属性可以帮助用户填写输入字段的提示。详情请参考 W3school input 元素
<textarea> 表示多行文本域，根据 cols 和 rows 属性可以定义文本框允许输入文字的行数和列数。详情请参考 W3school textarea 元素

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

<h2>联系我们</h2>
<div>
  <div>
    <div>
      <div>
        <input placeholder="你的名字*" />
      </div>
      <div>
        <input placeholder="你的邮件*" />
      </div>
      <div>
        <input placeholder="你的电话*" />
      </div>
    </div>
    <div>
      <textarea placeholder="你的信息*"></textarea>
    </div>
    <div>
      <a href="#">发送</a>
    </div>
  </div>
</div>