元素是所有头部元素的容器。 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

以下标签都可以添加到 head 部分：

1.title:定义文档的标题,是必须有的元素

<title>在这里写上文档标题</title>

2base：为页面上的所有链接规定默认地址或默认目标

/*必须的属性*/

href     规定页面中所有相对链接的基准 URL

<base href="http://yeching.info" />

/*可选属性*/

target    在何处打开页面中所有的链接，该属性会被每个链接中的 target 属性覆盖

/*可能的值：*/

_blank ， _parent ，_self，_top

<base target="_blank" />

3.link：定义文档与外部资源之间的关系。一般用于链接外部样式表，

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

/*常用的属性*/

rel：必需。定义当前文档与被链接文档之间的关系。

type：规定被链接文档的 MIME 类型

href：规定被链接文档的位置

media：规定被链接文档将被显示在什么设备上，主要用在媒体查询功能中

<link rel="stylesheet"  media="only screen and (min-width: 480px)" href="styles.css" />

/*其他：*/

<link rel="shortcut icon" href="img/favicon.ico"/>

<link rel="apple-touch-icon" href="img/touchicon.png"/>

4.meta：元数据（Metadata）是数据的数据信息。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。元数据不会显示在客户端，会被浏览器解析。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。搜索引擎优化排名等网络营销方法内容中，通常都要谈论META标签的作用

/*常见用法*/

1.说明主页制作所使用的文字以及语言

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta charset="utf-8" />HTML5中的用法

2.定义文档关键词

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

3.定义web页面描述

<meta name="description" content=" Web about HTML and CSS">

4.定义页面作者

<meta name="author" content="yeching">

5.每30秒刷新页面

<meta http-equiv="refresh" content="30">

6.设定网页的到期时间，一旦过期则必须到服务器上重新调用

<meta http-equiv="expires" content="31 Dec 2016">

7.设定可视区

<meta name="viewport" content="width=device-width"  initial-scale=1.0 />

/*常用属性*/

content：content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。

http-equiv：为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

name：name 属性提供了名称/值对中的名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

charset（HTML5）：定义文档的字符编码。

**5.script **：定义了客户端的脚本文件

1.插入代码

<script type="text/javascript">

/*在这里写你的代码*/

</script>

<script>

/*默认就是JavaScript，不写type="text/javascript"也可以*/

/*在这里写你的代码*/

</script>

2.规定外部脚本的 URL

<script src="myscripts.js"></script>

/*可用的属性*/

async（HTML5）：规定异步执行脚本（仅适用于外部脚本）。

charset：规定在脚本中使用的字符编码（仅适用于外部脚本）。常见的utf-8

defer：规定当页面已完成解析后，执行脚本（仅适用于外部脚本）。

src：规定外部脚本的 URL。

type：规定脚本的 MIME 类型。默认JavaScript

6.style：义 HTML 文档的样式信息

<style type="text/css">

/*在这里写样式*/

h1 {color:red;}

p {color:blue;}

</style>

总结：

<head>

<meta charset="utf-8"/>

<title>head 使用</title>

<base href=" " />

<base target=" " />

<meta name="keywords" content=""/>

<meta name="description" content=""/>

<meta name="viewport" content="width=device-width"/>

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

<meta name="viewport" content="width=device-width" initial-scale=1.0 />

<link rel="stylesheet" href="css/style.css"/>

<link rel="shortcut icon" href="img/favicon.ico"/>

<link rel="apple-touch-icon" href="img/touchicon.png"/>

<style type="text/css">/*在这里写样式*/</style>

<script>/*在这里写你的代码*/</script>

</head>

HTML头部<head>学习的更多相关文章

  1. http头部信息学习

    想的每2周进行知识的总结,自己拖延症有犯了,发现自己知识库量还是太少,平时总结和发现问题还不够深,对待问题的深度也存在很多问题,但是坚持学习,总结,后面应该会有收获, 1.常见的返回码 100: 请服 ...

  2. 每日目标——HTML 头部标签学习 2015-8-27

    <head> <title>bp</title> <meta http-equiv="Content-Type" content=&quo ...

  3. TCP 中的三次握手和四次挥手

    Table of Contents 前言 数据报头部 三次握手 SYN 攻击 四次挥手 半连接 TIME_WAIT 结语 参考链接 前言 TCP 中的三次握手和四次挥手应该是非常著名的两个问题了,一方 ...

  4. HTML&CSS基础学习笔记1.17-表格的头部与尾部

    表格的头部和尾部 既然有标签表示表格的主体,那么自然表格的头部和尾部也有对应的标签. HTML中使用<thead>标签表示表格的头部,使用<tfoot>标签表示表格的尾部. 有 ...

  5. React Native学习（四）—— 写一个公用组件（头部）

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  6. 学习HTML 第二节.HTML头部

    HTML为什么要有个头部?还不太明白,可能是一些要提前声明的东西吧.先看看有什么内容吧. 可以添加在头部区域的元素标签为: <title>标题,这个我们知道了: <meta>使 ...

  7. HTTP的学习记录(二)头部

    本文主要讲一些 HTTP头部的信息 首先看一段 惊为天人 的文章. 来自于 <淘宝技术这十年> 你发现快要过年了,于是想给你的女朋友买一件毛衣,你打开了www.taobao.com.这时你 ...

  8. HTML学习（9）头部

    HTML <head> 元素 <head> 元素包含了所有的头部标签元素.在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种met ...

  9. 学习:erlang的不定长数据包头部。

随机推荐

  1. IDEA插件开发基础

    由于简易ORM的需要,想要做一些代码自动生成功能(通过右键菜单辅助) 半自动编写代码,故考虑需要开发IDE插件(我司现使用IDEA) 1.例子代码http://confluence.jetbrains ...

  2. js初学必知三重点

    这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...

  3. PHPUnit初试

    先测试了一下加减,检查一下环境,又调用函数测试了服务器名. 源代码: class DemoController extends \Think\Controller { /** * @assert (5 ...

  4. 【 java版坦克大战--事件处理】 键盘控制小球上下左右移动

    上一节已经学习了事件处理,这一节需要完成通过键盘的上下左右键控制小球移动. 然后再通过应用到我们绘制的坦克上. /** * 加深对事件处理机制的理解 * 通过光标的上下左右键,控制小球的左右上下移动. ...

  5. Flink 另外一个分布式流式和批量数据处理的开源平台

    Apache Flink是一个分布式流式和批量数据处理的开源平台. Flink的核心是一个流式数据流动引擎,它为数据流上面的分布式计算提供数据分发.通讯.容错.Flink包括几个使用 Flink引擎创 ...

  6. Emmet Documentation

    src:http://docs.emmet.io/cheat-sheet/ Emmet Documentation Syntax   Child: > nav>ul>li <n ...

  7. 工作流（worfflow）

    -- 工作流(Workflow)就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实现某个预期的业务 ...

  8. POJ 3258 River Hopscotch 二分枚举

    题目:http://poj.org/problem?id=3258 又A一道,睡觉去了.. #include <stdio.h> #include <algorithm> ]; ...

  9. Web-Scale IT 我之见！

    Gartner 曾在发表过的一篇文章中表示,到2017年,全球50%的企业将使用Web-Scale IT 架构.下面我们来看看 Andre Leibovici 对 Web-Scale IT 的看法: ...

  10. linux使用su切换用户提示 Authentication failure的解决方法& 复制文件时，报cp: omitting directory `XXX'

    linux使用su切换用户提示 Authentication failure的解决方法:这个问题产生的原因是由于ubtun系统默认是没有激活root用户的,需要我们手工进行操作,在命令行界面下,或者在 ...