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. PAT甲级1010踩坑记录(二分查找)——10测试点未过待更新

    题目分析: 首先这题有很多的坑点,我在写完之后依旧还有第10个测试点没有通过,而且代码写的不优美比较冗长勿喷,本篇博客用于记录写这道题的一些注意点 1.关于两个不同进制的数比大小一般采用将两个数都转化 ...

  2. 亚洲唯一:瀚思科技入选2019 Gartner SIEM 领域 Peer Insights,其他第一象限的有splunk和logrithym,elastic==,RSA、fortinet、rapid7和翰思一样都在第二象限

    亚洲唯一:瀚思科技入选 Gartner SIEM 领域 Peer Insights     网络安全技术与产业,正在由传统的合规驱动,走向合规与需求双轮驱动.关注用户需求.倾听用户声音,根据实际情况打 ...

  3. modbus系列文章—汇总

    请移步我博客园的网站 基本上是自己的原创,不是网上抄来抄去的,有很多干货,希望一边整理,一边修改-有不对的地方多多指教. https://www.cnblogs.com/CodeWorkerLiMin ...

  4. 题解 UVa11461

    题目大意 多组数据,每组数据给出两个正整数 \(a,b\),请求出 \(a,b\) 之间的完全平方数的个数. 分析 前缀和即可. #include<bits/stdc++.h> using ...

  5. 08-Flutter移动电商实战-dio基础_伪造请求头获取数据

    在很多时候,后端为了安全都会有一些请求头的限制,只有请求头对了,才能正确返回数据.这虽然限制了一些人恶意请求数据,但是对于我们聪明的程序员来说,就是形同虚设.这篇文章就以极客时间 为例,讲一下通过伪造 ...

  6. Mongo 安装及基本操作

    一. 安装 Mongo文档: https://docs.mongodb.com/v3.6/administration/install-enterprise-linux/ Linux mongo的配置 ...

  7. windowns server 2008 r2 AD桌面文件重定向设置

    1.创建将要进行重定向的组(此处为chongdingxiangzu) 2.选择要重定向的用户,并将此用户加入到要重定向的组里 3.打开组策略管理,右击刚才用户所属的组织单位(OU)进行新建GPO(此处 ...

  8. C博客作业01--分支丶顺序结构

    1.本章学习总结 1.1学习内容总结 分支结构 if else-if语句与switch语句都具有选择判断的功能,但是在使用时又有所区别,按题目的不同要求与题意选择不同语句. if else-if语句表 ...

  9. powershell.exe WannaCrypt(永恒之蓝) down.bddp.net

    今天win机器进程出现大量 powershell.exe,把cpu占满100%,打开任务管理器看到如下信息: powershell -nop -w hidden -ep bypass -c " ...

  10. Linux 文件系统磁盘空间与连接文件

    磁盘与目录的容量 我们知道磁盘的整体数据hi在superblock块中,但是各文件的容量则在inode中记载. df:列出文件系统的整体磁盘使用量 由于df主要读取的数据几乎都是针对整个文件系统,因此 ...