任务1.2　创建空白网页

☑学习目标

①能够输入基本的网页结构标签。

②能够表述HTML语言以及基本的标签语法。

③能够使用Visual Studio Code新建和保存页面。

☑任务描述

使用Visual Studio Code新建并保存一个简单的基本页面。

☑知识学习与课堂练习

1.HTML概念

HTML（Hyper Text Mark-up Language，超文本置标语言）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

2.HTML文本基本结构

一个网页对应一个HTML文件，HTML文件以.htm或.html为扩展名。HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体部分包含网页所要说明的具体内容。其完整结构如下：

其中＜！doctype＞声明位于文档中最前面的位置，处于＜html＞标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。

＜html＞＜/html＞标签标识了文件的开头与结尾，表示这对标记间的内容是HTML文档。

＜head＞＜/head＞标记包含了文件的头部，标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间等。

＜meta＞标签没有结束标签，位于head元素内部，＜meta＞标签的属性定义了与文档相关联的名称和值。例如＜meta charset="UTF-8"＞表示使用的字符编码为国际化编码，比较常见的还有简体中文编码gb2312。

在head标记内最常用的标记是＜title＞＜/title＞，该标记是网页主题标记，提示网页内容和功能的文字，它将出现在浏览器的标题栏中。

＜body＞＜/body＞标记是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。

【课堂练习1.2-1】录入一个完整的网页结构标签。

打开Visual Studio Code，输入如下标签：

3.移动设备的HTML基本结构

计算机经过多年的发展，显示器的屏幕分辨率已经能够达到1280×1024像素及更高的1280×1024像素，因此移动设备无法将普通网页全屏显示在移动设备上，虽然通过屏幕放大和缩小也可访问传统的网页，但由于用户体验不佳，很难得到实际的应用。

为了增加对移动设备的友好性，应该将针对移动设备的样式融合进框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在＜head＞之中添加viewport元数据标签。

＜meta name="viewport" content="width=device-width，initial-scale=1"＞

在移动设备浏览器上，通过为视口（viewport）设置meta属性为user-scalable=no可以禁用其缩放（zooming）功能。禁用缩放功能后，用户只能滚动屏幕，就能让网站看上去更像原生应用的。注意，这种方式并不推荐所有网站使用，要视情况而定。

＜meta name="viewport" content="width=device-width，initial-scale=1，

maximum-scale=1，user-scalable=no"＞

【课堂练习1.2-2】录入一个完整的移动设备网页结构标签。

打开Visual Studio Code，输入如下标签：

其中＜html lang="zh-CN"＞主要是告知各个浏览器所用的字符集，如果没有该字符集，浏览器就按各自默认的字符来显示，这样各个浏览器的显示结果就可能不一样。

4.HTML5新增结构标签

一个普通的页面一般会有头部、导航、文章内容，还有附着的右边栏、底部等模块。这些模块可以使用HTML5新标签进行布局，如图1.2-1所示。

（1）header标签

header标签定义文档的页眉，通常是一些引导和导航信息。header标签至少包含（但不局限于）一个标题标记（＜h1＞-＜h6＞），还可以包括其他标签，如表格、列表、表单、nav标签等。

（2）nav标签

nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其他部分，使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。

（3）article标签

article标签代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article标签通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

（4）section标签

section标签定义文档中的节，如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。

（5）aside标签

aside标签通常用来描述与文档主体内容不相关的内容。比如，博客文章用article标签，而博客旁边的文章信息栏（作者头像、博文分类、作者等级等和博客正文内容无关的）用aside。

（6）footer标签

footer标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。它和header标签的使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚。

【课堂练习1.2-3】完成图1.2-1所示网页布局的结构标签。

打开Visual Studio Code，输入如下标签：

☑任务实施

①打开任务1中的index.html文件。

②完成网页广告单页HTML结构的编写。

☑任务回顾

HTML是网页主要的组成部分，基本上每一个网页都是由HTML语言组成的，所以要学习如何建设网站，必须从网页的基本语言学起。

HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体部分包含网页所要说明的具体内容。

☑任务拓展

HTML元素的选用原则：

（1）少亦可为多

开发者在使用HMTL元素时容易忘乎所以，文档中标记密布。标记只能应内容的需要使用。

判断该用多少标记需要经验。有条经验法则是：问问自己打算如何发挥一个元素的语义作用，如果不能马上答出就不用这个元素。

（2）不要误用元素

对内容进行标记时，只宜将元素用于它们原定的用途，不要创造自有的语义。如果找不到适合自己所要含义的元素，可以考虑使用通用元素（如span或div），并且用全局属性class表明其含义。

（3）具体为佳，一以贯之

同一个标记内容的元素应该选择最为具体的那个元素。如果已有元素能恰当表明内容的类型，就不要使用通用元素。

同样，同一个元素的使用在整个页面、网站或Web应用系统上要保持一致。对于作者来说，他们以后修改自己的HTML文档的工作可以由此更加轻松，对于要处理HTML文档的其他人也一样。

（4）对用户不要想当然

有人可能觉得HTML文档的用户关心的只是它在浏览器中呈现的结果，所以不用为标记的语义准确性劳神。呈现与语义分离原则的目的完全是为了让HTML文档更易于程序化处理，所以随着HTML5的采用和实现愈加广泛，HTML内容的这种使用会日益增多。如果不关心标记的准确性和一致性，这样的HTML文档处理起来会更为困难，用户为其找到的用处也很有限。