九、HTML头部<head>

news2024/9/22 1:11:58

一、HTML头部<head>

1、<title>- 定义了HTML文档的标题

使用 <title> 标签定义HTML文档的标题

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的 HTML 的第一页</title>
</head>

<body>
    <p>浏览器中包含body元素的内容。</p>
    <p>浏览器的标题包含title元素的内容</p>
</body>

</html>

运行结果:

2、<base> - 定义了所有链接的URL

使用 <base> 定义页面中所有链接默认的链接目标地址。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <base href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" target="_blank">
</head>

<body>
    <img src="PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base
    标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为
    "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
    <br><br>
    <a href="https://www.baidu.com/">百度一下</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为
    "_blank"。

</body>

</html>

运行结果:

 3、<meta> - 提供了HTML文档的meta标记

使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title><meta> - 提供了HTML文档的meta标记</title>
    <meta name="description" content="免费在线教程">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="runoob">
</head>

<body>

    <p>所有 meta 标签显示在 head 部分...</p>

</body>

</html>

二、HTML <head> 元素

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

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

三、HTML <title> 元素

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

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

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

一个简单的 HTML 文档:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>

<body>
    文档内容......
</body>

</html>

四、HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>
    <base href="http://www.runoob.com/images/" 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> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta> 一般放置于 <head> 区域

八、<meta> 标签- 使用实例

1、为搜索引擎定义关键词:

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

2、为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

3、定义网页作者:

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

4、每30秒钟刷新当前页面:

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

九、HTML <script> 元素

<script>标签用于加载脚本文件,如:JavaScript。

<script> 元素在以后的章节中会详细描述。

十、HTML head 元素 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1365792.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ant-design-vue的日期组件a-range-picker赋值的问题

在使用ant-design-vue的日期组件时&#xff0c;总是会碰到赋值问题&#xff0c;习惯性的赋值就是直接给日期组件的变量赋值字符串类型&#xff0c;如下 // html部分 <a-range-picker v-model"dateValue" :format"YYYY-MM-DD"/> // js部分 data() {r…

2024年大数据不完全预测

人工智能的进步可能是2024年的主要推动力&#xff0c;也凸显出大数据的挑战——如何存储、管理、管理和使用大数据——从未如此紧迫。&#xff0c;因为如果作为基石的数据失控&#xff0c;人工智能就没有意义了。当然反之亦然。 人工智能的进步可能是2024年的主要推动力&#…

1999-2022年上市公司微观企业劳动生产率数据(原始数据+计算代码+处理结果)

1999-2022年上市公司微观企业劳动生产率数据&#xff08;原始数据计算代码处理结果&#xff09; 1、时间&#xff1a;1999-2022年 2、来源&#xff1a;原始数据整理自csmar 3、指标&#xff1a;证券代码&#xff0c;证券简称、员工人数&#xff0c;营业收入 4、范围&#x…

C++ 学习系列 -- tuple 原理

一 可变参数模板 variadic template 前面的章节 C 学习系列 -- 模板 template-CSDN博客 我们介绍了 c 中的模板概念&#xff0c;本章则在其基础上介绍了新的概念 可变参数模板 variadic template &#xff0c;顾名思义&#xff0c;可变参数模板意思为模板参数的类型与数量是变…

浅谈智能照明系统调试阶段节能方案的探究与产品选型

贾丽丽 安科瑞电气股份有限公司 上海嘉定 201801 【摘要】针对当今智能照明系统调试完成前能源浪费的问题&#xff0c;本文结合工程案例&#xff0c;分析研究了智能照明系统调试阶段的节能方法&#xff0c;提出了采用时间控制器来解决能源及人工浪费等问题的方式。实践证明&a…

微众区块链观察节点的架构和原理 | 科普时间

践行区块链公共精神&#xff0c;实现更好的公众开放与监督&#xff01;2023年12月&#xff0c;微众区块链观察节点正式面向公众开放接入功能。从开放日起&#xff0c;陆续有多个观察节点在各地运行&#xff0c;同步区块链数据&#xff0c;运行区块链浏览器观察检视数据&#xf…

Kafka(六)消费者

目录 Kafka消费者1 配置消费者bootstrap.serversgroup.idkey.deserializervalue.deserializergroup.instance.idfetch.min.bytes1fetch.max.wait.msfetch.max.bytes57671680 (55 mebibytes)max.poll.record500max.partition.fetch.bytessession.timeout.ms45000 (45 seconds)he…

【STM32】STM32学习笔记-DMA数据转运+AD多通道(24)

00. 目录 文章目录 00. 目录01. DMA简介02. DMA相关API2.1 DMA_Init2.2 DMA_InitTypeDef2.3 DMA_Cmd2.4 DMA_SetCurrDataCounter2.5 DMA_GetFlagStatus2.6 DMA_ClearFlag 03. DMA数据单通道接线图04. DMA数据单通道示例05. DMA数据多通道接线图06. DMA数据多通道示例一07. DMA数…

