开始,以


1. 概论

一个完整的 HTML 文档必须包含 3 个部分:

  • 一个由 元素定义的文档版本信息。

  • 一个由 定义各项声明的文档头部, 作为各种声明信息的包含元素出现在文档的顶端,并且要先于 出现。

  • 一个由 定义的文档主体部分, 用来显示文档主体内容。

示例:

<html>
<head>
文档头部信息
</head>
<body>
文档正文信息
</body>
</html>

2. html头部标记head

在 HTML 语言的头部元素中,一般需要包括标题、基础信息和元信息等。 HTML 的头部元素是以 为开始标记,以 为结束标记的。

语法:

<head>.......</head>

说明:

元素的作用范围是整篇文档。 元素中包含: 元信息定义、文档样式表定义和脚本等信息,定义在 HTML 语言头部的内容往往不会在网页上直接显示。

2.1 标题标记title

HTML 页面的标题一般是用来说明页面的用途,它显示在浏览器的标题栏中。在 HTML 文档中,标题信息设置在 与 之间。标题标记以 开始,以 结束。

语法:

<title>......</title>

说明:

在标记中间的“…”就是标题的内容,它可以帮助用户更好地识别页面。页面的标题只有一个,它位于 HTML 文档的头部,即 和 之间

示例:

<html>
<head>
<meta http-equiv="content-type"  content="text/html"; charset="gb2312" />
<title>
文本标题部分
</title>
</head>
<body>
文本主体部分
</body>
</html>

2.2 元信息标记meta

meta 元素提供的信息不显示在页面中,一般用来定义页面信息的说明、关键字、刷新等。在 HTML 中, meta 标记不需要设置结束标记,在一个尖括号内就是一个 meta 内容。在一个 HTML 页面中可以有多个 meta 元素。 meta 元素的属性有 namehttp-equiv,其中 name 属性主要用于描述网页,以便于搜索引擎查找、分类。

2.2.1 name用法

(1). 设置页面关键字keywords

在搜索引擎中,检索信息都是通过输入关键字来实现的。关键字是整个网站登录过程中最基本也是最重要的一步,是进行网页优化的基础。关键字在浏览时是看不到的,它可供搜索引擎使用。当用关键字搜索网站时,如果网页中包含该关键字,就可以在搜索结果中列出来。

语法:

(2).设置页面说明

设置页面说明也是为了便于搜索引擎的查找,它用来详细说明网页的内容,页面说明在网页中不显示出来。

语法

<meta name="description" content="具体的页面说明">

(3).定义编辑工具

现在有很多编辑软件都可以制作网页,在源代码的头部可以设置网页编辑工具的名称。与其他 meta 元素相同,编辑工具也只是在页面的源代码中可以看到,而不会显示在浏览器中

语法

<meta name="generator" content="具体的编剧工具名称">

(4).设置作者信息

在源代码中还可以设置网页制作者的姓名。

语法:

<meta name="author" content="作者姓名">

2.2.2 http-equiv用法

(1). 设置网页文字及语言

在网页中还可以设置语言的编码方式,这样浏览器就可以正确地选择语言,而不需要人工选取。

语法:

<meta http-equiv="content-type" content="text/html; charset=字符集类型" />

说明:

在该语法中, http-equiv 用于传送 HTTP 通信协议的标头,而在 content 中才是具体的属性值。 charset 用于设置网页的内码语系,也就是字符集的类型,国内常用的是 GB 码, charset 往往设置为 gb2312 ,即简体中文。英文是 ISO-8859-1 字符集,此外还有其他的字符集。

举例:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
</head>
<body>
文本正文部分
</body>
</html>

此处设置语言为简体中文。

(2). 设置网页的定时跳转

使用 标记可以使网页在经过一定时间后自动刷新,这可通过将 http-equiv 属性值设置为 refresh 来实现。 content 属性值可以设置为更新时间。在浏览网页时经常会看到一些欢迎信息的页面,在经过一段时间后,这些页面会自动转到其他页面,这就是网页的跳转。

语法:

