首页 3、头部信息

3、头部信息

3、头部信息头部信息包含些什么信息？body部分包含文档的全部内容，因此将是你编写文档时在上面所花时间最多的部分。相比之下，head部分的作用似乎就不那么重要，因为除了title元素，其它写入head部分的信息，是网站访问者在浏览器中不能直接看到的。head部分是向浏览器发出的绝大多数指示开始的地方，也是你储存有关文档的附加信息（所谓meta元信息）的地方。设置文档的首选语言HTML文档的这条信息会在head元素的父元素html元素上继续。我们这里是在head元素中定义文档的首选自然语言。这里的“自然语言”指人类语言，例如法语...

头部信息包含些什么信息？body部分包含文档的全部内容，因此将是你编写文档时在上面所花时间最多的部分。相比之下，head部分的作用似乎就不那么重要，因为除了title元素，其它写入head部分的信息，是网站访问者在浏览器中不能直接看到的。head部分是向浏览器发出的绝大多数指示开始的地方，也是你储存有关文档的附加信息（所谓meta元信息）的地方。设置文档的首选语言HTML文档的这条信息会在head元素的父元素html元素上继续。我们这里是在head元素中定义文档的首选自然语言。这里的“自然语言”指人类语言，例如法语、泰语或英语等。设置文档的首选语言，可以帮助屏幕阅读器阅读网页，这是因为比如说“six”（六）在英语和法语中的读音差别就非常大；这还可以帮助搜索引擎。因此定义文档的首选语言是一个好的做法，在你编写面向国际受众的网页时就更是如此了，尽管现在在源代码中定义了文档首选语言的网页还不是很多。以下是在HTML文档中定义文档首选语言的示例：...请注意，你还可以在其它元素中使用lang属性，为文档的小分区设置语言，例如Bonjour。你使用哪些属性来设置语言，取决于你的文档的DOCTYPE。万维网联盟（W3C）发布的文件中写道：对HTML文档，仅使用lang属性。对用作text/html的XHTML1.0文档，使用lang和xml:lang属性。对用作XML的XHTML文档，仅使用xml:lang属性。语言代码可以是两个字母的代码，如English（英语）的代码是en，也可以是四个字母的代码，如AmericanEnglish（美国英语）的代码是en-US，还可以是一些不常用的代码。两个字母的语言代码由ISO639-1定义，不过根据目前的最佳习惯，你应当使用IANAsubtagregistry来定义你的语言代码。通过文档的标题来判断文档title元素是head中最重要的元素之一。包含在title元素中的文本，在所有“用户代理/浏览器”的标题栏上都要显示（浏览器标题栏位于浏览器的最上方）。显示在标题栏上的标题，将是用户在访问网站时看到的第一条内容，因此它是非常重要的。此外，对“辅助技术”如屏幕阅读器（一种为视力受损的用户朗读网页的软件）等而言，标题栏上的标题是显示文档主要内容的提示，对很多搜索引擎来说，也同样是如此。因此，你可能会发现，当你为你的Web文档选用了一个包含关键词且人类易读的好标题时，它的访问量会激增。请用浏览器打开以下这个HTML文档（你下载的zip文件中的headexample.html）。Iamatitleexample你会看到包含在title元素中的文本，被显示在位于浏览器导航栏上方的标题栏上，如图1所示。图1：浏览器标题栏上显示的一个标题网上有很多关于如何写出好的文档标题的教程，它们中的多数都与搜索引擎优化（SEO）有关。不过有一点要注意，不要为了想试图让搜索引擎在很多搜索结果上都显示你的Web文档，就在标题栏上罗列过多的词句。适当的做法是写一个能准确反映文档主要内容的精练的标题栏标题，例如“BreedingDogs—TipsaboutAlsatians”（意为，狗的饲养——饲养阿尔萨斯狼狗的提示）这样一个标题栏标题，就远比“Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet.”（意为，狗、阿尔萨斯狼狗、饲养、狗、提示、免费、宠物）这个标题栏标题更能为用户所接受和易读。添加关键词和描述下一步你要做的是添加关键词和描述，第一眼看来这似乎是多余的，因为访问者在浏览器中是不能直接看到这些信息的。关键词和描述都添加在head内的meta元素之中，如以下这个选自Yahoo!欧洲网站的HTML文档（headwithmeta.html）所示：Yahoo!UK&IrelandEurosport—SportsNews|LiveScores|Sport如果你用一个浏览器打开这个文档，在文档的body中是看不到任何东西的。但是，如果你把这个文档放在网上，搜索引擎又将之编入索引，则你在meta元素之中所写入的描述（description）将显示为搜索结果中链接的下方所显示的文本，如图2所示。图2：搜索引擎的搜索结果页面中显示的描述这些信息可能就是网站的潜在访问者正在找寻的，所以才会去点击搜索结果页面显示的链接。“描述”还有另外一个作用，即有些浏览器会在用户将Web文档加入“收藏夹”时显示作为附加信息的“描述”，如图3所示：图3：有些浏览器会在用户将Web文档加入“收藏夹”时显示描述因此，尽管在文档中加入元描述没有立竿见影的好处，但在让你的Web文档能为更多人访问方面，它们还是发挥着重要作用。同样地，加入关键词也可帮助你的Web文档能为更多的人访问。尽管由于多年来垃圾邮件发送人的滥用，使得搜索引擎不再对关键词很看重，但在以下情况下，即如果你想不必浏览和分析内容就为很多文档快速编制索引的话，它们依然是一种很好的工具。例如，你可以在一个内容管理系统中使用meta关键词，通过撰写一个脚本为这些关键词编制索引，这样可以让你的搜索引擎运行的速度快很多。这就提供了一种可不必分析文档的内容就找到文档的不错的方式。通过在一个meta元素中加入一些关键词，这样如果你想在未来创建一个类似的文档索引的话，就可以让站内搜索变得更为智能化、更快速。你可以把关键词视为你在一本砖头厚的大书中留下的小书签，这样你就能更容易地立即找到某个特定章节，而不必一章一章地去费力找了。添加样式下一个你可以向HTML文档的head添加的是在层叠样式表（CSS）中定义的样式规则。你可以通过使用一个style元素，把那些样式规则直接嵌入head，例如（headinlinestyles.html）：BreedingDogs—TipsaboutAlsatiansbody{background:#000;color:#ccc;font-family:helvetica,arial,sans-serif;}

Test!

如果你用一个浏览器把以上这个HTML文档打开，看到的将是，在黑色的背景上显示的“Test!”这个词，它的颜色是灰色的，字体是Helvetica字体或Arial字体（具体显示是哪一种字体，要依你安装的操作系统而定）。style元素还可以包含另外一种被称为media（媒介）的属性，它定义哪种媒介将使用这些样式，即你在计算机屏幕或手持设备上阅读文档时，或在将文档打印出来时，希望使用这些样式吗？有多种媒介类型可供选择，以下是其中一些最有用的媒介：∙屏幕—在显示器上显示文档∙打印—定义文档的打印输出稿的外观∙手持设备—定义文档在移动设备及其它手持设备上显示时外观和样式∙投影机—适用于以HTML格式保存的演示文稿，例如OperaShow软件就支持这种以HTML格式保存的演示文稿举例来说，如果你为了让网页更适宜打印而想除去它在屏幕上显示出来的色彩，并为网页上的文本使用更大的字号，则可以在第一个样式块下方添加另一个样式块，赋予它一个属性值为print的media属性，如以下所示（在headinlinestylesmedia.html中检查全部代码）：body{background:#fff;color:#000;font-family:helvetica,arial,sans-serif;font-size:300%;}现在当你准备打印这个网页时，浏览器就知道使用打印样式表而不是屏幕样式表来打印网页。请在浏览器中打开headinlinestylesmedia.html，然后选择打印预览，你看到的将是图4中显示出来的样子：图4：一个屏幕和一个打印样式表使用JavaScript添加动态功能和特性你还可以向文档的head添加可由浏览器执行的用JavaScript编写的脚本，即所谓“客户端脚本”。正如你们第4篇文章中已了解到的，JavaScript向静态的HTML文档添加动态行为，如动画效果、表单数据校验，以及用户执行某些行动时触发的其它一些动态效果等。你使用script标签向文档中添加JavaScript。当浏览器遇到文档中的一个JavaScript时，它会试着去执行其中的代码，并暂停解析文档的剩余部分。这意味着如果你想保证你添加的JavaScript在主文档载入前就可用，就需要将JavaScript添加进head之中。例如，你可以使用以下的脚本（headscript.html），提醒访问者如果点击某一个特别的链接，将被带到另一个服务器：BreedingDogs—TipsaboutAlsatiansbody{background:#000;color:#ccc;font-family:helvetica,arial,sans-serif;}a{color:#fff}body{background:#fff;color:#000;font-family:helvetica,arial,sans-serif;font-size:300%;}Test!TheDailyPuppy如果你用浏览器打开这个示范网页并点击所显示的链接，则会弹出一个对话框，请你确认是否要去另一个网站。这只是随便选用的一个脚本撰写例子，这种脚本撰写方式远不是目前的最佳习惯。在本课程的后面部分，将深入讲述使用JavaScript的最佳习惯和传授JavaScript技术，因此现在你不必担心还不太懂JavaScript。注意！使用内联CSS和JavaScript并非很好的做法！我知道以上这些词很强烈，其实我只是想让你们记住非常重要的一点，那就是在你构建网站时，最好的办法是尽可能地重用代码。将全网站通用的样式和脚本添加进每一个页面不仅没有多大意义，相反还使维护整个网站的工作变得更为困难，并使各个文档的体积不必要地膨胀。一个比这好得多的做法则是将你的样式和脚本都放在单独的外部文件内，在需要时再导入你的HTML文件，这样如果需要对样式和脚本做出改动，你仅需要在一个地方修改样式和脚本即可。为此，对JavaScript，可使用script元素，但其中却并不包含脚本，而是使用src属性与一个外部文件链接，如以下代码所示（externaljs.html）：BreedingDogs—TipsaboutAlsatiansbody{background:#000;color:#ccc;font-family:helvetica,arial,sans-serif;}a{color:#fff}body{background:#fff;color:#000;font-family:helvetica,arial,sans-serif;font-size:300%;}Test!TheDailyPuppy处理CSS就要难一些了。style元素并没有src属性，因此你需要使用link元素，该元素有一个href属性（用于指定要导入的一个外部CSS文件），以及一个media属性（用于定义这些样式是否应该用于屏幕、打印文档等）。通过将CSS和JavaScript放在单独的外部文件中，你可以大大缩短文档head部分的长度，如以下所示（externalall.html）：BreedingDogs—TipsaboutAlsatiansTest!TheDailyPuppy将CSS和JavaScript放在单独的文件中，还具有以下优点：1.可以使访问者在访问你的网站时更快且更容易，这是因为虽然还需要下载一些额外的文件，但在每个页面上就不需要再重复下载样式和脚本信息了（它们都放在单独的脚本/样式文件中，因此只需要下载一次），这样每个页面的下载时间就都会缩短。此外，单独的CSS文件和JavaScript文件将存入缓存，这样在你下一次访问这个网站时，因为它们都已在缓存中，就不需要再下载一次了。2.使网站易于维护。由于整个网站（上面可能有数以千计的文档）的样式和脚本都放在单独的文件中，这样在你需要对样式或脚本做出某些改动时，只需在单独的样式文件或脚本文件中改动即可，不再需要在上千个文件中一处一处地改动。

                    本文档为【3、头部信息】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

3、头部信息

你可能还喜欢