随便打开一个网页，右击查看网页源代码，总能看到<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. Linux下的一个图形管理工具webmin

    这个工具其实我在两年前的小白时期还是经常用的,因为那时候对Linux比较陌生在为数server的时候帮了我很多工作,现在周末外面下雨,闲来无事莫名其妙的想起他来. 工具优点:最大特点是他是脚本安装 不 ...

  2. PHP mkdir()无写权限的问题解决方法

    这篇文章主要介绍了PHP mkdir()无写权限的问题解决方法,对umask做了详细解释以及mkdir()后没写权限的解决方法,需要的朋友可以参考下   使用mkdir创建文件夹时,发现这个函数有两个 ...

  3. c++模板

    1.从 python 说起 def add(a, b): return a + b; print add(3.1, 5.1); #8.2 print add("abc", &quo ...

  4. php缓存技术总结

          缓存是指临时文件交换区,电脑把最常用的文件从存储器里提出来临时放在缓存里,就像把工具和材料搬上工作台一样,这样会比用时现去仓库取更方便.因为缓存往往使用的是RAM(断电即掉的非永久储存), ...

  5. ScriptManager与UpdatePanel总结

    1.From http://www.cnblogs.com/Tim-Seven/archive/2011/02/11/1952409.html Ajax Extensions 2.ScriptMana ...

  6. 学习（主题或切入点）checklist1

    业务+技术+架构+运维+管理 技术学习:http://www.runoob.com/mongodb/mongodb-query.html 一.技术篇​补充学习列表 1,mongodb(o) 2,red ...

  7. 【PHP面向对象(OOP)编程入门教程】16.__toString()方法

    我们前面说过在类里面声明“__”开始的方法名的方法(PHP给我们提供的),都是在某一时刻不同情况下自动调用执行的方 法,“__toString()”方法也是一样自动被调用的,是在直接输出对象引用时自动 ...

  8. sqlite 去除换行符

    去除换行符操作: update t_config_list ;

  9. leofs存储总结

    1.leofs角色 Account(账户).Bucket(对象桶).Object(对象), gateway.manager0.manager1.storage Account 一个account可以创 ...

  10. Bootstrap编码规范

    黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过 open an issue on GitHub为本规范添加或贡献内容. 不 ...