一个简单完整网页结构。它包含的主要元素，如下图所示：

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

首先，第一行：

 

  1. <!DOCTYPE HTML>


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

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

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

 

  1. <!DOCTYPE `HTML` PUBLIC "-//W3C//DTD `HTML` 4.01 Transitional//EN" 
  2. "http://www.w3/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>的内容一般作为网页标签名，写法如下：
 

 

  1. <title>标题内容</title>


title内容显示位置：
 

 

元信息元素：meta
 

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

  1.  
    页面编码；
     
  2.  
    网页标题；
     
  3.  
    网页描述；
     
  4.  
    网页关键词。
     


这些信息，一方面可用于告知浏览器如何展示页面，另一方面可以提供给搜索引擎检索。
 因为搜索引擎会通过meta元素的name和content属性来检索页面，所以当我们加入了合适的关键字和描述内容时，页面就更容易被搜索引擎发现。
 

编码格式：charset
 

 

  1. <meta charset="utf-8">


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

描述：description
 

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

通常description的写法如下：
 

 

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


关键词：keywords
 

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

通常keywords的写法如下：
 

 

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


主体元素：body 元素
 

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

编程要求如下：
 

显示效果如下图所示：
 

 

代码如下：
 

<!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结构：自我简介页面