关闭

HTML&CSS样式页面的头部标签

标签: htmlcsstransitionjavascript脚本浏览器
1334人阅读 评论(0) 收藏 举报
4.1 HTML头部标签
  HTML头部标签是<head>,主要包括页面的基本描述语句,例如后面介绍的CSS一般都定义在head元素中。<head>与</head>之间用于包含当前文档的有关信息,例如标题和关键字等。位于头部的内容都不会直接显示在网页上。
4.2 标题标签 title
4.3 基底网址标签 <base>
<base>标签可以设定URL地址,一般常用来设定浏览器中文件的绝对路径,然后在文件中只需写下文件的相对位置,在浏览器中浏览是时候这些位置会自动附载绝对路径后面,成为完整的路径。在文档中所有地址形式的url都是相对于智力定义的URL来说的。一篇文档中<base>标签不能多于一个,必须放于头部,并且应该在任何包含URL地址的语句之前。
基本语法:
<base href="url" target="window_name">
语法解释:
href  :指定文档的基础URL地址
target:定义打开页面的窗口
文件范例:
<html>
<head>
<title>文件的基底网址</title>
<base target="_blank">
</head>
<body>
<a href=".../index.htm">文件的基底网址</a>
</body>
</html>
4.4 元信息标签 <meta>
<meta>标签的功能是定义页面中的信息,这些文件信息并不会出现在浏览器页面中,只会显示在源代码中。
4.4.1 <meta>标签
4.4.2 设定编辑工具
基本语法:
<meta name="generator" content="value">
语法解释:
genertor为编辑器定义,value用于定义编辑器的名称。
文件范例:
<html>
<head>
<title>文件的编辑器</title>
</head>
<body>
...
</body>
</html>
4.4.3 设定关键字
关键字是为搜索引擎提供的,为了提高在搜索引擎中被搜索的到的几率,就多用关键字,但是这些关键字不会显示在浏览器中。
基本语法:
<meta name="keywords" content="value">
语法解释:
keywords为关键字定义,可以在content中定义关键字的内容。
文件范例:
<html>
<head>
<title>文件的关键字</title>
<meta name="keywords" content="音乐,爵士,摇滚,mtv">
</head>
<body>
</body>
</html>
4.4.4 设定描述
作用同上
基本语法:
<meta name="discription" content="value">
语法解释:
discription为描述定义,可在content中定义描述的内容。
文件范例:
<html>
<head>
<title>页面的描述语句</title>
<meta name="discripton" content="aaaaaaa">
</head>
<body>
</body>
</html>
4.4.5 设定作者
基本语法:
<meta name="author" content="value">
语法解释:
author为作者定义,可在content中定义作者的个人信息。
文件范例:
<html>
<head>
<title>设定作者</title>
<meta name="author" content="aaa">
</head>
<body>
</body>
<html>
4.4.6 设定字符集
基本语法:
<meta http-equiv="content_type" content="text/html;charset=value">
语法解释:
http-equiv传送HTTP通信协议的标头,content中定义页面的内码,其中可在charset 中写下内码的语系。
文件范例:
<html>
<head>
<title>页面的字符集</title>
<meta http-equiv="content-type" content="text/html;charset=GB3212">
</head>
<body>
</body>
</html>
4.4.7 设定自动刷新
基本语法:
<meta http-equiv="refresh" content="value">
语法解释:
http-equiv传送http通信协议的标头,refresh代表刷新,在content中写下刷新间隔的时间(秒)。
文件范例:
<html>
<head>
<title>页面的自动刷新</title>
<meta http-equiv="refresh" content="180">
...
</head>
<body>
...
</body>
</html>
4.4.8 设定自动跳转
基本语法:
<meta http-equiv="refresh" content="value;url=www.baidu.com">
语法解释:
http-equiv传送http通信协议的标头,refresh代表刷新,可在content中写下跳转间隔的时间(秒)以及跳转后打开的文件地址。
文件范例:
<html>
<head>
<title>页面的自动跳转</title>
<meta http-equiv="refresh" content="5;url=www.baidu.com">
...
</head>
<body>
...
</body>
</html>
4.4.9 设定转场效果
基本语法:
<meta http-equiv="event" content="revealtrans(duration=value,transition=number)">
语法解释:
event设定页面进入或退出的时候产生切换的效果。
page-enter表示进入网页时有网页切换的效果;
page-exit表示退出网页时有网页切换的效果。
duration为网页切换的时间延续时间。1~~23之间。
文件范例:
<html>
<head>
<title>页面的过滤效果</title>
</head>
<body>
<center><h2>页面的滤效果</h2></center>
<p><img src="aa.jpg" width=400 height=300></p>
<a href="aa.htm">aaa</a><br>
<a href="bb.htm">bbb</a>
</center>
</body>
</html>
使用<meta>语句制作进入页面时的切换转场效果
<html>
<head>
<title>页面进入时的效果</title>
<meta http-equiv="page-enter" content="revealtrans(duration=3,transition=21)">
...
</head>
<body>
<center><h2>显示页面的进入效果</h2>
<p><img src="aa.jpg" width=400 height=300></p>
<a href="cc.htm">cc</a>
</center>
</body>
</html>
使用<meta>语句制作退出页面时的切换转场效果
<html>
<head>
<title>页面退出时的效果</title>
<meta http-equiv="page-exit" content="revealtrans(duration=3,transition=2)">
...
</head>
<body>
<center><h2>显示页面的退出效果</h2>
<p><img src="aa.jpg" width=400 height=300></p>
<a href="cc.htm">cc</a>
</center>
</body>
</html>
4.5 引用脚本标签<script>
在<script>和</script>标签之间的任何东西都被浏览器当做可执行的JavaScript语句和数据处理。不能将html放在内。
4.5.1 使用内部脚本
可以在一个文档中包含不只一个<script>标签,位于<head>和</head>标签或者<body>和</body>标签之间均可。
基本语法:
<script language="value">
包含脚本内容
</script>
语法解释:
languege属性用于指定脚本语言。     
文件范例:
<html>
<head>
<title>页面的内容脚本</title>
<script language="javascript">
window.OPen('aa.htm',",'top=0,left=0,toolbar=no,scrollbars=no,resizable=no,width=300,height=300')
</script>
</head>
<body>
...
</body>
</html>
4.5.2 引用外部脚本
基本语法:
<script language="value" src="url">
</script>
语法解释:
languege属性用于指定脚本语言,通过src属性指定外部文件。
<html>
<head>
<title>使用外部脚本</title>
<script language="javascript" src=aa.js>
</script>
</head>
<body>
<script language="javascript" src=aa.js>
</script>
</body>
<html>
 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5463次
    • 积分:84
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档