HTML头部标记是<head>，主要包括页面的一些基本描述语句，以及CSS和JavaScript，一般都可以定义在头部元素中。它用于包含当前文档的有关信息，例如网页标题和关键字等。通常位于头部的内容都不会在网页上直接显示，而是通过另外的方式起作用。在<head>标记中可以使用的标记不多，包含一些常见的如<title>、<base>、<link>和<meta>等标记。<head>与</head>之间必须有<title>。

<title>元素

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。编写每个页面时，应该给其指定一个标题。HTML文件的标题使用<title>元素，<title>是<head>元素的子元素，用于将内容显示在浏览器的标题栏中，用以说明文件的用途，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。每个HTML文档都应当有标题，在浏览者保存该网页后成为保存后网页的文件名。另外，搜索引擎在收录该页面时，将网页标题作为搜索的关键字，并将其在搜索引擎页面中作为标题显示。基本语法格式如下所示：

<title> 兄弟连IT教育：HTML5学科</title>                    <!-- 在头部定义的标题标记  -->

使用实际描述站点内容的标题是非常重要的。例如，站点的主页面不应当只使用“网站首页”标注，而是应当采用能够描述站点内容的语句，通常都是“公司名称+公司产品”。对于优秀的页面标题，访问者在阅读它之后就应当能够了解该页面的内容，而不需要查看页面的实际内容。

注意

一个文档只能使用一个<title>元素，<title>元素中只能包含关于页面标题的文本，而不能包含其他任何元素。另外，<title>标签是<head>标签中唯一要求包含的东西。

<base>元素

在页面中使用<a>、<img>、<link>、<form> 标签，都需要指定URL。通常情况下，如果在URL中使用相对路径，浏览器会从当前文档的URL中提取相应的元素来填写相对URL路径中的空白。而<base> 标签为页面上的所有链接规定默认地址或默认目标，浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。在网页文档中，所有的相对地址形式的URL都是相对于这里定义的基URL而言的。例如，如果在<base>中指定基URL为http://www.itxdl.cn，那么在网页中出现的相对链接“test.html”将对应http://www.itxdl.cn/ test.html的页面。因此，如果网页位置发生变化，可以通过修改<base>来适应这一变化。一篇文档中的<base>标记最多只能有一个，而且必须放于头部，并且应该在任何包含URL地址的语句之前。基本语法格式如下所示：

<base href="http://www.itxdl.cn/h5/" target="_blank" />       <!-- base标签使用方法        -->

在<base>标签中href是必需的属性，规定页面中所有相对链接的基准URL。而target是可选属性，设置在何处打开页面中所有的链接。

<link>元素

<link>标签定义文档与外部资源的关系，最常见的用途是链接样式表。该元素始终是空元素，它仅包含属性，浏览器会分析<link>中的内容，自动读取并加载相应的文件。基本语法格式如下所示：

<link rel="stylesheet" type="text/css" href="style.css" />       <!-- 在头部链接CSS文件位置  -->

<link>元素只能存在于head部分，不过它可出现任何次数。关于<link>元素的应用将在CSS一章中详细介绍。

<meta>元素

<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，也能够提供文档的作者、描述、编码和语言等多种元信息，但不包含任何内容。该标签位于文档的头部，可以包含任意数量的<meta>标记。该标签的属性定义了与文档相关联的名称/值对，来定义文件信息的名称、内容等。这个标记是实现元数据的主要标记，通过该标记中的http-equiv、name、content属性，可以建立多种多样的效果和功能。基本语法格式如下所示：

<meta name="某个设置值" content="对该设置值进行具体补充说明的信息" />

<meta http-equiv="某个设置值" content="对该设置值进行具体补充说明的信息" />     

下例给出一段包含<head>标记的源代码，以兄弟连IT教育官方网站为例。登录http://www.itxdl.cn后，通过查看源文件的方式即可找到以下的头部信息。

以上是头部信息的一些基本用法，其中最重要的就是<title>标记及<meta>中的keywords和description属性的设定。因为这两个语句可以让搜索引擎更准确地发现你的站点，吸引更多的人访问。根据现在流行搜索引擎的工作原理，搜索引擎先派机器人自动在WWW上搜索。当发现新的网站时，便会检索页面中的keywords和description，并将其加入到自己的数据库，然后再根据关键词的密度对网站进行排序。在HTML5中可以使用对<meta>元素直接追加charset属性的方式来指定字符编码，从HTML5开始，对于文件的字符编码推荐使用UTF-8。如下所示：

