自我简介网页

任务描述
相关知识
- 声明文档格式：DOCTYPE
- 根元素：HTML元素
- 头元素：head元素
- 网页标题元素：title
- 元信息元素：meta
- 编码格式：charset
- 描述：description
- 关键词：keywords
- 主体元素：body元素
编程要求
测试说明

任务描述

本关任务是编写一个自我简介网页，你将通过本任务理解一个HTML网页的完整结构，并了解如何让搜索引擎更好的找到你的网页。

显示效果如下图所示：

为完成以上网页制作，请大家认真阅读以下相关知识。

相关知识

学习了基本的HTML网页相关概念和属性，你也已经动手写过最简单的HTML网页。

接下来，我们开始学习一个简单完整网页结构。它包含的主要元素，如下图所示：

我们来看如下示例：

<!DOCTYPE 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`>

显示效果如图：

从显示效果来看，该网页似乎与我们之前所学网页没有什么不同。但这个网页更容易被搜索引擎发现。

下面，我们将结合代码为大家讲解该网页完整结构和为什么更容易被搜索引擎发现。

声明文档格式：DOCTYPE

首先，第一行：

<!DOCTYPE HTML>

声明了该文档是HTML 5的文档。

因为在Web世界里，有很多各式各样的文档类型，所以我们首先需要做的便是声明该文档是HTML，以便浏览器正确显示网页。

如果你想声明为HTML 4.01的文档可以这样写：

<!DOCTYPE `HTML` PUBLIC "-//W3C//DTD `HTML` 4.01 Transitional//EN"
"http://www.w3.org/TR/`HTML`4/loose.dtd">

因为本实训以HTML 5作为标准，所以统一使用第一种方式。

提示：

为什么与HTML4.01相比HTML 5声明中没有数字”5”呢？

因为W3C认为之前的文档声明太过复杂，正好借此机会移除版本号，这样声明就更加简化；
在背景知识中，你能够了解更多HTML版本的历史信息。

根元素：HTML元素

<HTML>元素告知浏览器其本身是一个HTML文档。
除去第一行外，其余的页面内容都应该包含在<HTML>元素中，所以它也被称为根元素。

头元素：head元素

与属性会给元素增添附加信息一样，head元素能为整个网页增添更多信息。可以用在head中的标签有<base>, <link>, <meta>, <script>, <style>, 以及 <title>。在之后的学习中，你将逐渐的了解它们。

网页标题元素：title

本例网页主要内容是“自我简介”，所以title也设置为“自我简介”。

title元素的内容即网页标题，它是一个网页必需的元素之一。

<title>的内容一般作为网页标签名，写法如下：

<title>标题内容</title>

title内容显示位置：

元信息元素：meta

meta元素提供元数据信息，主要包括：

页面编码；
网页标题；
网页描述；
网页关键词。

这些信息，一方面可用于告知浏览器如何展示页面，另一方面可以提供给搜索引擎检索。

因为搜索引擎会通过meta元素的name和content属性来检索页面，所以当我们加入了合适的关键字和描述内容时，页面就更容易被搜索引擎发现。

编码格式：charset

<meta charset="utf-8">

该行定义了浏览器解析网页文档时使用的编码方式。通常，我们使用utf-8编码以支持各国语言。

描述：description

描述信息使用一句话告知搜索引擎我们网页的主要内容是什么。

通常description的写法如下：

<meta name="description" content="一句话描述网页内容">

关键词：keywords

同理，关键词信息使用多个并行的关键词告知搜索引擎我们网页内容的关键词信息。

通常keywords的写法如下：

<meta name="keywords" content="关键词一,关键词二,关键词三">

主体元素：body元素

<body>元素是一个文档的主体，文档内容都包含在<body>元素中，最终呈现在网页上。

编程要求

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

在第5行中，添加title元素，内容为“自我简介”；
在第7行中，完善关键词标签；
修改第13行的自我简介信息和关于你自己的三个关键词。

测试说明

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

生活充实的含义，应是阅历得广，明白得多，有发现的能力，有推断的方法，性情丰厚，兴趣饶富，内外合一，即知即行，等等。
代码文件：

<!DOCTYPE html>
<html><!--------- Begin--------><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><!--------- End--------></html>

【我这虽然通过了测试，但是呢，我没写第十三行，然后我把本该放在第７行的代码放在了第９行】

HTML结构：自我简介网页相关推荐

HTML结构：自我简介页面
一个简单完整网页结构.它包含的主要元素,如下图所示: <!DOCTYPE HTML> <`HTML`> <head> <meta charset=" ...
Python框架篇：结构化的网页抓取框架-Scrapy
前言大家好,我是一身正气的辣条哥今天主要跟大家分享一下Scrapy,Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的 ...
html语言制作个人简介,个人简介网页制作模板代码技术分享
求个人介绍网页模板html要中文的要六个链接我自己写的哈,非常实用,基本符合你的要求,希望能够帮助到你. 提供一个自我介绍网页的模板,要求代码不要太难需要一个HTML的个人简介静态网页模板求大 ...
【博主推荐】HTML制作一个美观的个人简介网页（附源码）
文章目录 HTML制作一个美观的个人简介网页模块1(个人信息)示例图模块2(基本资料)示例图模块3(项目经验)示例图模块4(专业技能)示例图模块5(工作经历)示例图模块6(自我评价)示例图 ...
优秀自我简介200字_自我简介200字左右7篇
[导语]写自我简介应正视自己的缺点与不足,不要企图掩饰或者忽略,实事求是,敢作敢为的人更令人欣赏.以下是无忧考网为大家整理的自我简介200字左右7篇,供大家参考学习. 自我简介200字左右篇一我叫X ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
领英个人简介如何支持html,普通外贸业务员怎么在领英上写一份完美的自我简介（ Summary）？...
原标题:普通外贸业务员怎么在领英上写一份完美的自我简介( Summary)? 在领英上撰写优质的.完美的自我简介( Summary)是非常重要的,因为我是一名外贸业务员,所以站在我的角度来说,领英是我 ...
自我介绍的html页面,html初学者自我介绍网页
html初学者自我介绍网页页面三: 微软中国打算在寒假招聘一批网站部门的实习生,表现优异者可以直接签约,甚至将与比尔盖茨同楼办公,但是要求发一个申请网页过去. 请你制作一个网页,内容为申请做实习生, ...
2021-03-13 软件工程导论-自我简介
自我简介你好,这是我的第一个博客,在这里首先做一个自我简介,以便大家对我有一些认识,谢谢~ 姓名:Ma世豪性别:男学历:本科二年级就读院校:桂林理工大学教育背景:主修课程有离散数学.C语言. ...
写一个自我简介，列出对软件工程课程的希望及个人目标
自我简介: 本人是一名桂林理工大学在读的大二本科生,就读于软件工程专业,学习了一些程序设计,喜欢编程.教育背景:JavaWeb.C语言.JAVA.数据结构.计算机网络.等等.希望能学好软件工程这门学科 ...

HTML结构：自我简介网页