博客页面布局

实验介绍

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

初次见面,我们先来认识一下前端三剑客(HTMLCSSJavaScript)中的 HTML。

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

图片描述

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

图片描述

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

知识点

  • 列表
  • 表单
  • 超链接
  • 标题
  • 段落

创建第一个 HTML 文档

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

工具很多,如 VS CodeHbuilderXDreamweaver 等。在本课程中我们使用蓝桥云课的云环境(VS Code)来演示。

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

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

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

创建 index.html

创建 HTML 文档的基本结构

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

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

快速生成 html 模板

1
2
3
4
5
6
7
8
9
10
<!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 元素中包含属性 namecontent,被称为“视口”,用于修改窗口的大小和比例。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 元素添加任何内容。接下来让我们在这个网页上添加一些内容,在写内容之前,我们需要认识几个常用的头部导航标签。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>h3h4h5h6 表示文档中的标题元素。标题具有 SEO (搜索引擎优化)价值,对于可访问性也很重要。详情可参考 W3school h1~h6 标签

    图片描述

  • <p> 代表段落文本。详情可参考W3school p 元素

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

1
2
3
4
5
<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 文件中添加元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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> 表示多行文本域,根据 colsrows 属性可以定义文本框允许输入文字的行数和列数。详情请参考 W3school textarea 元素

    图片描述

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

显示效果:

联系表单

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

实验总结

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

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