<meta charset= "UTF-8 ">                         <!--  HTML5  -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <!--  HTML以前版本  -->

IT兄弟连 HTML5教程 HTML文档头部元素head的更多相关文章

  1. IT兄弟连 HTML5教程 HTML文档主体标记body

    在HTML的<body>和</body>标记中定义文档的主体,包含文档的所有内容(比如文本.超链接.图像.表格和列表等等).<body>标签有自己的属性,设置< ...

  2. IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素

    在HTML5之前,要在网站上展示视频.音频.动画等多媒体信息,除了使用第三方自主开发的播放器,使用最多的工具应该算是Flash了,但是它们都需要在浏览器中安装各种插件才能使用,有时速度很慢.HTML5 ...

  3. (转)HTML文档头部信息

    原文:http://www.cnblogs.com/sunyunh/archive/2012/07/25/2609199.html HTML(3)HTML文档头部信息   <!DOCTYPE h ...

  4. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 小结及试题

    小结 HTML标签包含结构标签和基础标签,基础标签是在页面制作最常使用的一些标签.基础标签包含标题标签(<h1>~<h6>).换行标签(<br>).段落标签(< ...

  5. IT兄弟连 HTML5教程 HTML5的基本语法 小结及习题

    小结 一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这些逻辑上统一的对象称为元素.HTML文档主体结构分为两部分,一部分是定义文档类型,另一部分则是定义文档主体的结构框 ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

  7. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

    有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...

  9. IT兄弟连 HTML5教程 多媒体应用 小结及习题

    小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...

随机推荐

  1. 10-Node.js学习笔记-异步函数

    异步函数 异步函数是异步编程语法的终极解决方案,它可以让我们将异步代码写成同步的形式,让代码不再有回调函数嵌套,是代码变得清晰明了 const fn = async()=>{} async fu ...

  2. Logstash filter 插件之 date

    使用 date 插件解析字段中的日期,然后使用该日期或时间戳作为事件的 logstash 时间戳.对于排序事件和导入旧数据,日期过滤器尤其重要.如果您在事件中没有得到正确的日期,那么稍后搜索它们可能会 ...

  3. lxml导入

    通常的导入方式 from lxml import etree python有自带的ElementTree库,但lxml在其基础上新增了特有的功能 如果代码仅使用ElementTree API,不依赖于 ...

  4. 阿里面试官：字符串在JVM中如何存放？90%的人就真的只回答在哪里存放

    目录: 一道面试题的引出 案例分析 intern 源码分析 总结 1. 一道面试题的引出 在面试BAT这种一线大厂时,如果面试官问道:字符串在 JVM 中如何存放?大多数人能顺利的给出如下答案: 字符 ...

  5. BootStrap 关于input与btn的点击focus取消特效相关css

    取消btn按钮点击出现的外边框: .btn:focus, /*清除btn按钮点击出现的边框*/.btn:active:focus,.btn.active:focus,.btn.focus,.btn:a ...

  6. Ruby入门1

    由于部门的自动化是由一个前辈实现的,他使用的Ruby的语言来实现的,所以需要学习一下Ruby语言,争取在15天左右可以掌握Ruby语言!加油~~~ 1.常量&变量 # 1.常量 # 一般用大写 ...

  7. Java Virtual Machine (JVM), Difference JDK, JRE & JVM – Core Java

    By Chaitanya Singh | Filed Under: Learn Java Java is a high level programming language. A program wr ...

  8. Ruby中星号打包解包操作

    Ruby中可以使用一个星号*和两个星号**完成一些打包.解包操作,它们称为splat操作符: 一个星号:以数组为依据进行打包解包(参考文章) 两个星号:以hash为依据进行打包解包(参考文章) 两个星 ...

  9. 7天教你精通变大神，学CAD关键还要掌握方法，纯干货新手要看

    接触CAD初期是“痛苦”的,“煎熬”的,也是充满“成就”的. 痛苦是初学者怎么都不懂,需要学习的东西很多,整个过程是有些痛苦的. 煎熬也是每个求学阶段都会遇到的状态,眼睛会了,手不会,这个状态很难受. ...

  10. 资深架构师教你String 常量池、 String.itern()

    什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. Class文件中的常量池 在Class文件结 ...