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头部 的相关文章

随机推荐

  • 了解 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