1.4 第一个HTML页面_前端HTML+CSS修炼之道（视频同步+直播）-QQ阅读男生科幻网

上QQ阅读APP看书，第一时间看更新

1.4 第一个HTML页面

在1.2节介绍HTML语言时讲到：HTML是一种“超文本标记语言”，它由许多HTML标签组成。注意：HTML标签也称为元素。一个页面的创建离不开HTML语言，每个页面都是从搭建结构开始的，尽管页面变得越来越复杂，但是其底层结构依然会比较简单。本节将通过示例1-1所示的简单HTML页面来详细讲解HTML页面的基本结构。

【示例1-1】HTML页面基本结构。

    <! doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    </body>
    </html>

上述代码体现了HTML页面的基本结构，每个页面都是由示例1-1所示的结构开始构建的。根据功能的不同，整个HTML页面在结构上可以分成两层：一层是外层，由<html>和</html>标签对来标识；另外一层是内层，用于实现HTML页面的各项功能。根据实现功能的不同，又可以将内层细分为两个区域，即头部区域和主体区域。头部区域由<head>和</head>标签对标识。要在浏览器窗口显示的内容需要放在主体区域。主体区域的标识标签是<body>和</body>。

打开任意一款编辑器，新建一个HTML页面，书写以上的HTML结构代码之后，以后缀名”.html”保存。然后用Chorme浏览器打开该页面，会发现页面上一片空白，没有任何内容。这是因为我们还没有在代码的<body></body>标签中添加内容。在添加内容之前先介绍一下结构中所用到的各个标签的作用。

1.4.1 基本标记标签

下面分别讲解示例1-1中每一行代码的含义及使用方法。

（1）<! DOCTYPE >文档类型声明

DOCTYPE是Document Type的简写，用来告诉浏览器使用什么样的HTML或XHTML规范来解析网页。解析规范由DOCTYPE定义的DTD（文档类型定义）来指定，DTD规定了使用通用标签语言的网页语法。需要注意的是：在HTML文档中，DOCTYPE应该位于页面的第一行。在HTML5以前，必须指定DTD，例如下例代码是XTHML的过渡类型的文档声明：

    <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在HTML5中，遵循“存在即合理”的原则，对规则的要求比较宽松，没有指定HTML标签必须遵循的DTD，因而简写成以下形式：

    <! DOCTYPE html>

DOCTYPE是不区分大小写的，所以也可以写成<! doctype html>。

目前，浏览器对页面的渲染有两种模式：怪异模式（浏览器使用自己的模式解析渲染页面）和标准模式（浏览器使用W3C官方标准解析渲染页面）。不同的渲染模式会影响到浏览器对CSS代码甚至JavaScript脚本的解析。如果使用DOCTYPE，浏览器将按标准模式解析渲染页面，否则将按怪异模式解析渲染页面。使用怪异模式对运行在IE低版本浏览器下的页面影响很大。可见DOCTYPE对一个页面的正确渲染很重要。

（2）<html></html>开始文档的实际HTML部分

<html>标签是HTML页面中所有标签的顶层标签，页面中的所有标签必须放在<html></html>标签对之间。

（3）<head></head>设置网页文档的头部信息

<head>通常跟在<html>后面。<head>和</head>标签对用于标识HTML页面的头部区域，<head>和</head>之间的内容都属于头部区域中的内容。这个区域主要用来设置一些与网页相关的信息，如网页标题、字符集、网页描述的信息等，设置的信息内容一般不会显示在浏览器窗口中。

（4）<title></title>网页文档的标题

<title>标签的作用有两个：一是设置网页的标题，以告诉访客网页的主题是什么，设置的标题将出现在浏览器中的标签栏中，如图1-22所示；二是用于搜索引擎索引，作为搜索关键字以及搜索结果的标题使用。需要注意的是：搜索引擎会根据<title>标签设置的内容将网站或文章合理归类。所以标题对一个网站或文章来说特别重要。此外，到目前为止，标题标签是SEO中最为关键的优化项目之一，一个合适的标题可以使网站获得更好的排名。实践证明，对标题同时设置关键字时可以使网站获得更靠前的排名。有关title标题对搜索影响的示例请参见示例1-3。

图1-22 网页标题显示效果

为了让访客更好地了解网页内容以及使网站获得更好的排名，每个页面都应该有一个简短的、描述性的、最好能带上关键字的标题，而且这个标题在每个页面应该是唯一的。

标题设置语法如下：

    <title>标题内容</title>

