前端之head和元数据

已于 2022-02-08 22:28:45 修改
阅读量1.3k 收藏
点赞数 1
分类专栏： 前端基础 文章标签： 前端 html javascript
于 2022-01-31 20:30:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46372074/article/details/122759159
版权

前端之head和元数据

head标签

标签与 标签不同，页面加载完成后，head标签的内容不会在页面中显示出来。

head用途

标签保存一些元数据(meta标签等)

head基本组成

title

head内的title是一项元数据，是HTML 文档的标题（而不是文档内容）。h1是页面内容标题。

元数据（Metadata）：元素

元数据就是描述数据的数据。

元素是为一个文档**添加元数据**的元素 。

指定文档字符编码

<meta charset="utf-8">

通用的字符集utf-8包含了任何人类语言中的大部分的字符。 意味着该 web 页面可以显示任意的语言；

文件作者和概要（描述）

这个元素包含name和content：

  • name 指定了meta 元素包含的信息类型。
  • content 指定了实际的元数据内容。
 <!-- 指定文档作者 -->
<meta
 name="author" content="一只爱吃萝卜的小兔子">
 <!-- 文档描述-->
 <meta
 name="description" content="这个网页是前端之head和元数据文章内容相对应的。">

在你的站点增加自定义图标

在元数据中添加对自定义图标的引用，进一步丰富网站设计

我使用favicon制作 - 在线工具导入图片，制作了一个网页图标
在这里插入图片描述
在这里插入图片描述

使用格式：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="ico文件路径" type="image/x-icon"/>

注意：

  1. 修改ico文件路径就好了。
  2. 第一行一定要加，各个网页都说这东西很简单，但是我搞了半天。最后，才发现少了第一行。

在HTML中应用CSS和JavaScript

样式表文件的路径

<link rel="stylesheet" href="my-css-file.css"> 
<script src="my-js-file.js"></script>

标签script不是一个空元素。而且没必要放在文档头部；实际上，把它放在文档的尾部

为文档设定主语言

网页语言
<html lang="zh-CN">
文档内小部分
<p>日语实例: <span lang="jp">ご飯が熱い。</span>.</p>

本节网页
下一节：前端之HTML 文本、超链接

