第1关：初识HTML：简单的Hello World网页制作

Jerry&

于 2024-01-19 10:38:13 发布

阅读量2.1k

点赞数 33

分类专栏：头歌Python获取与清洗文章标签： html 前端 python

本文链接：https://blog.csdn.net/m0_55900042/article/details/135691557

版权

头歌Python获取与清洗专栏收录该内容

26 篇文章 11 订阅

订阅专栏

任务描述

本关的任务是编写一个简单的HTML页面，这个网页包含一个标题和一个段落。显示效果如下：

HTML 基本概念

HTML是一种标准化的标记语⾔，由一套标记标签(markup tag)组成。Web前端开发人员的一项主要工作就是利用HTML标签来编写⽹页，将文本、超链接、图片、语音、视频等各种内容整合起来，实现绚丽多姿的网页。

下面是大家需要记住的关于HTML的一些基本描述：

HTML标记标签，通常简称HTML标签；
HTML文档，通常简称HTML页面、网页等；
HTML5能够较好的兼容HTML之前版本，但也废弃了一些旧的HTML特性。

基本的HTML结构

这是一个最基本HTML页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body bgcolor="yellow">
<h1 align="center">这是一个一级标题</h1>
<p>这是第1个段落。</p>
<p>这是第2个段落。</p>
</body>
</html>

显示效果如下：

其中：

<html>、</html>，<body>，</body>，<h1>，<p>等都是HTML标签；
<h1>这是一个一级标题</h1>，<p>这是第1个段落。</p>等都是HTML元素；
bgcolor="yellow"、align="center"都是HTML元素的属性。

那么HTML标记和HTML元素，到底有何区别呢？HTML元素的属性又是什么呢？

HTML 标签

HTML标签由一对尖括号、标签名，以及反斜杠组成，包括开始标签和结束标签两类：

开始标签的格式：<标签名>。

结束标签的格式：</标签名>。

因此，

<html>，<head>，<p>等都是开始标签；
</html>，</head>，</p>等都是结束标签。

HTML 元素

HTML元素是由HTML开始标签、元素内容、HTML结束标签，以及各种HTML属性组成的嵌套式HTML内容单元。

典型的HTML元素的格式：

<标签名> 元素内容 </标签名>

因此，

一个HTML文档，即<html>...</html>就是一个最大的HTML元素；
<head>...</head>，<p>...</p>也都是HTML元素（其中...表示两个标记之间的所有内容）。

HTML 属性

属性提供了有关HTML元素的更多的信息。

HTML属性位于开始标签，其基本的结构如下：

<标签名属性名="属性值"> 元素内容 </标签名>

下面是关于属性的一些要点：

属性在开始标签中规定；
属性是以名称/值对的形式出现，比如：name="value"；
一个标签可以包含多个属性；
HTML属性不会展现到网页上。

本例中，bgcolor属性代表主体(body)部分的颜色；align属性代表对齐方向，其值有：

align属性值	含义
center	居中对齐
right	右对齐
left	左对齐

提示：

属性使用小写英文字母更加符合规范；
属性值可以用双引号或单引号包含，例如： title=' 他说"你好" ' 这种情况，属性值如果包含双引号，那么最外层就用单引号。

我们还会用到一些常用的属性，如下表所示：

| 属性 | 值 | 含义 | ------------ | ----------- | class | 自定义的元素类名 | 元素的类名 | id | 自定义的元素id名 | 元素的唯一的id | style | 元素内联样式 | 元素的样式 | title | 额外信息内容 | 元素的额外信息

在之后的任务中，我就会学习到以上属性。

编程要求

请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：

在<h1></h1>标签之间输入"Hello World"；
在<p></p>标签之间输入"动手改变世界"；
在<h1>和<p>元素的开始标签中输入align="center"；
再在<body>开始标签中输入bgcolor="F6F3D6"，将背景设置为浅黄色。

测试说明

补充完代码后，点击测评，平台会对你编写的代码进行测试，当你的结果与预期输出一致时，即为通过；

为了不让生活留下遗憾和后悔，我们应该尽可能地抓住一切改变生活的机会。

恭喜你完成本关，如果觉得有收获，就在下面点个赞吧！

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
  </head>  
    <!--------- Begin-------->

  <body bgcolor="F6F3D6">
    <!--用HTML语言向世界打声招呼吧！-->
    <h1 align="center">Hello World</h1>
    <p align="center">动手改变世界</p>
  </body>
    <!--------- End-------->

</html>