STM32(HAL库) CubeMX+Keil5 建立工程

STM32&#xff08;HAL库&#xff09; CubeMXKeil5 建立工程 目标选择 菜单栏 File 新建工程打开工程退出软件 Window 输出窗口的开启软件字体设置 Help 软件帮助文档检查软件更新管理MCU 已存在工程&#xff08;Existing Projects&#xff09; 最近打开过的工程(Recent Open…

如何科学评价视频生成模型?AIGCBench:全面可扩展的视频生成任务基准来了!

AIGC领域正迅速发展&#xff0c;特别是在视频生成方面取得了显著进展。本文介绍了AIGCBench&#xff0c;这是一个首创的全面而可扩展的基准&#xff0c;旨在评估各种视频生成任务&#xff0c;主要关注图像到视频&#xff08;I2V&#xff09;生成。AIGCBench解决了现有基准的局限…

苹果显示连接iTunes是什么意思?你知道吗?答案来了!

相信使用苹果手机的小伙伴都听说过iTunes软件&#xff0c;但是可能还有小部分人不知道iTunes是什么&#xff0c;以及苹果设备上显示连接itunes是什么意思。对于使用iTunes进行数据备份、恢复等操作的用户来说&#xff0c;出现这个提示意味着您的苹果设备已经与电脑成功连接&…

vue-springboot基于java的实验室安全考试系统

本系统为用户而设计制作实验室安全考试系统&#xff0c;旨在实现实验室安全考试智能化、现代化管理。本实验室安全考试管理自动化系统的开发和研制的最终目的是将实验室安全考试的运作模式从手工记录数据转变为网络信息查询管理&#xff0c;从而为现代管理人员的使用提供更多的…

【Docker基础一】Docker安装Elasticsearch,Kibana,IK分词器

安装elasticsearch 下载镜像 查看版本&#xff1a;Elasticsearch Guide [8.11] | Elastic # 下载镜像 docker pull elasticsearch:7.17.16 # 查看镜像是否下载成功 docker images创建网络 因为需要部署kibana容器&#xff0c;要让es和kibana容器互联 # 创建一个网络&…

并发(10)

目录 61.ReentrantReadWriteLock底层读写状态如何设计的&#xff1f; 62.读锁和写锁的最大数量是多少&#xff1f; 63.本地线程计数器ThreadLocalHoldCounter是用来做什么的&#xff1f; 64.写锁的获取与释放是怎么实现的&#xff1f; 65.读锁的获取与释放是怎么实现的&…

【算法】递归算法理解(持续更新)

这里写目录标题 一、递归算法1、什么情况下可以使用递归&#xff1f;2、递归算法组成部分3、案例&#xff1a;求n的阶乘4、编写一个递归函数来计算列表包含的元素数。5、通过递归找到列表中最大的数字。6、通过递归的方式实现二分查找算法。 一、递归算法 递归&#xff08;Rec…

浅谈LCD屏幕引脚定义识别

学习单片机&#xff0c;总要驱动LCD屏幕&#xff0c;但是对于没有引脚定义的LCD屏幕该如何应对&#xff1f; 本人研究不深&#xff0c;只谈体会。 比如下面这款屏幕 一、第一种方法 百度大法查引脚定义。查询条件可以是FPC上的丝印&#xff0c;或者是屏幕的尺寸&#xff0c;引脚…

sublime如何取消运行代码状态

sublime如何取消运行代码状态 解决方案待续、更新中 解决方案 1 顶部取消: 工具-----取消编译 这个看自己编译器sublime取消编译是否可用,可用则用 ,否则使用下面方法 2 底部栏取消–如图所示: 取消成功: 待续、更新中 ————————————————————— 以上就…

2024前端炫酷源码分享(附效果图及在线演示)

分享10款非常有趣的前端特效源码 其中包含css动画特效、js原生特效、svg特效以及小游戏等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源 GSAP-火箭动画特效 GSAP 火箭动画 当氮气充足的情况下 火箭会冲出 并继续飞行 图片…

【Java】设计模式之顺序控制

实际开发中&#xff0c;有时候一些场景需求让多个线程按照固定的顺序依次执行。这个时候就会使用这种模式。 这种模式说白了&#xff0c;就是给线程设定不同的条件&#xff0c;不符合条件的话&#xff0c;就算线程拿到锁也会释放锁进入等待&#xff1b;符合条件才让线程拿到锁…

【解决方案】电能质量在线监测装置和防孤岛保护装置在特斯拉工厂分布式光伏项目的应用

摘要&#xff1a; 随着全球对可再生能源的关注度不断提高&#xff0c;分布式光伏发电系统在近年来得到了广泛应用。分布式光伏发电系统具有环保、灵活等优势&#xff0c;能够有效地缓解能源短缺和环境污染问题。同时&#xff0c;电能质量在线监测装置和防孤岛保护装置在分布式…