随便打开一个网页，右击查看网页源代码，总能看到<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. jupyter notebook + pyspark 环境搭建

    安装并启动jupyter 安装 Anaconda 后, 再安装 jupyter pip install jupyter 设置环境 ipython --ipython-dir= # override t ...

  2. solr多条件查询（三）

    1.昨天记了一下三条件的“并且” “并且”(  &&   &&  )的情况,今天再来记一下 “并且”  “或者” 的情况. 这里的或者情况,一定要搞清楚无论有多少情况, ...

  3. Ruby学习之module

    我们可以认为module是一个专门存放一系列方法和常量的工具箱. module和class非常像, 只是module不能创建实例也不能有子类, 它们仅仅能存放东西. 例如: module Circle ...

  4. MongoDB的学习和使用

    一.下载mongodb. 官网下载, 或者http://www.360sdn.com/opensource-datasource/2015/0403/5584.html下载: http://fastd ...

  5. iOS开发——项目篇—高仿百思不得姐 05——发布界面、发表文字界面、重识 bounds、frame、scrollView

    加号界面(发布模块) 一.点击加号modal出发布模块,创建控件,布局控件1)使用xib加载view,如果在viewDidLoad创建控件并设置frame 那么self.view 的宽高 拿到的是xi ...

  6. 五款最佳Linux下载管理器推荐

    导读 新的Linux用户从Windows转换过来时面临的困难之一就是,找到一款优秀的下载管理器.如果你是或曾经是Windows用户,可能熟悉互联网下载管理器(IDM).下载加速器Plus(DAP)之类 ...

  7. Cocos2d-x3.3RC0 Cpp-test分析之NewAudioEngineDemo（转：http://blog.csdn.net/yuxikuo_1/article/details/41081453）

    #ifndef __NewAudioEngineDemo__NewAudioEngineDemo__#define __NewAudioEngineDemo__NewAudioEngineDemo__ ...

  8. 跟着百度学PHP[4]-OOP面对对象编程-3-实例化一个对象

    当定义好类后,我们使用new关键字来实例化一个对象! 格式: $object = new 类名; <?php class Person{ private $name; "; priva ...

  9. Linux 文件rwx权限问题 chmod 777 XXX 任何人拥有最高权限

    在Unix和Linux的各种操作系统下,每个文件(文件夹也被看作是文件)都按读.写.运行设定权限.ls -l:得到-rw-r--r-- 1 apple users 2254 2006-05-20 13 ...

  10. MySQL重复数据

    delete from porn where Id not in (select minid from (select min(id) as minid from porn group by view ...