随便打开一个网页，右击查看网页源代码，总能看到<head>…</head>封闭标签，在里面通常会包含5类标签：title、link、script、meta、style。这5类标签看着都挺熟悉的哈，那么在web前端技术中具体要怎么使用，规则是什么，在我学习的时侯，我做了笔记整理，希望有帮助。

1. title 标签

　　title是一个封闭标签，在head中是成对出现。也就是<title>…</title>。在打开一个网页时，网页上方的文字就是title部分。

　　Title是对整个页面的核心思想的总结，也是seo非常重要的设置部分。Title部分尽量要多次出现关键词：核心关键词和长尾关键词。具体怎么写title部分，根据需求而定。这个没有标准。

　　2. link 标签

　　Link标签放置在<head>…</head>中，作用是链接外部css文件和收藏夹图标。最常用的用法是链接外部样式表，也就是css文件。link写法是“<link … />”

　　例如：

　　引入外部css样式：<link rel=”stylesheet” type=”text/css” href=”http://www....... /style.css” />

　　设置网站小图标（收藏图标）：<link rel=”shortcut icon” type=”image/x-icon” href="http://....../favicon.ico" />

　　Rel：定义的是该文档与被链接文档之间是什么关系“这里是外部css样式表，即stylesheet。”

　　type：规定外部链接文档是什么打开类型，link中的css 这样写法“type=”text/css”。”link中的网站小图标写法“ type=”image/x-icon” 。”

　　href：是外部css地址。

　　3. script标签

　　用在头部head标签内，作用是调用外部js文件。该标签是一个封闭标签，写法和div标签一样。另外，该标签不仅仅可以在头部head标签内使用，在body标签内部任何位置都可以使用。最终实现的效果都是一样的，通常是用在head标签内。

　　例如：<script src=”http://www...../index.js” type=”text/javascript”></script>

　　Src中是调用js文件地址。Type规定调用js文件的打开方式。

　　4. meta标签

　　Meta标签的作用通常是用作网页关键词、网页描述、作者、网页编码、robots、自动跳转等说明性标签。这样写法随处可见，任何一个网页中都有meta标签的使用。

　　4.1 网页显示字符集网页编码

　　中文：<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

　　繁体中文：<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />

　　英 语：<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

　　4.2 网页制作者信息

　　<meta name="author" content="Evance" />

　　4.3网页关键字

　　<meta name="keywords" content="Michael，Blog" />

　　4.4 网页描述

　　<meta name="description" content="Michael，Blog" />

　　4.5 防止别人在框架里调用你的页面<meta http-equiv="Window-target" content="_top" />

　　4.6 自动跳转（此标签用法可以让网页在多少秒后自动从当前页面跳转到另外一个网页页面或网站）<meta http-equiv="Refresh" content="5;URL=http://www.域名.com" />（有用！）

　　Content后跟值为当前页面在多少时间跳转

　　Url值为跳转到具体网页网站

　　4.7. 网页告诉搜索机器人向导对此网页操作（用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引）<meta name="robots" content="all" />

　　content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。

　　None：搜索引擎将忽略此网页，等价于noindex，nofollow。

　　Noindex：搜索引擎不索引此网页。

　　Nofollow：搜索引擎不继续通过此网页的链接索引搜索其它的网页。

　　All：搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。

　　Index：搜索引擎索引此网页。

　　Follow：搜索引擎继续通过此网页的链接索引搜索其它的网页。

　　5. style标签

　　常见Style标签作为放置CSS样式与放置javascript（js）代码标签。

　　首先<style></style>是一对有开始与结束的闭合标签。

　　5.1 放置CSS样式

　　<style type="text/css">…</style>中间用于放CSS样式代码。

　　在HTML中CSS代码只有放置在其<style type="text/css">标签内才能生效。

　　5.2 放置JS代码

　　<style type="text/javascript">…</style>

　　在HTML中JS代码一般放入<style type="text/javascript">标签内。

Html之head部分详解的更多相关文章

  1. Linq之旅：Linq入门详解（Linq to Objects）

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  2. 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  3. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  4. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  5. Android Notification 详解（一）——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  6. Android Notification 详解——基本操作

    Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...

  7. Git初探--笔记整理和Git命令详解

    几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...

  8. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  10. .NET应用和AEAI CAS集成详解

    1 概述 数通畅联某综合SOA集成项目的统一身份认证工作,需要第三方系统配合进行单点登录的配置改造,在项目中有需要进行单点登录配置的.NET应用系统,本文专门记录.NET应用和AEAI CAS的集成过 ...

随机推荐

  1. vim 使用技巧

    2014-11-22 更新 文件abc 1,需要编辑abc的第三行 vim +3 abc 2,需要查询abc文件中的test字符 vim +/test abc 3,创建三个文件 aa bb cc vi ...

  2. FireBug调试工具笔记

         Firebug是网页浏览器 Mozilla Firefox下的一款开发类插件, 现属于Firefox的五星级强力推荐插件之一.它集HTML查看和编辑.Javascript控制台.网络状况监视 ...

  3. Backbone事件模块源码分析

    事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说 ...

  4. .NET逻辑分层架构总结

    一.基础知识准备: 1.层的原则: (1)每一层以接口方式供上层调用. (2)上层只能调用下层. (3)依赖分为松散交互和严格交互两种. 2.业务逻辑分类: (1)应用逻辑. (2)领域逻辑. 3.采 ...

  5. 根据不同的实体及其ID来获取数据库中的数据

    /// <summary> /// 根据不同的实体和其ID来获取信息 /// </summary> /// <typeparam name="T"&g ...

  6. 清北暑假模拟day2 国

    [题目描述]在世界的东边,有三瓶雪碧.--laekov黎大爷为了虐 zhx,给 zhx 出了这样一道题.黎大爷搞了一个数据结构,但是他没有告诉 zhx 这到底是什么数据结构,我们只知道这是一个数据结构 ...

  7. centos下redis的安装

    1.下载redis的安装包 http://download.redis.io/releases/redis-3.2.0.tar.gz 2.把安装包放到/opt/src/目录(看个人喜好)下 3.执行t ...

  8. ES6中Arguments和Parameters用法解析

    原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参 ...

  9. HTML5的新特性及技巧分享总结

    原文链接:http://www.aseoe.com/show-10-645-1.html?utm_source=tuicool&utm_medium=referral 1. 新的Doctype ...

  10. VSSより、指定したファイルを取得するマクロ（パス入り）

    Option Explicit'VSSのiniファイルの場所Private SRCSAFE_INI As String'VSS接続のユーザIDPrivate USER_ID As String'VSS ...