前言
- HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。
- 在CSS(Cascading StyleSheets,级联样式表单)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。
- 自1995年HTML2.0面世,HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准,2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升,使HTML迎来了新的爆发式发展。
任务描述
- 本关的任务是编写一个简单的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>