HTML页面主体标记笔记

本文详细介绍了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属性
显示的三种方式:

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

其中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">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值