- HTML 教程
- HTML - 首页
- HTML - 路线图
- HTML - 简介
- HTML - 历史与演变
- HTML - 编辑器
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 标题
- HTML - 段落
- HTML - 字体
- HTML - 块
- HTML - 样式表
- HTML - 格式化
- HTML - 引用
- HTML - 注释
- HTML - 颜色
- HTML - 图片
- HTML - 图片地图
- HTML - 内联框架 (Iframe)
- HTML - 短语元素
- HTML - 元标签
- HTML - 类
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表头和标题
- HTML - 表格样式
- HTML - 表格列组 (Colgroup)
- HTML - 嵌套表格
- HTML 列表
- HTML - 列表
- HTML - 无序列表
- HTML - 有序列表
- HTML - 定义列表
- HTML 链接
- HTML - 文本链接
- HTML - 图片链接
- HTML - 邮件链接
- HTML 颜色名称和值
- HTML - 颜色名称
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML 表单
- HTML - 表单
- HTML - 表单属性
- HTML - 表单控件
- HTML - 输入属性
- HTML 多媒体
- HTML - 视频元素
- HTML - 音频元素
- HTML - 嵌入多媒体
- HTML 头部
- HTML - 头部元素
- HTML - 添加 Favicon
- HTML - Javascript
- HTML 布局
- HTML - 布局
- HTML - 布局元素
- HTML - 使用 CSS 进行布局
- HTML - 响应式设计
- HTML - 符号
- HTML - 表情符号
- HTML - 样式指南
- HTML 图形
- HTML - SVG
- HTML - Canvas
- HTML API
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web 存储
- HTML - 服务器发送事件
- HTML 其他
- HTML - 文档对象模型 (DOM)
- HTML - MathML
- HTML - 微数据
- HTML - IndexedDB
- HTML - Web 消息传递
- HTML - Web CORS
- HTML - WebRTC
- HTML 演示
- HTML - 音频播放器
- HTML - 视频播放器
- HTML - 网页幻灯片
- HTML 工具
- HTML - Velocity 绘图
- HTML - 二维码
- HTML - Modernizer
- HTML - 验证
- HTML - 颜色选择器
- HTML 参考
- HTML - 速查表
- HTML - 标签参考
- HTML - 属性参考
- HTML - 事件参考
- HTML - 字体参考
- HTML - ASCII 码
- ASCII 码表查询
- HTML - 颜色名称
- HTML - 实体
- MIME 媒体类型
- HTML - URL 编码
- 语言 ISO 代码
- HTML - 字符编码
- HTML - 已弃用的标签
- HTML 资源
- HTML - 快速指南
- HTML - 有用资源
- HTML - 颜色代码生成器
- HTML - 在线编辑器
HTML - <head> 标签
HTML <head> 标签用作元数据的容器,位于html 标签之后。元数据基本上是关于head部分中数据的 数据。因此,head标签中的信息被浏览器和搜索引擎使用,但在页面本身不可见。
通常,head标签包含文档标题、脚本或样式表链接以及描述文档结构和内容的元标签等元素。
语法
<head> ... </head>
属性
HTML head标签支持HTML 的全局属性
HTML <head> 标签还支持以下附加属性:
属性 | 值 | 描述 |
---|---|---|
profile | URL | 它定义了元数据的URL。 |
media | media_query | 它指示媒体资源针对哪个媒体/设备进行了优化。 |
type | text/css | 它定义了<style>标签的媒体类型。 |
点击图标运行按钮以运行以下HTML代码查看输出。
HTML head标签示例
在下面的示例中,我们将看到head标签与其子标签一起使用的用法。
HTML title标签在head标签中
让我们来看下面的例子,我们将使用<title>标签在<head>部分内。
<!DOCTYPE html> <html> <head> <title>Welcome to index page</title> </head> <body style="background-color:#D2B4DE"> <h1>TutorialsPoint</h1> <p>The Best E-Way Learning.</p> </body> </html>
HTML style标签在head标签中
考虑另一种情况,我们将使用<style>标签在<head>标签内。
<!DOCTYPE html> <html> <head> <style> body { background: #D5F5E3; } h1 { color: #17202A; } p { color: #DE3163; } </style> </head> <body> <h1>MSD</h1> <p>Mahendra Singh Dhoni is an former Indian cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014.</p> </body> </html>
HTML meta标签在head标签中
在下面的示例中,我们将添加一个带有content值的URL,该值在超时时重定向到页面。
<!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="4; url=https://tutorialspoint.com/index.htm"> </head> <body> <h2>Redirect to home page</h2> <p style="color: green;">After 4 seconds it will automatically redirect to URL specified in the tag</p> </body> </html>
HTML script标签在head标签中
下面是一个示例,我们将使用<script>标签在<head>标签内。
<!DOCTYPE html> <html> <head> <script> function tutorial() { document.getElementById("tp").style.color = "#2ECC71"; } </script> </head> <body> <h1 id="tp">TUTORIALSPOINT</h1> <p>The Best E-Way Learning.!</p> <button type="button" onclick="tutorial()">CLICK</button> </body> </html>
可在head标签中放置的元素列表
标签 | 描述 |
---|---|
<title> | <title>标签定义在<head>标签内,它应该是纯文本。 |
<style> | HTML <style>标签包含HTML文档或文档一部分的样式属性,作为内部CSS。 |
<meta> | <meta>标签用于提供此类附加信息。 |
<link> | HTML <link>标签指定当前文档和外部资源之间的关系。 |
<script> | HTML <script>标签用于在HTML文档中包含内部JavaScript代码。 |
<base> | 此标签用于定义基本URL或目标相对URL。 |
支持的浏览器
标签 | |||||
---|---|---|---|---|---|
head | 是 | 是 | 是 | 是 | 是 |
html_tags_reference.htm
广告