学习笔记: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 元素的属性有 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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值