当前位置 : IT培训网 > Web前端 > Web教程 > 如何定义html头部

如何定义html头部

时间:2016-11-15 18:07:22  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
标签(Tag):   html(100)html头部(4)
一般情况下,html头部都是固定的,如果你使用过dw这个软件就会知道,建立一个空html就自动生成了头部了,我们只需要稍加修改即可,比如加上自己的网站名字,网站的描述、关键词、样式、js等等。好了,想要学好这方面的知识

网页的头部位于head元素之间,这部分在页面中是看不到的,只有在浏览器的上方或者源代码里才可以找到,那么html头部都有哪些元素呢,我们该如何学习这方面知识呢?

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

标签

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

<script>

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

 

 

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题

当网页添加到收藏夹时,显示在收藏夹中的标题

显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>文档标题</title>

</head>

<body>

文档内容......

</body>

</html>

HTML <base> 元素

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

<head>

<base href="http://www.cnitedu.cn/images/" target="_blank">

</head>

HTML <link> 元素

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

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

<head>

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

</head>

HTML <style> 元素

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

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

<head>

<style type="text/css">

body {background-color:yellow}

p {color:blue}

</style>

</head>

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">

HTML <script> 元素

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

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

精彩在线案例介绍:

<title> - 定义了HTML文档的标题

使用 <title> 标签定义HTML文档的标题

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>我的 HTML 的第一页</title>

</head>

<body>

<p>浏览器中包含body元素的内容。</p>

<p>浏览器的标题包含title元素的内容</p>

</body>

</html>

运行结果

浏览器中包含body元素的内容。

浏览器的标题包含title元素的内容

<base> - 定义了所有链接的URL

使用 <base> 定义页面中所有链接默认的链接目标地址。

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(cnitedu.cn)</title>

<base href="http://www.cnitedu.cn/images/" target="_blank">

</head>

<body>

<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.cnitedu.cn/images/logo.png"

<br><br>

<a href="http://www.cnitedu.cn">IT培训网</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>

</html>

运行结果

- 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.cnitedu.cn/images/logo.png"

IT培训网 - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

<meta> - 提供了HTML文档的meta标记

使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(cnitedu.cn)</title>

<meta name="description" content="免费在线教程">

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

<meta name="author" content="runoob">

<meta charset="UTF-8">

</head>

<body>

<p>所有 meta 标签显示在 head 部分...</p>

</body>

</html>

运行结果

所有 meta 标签显示在 head 部分...

一般情况下,html头部都是固定的,如果你使用过dw这个软件就会知道,建立一个空html就自动生成了头部了,我们只需要稍加修改即可,比如加上自己的网站名字,网站的描述、关键词、样式、js等等。好了,想要学好这方面的知识点,赶紧关注IT培训网,学专业的html知识,还需要找专业的网站。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放