2.5 头部元素


2.5 头部元素


HTML





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" 
xml:lang="en" lang="en">
 <head>
<title>Header Elements</title>
  <meta http-equiv="Content-type" 
content="text/html; charset=utf-8" />

<!-- 包含一些指向样式表的链接 -->
<link rel="stylesheet" href="site.css" 
media="all"   type="text/css" />
<link rel="stylesheet" href="page.css" 
media="all"   type="text/css" />
<link rel="stylesheet" href="print.css"
media="print" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css"
media="all" type="text/css" />
<![endif]-->

<!-- 选择性地包含一些用户提供的样式表 -->
<link rel="alternate stylesheet" type="text/css"
title="cool" href="cool.css" />
<link rel="alternate stylesheet" type="text/css"
title="hot"  href="hot.css"  />
  <!-- 选择性地包含一些只应用于此页面的样式规则 -->
<style type="text/css" media="all">
body  { margin:0px; padding:20px;
padding-top:0px; width:702px;
font-family:verdana,arial,
sans-serif; font-size:medium; }
h1    { margin:10px 0 10px 0; font-size:1.9em; }
</style>
  <!-- 选择性地包含一些指向JavaScript的文件 -->
<script type="text/javascript" src="script.js" ></script>
  <!-- 选择性地包含一些只应用于此页面的JavaScript -->
<script type="text/javascript" ><!--
alert("Hello World!");
--></script>
  </head>
  <body>  <h1>头部元素</h1>  </body>
</html>


头部元素



















问题


需要为文档添加一些元数据。需要为文档绑定一些样式表和JavaScript文件。还需要通过在页面中嵌入一些CSS规则和JavaScript来改善页面的性能。


解决方案


可以使用<link rel="stylesheet" type="text/css" />把样式表绑定到一个文档中。可以用href="URI"来指定样式表的URI。还能用media="all"把样式表应用到所有解析设备上。可以使用media="print"来应用打印时的样式。这样就可以隐藏导航栏、去掉背景、重新颠倒颜色设计(比如,原来的黑底白字),把其变成普通的白底黑字,等等。还能使用media= "handheld"仅把样式表应用到手提设备中。你可能会发现这有些不实用,因为可运行于手提设备的样式表可能会在其他设备上被忽略或失效。很少有浏览器支持以下几种媒体类型:"tty"(电传打字机)、"tv"(电视)、"projection"(投影仪)、"braille"(盲文)和"aural"(可听的)。


可使用<link rel="alternate stylesheet" />来为用户提供替换样式表。像Firefox 2Opera 9这样的浏览器会放置一个替换样式表的下拉列表,它允许用户每次为当前文档选择和应用一个替换样式表。因为大多数网站都没有提供替换样式表,如果提供了,往往也没有视觉上的提示,所以很少有用户去寻找或使用替换样式表。因此,那些提供了替换样式表的网站通常会在文档中放几个按钮或菜单,然后通过JavaScript在不同样式表之间切换。


可以把样式放在<style>元素中。这些样式只会应用于当前文档。而那些要应用于多个文档的样式,应当放在独立的样式表中。你可能会发现,直接把样式嵌在文档里会大大提高解析文档的速度,因为浏览器只需下载更少的文件。与此同时,也会发现这么做大大增加了维护网站的工作量。


还有一些其他元素<head>中也很常见,比如<title><meta><script>。我已在实例中包括了这些元素,但是它们的用法超出了本书的范畴。


模式


HTML


<head>


 <link rel="stylesheet" href="FILE.CSS"


       media="ALL_PRINT_HANDHELD" type="text/css" />


 <link rel="alternate stylesheet" type="text/css"


       title="NAME_TO_SHOW_USER" href="FILE.css" />


 <style type="text/css" media="all"> STYLES </style>


</head>


适用范围


<link><style><title><meta><script>要放在<head>中。


相关


HTML结构、条件样式表。




标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2