示例代码如下：

    <title>妙味课堂-www.miaov.com</title>

知识点拓展：什么是搜索引擎？

搜索引擎（Search Engine, SE）是指根据一定的策略，运用特定的计算机程序从互联网上搜集信息，在对信息进行组织和处理后，为用户提供检索服务，将用户检索相关的信息展示给用户的系统。通俗解释：常用的百度搜索就是一种搜索引擎，它通过一些关键字迅速地找到用户需要的资料。在搜索引擎中，用户搜索的就是标题，所以一个切合内容的标题是至关重要的。

说明为了界面的统一性，全文中的示例运行结果截图统一套用了妙味官方的网址：www.miaov.com，各位读者在各自的电脑中进行这些示例文件时，在Chrome浏览器的地址栏中看到的URL将会是这样的格式：file:///文件保存路径/html文件名，如将html文件ex1-1.html保存在d:\Web\lesson1路径中，则访问ex1-1.html时浏览器中显示的URL将是：file:///D:/Web/lesson1/ex1-1.html。

（5）<meta>定义文档元数据

①使用<meta>设置页面字符集

在HTML页面中，常用的字符编码是“utf-8”。“utf-8”又叫“万国码”，它涵盖了地球上几乎所有地区的文字。我们也可以把它看成是一个世界语言的“翻译官”。有了“utf-8”，你可以在HTML页面上写中文、英文、韩文等语言的内容。默认情况下，HTML文档的编码也是“utf-8”。这就使文档编码和页面内容的编码保持了一致，这样的页面在世界上几乎所有地区都能正常显示。

HTML4/XHTML设置格式：

    <meta http-equiv="Content-Type" content="text/html; charset=字符集">

HTML5对字符集的设置作了简化，格式如下：

    <meta charset="字符集">

使用<meta>设置页面字符集的示例如下。

【示例1-2】HTML页面字符集设置。

    <! doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>网页字符集设置</title>
    </head>
    <body>
        妙味课堂-www.miaov.com
    <body>
    </html>

上述代码在HTML页面的头部区域使用<meta>设置页面的字符编码为“utf-8”，在Chrome浏览器中运行的结果如图1-23所示。

图1-23 设置页面字符集正常显示页面内容

将示例1-2中的<meta>标签去掉后，再在Chrome浏览器中运行，结果如图1-24所示。

图1-24 没有设置页面字符集时，页面显示乱码

对比图1-23和图1-24，可见页面字符集设置的重要性。

②使用<meta>设置关键字

关键字是为了便于搜索引擎搜索而设置的，用户在网页中是看不到关键字的。它的作用主要体现在搜索引擎优化。对于SEO优化而言，关键字起到画龙点睛的作用。为提高网页在搜索引擎中被搜索到的概率，可以设定多个与网页主题相关的关键字。需注意的是，虽然设定多个关键字可提高被搜索到的几率，但目前大多数的搜索引擎在检索时都会限制关键字的数量，一般10个以内关键字比较合理，关键字多了会分散关键字优化，反倒影响排名。

关键字设置语法如下：

    <meta name="keywords" content="关键字1，关键字2，关键字3, …">

语法说明：关键字之间可以使用逗号，也可以使用空格等符号。

示例代码如下：

    <meta name="keywords" content=" JavaScript教程，HTML5培训，CSS3培训，移动端培训">

③使用<meta>设置网页描述信息

网页的描述信息主要用于概述性地描述页面的主要内容，是对关键词的补充性描述，当描述信息包含部分关键字时，会作为搜索结果返回给用户。像关键字一样，搜索引擎对描述信息的字数也有限制，一般允许70～100字，所以描述信息的内容应尽量简明扼要。

描述信息设置语法如下：

    <meta name="discription" content="网页描述信息">

示例代码如下：

    <meta name="discription" content="妙味课堂是北京最资深的前端开发培训机构，妙味课堂拥有系统的JavaScript、HTML5、CSS3、移动开发、远程培训等课程，并录制成最系统的前端开发视频教程，妙味课堂推出的VIP前端学习平台已经成为学习氛围最浓郁的前端学习圈。">

从<title>和<meta>两个标签的介绍中，可以看到，标题、网页描述信息以及关键词对SEO有着很大的作用，搜索引擎之所以能搜到网站，全都是标题、网页描述信息和关键词的功劳，所以我们必须做好标题、描述标签、关键词的设置与优化。下面的示例演示了如何使用标题、网页描述信息和关键词进行网页搜索。

