基本语法:<标签名称 属性名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">