首页 » 编程语言 » html » 正文

html头部:head区域包含的标签

html元素头部区域是用于定义网页文档的各种属性信息的,包括文档的标题,meta等元信息,还可以在 <head>元素中插入脚本(scripts)、 样式文件(CSS),指示浏览器在哪里可以找到脚本和样式文件。

<head> 标签(html头部区域)

html头部区域是从开始标签<head>到结束标签</head>为止的区域,而在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

在head头部区域可以添加的标签有: <title>, <style>, <meta>, <link>, <script>, <noscript>, 和 <base>。

 <title> 标签(设置文档标题)

<title>标签是用来定义网页文档的标题,是在 HTML/XHTML 文档中是必须的;

<title>刘代码(liudaima.com)</title>

 <title>标签定义的标题可以在以下几个地方显示:

显示在浏览器窗口的工具栏的

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

显示在浏览历史记录列表和书签中

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

<meta>标签(提供元数据信息)

<meta>标签又叫“元数据标签”,用于为网页定义元数据信息。

<meta>标签提供的信息对用户不可见,也不会显示在前端页面上,但却对搜索引擎可见。

<meta>标签通常用于指定文档的标题、关键词、摘要描述,以及文件的创建时间、作者、版权和其他信息。

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>刘代码博客-学习网络建站、web编程、前端开发等互联网技术</title>
<meta name="keywords" content="刘代码,前端开发,web编程"/>
<meta name="description" content="刘代码博客是一个关注web编程和前端开发的网站" />

 <meta>标签共有两个重要属性,分别是 name 属性和 http-equiv 属性:

Base 标签(插入基准链接)

<base> 标签定义了该页面中所有相对链接或路径的基准链接。

例如,在页面的头部head标签内的base标签中设置href属性值的基准链接,如下;

<head>
<base href="https://liudaima.com/"  target="_blank">
</head>

以上base标签代码中,基准链接就是:https://liudaima.com/,target属性值是"_blank”,那么,在该页面中所有相对连接地址,在浏览器中解析时,都会在其相对连接的前面加上基准链接。

比如下面两个相对连接:

<img src="logo.png">
<a href="5.html"> 这是一个相对链接<a>

第一个是<img>标签图片链接,浏览器解析后,会转换成https://liudaima.com/logo.png;

第二个是<a>标签的超链接,浏览器解析后,会转换成https://liudaima.com/5.html ,而<a>标签没有设置target属性值,所以,该<a>标签会默认继承使用base标签中target="_blank"这个属性。其中target="_blank"是链接文件在新的窗口中打开,你可以做其他设置。将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开;改为“_self”链接文件在当前窗口(帧)中打开;改为“_top”链接文件全屏显示。

<Link>标签(连接外部资源)

<link> 标签是用来为当前文档与外部资源建立连接作用的。

1、连接外部CSS样式文件

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

注意,如果CSS样式文件mystyle.css和网页文档同在一个目录里,则href="mystyle.css";如果CSS样式文件mystyle.css和网页文档不在同一个目录,则href属性记得填写正确的css样式文件地址。

2、连接外部icon小图标,在浏览器标题栏中显示

把favicon.ico图标放在网站根目录里,然后,再把下面的代码写入head头部:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >

我们在打开很多网站或网页的时候,会在浏览器标题栏左边出现一个小图标。

link标签代码添加icon小图标的方法:https://liudaima.com/a/62.html

<style>标签(定义文档CSS样式)

style标签是定义当前文档CSS样式的,该标签包含在head头部区域内,所有主流浏览器都支持style标签,且每个html网页文档都可以包含多个style标签。

在HTML文档的头部插入一个style标签,让网页应用该 style标签中定义的样式规则。如:

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>刘代码博客(liudaima.com)</title>
<style type="text/css">
h1 {color:red;}
h2 {color:green;}
</style>
</head>
<body>
<h1>这是一个H1标题</h1>
<h2>这是一个H2标题</h2>
</body>
</html>

上述代码中的style标签定义了h1和h2两个标题标签元素内容的颜色,如下图所示

2019-09-09_152212.png

其中,定义h1标签元素颜色的代码:h1 {color: red;} ;定义h2标签元素颜色的代码:h2{color: green;}

<script>标签(插入JS脚本)

在html页面中,Javascript 脚本可以用来增强页面的交互性,而用script标签插入Javascript 脚本的方式有以下两种:

内联方式

内联方式是直接嵌入脚本,就是直接在开始标签<script>和结束标签</script>之间插入Javascript脚本代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>script标签用法演示</title>
</head>
<body>
<script type="text/javascript">
document.write("<h1>刘代码博客欢迎您!</h1>");
</script>
</body>
</html>

外联方式

外联方式是加载外部脚本,就是通过 script 元素的 src 属性指定外部脚本文件的URL,这样就可以把外部JS脚本加载到当前HTML文档中。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>script标签用法演示</title>
</head>
<body>
<script type="text/javascript" src="myjs.js"></script>
</body>
</html>

在html5中,type属性可以省略不写,因为在html5中,tpye属性的默认值是text/javascript;但在html4中,tpye属性是必选的,不可省略,必须添加tpye属性!

noscript标签

如果浏览器不支持Javascript,或用户在浏览器中禁用了Javascript时,才会显示noscript 元素中的内容。

<noscript>您的浏览器不支持Javascript或被禁用JS</noscript>

<noscript> 标签在html4中,只在<body> 区域起作用,但在 HTML5 中,在 <body>或<head> 区域都起作用,而在XHTML中,则不支持 <noscript> 标签。

 head头部可包含的标签:

HTML标签文字说明
<head>定义文档头部区域
<title>定义当前文档的标题
<meta>提供文档的元数据信息
<base>定义当前文档的基准链接
<link>定义文档与外部资源的关系
 <style>定义文档的CSS样式信息
<script>定义文档的JS脚本信息
<noscript>当浏览器不支持JS脚本或被禁用时,就显示或执行该标签内的内容。



欢迎您发表评论或留言