如何定义html头部-IT培训网

当前位置 : 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>

</head>

<body>

文档内容......

</body>

</html>

HTML <base> 元素

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

<head>

</head>

HTML <link> 元素

<head>

</head>

HTML <style> 元素

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

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML <meta> 元素

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

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

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

<meta> 标签- 使用实例

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒中刷新当前页面:

HTML <script> 元素

精彩在线案例介绍：

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

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

源代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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

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

</body>

</html>

运行结果

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

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

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

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

源代码：

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

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

</body>

</html>

运行结果

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

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

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

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

源代码：

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

</body>

</html>

运行结果

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

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

本文链接：http://www.itpxw.cn/qianduan/webjc/20161776.html

顶一下

(0)

踩一下

(0)

------分隔线----------------------------

分享到：QQ空间新浪微博腾讯微博人人网微信

------分隔线----------------------------

大话IT

Web 教程: 1、HTML 教程; 2、HTML5; 3、HTML 媒体

首页

IT专业

IT培训

Java开发

ui设计

PHP开发

Web前端

小孩编程

专家师资

职业规划

作品展示

免费试听