九、HTML头部<head>

一、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.mfbz.cn/a/301518.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL8.0安装(Linux - centos)

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 其他…

STM32F103GPIO工作模式及原理

目录 GPIO简介GPIO工作模式输入模式输出模式输出速度 GPIO框图和电路解析电路标识电路元件 GPIO工作模式电路解析浮空输入上拉输入下拉输入模拟输入开漏输出推挽输出推挽式复用功能开漏式复用功能 IO工作模式的选取输入模式输出模式 GPIO简介 GPIO&#xff0c;全称为通用输入输…

isaacgym(legged_gym)学习 (二)—— 设置环境地形

isaacgym(legged_gym)学习 &#xff08;二&#xff09;—— 设置环境地形 文章目录 isaacgym(legged_gym)学习 &#xff08;二&#xff09;—— 设置环境地形前言一、了解isaacgym中地形如何构成的二、自定义修改1.代码2.查看script/play.py 总结 前言 如何设置isaacgym中的环…

CISSP 第9章:安全脆弱性、威胁和对策

第九章 安全脆弱性、威胁和对策 9.1 评估和缓解安全脆弱性 9.1 硬件 处理器 执行类型 多任务处理&#xff1a; 同时处理两个或更多任务 多处理&#xff1a; 利用多个处理器完成一个应用程序的处理能力 多程序设计&#xff1a;通过操作系统对单个处理器上的两个任务进行协调&…

NPS 内网穿透安装

NPS 内网穿透安装 NPS分为服务端和客户端&#xff0c;对应的不同操作系统软件可以在GitHub RELEASES自行选择下载。 服务端搭建 由于个人非企业级使用&#xff0c;为了方便直接使用docker安装 1.docker运行 (注意需要提前下载conf文件&#xff0c;或者将镜像中文件copy出来…

.net 开源混淆器 ConfuserEx

官网&#xff1a;ConfuserEx 下载地址&#xff1a;Releases yck1509/ConfuserEx GitHub 使用参考&#xff1a;https://www.cnblogs.com/zhangzhi19861216/p/3937434.html

我是在一片骂声中成长起来的!!

曾几何&#xff0c;我的技术真的很烂&#xff0c;烂到技术主管每次都是点名要Review我的业务代码。 曾几何&#xff0c;我对技术沉淀没有一点自我意识&#xff0c;总是觉得临时抱一下佛脚就可以了。 曾几何&#xff0c;我也觉得技术无用&#xff0c;看看那些业务领导&#xf…

第5章 保护资产安全

5.1 对信息和资产进行识别和分类 数据安全生命周期管理是指数据保护始于数据被首次创建时&#xff0c;一直持续到该数据被销毁时。 实现生命周期保护的第一步是对信息和资产进行识别和分类。 组织常将分类定义纳入安全策略中。然后&#xff0c;人员根据安全策略要求适当地标记…

小黑迈出了应用开发第一步,通过武沛奇老师b站django入门课程了解了django,准备学习前端基础:django入门沛奇老师课程笔记

课程来源: https://www.bilibili.com/video/BV1NL41157ph/?p71&spm_id_from333.880.my_history.page.click 课程链接与学习资料推荐 django入门课程 https://www.bilibili.com/video/BV1NL41157ph/?p71&spm_id_from333.880.my_history.page.click django入门项目…

c语言-库函数qsort()初识

目录 前言一、qsort()的介绍及使用1.1 qsort()的介绍1.2 qsort()的使用1.2.1 使用qsort|()对整型数组按照升序排序1.2.2 使用qsort()对整型数组按照降序排序1.2.3 使用qsort()对结构体数组数据进行排序 二、利用冒泡排序模拟实现对任何数据进行排序2.1 冒泡排序2.2 模仿qsort()…

BurpSuite信息收集篇

