教你从0开始学习制作网页1PPT课件.pptx

第一章：

HTML入门基础

邱江涛

.

1

1.HTML的基本概念

HTML的英文全称是HyperTextMarkupLanguage，即超文本标记语言。它是用于制作网页的基础。通过HTML语言可以将文本、表格、图片等组织成一个网页。由HTML语言编写的文件称为HTML文件，即以.htm或者.html为扩展名的文件（知道文件命名规则吗？），也即一篇网页。

可以使用任意的文本编辑器（举例文本编辑器）编写HTML文件，然后以html和htm的扩展名来存储该文件。编写好的文件可以在浏览器中查看效果（知道怎样查看吗？）

练习：使用记事本创建文件，另存文件。

.

2

2.一个简单的HTML案例

1.在记事本中新建一个文件。写入右边的文字，然后将该文件另存为一个html文件。双击该文件看看效果

2.将右边的代码拷贝粘贴到一个html文件中。保存后，双击该文件试一试。

HTML

HEAD

TITLE我的第一个网页/TITLE

/HEAD

BODY

centerfontsize=5欢迎来到计科系！p这是我的第一个网页/font/center

/BODY

/HTML

欢迎来到计科系这是我的第一个网页

两个html文件运行后有什么不同的效果？说明了什么？

.

3

3.HTML文件中的标记

参考上面的例子，可以看到HTML语言中有很多…符号，如html、head。它们称之为标记。标记是HTML语言的控制语句，HTML语言的本质就是使用这些标记对文本、图片、多媒体等信息组织，形成网页。

我们可以从前面的例子中发现标记有些什么特点？

.

4

3.HTML文件中的标记

大部分标记是成对出现的，一对标记中标记名称成为开始标记，/标记名称称为结束标记。

在一对标记之间的内容受标记控制。

标记字母大小写无关。

由标记控制的在浏览器中显示的内容称为HTML元素，例如h1hello/h1,中的hello

标记可以嵌套使用

HTML

HEAD

TITLE我的第一个网页/TITLE

/HEAD

BODY

centerfontsize=5欢迎来到计科系！p这是我的第一个网页/font/center

/BODY

/HTML

.

5

标记可以带有属性参数，格式如下

注释标记!--注释内容--，注释内容不出现在浏览器中显示。（试一下）

标记名称属性1=“属性值1”属性2=“属性值2”…内容/标记名称

例如：fontsize=5helloworld/font

.

6

4.HTML文件的结构

HTML文件是有一定结构的:

HTML文件总是以html开始，以/html结束。用标记head/head与body/body把文档分为两部分。head/head之间的是文件头，文件头包含关于文件的说明信息，他们不和文件一起显示。body/body之间是文件要显示的内容。

HTML

HEAD

TITLE我的第一个网页/TITLE

/HEAD

BODY

……

/BODY

/HTML

文件体

文件头

HTML文档

.

7

实验：

创建自己的第一个HTML文档

.

8

第二章：

HTML基本标记

邱江涛

.

9

1.头部标记--head

HTML语言的头元素中，一般需要包括标题，元信息等。HTML的文件头以标记head开始以/head结束。头部信息不会在网页上直接显示。，它用于包含当前文档的相关信息。文件头中包含的几种重要标记如下：

1.1标题标记title

标题标记以title开始，以/title结束。标记之间的内容就是标题内容，它显示在浏览器的标题栏中。

试一试：

.

10

1.2.元标记--meta

meta标记用于定义页面信息的名称关键字等。meta标记不是成对出现的。它通过属性方式来定义页面信息，例如：

meta标记中的属性设置可以完成不同功能：

1.2.1设置页面关键字：

设置页面关键字的属性是“keyword”，它是为了向有哪些信誉好的足球投注网站引擎说明该网页的关键词，从而帮助有哪些信誉好的足球投注网站引擎对该网页进行查找和分类，它可以提高被有哪些信誉好的足球投注网站到的几率。一般可以设置多个关键词，之间用逗号隔开。见上例。

metaname=“keyword”content=“有哪些信誉好的足球投注网站，java”

.

11

1.2.2设置页面描述

设置页面描述也是为了便于有哪些信誉好的足球投注网站引擎的查找，它用来描述网页的主题。其属性是“description”

1.2.3设置网页的文字及语言

浏览器可以根据此设置正确的选择语言。对于内容是中文的html文档，有时在浏览器中显示乱码，此时需要正确设置网页的语言

metaname=“description”content=“关于html学习的网页”

metahttp-equiv=“content-type”content=“text/ht