HTML结构:自我简介网页

自我简介网页

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

任务描述

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

显示效果如下图所示:
HTML结构:自我简介网页_第1张图片
为完成以上网页制作,请大家认真阅读以下相关知识。

相关知识

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

接下来,我们开始学习一个简单完整网页结构。它包含的主要元素,如下图所示:
HTML结构:自我简介网页_第2张图片
我们来看如下示例:


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

显示效果如图:
HTML结构:自我简介网页_第3张图片
从显示效果来看,该网页似乎与我们之前所学网页没有什么不同。但这个网页更容易被搜索引擎发现。

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

声明文档格式:DOCTYPE

首先,第一行:


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

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

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


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

提示:

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

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

根元素:HTML元素

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

头元素:head元素

与属性会给元素增添附加信息一样,head元素能为整个网页增添更多信息。可以用在head中的标签有, , ,

你可能感兴趣的:(#,Web技术应用基础-HTML,html)