<meta http-equiv="refresh" content="跳转的时间;url=跳转到的地址">

说明

在该语法中, refresh 表示网页的刷新,而在 content 中设置刷新的时间和刷新后的链接地址,时间和链接地址之间用分号相隔。默认情况下,跳转时间以秒为单位。

举例:

<html>
<head>
<meta http-equiv="refresh" content="20;url=index.html">
<title>网页自动刷新</title>
</head>
<body>
文本正文部分
</body>
</html>

3 网页的主体标记body

网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置,包括网页的背景设置、文字属性设置和链接设置等。

3.1 网页背景颜色bgcolor

对大多数浏览器而言,其默认的背景颜色为白色或灰白色。使用 标记的 bgcolor 属性可以为整个网页定义背景颜色。

语法:

<body bgcolor ="背景颜色">

说明:

在该语法中的 body 就是页面的主体标记, bgcolor 的值可以是一个已命名的颜色,如red,green,blue等,也可以是十六进制的颜色值。

举例:

<html>
<head>
<title>背景颜色</title>
<meta name=“keywords” content="背景,颜色">
<meta name="description" content="背景颜色">
<meta http-equiv="content
-type" content="text/html;charset=gb
2312" />
<meta http-equiv="refresh" content=“40; url=index.html”>
</head>
<body bgcolor="red">
文本正文部分
</body>
</html>

设置网页标题为“背景颜色”;关键字为"背景",“颜色”;描述为"背景颜色";字符集为简体中文;网页自刷新,刷新时间为40秒,跳转网页为index.html;网页背景颜色为红色。

3.2 网页背景图片background

使用恰当的图片作为背景,能够使页面看上去更加生动美观。使用 background 属性可以将图片设置为背景,还可以设置背景图片的平铺方式、显示方式等。

语法

<body background="图片地址">

3.3 网页文字颜色

可以通过 text 标记来设置文字的颜色。在没有对文字的颜色进行单独定义时,这一属性可以对页面中所有的文字起作用。

语法:

3.4 链接文字颜色

超链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超链接的形式关联在一起的,正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超链接中以文字链接最多,在默认情况下,浏览器以蓝色作为超链接文字的颜色,访问过的文字则颜色变为暗红色。可以通过 link 参数修改链接文字的颜色。

(1). 修改未点击的链接文字颜色link

语法:

<body link=“red”>

说明:

这一属性的设置与前面几个设置颜色的参数类似,都是与 body 标签放置在一起,表明它对网页中所有未单独设置的元素起作用。

(2). 修改正在访问的链接文字颜色alink

语法:

<body alink=“blue”>

(3). 修改访问后链接文字的颜色vlink

语法:

<body vlink="green">

3.5 编剧margin

在网页中可以设置页面与浏览器边框之间的距离,包括上边距和左边距。

语法:

<body topmargin=上边距的值 leftmargin=左边距的值>

说明:

在默认情况下,边距的值以像素为单位。一般网站的页面左边距和上边距都设置为 0 ,这样看起来页面不会有太多的空白。

3.6 页面注释标记

注释是在 HTML 代码中插入的描述性文本,用来解释该代码或提示其他信息。注释只出现在代码中,在浏览器的页面中不显示。在 HTML 源代码中适当地插入注释语句是一种非常好的习惯。对于设计者日后的代码修改、维护工作很有好处。另外,如果将代码交给其他设计者,其他人也能很快读懂前者所编写的内容。

语法:

<!--注释内容-->

说明:

注释语句元素由前后两半部分组成,前半部分由一个左尖括号、一个半角感叹号和两个连字符组成,后半部分由两个连字符和一个右尖括号组成。

举例:

<html>
<head>
<title>这是最简单的网</title>
<meta name=“keywords” content="最简单">
<meta name="description" content="最简单">
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
</head>
<body>
<body bgcolor="yellow">
<body text="green">
这是最简单的网页
</body>
</html>


---end---

---20190504 22:16:23---

原文地址:https://www.cnblogs.com/yj411511/p/10810142.html