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 元素的属性有 name和http-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---