HTML页面主体标记笔记

最新推荐文章于 2021-07-13 09:37:20 发布

原创最新推荐文章于 2021-07-13 09:37:20 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML页面的基本标记，包括html、head和body标签。在head部分讲解了title、meta、style和link标签的功能，特别是meta标签的name和http-equiv属性。body标签作为页面主体，涉及到背景设置（如background属性和bgcolor属性）、文本及超链接颜色配置、以及页面边距调整等。通过这些属性，可以实现网页的个性化设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本语法：<标签名称属性名1 =“属性值1” 属性名2 = “属性值2” …>

1、html标签

<html>
...
</html>

html标签之前的标记：!DOCTYPE HTML

2、head标签

2.1 title标签

<head>
	<title>网页首页</title>
</head>

2.2 meta标签

用来描述HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、网页刷新等。

（1）name属性
主要用于描述网页，属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用。

meat标签的name属性语法格式：<meta name = "参数"content = “具体的参数值”>

name属性值	说明和举例
keywords关键字	说明：keywords用来告诉搜索引擎你网页的关键字是什么举例：<meta name = "keywords"content = “science,education”>
description网站内容描述	说明：description用来告诉搜索引擎你网站的主要内容举例：<meta name = "descriotion"content = “This page is about the meaning of science,education,culture.”>
robots机器人向导	说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all 举例：<meta name = "robots"content = “none”>
author作者	说明：标注网页作者举例：<meta name = "author"content = “abc@yaho.com.con”>

（2）http-equiv属性

http-equiv属性	说明和举例
content-type显示字符集的设定	说明：设定页面使用的字符集，Dreamweaver会默认如下设置举例：<meta http-equiv = "Content-Type"content = “text/html;charset = utf - 8”>
expires期限	说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输注意：必须是用GMT的时间格式举例：<meta http-equiv = "expires"content = “Fri,12 Jane 2018 18:18:18 GMT”>
set-cookie cookie设定	说明：如果网页过期，那么存盘的cookie将被删除。注意：必须使用GMT的时间格式举例：<meta http-equiv = "Set-Cookie"content = “cookievalue = xxx;expires = Friday,8-Aug-2018 18:18:18 GMT;path = /”>
refresh刷新	说明：自动刷新并指向新页面。注意：其中2是指停留2s后自动刷新到URL网址举例：<meta http-equiv = "Refresh"content = “2;URL = http://www.gdst.cc/”>

2.3 style标签

<style>
body{
	background-color:#f8ffd3
	margin:0px;
	padding:0px;
}
</style>

2.4 link标签

<link href = "css/style.css"type = "text/css"rel = "stylesheet">

3 body标签

主体部分以标签开始，标签结束。主体部分包含网页中显示的文本、图像和链接等。
同时，也可以控制网页的一些全局效果，包括设置网页背景图、背景色、页面内文本或超链接颜色、页面边距等。

<body>
......
</body>

3.1设置页面背景
（1）background属性

<html>
<head>
  <title>页面背景图片</title>
</head>
<body background = "background_image.jpg">
   <p align = "center">这张图片是背景，文字可以写在图片上面。</p>
</body>
</html>

如果图片不够浏览器窗口大小，这样设置的页面背景图片会铺满整个页面

如果需要控制图片的属性，可以利用CSS样式来设置背景图片
以下代码控制背景图片在页面顶部居中显示，并且不重复

<body style = "background:url(background_image.jpg)center top no-repeat">

style样式中可以通过设置left、right、top、bottom、center的组合灵活控制图片的位置，通过repeat、no-repeat、repeat-x、repeat-y等设置图片的重复程度。
在网站应用中，还可以设定背景图片为浮动位置，即不随滚动条位置的变化而变化。通过bgproperties属性来实现，如下代码为页面设置一张背景图片，并设置为浮动，请注意多个属性之间用空格分开。

<body background = "background_image.jpg"bgproperties = "fixed">

（2）bgcolor属性
显示的三种方式：

6位十六进制值方式
RGB颜色值方式
标准的颜色名称表示方式

其中RGB颜色还可加入颜色的透明度，即RGBA颜色设置方式。
Dreamweaver软件默认使用的是6位十六进制方式，颜色值最低为#000000（黑色），最高为#FFFFFF（白色），例如设置网页背景颜色为淡黄色的代码如下：

<body bgcolor = "#FFFFCC">

RGB颜色值方式设置的背景颜色不会在Dreamweaver软件的设计视图显示，需要用浏览页面才能正确显示页面背景颜色。

3.2设置页面文本及超链接

网页中文本的默认颜色为黑色，可以在body标签中设置text属性整体设置网页文本颜色。

<body text = "6600FF">

超链接三种状态：
链接：link （蓝色）
活动链接：vlink（蓝色）
已访问链接：alink（紫色）

<body link = "#FF0000"vlink = "#00FF00"alink = "#0000FF">

3.3设置页面边距

页面边距是页面内容与浏览器边框之间的距离。
body标签中的leftmargin、rigthtmargin、topmargin、bottomargin等属性设置各个方向的页边距

<body leftmargin = "20"rightmargin = "20"topmargin = "20"bottommargin = "20">