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

时间 2019-12-02

标签学习笔记 html 之一基本标记栏目 HTML 繁體版

原文原文链接

1. 概论

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

一个由元素定义的文档版本信息。浏览器
一个由定义各项声明的文档头部，做为各类声明信息的包含元素出如今文档的顶端，而且要先于出现。网络
一个由定义的文档主体部分，用来显示文档主体内容。工具

示例:优化

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

2. html头部标记head

在 HTML 语言的头部元素中，通常须要包括标题、基础信息和元信息等。 HTML 的头部元素是以为开始标记，以为结束标记的。网站

语法：ui

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

说明：搜索引擎

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

2.1 标题标记title

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

语法:

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