HTML <head> 元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <title> 元素

<title> 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题

一个简化的 HTML 文档：

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>

<base href="http://www.w3school.com.cn/images/" />

<base target="_blank" />

</head>

HTML <link> 元素

<link> 标签定义文档与外部资源之间的关系。

<link> 标签最常用于连接样式表：

<head>

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

</head>

HTML <style>

<style> 标签用于为 HTML 文档定义样式信息。

您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

<head>

<style type="text/css">

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML <meta> 元素

元数据（metadata）是关于数据的信息。

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

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

name 和 content 属性的作用是描述页面的内容。

HTML <script> 元素

<script> 标签用于定义客户端脚本，比如 JavaScript。

我们会在稍后的章节讲解 script 元素。

HTML 头部元素

标签 描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。

HTML-头部的更多相关文章

  1. UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案

    问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...

  2. ZBrush中的头部模型该如何进行雕刻

    使用ZBrush®能够快速雕刻人物头部模型,教程只是大概介雕刻前的准备工作和一些软件基础,真正的雕刻还需要学习者具备一定的功底,本文向大家展示头部模型制作流程解析,初学者可以以它做参考拓展自己思路. ...

  3. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  4. PHP header函数设置http报文头(设置头部域)

    PHP HTTP 简介: HTTP 函数允许您在其他输出被发送之前,对由 Web 服务器发送到浏览器的信息进行操作. PHP 5 HTTP 函数:header()     向客户端发送原始的 HTTP ...

  5. 【Android】NavigationView头部点击监听事件

    AndroidStudio给出的模板里面只有列表点击事件,即实现OnNavigationItemSelectedListener中的onNavigationItemSelected方法,根据item的 ...

  6. sublime自动生成头部注释

    1.在tool->new snippet-创建一个新的snippet sublime text2 用snippet 创建文件头部信息 Snippets are smart templates t ...

  7. 【转】http头部详解

    原地址:http://www.cnblogs.com/ziwuge/archive/2011/09/27/2193385.html HTTP 头部解释 1. Accept:告诉WEB服务器自己接受什么 ...

  8. 把token带到 http头部 或者验证一下referer

    提交地址:http://baozoumanhua.com/users/8311358提交数据:-----------------------------195704664324Content-Disp ...

  9. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  10. js制作点击会自动隐藏的导航栏（固定在在头部的）

    想必大家应该见过这样的特效,本来头部是固定在网页的最上方的,点一下缩进去,再点一下 又可以缩回来,这种效果怎么实现的呢,我今天就做了一个.菜鸟勿喷. @charset "utf-8" ...

随机推荐

  1. 推荐一个Web漏洞靶场

    https://github.com/zhuifengshaonianhanlu/pikachu 暂时先空着 安装好是这样的 博主先去玩了,回来再写博客,2333

  2. 洛谷 P1219 八皇后题解

    题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序列2 4 6 1 3 ...

  3. 对 Jenkins+ANT+Jmeter 接口测试的实践

    转载地址:https://testerhome.com/topics/5262 1.前言 最近感觉大家都在讲Jenkins+jmeter+ant或maven的使用,但没有说到具体怎么投入到项目使用,只 ...

  4. 利用SQL直接生成模型实体类

    在网上找来一个别人写好的,生成实体类的SQL代码 declare @TableName sysname = 'lkxxb' declare @Result varchar(max) = 'public ...

  5. Python通过xpath查找元素通过selenium读取元素信息

    #coding:utf-8 from selenium import webdriver import time url ='http://www.baidu.com' driver = webdri ...

  6. BZOJ -3730（动态点分治）

    题目:在一片土地上有N个城市,通过N-1条无向边互相连接,形成一棵树的结构,相邻两个城市的距离为1,其中第i个城市的价值为value[i]. 不幸的是,这片土地常常发生地震,并且随着时代的发展,城市的 ...

  7. 目标检测中的bounding box regression

    目标检测中的bounding box regression 理解:与传统算法的最大不同就是并不是去滑窗检测,而是生成了一些候选区域与GT做回归.

  8. [NPM + React] Prepare a Custom React Hook to be Published as an npm Package

    Before we publish our package, we want to make sure everything is set up correctly. We’ll cover vers ...

  9. BZOJ 4197: [Noi2015]寿司晚宴 状压dp+质因数分解

    挺神的一道题 ~ 由于两个人选的数字不能有互质的情况,所以说对于一个质因子来说,如果 1 选了,则 2 不能选任何整除该质因子的数. 然后,我们发现对于 1 ~ 500 的数字来说,只可能有一个大于 ...

  10. redis 设置为只读模式

    数据库的只读模式,对于在系统出现重大故障,但是又不影响用户的查询操作还是很重要的 对于redis 设置只读模式需要分不同的场景 master-slave cluster single master-s ...