本关任务是编写一个自我简介网页,你将通过本任务理解一个HTML网页的完整结构,并了解如何让搜索引擎更好的找到你的网页。
显示效果如下图所示:
为完成以上网页制作,请大家认真阅读以下相关知识。
学习了基本的HTML网页相关概念和属性,你也已经动手写过最简单的HTML网页。
接下来,我们开始学习一个简单完整网页结构。它包含的主要元素,如下图所示:
我们来看如下示例:
<`HTML`>
<head>
<meta charset="utf-8">
<title>自我简介title>
<meta name="description" content="张三的自我简介网站">
<meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
head>
<body>
<h1 align="center">自我简介h1>
<h2>简介h2>
<p>在这里简单的描述一下你自己吧。p>
body>
`HTML`>
显示效果如图:
从显示效果来看,该网页似乎与我们之前所学网页没有什么不同。但这个网页更容易被搜索引擎发现。
下面,我们将结合代码为大家讲解该网页完整结构和为什么更容易被搜索引擎发现。
首先,第一行:
因为在Web世界里,有很多各式各样的文档类型,所以我们首先需要做的便是声明该文档是HTML,以便浏览器正确显示网页。
如果你想声明为HTML 4.01的文档可以这样写:
因为本实训以HTML 5作为标准,所以统一使用第一种方式。
提示:
为什么与HTML4.01相比HTML 5声明中没有数字”5”呢?
元素告知浏览器其本身是一个HTML文档。
除去第一行外,其余的页面内容都应该包含在元素中,所以它也被称为根元素。
与属性会给元素增添附加信息一样,head元素能为整个网页增添更多信息。可以用在head中的标签有
, ,
,
,
, 以及
。在之后的学习中,你将逐渐的了解它们。
本例网页主要内容是“自我简介”,所以title也设置为“自我简介”。
的内容一般作为网页标签名,写法如下:
<title>标题内容title>
title内容显示位置:
meta元素提供元数据信息,主要包括:
这些信息,一方面可用于告知浏览器如何展示页面,另一方面可以提供给搜索引擎检索。
因为搜索引擎会通过meta元素的name
和content
属性来检索页面,所以当我们加入了合适的关键字和描述内容时,页面就更容易被搜索引擎发现。
<meta charset="utf-8">
该行定义了浏览器解析网页文档时使用的编码方式。通常,我们使用utf-8编码以支持各国语言。
描述信息使用一句话告知搜索引擎我们网页的主要内容是什么。
通常description的写法如下:
<meta name="description" content="一句话描述网页内容">
同理,关键词信息使用多个并行的关键词告知搜索引擎我们网页内容的关键词信息。
通常keywords的写法如下:
<meta name="keywords" content="关键词一,关键词二,关键词三">
元素是一个文档的主体,文档内容都包含在
元素中,最终呈现在网页上。
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面,具体要求是:
补充完代码后,点击测评,平台会对你编写的代码进行测试,当你的结果与预期输出一致时,即为通过;
<html>
<head><title>自我简介title>
<meta charset="utf-8">
<meta name="description" content="XXX的自我简介网站">
<meta name="keywords" content="关键词一,关键词二,关键词三">
<meta name="" content="自我简介,关键词一,关键词二,关键词三">
head>
<body>
<h1 align="center">自我简介h1>
<h2>简介h2>
<p>在这里简单的描述一下你自己吧。p>
<h2>三个与你最有关的词h2>
<p>这三个词可以是一种形容,也可以是一种运动或者是一种独特的爱好,等等。p>
<ul>
<li>第一个词li>
<p>选择第一个词的原因p>
<li>第二个词li>
<p>选择第二个词的原因p>
<li>第三个词li>
<p>选择第三个词的原因p>
ul>
body>
html>
【我这虽然通过了测试,但是呢,我没写第十三行,然后我把本该放在第7行的代码放在了第9行】