HTML头部

2023-11-20

目录

实例

HTML <head> 元素

HTML <title> 元素

HTML <base> 元素

HTML <link> 元素

HTML <style> 元素

HTML <meta> 元素

HTML <script> 元素

一个完整的实例


实例

文档的标题

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

所有链接一个目标

如何使用 base 标签使页面中的所有标签在新窗口中打开。

文档描述

使用 <meta> 元素来描述文档。

文档关键词

使用 <meta> 元素来定义文档的关键词。

重定向用户

如何把用户重定向到新的网址。


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> 定义文档的样式信息。

一个完整的实例

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
<!--标题不会显示在文档区-->
    <title>Head</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    <base target="_blank" />

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

<meta name="revised"
content="Vector Kun,11/14/2022">

<meta name="generator"
content="PyCharm Community Edition">

<meta name="description"
content="HTML examples">

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

</head>

<body>

<p>
<a href="http://www.baidu.com" target="_blank">这个链接</a> 将在新窗口中加载,因为 target 属性被设置为 "_blank"。
</p>

<p>
<a href="http://www.baidu.com">这个链接</a> 也将在新窗口中加载,即使没有 target 属性。
</p>

<p>本文档的 meta 属性标识了创作者和编辑软件,还描述了该文档和它的关键词。</p>

<p>
对不起。我们已经搬家了。您的 URL 是 <a href="http://www.bing.com.cn">http://www.baidu.com</a>
</p>
<p>您将在 5 秒内被重定向到新的地址。</p>
<p>如果超过 5 秒后您仍然看到本消息,请点击上面的链接。</p>

<!--<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。-->
<!--以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。-->

<!--title 元素能够:-->

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

<!--<base> 标签为页面上的所有链接规定默认地址或默认目标(target)-->

<!--<link> 标签定义文档与外部资源之间的关系。-->
<!--<link> 标签最常用于连接样式表-->

<!--<style> 标签用于为 HTML 文档定义样式信息。-->
<!--您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式-->

<!--元数据(metadata)是关于数据的信息。-->
<!--<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。-->
<!--典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。-->
<!--<meta> 标签始终位于 head 元素中。-->
<!--元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。-->

<!--一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。-->
<!--name 和 content 属性的作用是描述页面的内容。-->

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

