1.head标签

我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端)的等。 以下标签是可以用在head标签中的:

<head lang='en'>
<title>标题信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>

2.title标签

<title>标签:在<title></title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。

我们接下来做一个小练习,创建一个带有我们自定义标题内容的网页:

<!DOCTYPE HTML>
<html>
<head>
<title>路飞学城</title>
</head>
<body></body>
</html>

将上面的文件另存为demo.html,然后用浏览器打开,就可以看到下面的内容。

上面我们介绍了title标签的用法,接下来我们继续看一下head标签中可以使用的其他标签:

3.meta标签

Meta标签介绍:

元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部,不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

常用的meta标签:

  3.1 http-equiv属性

它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

  3.2 name属性

主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">

4.其他标签

<!--标题-->
<title>路飞学城</title>
<!--icon图标(网站的图标)-->
<link rel="icon" href="fav.ico">
<!--定义内部样式表-->
<style></style>
<!--引入外部样式表文件-->
<link rel="stylesheet" href="mystyle.css">
<!--定义JavaScript代码或引入JavaScript文件-->
<script src="myscript.js"></script>

5.总结

<!DOCTYPE html>
<html lang="en">
<head> <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端) --> <!-- 文档的标题 -->
<title>路飞学城</title> <!-- 常用两个属性
http-equiv:它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
-->
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 5秒之后 重定向 到路飞学城的网站 -->
<meta http-equiv="refresh" content="5;URL=https://www.luffycity.com"/> <!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- 为了我们的SEO优化 工作的时候下面这两句 要写-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城"> <!-- 定义我们的网站图标 -->
<link rel="icon" href="./fav.ico"> <!-- 引入外部样式表 -->
<link rel="stylesheet" type="text/css" href="./index.css"> <!-- 定义内部样式表 -->
<style type="text/css"> </style> <!-- 定义内容脚本文件 -->
<script type="text/javascript"> </script> <script src="./index.js"></script> </head>
<body> </body>
</html>

3-[HTML]-head标签介绍的更多相关文章

  1. java web学习总结(二十七) -------------------JSP标签介绍

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. 一、JSP标签介绍,自定义标签

    一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...

  4. 前端入门html(标签介绍)

    day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html # web本质 示例 import socket sk = socket.socke ...

  5. WEB学习-基础知识:列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

    列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...

  6. noscript 标签介绍

    noscript 标签介绍 一.总结 一句话总结: noscript 标签在不支持JavaScript 的浏览器中显示替代的内容. 1.noscript标签使用实例? html标签直接放在noscri ...

  7. template标签介绍和使用

    template标签介绍和使用 1.介绍:template标签是html5新出来的标签,具有3个特点,(1)随意性:可以写在页面中的任何地方.(2)不可见性:它里面的元素都是不可见的.(3)页面也不会 ...

  8. 2、Spring的IOC标签介绍以及实例

    一.Spring_ioc配置文件bean标签介绍 1. bean标签 名称:bean 类型:标签 归属:beans标签 作用:定义spring中的资源,受此标签定义的资源将受到spring控制 格式: ...

  9. html 不常用标签介绍

    文本元素 <wbr> 如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机).英 ...

随机推荐

  1. extjs 可视化开发工具

    不清楚Ext可视化的可以看一下http://www.screencast.com/users/JackSlocum这里的三个视频哈. 安装和汉化的步骤 第一步下载:Ext需要支持AIR的支持 下载并安 ...

  2. UIImageView的animationImages动画

    UIImageView的animationImages动画 UIImageView的animationImages,只有在做非常规动画的时候才有优势,比方说下图中左侧动画.如果用来做下图中的右侧动画, ...

  3. Skype for Business Server-呼叫质量仪表板(一)安装与配置

    第一篇:安装与配置 很多公司在运行过程中都遇到了难以追踪客服人员绩效的情况,公司没有有效的方法追踪员工在通过电话等远程方式解决客户问题.销售产品.客户关怀的情况.Skype for Business提 ...

  4. Spring @Autowired注解在非Controller/Service中注入为null

    参考:https://blog.csdn.net/qq_35056292/article/details/78430777 问题出现: 在一个非controller/service类中,我需要注入Co ...

  5. [微信小程序直播平台开发]___(一)介绍与流程

    1.一个可以忽略的前言 最近在做的一个项目,客户要做一个直播平台,主播发起视频直播,然后其他人进入房间观看这样子,跟其他直播平台不同的是,主播可以打赏观众,噗. 因为客户要做的是一个民宿的微信小程序, ...

  6. php操作redis的两个个小脚本

    redis这东西,查询起来没有mysql那么方便,只能自己写脚本了.下面是工作中写的两个小脚本 第一个脚本,查找有lottery|的键,将他们全部删除|打印出来 <?php $redis = n ...

  7. 【从源代码看Android】02MessageQueue的epoll原型

    版权声明:本文为博主原创文章,欢迎转载.请注明原文链接 https://blog.csdn.net/ashqal/article/details/31772697 1 开头 上一讲讲到Looper,大 ...

  8. 理解JVM——类加载机制

    我们在编写Java程序之后,会通过编译器得到一个class文件,这个class文件是如何与JVM进行配合的呢?类中的信息是如何变成JVM可以使用的Java类型呢?这些都是类加载机制做到的. 虚拟机把描 ...

  9. BZOJ1029:[JSOI2007]建筑抢修(贪心,堆)

    Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的 入侵者.但是T部落的基地里已经有N个建筑设施受到了严重的损伤,如果不尽快 ...

  10. 【转】 Class.forName()用法及与new区别 详解

    平时开发中我们经常会发现:用到Class.forName()方法.为什么要用呢? 下面分析一下: 主要功能Class.forName(xxx.xx.xx)返回的是一个类Class.forName(xx ...