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

原创 2007年09月21日 09:50:00
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>
 

相关文章推荐

HTML标签的默认CSS样式汇总

在html中,即使我们没有指定页面元素显示的css样式,元素也会按照默认的的标准css样式去显示。因此掌握基本的html标签可以在一定程度上精简你的css代码,现将html标签的默认属性进行一定的汇总...

HTML5基础加强css样式篇(标签自定义属性)(八)

1.自定义属性 尚硅谷HTML5 初级阶段 .box { /*Add your CSS*/ } ...

HTML标签的默认CSS样式汇总

  • 2011年11月10日 18:32
  • 1KB
  • 下载

HTML table标签,css样式,caption标签,标题及摘要的语法解析

一、table标签,网页上的表格 有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表: 想在网页上展示上述表格效果可以使用以下代码: 创建表格的...

前端页面使用js实现不同终端引入不同的html页面css样式js等

我在工作中刚遇到一个关于一个主html在不同终端下引入不同的html页面css样式js等的问题,下面我把它的实现方法分享给大家。 分别新建移动端和PC端需要的html文件(这里就以html文件格...
  • hj7jay
  • hj7jay
  • 2017年03月07日 09:26
  • 210

微信小程序中css样式media标签

微信小程序中css样式media标签前沿:微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需...

<form>标签及CSS样式选择器

一、 此标签是用来创建一个表单,也就是定义表单的开始和结束位置,标签具有下面等属性: 1、action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。 2、Method属性用来定...

学习记录—yii2页面引入、添加css样式及js特效

在yii框架的根目录下的assets目录,这个目录就是yii框架的资源文件夹。在该目录下新建一个php文件(如:MyCss.php):代码如下 ...

jsp页面如何调用css样式

本以为很简单的东西没想到整了一天,首先是基础模糊,web项目下的web-inf文件夹特别严密,tomcat是不允许直接访问里面的页面或者资源,所以我调整了一下项目目录,将css文件夹放在了webapp...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML&CSS样式页面的头部标签
举报原因:
原因补充:

(最多只允许输入30个字)