一只爱吃萝卜的小兔子
关注
专栏目录
【DataHub】 现代数据栈的元数据平台--如何针对DataHub UI 前端展示进行汉化
m0_54252387的博客
07-14 3720
DataHub的组件datahub-frontend-react是DataHub UI的React版本，也是DataHub客户端体验的生产版本。前端是完全独立的。目前DataHub前端是全英文的，并且都是专业术语如Ingestion，让不熟悉数据治理的人很难使用。 公司领导想基于DataHub进行二开，并针对前端进行汉化，方便团队成员及用户的使用。本文讲解如何针对DataHub UI 前端展示进行汉化，并针对汉化遇到的问题进行总结。DataHub UI 前端展示汉化后效果如下： DataHub前端的设计目标
head 容器详解（包括title、style、base、link、mate、script、noscript七大内置标签）
m0_46626543的博客
04-06 1078
这里写目录标题一、head标签二、head容器下的标签1、title 标签2、style 标签3、base 标签4、link 标签5、mate 标签6、script 标签7、noscript 标签 一、head标签 head 标签是存放元数据（metadata，data about data）的数据，即解释数据的数据。 元数据一般不直接展示给用户。 元数据内定义标题 title（每个 HTML 都必须要有）、作者、更新时间、样式链接等。 <head> 标签中可以含有 <title>
前端之路（四）—— HTML中的元数据
popping_Sun的博客
01-22 1023
上篇我们初识HTML，在这篇我们解析了HTML文档，其中有head标签，这里面可以包含很多东西，今天我们就一起来探讨一下。 <head>元素 <head>元素中的内容不会在页面中展示，它的作用是为了保存元数据。 元数据：用来描述数据的数据。比如包含该文件的作者和概要，还有网页的标题。 <meta>元素 <meta>元素，用来为HTML添加元数据，下面我们来了解一下常见的类型。 <meta charset=“utf-8”>：指定文档中的字.
建立元数据驱动的前端架构
azl397985856的专栏
05-14 523
作者：徐飞https://zhuanlan.zhihu.com/p/370499228在广义的前端领域，模型驱动视图已经不是什么新鲜话题了，“低代码”和“搭建”也炙手可热，而这些概念都是以...
前端开发还可以这么玩？元数据实践分享
华为云官方博客
12-08 1602
摘要：元数据是业务流中前端和业务侧实现共同使用的一种规范，是沟通前后端的桥梁，其通过统一的数据格式进行约束，从而约定前后端传参。使用元数据，大幅提升了开发效率，又降低了维护及二次开发成本。 1 ROMA 业务流简介 ROMA 业务流（以下简称“业务流”）是一个基于ROMA Connect平台的应用集成与数据开放服务，适用于跨实例、跨应用的企业系统集成场景。业务流支持通过可视化UI界面来创建任务，从而降低了不同经验背景的用户的开发门槛。 图1-1 业务流demo 2 元数据概述 Metadata
＜head＞标签里有什么? Metadata-HTML中的元数据
maimang1001的专栏
03-03 419
什么是 HTML 头部元素? HTML<head>元素与<body>元素不同，它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据。 大型页面的 head 会包含很多元数据。可以用开发者工具查看网页的 head 信息。 添加标题 之前已经讲过<title>，它可以为文档添加标题。别和<h1>元素搞混了，<h1>是为 body 添加标题的。有时候<h1>也叫作网页标题。但是二者并不相同。 &lt...
前端开源库-apeman-react-head
08-29
2. **管理meta标签**：可以方便地添加、删除或更新meta标签，以控制页面的描述、关键词、视口设置等元数据。 3. **处理link标签**：支持插入、更新或移除CSS链接，这对于按需加载CSS资源，提升页面性能非常有用。 ...
前端面试题之Html相关题集.zip
最新发布
06-21
表单处理用户输入数据，可以配合`method`（GET或POST）和`action`属性提交到服务器。 五、HTML5新特性 HTML5引入了许多新特性，包括新的元素（如`<video>`、`<audio>`、`<canvas>`）、离线存储（`localStorage`、`...
前端精讲前端精讲前端精讲
05-15
总的来说，前端开发涵盖了从数据关系设计到网页结构创建，再到代码编辑和调试的全过程，而高效的开发工具如IDE能极大地提升开发效率和代码质量。对于前端开发者来说，理解和熟练掌握这些基础知识和工具是必不可少的...
WEB前端开发常用英语单词和语句汇总
05-22
在HTML5的标签中，开发者经常需要使用各种标签来创建网页的不同部分，比如使用head来包含对页面的元数据，使用body来包裹页面的主要内容。而使用meta标签可以定义文档的字符集、描述、关键词等重要信息，这些都对...
html前端文档整理分类
04-26
数据挖掘在前端领域可能涉及到网页数据的抓取和分析，这对于网站优化和用户行为研究至关重要。 在这个“hm前端文档整理”中，我们可以期待找到一系列关于HTML和CSS的学习资料，以及可能与数据挖掘相关的前端技术...
头部动作图像数据库 HeadPoseImageDatabase
01-31
头部动作图像数据库 HeadPoseImageDatabase头部动作图像数据库 HeadPoseImageDatabase头部动作图像数据库 HeadPoseImageDatabase
【HTML 往日冒险 03】JavaScript 文件路径 头部元素 元数据 布局 HTML5新语义元素
Zane Boy's blogs
05-31 317
【HTML 往日冒险 03】JavaScript 文件路径 头部元素 元数据 布局 HTML5新语义元素 所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。HTML5 提供的新语义元素定义了网页的不同部分。文件路径描述了网站文件夹结构中某个文件的位置。使用相对路径是个好习惯。
html之文档的头部和元数据定义(上)
dreamzuora的博客
12-20 2185
什么叫元数据？ 要理解这个问题，首先要知道“元”是什么。元(meta)，一般被我们翻译成“关于……的……”。 元数据(meta data)——“data about data” 关于数据的数据，一般是结构化数据（如存储在数据库里的数据，规定了字段的长度、类型等）。 元数据是指从信息资源中抽取出来的用于说明其特征、内容的结构化的数据(如题名,版本、出版数据、相关说明,包括检索点等)
HTML元数据<meta>
H U C
03-14 865
HTML Base base元素为相对链接设置基本URL。 相对链接是省略URL的协议，主机和端口部分的链接并且针对一些其他URL(由基本元素或由基本元素指定的URL)进行评估用于加载当前文档的URL。 base元素也指定如何在用户单击链接时打开链接，以及在表单提交后浏览器的行为。 base元素有两个局部属性 hreftarget HTML文档最多只能包含一
HTML+CSS3 网页元数据（meta）
ywrrwy的博客
11-17 355
http-equiv 将页面重定向到另一个网页,跳转到另一个网页。url=https://www.baidu.com" 表示2s后跳转到百度。keywords 表示网站的关键字，可以指定多个关键字,关键字用英文逗号隔开。meta主要用于设置网页中的一些元数据，元数据用户看不到，准确来讲，head里的数据用户都无法看到。description 表示网站的描述，会显示在搜索引擎的结果中。title标签内容会作为搜索结果的超链接上的文字显示。charset 指定网页字符集，一般是"UTF-8"
head包含元素简介
weixin_30502965的博客
09-09 386
head包含元素简介 <head>元素包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息，可以添加到头部区域的元素为 <title>定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题) <meta>用来定义页面的特殊信息（页面关键字，页面描述） ，描述了一些基本的元数...
HTML文档头部与元数据
Raaabbt GO!!
03-24 387
HTML文档头部与元数据 在之前的文章中，我对 html 文档的内容做了简单的分割，这篇文章对其中的文档标题—— head 部分进行一个简单的总结～ 如果没有耐心看长篇大论，可以直接到本文末尾，将会有一个包含了本文大部分内容的 demo～ 文档头部的作用 head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器。 head 大部分内容是不可见的，除了 title 和 图标之外。...
Web前端学习——HTML知识点
weixin_42029090的博客
06-15 399
HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 网页结构下面是一个可视化的HTML页面结构：&lt;html&gt;&lt;head&gt;&lt;title&gt;页面标题&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;这是一个标题&lt;/h1&gt;&lt;p&gt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值