首页 理论教育 HTML网页头部标签元素详解

HTML网页头部标签元素详解

时间:2023-06-03 理论教育 版权反馈
【摘要】:HTML文档的<head>(标签)元素是所有头部元素的容器。其内容为一个简单的HTML文档,带有尽可能少的必需的标签。图1.6<base>标签实例3.<link>标签HTML<link>标签定义文档与外部资源的关系。例4“chap1.3.1.3.html”是<link>标签实例。在HTML中,<meta>标签没有结束标签,但在XHTML中,<meta>标签必须被正确地关闭。图1.8注解了HTML的<meta>标签各项关键词的意义。图1.9<script>标签实例6.<style>标签<style>标签是HTML定义样式表时使用的标签。

HTML网页头部标签元素详解

HTML文档的<head>(标签)元素是所有头部元素的容器。<head>标签内的元素可以是脚本标签,可以是样式标签(样式表还包含位置信息,其指示浏览器在何处可以找到样式表),可以是元信息标签,还可以是网页标题标签等。如以下标签都可以被添加到head部分:<title>、<base>、<link>、<meta>、<script>以及<style>。下面对这些标签进行简要介绍。

1.<title>元素

<title>元素用来定义HTML文档的标签标题。浏览器以特殊的方式来使用标题,通常把它放置在浏览器窗口的标题栏状态栏上。当把文档加入用户的链接列表、收藏夹或书签列表时,标题将成为该文档链接的默认名称。

例2 “chap1.3.1.1.html”是一个<title>元素使用实例。其内容为一个简单的HTML文档,带有尽可能少的必需的标签。

例2的显示效果如图1.5所示。

图1.5 title标签实例

2.<base>标签

<base>标签为页面上的所有链接规定默认地址或默认目标。通常情况下,浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。使用<base>标签可以改变这一点。使用<base>标签后浏览器将不再使用当前文档的URL,而使用指定的基本URL来解析所有的相对URL。这其中包括<a>、<img>、<link>以及<form>标签中的URL。

例3 “chap1.3.1.2.html”是<base>标签使用实例。

例3的显示效果如图1.6所示。

图1.6 <base>标签实例

3.<link>标签

HTML<link>标签定义文档与外部资源的关系。<link>标签最常见的用途是链接样式表。下面的实例展示了HTML文档如何链接一个外部样式表。

例4 “chap1.3.1.3.html”是<link>标签实例。

例4的显示效果如图1.7所示。

图1.7 <link>标签实例

4.<meta>标签

HTML的<meta>标签定义有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。在HTML中,<meta>标签没有结束标签,但在XHTML中,<meta>标签必须被正确地关闭。(www.xing528.com)

提示:<meta>标签永远位于head元素内部。元数据总是以名称/值的形式被成对传递。

图1.8注解了HTML的<meta>标签各项关键词的意义。

图1.8 <meta>标签注解

5.<script>标签

HTML的<script>标签用于定义客户端脚本,比如JavaScript。script元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件。其必需的type属性规定脚本的MIME类型。脚本的常见应用有图像操作、表单验证以及动态内容更新。

提示:

①假如此元素内部的代码没有位于某个函数中,那么这些代码会在页面加载时被立即执行,但<frameset>标签之后的脚本会被忽略。

②请参阅<noscript>元素。对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说,该元素非常有用。

例5 “chap1.3.1.4.html”是<script>标签实例。在HTML页面中插入一段JavaScript代码,该代码的功能是在网页上书写指定格式的“HelloWorld!”。

例5的显示效果如图1.9所示。

图1.9 <script>标签实例

6.<style>标签

<style>标签是HTML定义样式表时使用的标签。HTML中的样式表称为CSS样式表(层叠样式表),可以用于控制网页的字体、颜色、图像、表格、链接以及布局格式,是Web页面设计的重要技术,它使得网页内容与样式定义彻底分开,甚至可以将CSS保存为.css文件,使用时再进行调用导入。这样就可以通过定义和修改CSS达到页面设计的效果。下面是一个较为简单的样式表实例。

例6 “chap1.3.1.5.html”是<style>标签实例。该实例定义了网页的背景颜色,各行文字的字体、字号、背景灯样式。

例6的显示效果如图1.10所示。

图1.10 <style>标签实例

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