BurpSuite信息收集篇 1.填充目标站点地图2.使用 Burp Suite 自动发现内容3.使用 Burp Suite 枚举子域1.填充目标站点地图 演示站点 ginandjuice.shop 1、抓取目标的请求包 2、在不关闭浏览器的情况下,转到目标>站点地图。请注意,已自动添加一个节点来表示目标域 3、右键…

【EasyExcel】导出excel冻结表头和冻结指定列并支持筛选器

需求背景&#xff1a; 导出excel的同时冻结表头和前两列基础信息&#xff0c;方便导出后用户查看信息。 一、技术选型&#xff1a; easyExcel的自定义写策略处理&#xff1a;SheetWriteHandler 二、方案设计&#xff1a;&#xff08;基于实现 SheetWriteHandler 接口&#xf…

RabbitMQ(九)死信队列

目录 一、简介1.1 定义1.2 何时进入死信队列&#xff1f;1.3 死信消息的变化1.4 死信队列的应用场景1.5 死信消息的生命周期 二、代码实现2.1 死信队列的配置步骤2.2 配置类2.3 配置文件2.4 生产者2.5 业务消费者2.6 死信消费者2.7 测试结果 三、总结 RabbitMQ 是流行的开源消息…

【EI会议征稿通知】第三届城市规划与区域经济国际学术会议(UPRE 2024)

第三届城市规划与区域经济国际学术会议&#xff08;UPRE 2024&#xff09; 2024 3rd International Conference on Urban Planning and Regional Economy 第三届城市规划与区域经济国际学术会议&#xff08;UPRE 2024&#xff09;于2024年4月19-21日在泰国曼谷举行。会议旨在…

Qt/QML编程学习之心得:Linux下读写文件File(24)

在Linux嵌入式系统中,经常会使用Qt来读写一个文件,判断一个文件是否存在,具体如何实现呢? 首先,要使用linux系统中相关的头文件: #include <unistd.h> #include <stdio.h> #include <stdlib.h> 其次,判断路径是否存在, if(!dir.exists()){mkdir(…

智能驾驶打响“进阶战”:高、中、低阶赛道如何突围?

伴随智能驾驶普及进入新周期&#xff0c;高、中、低阶市场呈现不同的突围方式。 根据高工智能汽车研究院监测数据&#xff0c;2023年1-9月&#xff0c;中国市场&#xff08;不含进出口&#xff09;乘用车新车销售标配搭载L2&#xff08;含L2&#xff09;的渗透率达到36.31%&am…

QT常用控件使用及布局

QT常用控件使用及布局 文章目录 QT常用控件使用及布局1、创建带Ui的工程2、ui界面介绍1、界面设计区2、对象监视区3、对象监属性编辑区4、信号与槽5、布局器6、控件1、Layouts1、布局管理器2、布局的dome 2、Spacers3、Buttons4、项目视图组(Item Views)5、项目控件组(Item Wid…

【sgPasswordInput】自定义组件:带前端校验密码强度的密码输入框,能够提供密码强度颜色提示和文字提示

特性&#xff1a; 有密码强度颜色提示密码强度进度条提示支持设置默认输入提示和密码长度 sgPasswordInput源码 <template><div :class"$options.name" style"width: 100%"><el-inputstyle"width: 100%"ref"psw"type&…

软件使用手册

一简介 软件分两部分&#xff0c;股票监测程序&#xff0c;监测列表配置数据页面以及手机端接收监控数据。股票监测程序需要在电脑上运行。下载地址为程序下载地址。监控股票配置页面地址为动态列表。 二使用介绍 2.1监控客户端 2.1.1程序安装及登录 下载安装exe程序程序下载地…

C#开源的一款友好的.NET SDK管理器

前言 今天推荐一款由C#开源的、友好的.NET SDK管理器&#xff1a;Dots。 工具介绍 Dots 是一款 .NET SDK 管理器&#xff0c;可让您轻松安装、卸载和切换 .NET SDK。它是一款跨平台工具&#xff0c;可在 Windows 和 macOS 上运行&#xff0c;即将支持 Linux。它由 C# 编写&a…
最新文章