本节将介绍HTML的几种基本标记。
一、页面主体的常用设置
<body>和</body>之间放的是页面中所有的内容,包括图片、文字、超链接等等,设置body的属性,可以控制整个页面的显示方式。
1.1设置网页背景色——bgcolor
浏览器背景颜色默认应该是白色或者灰白色。bgcolor属性可以标记整个背景颜色。
基本语法:
<body bgcolor="背景颜色">
颜色有两种表示方法,一种是用英文单词,如red、blue等;第二种是用#RRGGBB来表示,如#123456。
1.2设置背景图片——background
网页背景图片用于衬托显示效果。
基本语法:
<body background="图片的地址">
地址应是图片及路径加文件名,地址可以是相对地址和绝对地址。
1.3设置文字颜色——text
text可以设置body内所有文本的颜色。
基本语法:
<body text="文字的颜色">
颜色的表示方法与背景颜色类似。
1.4设置链接文件属性
通常,浏览器中的超链接默认为蓝色,访问过后为暗红色,底部有一条横线。我们可以在<body>中自定义这些颜色。
基本语法:
<body link="颜色">超链接文字的颜色
<body alink="颜色">鼠标点击超链接时的颜色
<body vlink="颜色">访问过的超链接的颜色
1.5设置页面边距
页面边距用于设置内容与边界的距离。
基本语法:
<body topmargin=value leftmargin=value rightmargin=value bottlemargin=value>
一般网站的页面左边距和上边距都设置成0,这样看起来不会有太多的空白。
二、页面头部元素<head>和<!DOCTYPE>
HTML的头部元素中,一般包括标题、基础信息和元信息等。以<head>开头,</head>结束。
基本语法:
<head> </head>
HTML的头部内容不会在网页上直接显示,而是通过另外的方式起作用。
对于<!DOCTYPE> ,因为HTML有多个版本,只有完全明白页面中使用的确切HTML版本,浏览器才能正确地显示出HTML页面。
代码示例:
<!DOCTYPE html>
<!DOCTYPE>位于文档的顶部位置,在<html>之前,告知浏览器使用哪种HTML或XHTML规范。
三、页面标题元素<title>
标题是一个网站对于用户来讲,最直观的信息。标题以<title>开始,以</title>结束。
基本语法:<head><title>......</title></head>
四、元信息元素<meta>
<meta>标记的主要功能是定义页面中的信息,这些信息不会显示在浏览器上。<meta>能提供文档的关键字、作者及描述等多种信息,HTML头部可以包含任意数量的<meta>。<meta>标记主要有两个属性。
name属性用于描述网页,他是以名称/值形式的名称,name属性的值所描述的内容(值)通过content表示,便于搜索引擎查找分类。
http-equiv属性用于提供HTTP协议的响应MIME文件头,它是以名称/值形式的名称,http-equiv属性的值所描述的内容通过content属性表示,通常为网页加载前提供给浏览器等设备使用。
4.1设置页面关键字
关键字是一个网站被搜索出来的关键,选择关键词的技巧是使用那些常常被人们搜索时用到的关键词。当用关键词搜索网页时,如果网页中包含该关键词,就可以在搜索结果中显示出来。
基本语法:
<meta name="keywords" content="请输入具体的关键词">
多个关键词用空格分开
避免使用过多的关键词,最好保持10个以内
可以根据不同的页面制定不同的关键词组合
代码示例:
<meta name="keywords" content="网页设计 关键字">
4.2设置页面主要内容
标签是description,该标签提供了这个页面的概括性描述。
基本语法:
<meta name="discription" content="设置页面描述">
网页的简短描述不要太长,一般140到200个字符或者100左右个汉字。
4.3定义页面的搜索方式
通过meta中的robots定义网页搜索引擎的索引方式。
基本语法:
<meta name="robots" content="搜索方式">
content的取值有以下几种:
content="all"表示能搜索当前网页及链接的网页
content="nofollow"搜索引擎不继续通过此网页的链接搜索其他的网页
content="index"表示能搜索当前的网页
content="noindex"表示不能搜索当前网页
content="follow"搜索引擎继续通过此网页的链接搜索其他的网页
content="none"搜索引擎将忽略此网页
4.4定义编辑工具
可以在meta中设置网页编辑工具的名称。
基本语法:
<meta name="generator" content="编辑软件的名称">
4.5定义页面的作者信息
auther是网页的作者。
基本语法:
<meta name="author" content="作者的姓名">
4.6定义网页文字及语言
设置编码方式,使浏览器正确地选择语言。
基本语法:
<meta http-equiv="content-type" content="text/html; charset=字符集类型" />
http-equiv是传送HTTP协议的标头,content中才是真正的属性值。charset往往设置为gb2312(简体中文)。
4.7定义页面的跳转
设置meta的http-equiv属性来实现页面的跳转。
基本语法:
<meta http-equiv="refresh" content="跳转的时间;URL=跳转到的地址">
4.8定义页面的版权信息
copyright用于定义网页授权
基本语法:
<meta name="copyright" content="© http://www.baidu.con" />
五、脚本元素
<script>标签用于定义客户端脚本,例如:JavaScript。
基本语法:
<script type="text/javascript" src="dru.js"></script>
script标签是成对出现的,以<script>开始,以</script>结束。script元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件,type属性规定脚本的类型。
HTML中有三种加载JavaScript的方法,分别是内部引用JavaScript、外部引用JavaScript、内联引用JavaScript。
代码示例:
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
六、创建样式元素<style>
<style>标签用于HTML文档定义样式,规定浏览器如何显示HTML页面。
基本语法:
<style type="text/css">
......
</style>
style元素位于head部分中。
七、链接元素<link>
<link>标签定义文档与外部资源之间的关系。<link>最常用于链接样式表——链接的类型属性type、源文档与目标文档的关系属性rel、外部文件的路径href。
基本语法:
<head>
<link rel="styleheet" type="text/css" href="theme.css" />
</head>
<link>没有结束标签。
下面是本节所有代码:
<!doctype html>
<html>
<head>
<!style type="text/css">
h1{color:white}
p {color:blue}
</style>
<meta charset="utf-8">
<meta name="keywords" content="关键词>
<meta name="discription" content="主要内容">
<meta name="robots" content="index">
<meta name="generator" content="DreamWeaver">
<meta name="author" content="Car">
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<meta http-equiv="refresh" content="15;URL=indexl.html">
<meta name="copyright" content="© http://www.baidu.com"/>
头
<title>
这是标题
</title>
</head>
<body leftmargin="50">
<body topmargin="50">
<body bgcolor="red">
<!body background="F:\心形流水\反面效果�?jpg">
<body text="blue">
<body link="245632">
<body type="text/javascript">
document.write("<h1>Hello World!</h1>")
<a href="#"> 关键词 </a>
我是内容
</body>
</html>