【示例1-3】使用标题和网页描述信息实现网页的搜索。

    <! doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="description" content="妙味课堂是北京最资深的前端开发培训机构，妙味课堂拥有系统的
        JavaScript、HTML5、CSS3、移动开发、远程培训等课程，并录制成最系统的前端开发视频教程，妙味
        课堂推出的VIP前端学习平台已经成为学习氛围最浓郁的前端学习圈">
      <meta name="keywords" content="JavaScript远程培训，JS远程培训，JavaScript培训，JS培
        训，JavaScript教程，HTML5培训，CSS3培训，北京前端培训，移动端培训，北京移动端培训，北京
        JS培训，北京JavaScript培训，北京HTML5培训">
      <title>首页-妙味课堂www.miaov.com</title>
    </head>
    <body>
    ……
    </body>
    </html>

上述代码中的标题中带有了关键字“妙味课堂”，所以当用户在百度搜索框中输入“妙味课堂”时会搜索到妙味课堂页面，同时在返回的搜索结果中，会以“首页-妙味课堂www.miaov.com”作为搜索结果的标题，而返回的搜索结果描述信息则是上述代码中设置的网页描述信息，如图1-25所示。

图1-25 使用标题、网页描述信息搜索网页结果

图1-25是使用关键词搜索信息，同样可以搜索到图1-26的结果，但排名没有使用标题中的关键字进行搜索时靠前。

图1-26 使用关键词搜索网页结果

（6）<body></body>页面主体内容

body（身体，主体）代表了页面的主体部分，它是放置页面内容的地方，所有需要在浏览器窗口中显示的内容都需要放置在<body></body>标签对之间。用户可以通过浏览器看到写在<body></body>标签中的内容。

【示例1-4】<body>标签的使用

    <! doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>主体标签的使用示例</title>
    </head>
    <body>
        吼吼，好厉害，这是我们第一个HTML页面
    </body>
    </html>

当打开浏览器运行上述代码时就会发现，浏览器上会显示书写的文本，如图1-27所示。

图1-27 body标签使用结果

以上就是HTML基本结构中标签的含义及使用介绍，通过观察这些基本的标签，可以总结出标签的一些特点，如下所述。

①标签是由尖括号包围的关键词，比如<html>。

②标签通常是成对出现的（称为双标签），有开始标签和结束标签。开始标签使用<标签名>表示，结束标签使用</标签名>表示，比如<html></html>。

③也有单独呈现的标签（称为单标签），比如<meta charset="utf-8"/>。

④在开始标签中可以包含若干个属性。每个属性使用：属性名=“属性值”的格式进行设置，结束标签不包含任何属性。HTML属性表示标签所具有的一些特性。比如标签的形状、颜色、用途等特性。比如<meta>标签中的charset="utf-8",“charset”就是标签的一个属性，而“utf-8 ”则是它的值。

⑤如果是双标签的话，内容出现在两个标签之间，比如<body>内容</body>。

⑥如果是单标签的话，内容在标签属性中赋值，比如后面将学到的img图片标签，图片地址就出现在src属性中：<img src="tupian.png"/>。

⑦标签不区分大小写，但是为了建立一个良好的编码习惯，标签请使用小写。

根据上面总结的标签特点，可得到如下所示的标签设置格式：

    双标签：<标签名称  属性1="属性值1" 属性2="属性值2" …> …</标签名称>
    单标签：<标签名称  属性1="属性值1" 属性2="属性值2" …/>

1.4.2 标签嵌套关系

在HTML结构中，标签与标签之间只存在两种关系：嵌套关系和并列关系。

1．嵌套关系

嵌套关系又称为包含关系，可以通俗记忆为“父子级关系”。

在1.4.1小节中，我们发现<meta>标签和<title>标签都存在<head>标签中，此时<head>标签与<meta>标签的关系以及<head>标签和<title>标签的关系，体现的就是嵌套关系也是父子级关系，如图1-28所示。

图1-28 标签嵌套关系图示

2．并列关系

并列关系也就是常说的同级关系，也可以通俗记忆为“兄弟关系”。

图1-29 标签并列关系图示

这两种关系在以后的示例中会经常用到，大家一定要对这两种关系有所了解。

思考：在HTML基本结构中还有哪些父子级关系和兄弟关系？

本周热推：

Vue.js 前端开发快速入门与专业应用 Oracle从入门到精通（第3版）机器学习实战 C/C++代码调试的艺术 PHP网络编程学习笔记