重点摘录:HTML head 元素

标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时,显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.w3cschool.cc/images/" target="_blank">
</head>
 

属性

属性描述
hrefURL规定页面中所有相对链接的基准 URL。
target_blank
_parent
_self
_top
framename
规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。
 
 

HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
 

属性

New:HTML5 新属性。

属性描述
charsetchar_encodingHTML5 不支持该属性。 定义被链接文档的字符编码方式。
hrefURL定义被链接文档的位置。
hreflanglanguage_code定义被链接文档中文本的语言。
mediamedia_query规定被链接文档将显示在什么设备上。
relalternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
必需。定义当前文档与被链接文档之间的关系。
revreversed relationshipHTML5 不支持该属性。 定义被链接文档与当前文档之间的关系。
sizesNewHeightxWidth
any
定义了链接属性大小,只对属性 rel="icon" 起作用。
target_blank
_self
_top
_parent
frame_name
HTML5 不支持该属性。 定义在何处加载被链接文档。
typeMIME_type规定被链接文档的 MIME 类型。

 

HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你需要指定样式文件来渲染HTML文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
 

标签定义及使用说明

<style> 标签定义 HTML 文档的样式信息。

在 <style> 元素中,您可以规定在浏览器中如何呈现 HTML 文档。

每个 HTML 文档能包含多个 <style> 标签。


提示和注释

提示:如需链接外部样式表,请使用 <link> 标签。

提示:如需学习更多有关样式表的知识,请阅读我们的 CSS 教程

注释:如果没有使用 "scoped" 属性,则每一个 <style> 标签必须位于 head 头部区域。


HTML 4.01 与 HTML5之间的差异

"scoped" 属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。 
如果使用 "scoped" 属性,那么所规定的样式只能应用到 style 元素的父元素及其子元素。


属性

New:HTML5 中的新属性。

属性描述
mediamedia_query为样式表规定不同的媒体类型。
scopedNewscoped如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。
typetext/css规定样式表的 MIME 类型。
 
 

HTML <meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta>一般放置于 <head>区域

<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者:

<meta name="author" content="Hege Refsnes">

每30秒中刷新当前页面:

<meta http-equiv="refresh" content="30">
 

属性

New :HTML5 新属性。

属性描述
charsetNewcharacter_set定义文档的字符编码。
contenttext定义与 http-equiv 或 name 属性相关的元信息。
http-equivcontent-type
default-style
refresh
把 content 属性关联到 HTTP 头部。
nameapplication-name
author
description
generator
keywords
把 content 属性关联到一个名称。
schemeformat/URIHTML5不支持。 定义用于翻译 content 属性值的格式。
 
 

HTML <script> 元素

<script>标签用于加载脚本文件,如: JavaScript。

<script> 元素在以下章节会详细描述。

标签定义及使用说明

<script> 标签用于定义客户端脚本,比如 JavaScript。

<script> 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。

JavaScript 通常用于图像操作、表单验证以及动态内容更改。


提示和注释

注释:如果使用 "src" 属性,则 <script> 元素必须是空的。

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

注释: 有多种执行外部脚本的方法:

  • 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
  • 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
  • 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

HTML 4.01 与 HTML5之间的差异

在 HTML 4 中,"type" 属性是必需的,但在 HTML5 中是可选的。

"async" 属性是 HTML5 中的新属性。

HTML5 中不再支持 HTML 4.01 中的某些属性:"xml:space"。


HTML 与 XHTML 之间的差异

在 XHTML 中,脚本中的内容类型声明为 #PCDATA(代替 CDATA),就是说会对实体进行解析。

这意味着,在 XHTML 中,应该编码所有特殊的字符,或者把所有内容嵌套在 CDATA 部分中:

<script type="text/javascript">
//<![CDATA[
var i=10;
if (i<5)
  {
  // some code
  }
//]]>
</script>

属性

New :HTML5 中的新属性。

属性描述
asyncNewasync规定异步执行脚本(仅适用于外部脚本)。
charsetcharset规定在脚本中使用的字符编码(仅适用于外部脚本)。
deferdefer规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。
srcURL规定外部脚本的 URL。
typeMIME-type规定脚本的 MIME 类型。
xml:spacepreserveHTML5 不支持。规定是否保留代码中的空白。
05-07 14:21
查看更多