</body>
</html>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML头部 的相关文章

  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • 如何在React Native Android中获取响应头?

    您好 我想在获取 POST 请求后获取响应标头 我尝试调试看看里面有什么response with console log response 我可以从以下位置获取响应机构responseData但我不知道如何获取标题 我想同时获得标题和正文
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 了解 Python 3 中的类继承

    介绍 面向对象编程创建可重用的代码模式 以减少开发项目中的冗余 面向对象编程实现可回收代码的一种方法是通过继承 此时一个子类可以利用另一个基类的代码 本教程将介绍 Python 中继承的一些主要方面 包括父类和子类如何工作 如何重写方法和属
  • 电商java 面试题_JAVA电商项目面试题(一)

    需要按照功能点把系统拆分 拆分成独立的功能 单独为某一个节点添加服务器 需要系统之间配合才能完成整个业务逻辑 叫做分布式 集群 同一个工程部署到多台服务器上 优点 1 把模块拆分 使用接口通信 降低模块之间的耦合度 2 把项目拆分成若干个子
  • Rabbitmq消息的有序性、消息不丢失、不被重复消费

    如何保证消息的顺序性 如图所示 RabbitMQ保证消息的顺序性 就是拆分多个 queue 每个 queue 对应一个 consumer 消费者 就是多一些 queue 而已 确实是麻烦点 或者就一个 queue 但是对应一个 consum
  • 查经 民数记3章 利未人

    3章 利未人 1 4节 亚伦的儿子们 5 13节 利未人的职责 14 39 利未人男丁的统计 40 51节 利未人代替长子的地位 本章记载了利未人被神呼召 代替以色列各家长子成为事奉神的人 利未人的宗族 人数 及各族负责的事务 这件事灵意上
  • 程序的调试技巧。

    什么是调试 调试又叫Debug 又称除错 是发现和减少计算机程序或电子仪器设备中程序错误的一个过程 生活中所有发生的事情都一定有迹可循 如果问心无愧 就不需要掩盖也就没有迹象了 如果问心有愧疚 必然需要掩盖 那就一定会有迹象 迹象越多就容易
  • 如何控制asp.net控件TextBox输入内容的长度--(多种方法)

    2009 10 22 17 36 件代码如下
  • 在 CentOS 上安装 Docker Engine

    文章目录 在 CentOS 上安装 Docker Engine 先决条件 操作系统要求 卸载旧版本 安装方法 使用 rpm 存储库安装 设置存储库 安装 Docker Engine 安装最新版本 安装指定版本 以非 root 用户身份管理
  • js获取时间戳的四种方法

  • vscode使用手册

    VS Code Visual Studio Code 是一款轻量级 跨平台的源代码编辑器 支持语法高亮 自动补全 调试 Git 版本控制等功能 下面是一些使用 VS Code 的基本操作 安装和启动 在官网上下载并安装 VS Code 打开
  • react里面的接口调用方法

    react接口调用 我们通过npm create react app my app创建react项目 在项目里都是要进行接口调用来获取数据 进行增删改查各种操作的 所以掌握接口调用方式是非常必要的 话不多说进入正题 想要掌握接口调用的内里逻
  • 何恺明组《Designing Network Design Spaces》的整体解读(一篇更比六篇强)

    本文原载自知乎 已获原作者授权转载 请勿二次转载 https zhuanlan zhihu com p 122557226 statistics 大法好 DL不是statistics 因为DL不如statistics 基本全文从统计学的角度
  • 编程猫python讲师面试_【编程猫教师面试】笔试:试题+打字测速-看准网

    985师范本加硕 想要从事k12教育 坚挺到最后一轮但是未通过的小姐姐掩面飘过 来谈谈我的面试感受吧 个人觉得猫厂管培生的面试整体流程安排挺合理的 有感觉确实是在用心的挑选人才 然后所有的面试官都很nice 我是直接在boss直聘上投的简历
  • ffmpeg最简单的解码保存YUV数据

    文章转载自 http blog chinaunix net xmlrpc php r blog article id 4584541 uid 24922718 video的raw data一般都是YUV420p的格式 简单的记录下这个格式的
  • 技术英雄会【新闻】CSDN最有价值博客TOP10颁奖【图】【我在左边数第四个】

    2007年04月06日 10 04 新浪科技夹带些私货 呵呵 社区英雄会 一 问周鸿祎一个问题 社区英雄会 二 问CSDN一个信息过滤器的问题 技术英雄会 三 社区英雄们的与会感言大赏 技术英雄会 四 也谈如何发掘到需要的内容和英雄 图为
  • linux_compress

    tar 解包 tar xvf FileName tar 打包 tar cvf FileName tar DirName 注 tar是打包 不是压缩 gz 解压1 gunzip FileName gz 解压2 gzip d FileName
  • 调试器GDB的基本使用方式(一)

    GDB的功能及其丰富 我们按照调试的流程进行说明 基本用法很简单 流程如下所示 带着调试选项编译 构建调试对象 启动调试器 GDB 设置断点 显示栈帧 显示值 继续执行 一 准备 通过 gcc 的 g 选项生成调试信息 gcc Wall O
  • Qt bool转QString再转回bool方法

    可能在传递参数的过程中 传的一是个bool值 而后面 在参数的转换传递过程中 只能传一个QString 最后又需要得到一个bool值 这时就可以使用这种方法 bool testParam QString tempParam QString
  • matlab傅里叶变换漫谈

    Introduction 由于research需要 不得已开始回顾关于高数的基本知识 写在这里方便记录 这个故事告诉我们 What goes around comes around meaning that life has a funny
  • java二维数组随机赋值_java 二维数组随机赋值

    java 二维数组随机赋值 2021 01 31 00 08 55 简介 目的 使用二维数组打印一个 10 行杨辉三角 视频教程推荐 java课程 思路 1 第一行有 1 个元素 第 n 行有 n 个元素 2 每一行的第一个元素和最后一个元
  • HTML头部

    目录 实例 HTML 元素 HTML