学习笔记：html学习之一：html基本标记

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---