HTML中meta的用法
学习网络空间安全专业,每个人有每个人的学法和选择。不论他选择什么,哪都是他自己的选择,这就是大多数视频教学的博主教学的步骤都不同原因之一。有人选择丢掉大部分理论直接学习网安,而我,选择了捡起大部分理论学习网安。因为,在我看来,万丈高楼平地起,地基越牢走的就越远。
最终,我选择了脚踏实地,不论多简单,我总想把部分学透了再离开去学其他的。
本文章是个人成长学习的笔记内容之一,仅供参考学习,谢谢您的观看。
内容简介
- 定义文档的字符编码(charset)
- 提供页面描述(description)
- 设置页面关键词(keywords)
- 定义页面作者(author)
- 控制页面的视口(viewport)
- 设置页面的刷新(refresh)或跳转(redirect)
定义文档的字符编码(charset)
- 用途:这是meta标签最常见的用途之一。它用于指定 HTML 文档的字符编码,确保浏览器能够正确地解析和显示文档中的文本内容。
- 示例:
<meta charset="UTF - 8">
- 上面这行代码告诉浏览器,该 HTML 文档采用 UTF - 8 编码。UTF - 8 是一种通用的字符编码方式,能够表示几乎所有的字符,包括各种语言的文字、符号等。如果没有正确设置字符编码,浏览器可能会出现乱码问题,无法正确显示文档中的内容。
提供页面描述(description)
- 用途:用于为搜索引擎和社交媒体平台等提供关于页面的简短描述。这个描述会在搜索引擎结果页面(SERP)中显示,帮助用户了解页面的大致内容,并且可能会影响页面在搜索结果中的点击率。
- 示例:
<meta name="description" content="这是一个关于HTML学习的网页,包含HTML基础语法、标签介绍等内容">
- 在这里,name="description"表明这是一个用于描述页面内容的meta标签,content属性则包含了具体的描述语句。当搜索引擎抓取这个页面时,会读取这个描述,并在搜索结果中展示给用户。
设置页面关键词(keywords)
- 用途:用于告诉搜索引擎页面中涉及的主要关键词。虽然搜索引擎算法已经变得越来越复杂,关键词meta标签的权重已经不如以前高,但它仍然可以作为搜索引擎优化(SEO)的一个辅助手段。
- 示例:
<meta name="keywords" content="HTML, 网页开发, 基础语法">
- 这个meta标签中的content属性列出了页面相关的关键词。不过要注意,过度堆砌关键词或者使用与页面内容不相关的关键词可能会对 SEO 产生负面影响。
定义页面作者(author)
- 用途:用于标识页面的作者或所有者。这对于版权归属、内容责任认定等方面可能会有帮助。
- 示例:
<meta name="author" content="张三">
- 这样就表明这个 HTML 页面的作者是张三。
控制页面的视口(viewport)
- 用途:在移动网页开发中非常重要。它用于设置页面在移动设备浏览器中的可视区域大小、缩放比例等相关属性,确保页面在移动设备上能够有良好的显示效果。
- 示例:
<meta name="viewport" content="width=device - width, initial - scale = 1.0">
- 这行代码中,width=device - width表示视口的宽度等于设备的宽度,initial - scale = 1.0表示初始缩放比例为 1.0。这样设置可以让页面在移动设备上以合适的大小和比例显示,避免出现页面过宽或过窄、需要用户手动大量缩放等情况。
设置页面的刷新(refresh)或跳转(redirect)
- 用途:可以用于实现页面的自动刷新或者在一定时间后跳转到其他页面。不过这种用法需要谨慎,因为过度频繁的刷新或者不合理的跳转可能会给用户带来不好的体验。
- 示例:
- 页面自动刷新:
<meta http-equiv="refresh" content="30">
- 这表示页面每隔 30 秒会自动刷新一次。http-equiv属性在这里的作用类似于一个 HTTP 头部信息,告诉浏览器执行相应的操作。content属性中的数字表示刷新或跳转的时间间隔(单位为秒)。
- 真示例1:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自动刷新页面示例</title><meta http-equiv="refresh" content="30">
</head>
<body><h1>这是一个会自动刷新的页面</h1><p>当前页面每隔30秒会自动刷新一次,你可以看到时间相关的内容可能会更新。</p><p>当前时间是:<span id="currentTime"></span></p><script>// JavaScript代码用于获取并显示当前时间function updateTime() {const currentTimeElement = document.getElementById('currentTime');const now = new Date();currentTimeElement.textContent = now.toLocaleTimeString();}updateTime();</script>
</body>
</html>
- 真示例2:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新闻列表 - 自动更新</title><meta http-equiv="refresh" content="300">
</head>
<body><h1>新闻列表</h1><ul id="newsList"><!-- 这里的新闻项可以通过JavaScript动态添加 --></ul><script>// 模拟获取新闻数据并添加到新闻列表的函数function fetchNews() {const newsList = document.getElementById('newsList');// 模拟新闻数据,实际应用中应该从服务器获取const newsData = [{title: "重大科技突破", content: "科学家们发现了一种新的能源解决方案"},{title: "体育赛事结果", content: "足球比赛中A队以3:2战胜B队"}];newsData.forEach(newsItem => {const listItem = document.createElement('li');const titleElement = document.createElement('h3');titleElement.textContent = newsItem.title;const contentElement = document.createElement('p');contentElement.textContent = newsItem.content;listItem.appendChild(titleElement);listItem.appendChild(contentElement);newsList.appendChild(listItem);});}fetchNews();</script>
</body>
</html>
- 页面跳转:
<meta http-equiv="refresh" content="5;url = https://www.example.com">
-
这表示页面在 5 秒后会跳转到https://www.example.com这个网址。
- 真示例1:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面跳转示例</title><meta http-equiv="refresh" content="5;url = https://www.baidu.com">
</head>
<body><h1>您将在5秒后被重定向到另一个页面</h1><p>如果没有自动跳转,您可以点击 <a href="https://www.baidu.com">这里</a>。</p>
</body>
</html>
- 真示例2:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网站更新 - 页面跳转</title><meta http-equiv="refresh" content="3;url = https://www.baidu.com">
</head>
<body><h1>网站正在更新</h1><p>此页面已更新,您将在3秒后被重定向到新的页面。感谢您的理解!</p>
</body>
</html>
相关文章:
HTML中meta的用法
学习网络空间安全专业,每个人有每个人的学法和选择。不论他选择什么,哪都是他自己的选择,这就是大多数视频教学的博主教学的步骤都不同原因之一。有人选择丢掉大部分理论直接学习网安,而我,选择了捡起大部分理论学习网…...
前端学习-事件流,事件捕获,事件冒泡以及阻止冒泡以及相应案例(二十八)
目录 前言 事件流与两个阶段说明 说明 事件捕获 目标 说明 事件冒泡 目标 事件冒泡概念 简单理解 阻止冒泡 目标 语法 注意 综合示例代码 总结 前言 梳洗罢,独倚望江楼。过尽千帆皆不是,斜晖脉脉水悠悠。肠断白蘋洲 事件流与两个阶段说明…...
国产OS移植工业物联网OPC-UA协议
国家对于工业互联网、基础软件等关键领域的重视程度不断提升,为工业领域的硬件与软件国产化提供了坚实的政策保障。国产操作系统对工业物联网的一些重要领域的适配支持一直在推进。本次通过国产UOS系统移植测试OPC-UA协议。 1、OPC UA通信协议 OPC UA 协议…...
第25章 汇编语言--- 信号量与互斥锁
信号量(Semaphore)和互斥锁(Mutex,全称Mutual Exclusion Object)是两种用于管理对共享资源的访问的同步机制。它们在多线程或多进程编程中非常重要,可以确保同一时间只有一个线程或进程能够访问特定的资源&…...
写个自己的vue-cli
写个自己的vue-cli 1.插件代码2. 发布流程3. 模板代码讲解3.1 vue2模板的运行流程:3.2 vue3模板的运行流程: 1.插件代码 写一个自己的vue-cli插件 插件地址:插件地址 流程: 实现简单版 vue-cli 步骤文档1. 项目初始化 - 创建项目文件夹 qsl-vue-cli - …...
使用new Vue创建Vue 实例并使用$mount挂载到元素上(包括el选项和$mount区别)
new Vue({...}) 是创建一个新的 Vue 实例的方式。你可以通过传递一个选项对象来配置这个实例。常见的选项包括: •data:定义组件的数据属性。 •el:指定 Vue 实例应该挂载到哪个 DOM 元素上(通常是一个选择器字符串,如…...
【理论】测试框架体系TDD、BDD、ATDD、MBT、DDT介绍
一、测试框架是什么 测试框架是一组用于创建和设计测试用例的指南或规则。框架由旨在帮助 QA 专业人员更有效地测试的实践和工具的组合组成。 这些指南可能包括编码标准、测试数据处理方法、对象存储库、存储测试结果的过程或有关如何访问外部资源的信息。 A testing framewo…...
机器学习全流程解析:数据导入到服务上线全阶段介绍
目录 1. 数据导入 2. 数据预处理 3. 超参数搜索与优化 4. 模型训练 5. 模型评估 6. 模型压缩与优化 7. 模型注册与版本管理 8. 服务上线与部署 总结 1. 数据导入 数据源:数据库、文件系统、API等。数据格式:CSV、JSON、SQL 数据库表、Parquet …...
shell脚本练习
1、shell 脚本写出检测 /tmp/size.log 文件如果存在显示它的内容,不存在则创建一个文件将创建时间写入。 if [ -f /tmp/size.log ];thencat /tmp/size.logelsestat exist.sh | awk -F: "NR5" > /tmp/size.logfi 2、写一个 shel1 脚本,实现批量添加…...
金山WPS Android面试题及参考答案
说说你所知道的所有集合?并阐述其内部实现。 在 Android 开发(Java 语言基础上)中有多种集合。 首先是 List 集合,主要包括 ArrayList 和 LinkedList。 ArrayList 是基于数组实现的动态数组。它的内部有一个数组来存储元素,当添加元素时,如果数组容量不够,会进行扩容操作…...
分类模型为什么使用交叉熵作为损失函数
推导过程 让推理更有体感,进行下面假设: 假设要对猫、狗进行图片识别分类假设模型输出 y y y,是一个几率,表示是猫的概率 训练资料如下: x n x^n xn类别 y ^ n \widehat{y}^n y n x 1 x^1 x1猫1 x 2 x^2 x2猫1 x …...
高等数学学习笔记 ☞ 单调性、凸凹性、极值、最值、曲率
1. 单调性 1. 单调性定义:设函数在区间上有定义,对于区间上任意两点,若: ①:当时,恒有,则称函数在区间上单调递增。 ②:当时,恒有,则称函数在区间上单调递减…...
【操作系统】详解操作系统及其结构
考察频率难度40%--60%⭐⭐ 这又是一类面试考察题,是关于操作系统的一些概念问题,很少会单独拎出来作为一个问题进行提问,但却是必须要掌握的。因为如果这个你不会,其他的问题就已经没有回答的必要了。 什么是操作系统࿱…...
primitive 的 Appearance编写着色器材质
import { nextTick, onMounted, ref } from vue import * as Cesium from cesium import gsap from gsaponMounted(() > { ... })// 1、创建矩形几何体,Cesium.RectangleGeometry:几何体,Rectangle:矩形 let rectGeometry new…...
自动化测试框架搭建-接口数据结构设计
目的 确认数据库如何保存接口数据,既有扩展性,数据又全又好用 根据用途设计数据库字段 区分环境:可以明确当前接口自动化用例,是在哪个环境需要执行的 模块:微服务架构,不同测试同学负责不同的模块&…...
Python自学 - 使用自定义异常
<< 返回目录 1 Python自学 - 使用自定义异常 在Python中, 不仅可以使用内置异常,用户还可以创建自己的异常。自定义异常需要继承自Exception类或其子类,如下是一个自定义异常示例: 示例1:一个简单的自定义异常…...
微信小程序-Docker+Nginx环境配置业务域名验证文件
在实际开发或运维工作中,我们时常需要在 Nginx 部署的服务器上提供一个特定的静态文件,用于域名验证或第三方平台验证。若此时使用 Docker 容器部署了 Nginx,就需要将该验证文件正确地映射(挂载)到容器中,并…...
“AI智能服务平台系统,让生活更便捷、更智能
大家好,我是资深产品经理老王,今天咱们来聊聊一个让生活变得越来越方便的高科技产品——AI智能服务平台系统。这个系统可是现代服务业的一颗璀璨明珠,它究竟有哪些魅力呢?下面我就跟大家伙儿闲聊一下。 一、什么是AI智能服务平台系…...
【PPTist】插入形状、插入图片、插入图表
一、插入形状 插入形状有两种情况,一种是插入固定的形状, 一种是插入自定义的形状。 插入固定的形状时,跟上一篇文章 绘制文本框 是一样一样的,都是调用的 mainStore.setCreatingElement() 方法,只不多传的类型不一…...
云集电商:数据库的分布式升级实践|OceanBase案例
电商行业对数据库有哪些需求 云集电商作为一家传统电商企业,业务涵盖了美妆个护、服饰、水果生鲜、健康保健等多个领域,在创立四年后在纳斯达克上市(股票代码:YJ)。与京东、淘宝、拼多多等电商平台不同,云…...
OOM排查思路
K8S 容器的云原生生态,改变了服务的交付方式,自愈能力和自动扩缩等功能简直不要太好用。 有好的地方咱要夸,不好的地方咱也要说,真正的业务是部署于容器内部,而容器之外,又有一逻辑层 Pod 。 对于容器和…...
Q_OBJECT宏报错的问题
在Qt中继承QObject,并且加上Q_OBJECT宏,有时候会报错,比如我的错误: error: debug/httpmgr.o:httpmgr.cpp:(.rdata$.refptr._ZTV7HttpMgr[.refptr._ZTV7HttpMgr]0x0): undefined reference to vtable for HttpMgr 意思是没有虚…...
iOS - 关联对象
详细总结 Objective-C 的关联对象功能: 1. 基本使用 // 1. 设置关联对象 objc_setAssociatedObject(id object, const void *key, id value, objc_AssociationPolicy policy);// 2. 获取关联对象 id objc_getAssociatedObject(id object, const void *key);// 3. …...
Linux之进程
Linux之进程 一.进程进程之形ps命令进程状态特殊进程孤儿进程守护进程 进程创建之创建子进程进程特性优先级进程切换(分时操作系统) 二.环境变量三.进程地址空间四.进程终止&进程等待五.进程替换六.自定义shell 本篇博客希望简略的介绍进程ÿ…...
数据库事务
一 事务的概念 为什么要有事务,我们先前没学事务,也能写sql语句,事务的意义是什么? 由来: 是为了服务应用层开发,降低开发难度。假如没有事务,那我们身为开发人员,要处理转账需求,此时一定是有…...
Python statistics 模块
在数据分析和科学计算中,统计学是一个非常重要的工具。 Python 提供了一个内置的 statistics 模块,专门用于处理基本的统计计算。本文将详细介绍 statistics 模块的功能和使用方法,帮助初学者快速掌握如何使用这个模块进行基本的统计分析。 …...
AI知识-TF-IDF技术(Term Frequency-Inverse Document Frequency)
摘要 TF-IDF(Term Frequency-Inverse Document Frequency)是一种常见的统计方法,用于评估一个词对于一个文档集或一个语料库中的其中一份文档的重要性。本文将全面阐述TF-IDF的通俗理解、技术原理、应用场景,并做以总结。 通俗理…...
spring cloud的核心模块有哪些
Spring Cloud 的核心模块就像一套精心设计的工具箱,每个模块都扮演着特定的角色,共同构建起微服务架构的坚实基础。 1. Spring Cloud Netflix(部分组件已迁移或弃用,但仍是理解 Spring Cloud 的重要参考): …...
java_将数据存入elasticsearch进行高效搜索
使用技术简介: (1) 使用Nginx实现反向代理,使前端可以调用多个微服务 (2) 使用nacos将多个服务管理关联起来 (3) 将数据存入elasticsearch进行高效搜索 (4) 使用消息队列rabbitmq进行消息的传递 (5) 使用 openfeign 进行多个服务之间的api调用 参…...
RAG中的文本切分策略详解
RAG中的文本切分策略详解 1. 选择RAG中的文本切分策略 1.1 不同的文本切分策略 1. CharacterTextSplitter - 这是最简单的方法。它默认基于字符(默认为"")来切割,并且通过字符的数量来衡量块的长度 2. RecursiveCharacterTextSplitter - 基于字符列表拆分文本。 …...
1-1 电场基本概念
目录: 目录 目录: 1.0 电荷守恒定律 2.0 互斥与相吸 3.0 电场的概念 4.0 库伦定律 5.0 矢量的概念 1.0 电荷守恒定律 电荷守恒定律是物理学中的一个基本原理,它指出在一个封闭系统内,电荷的总量是保持不变的。这意味着电荷既…...
SpringBoot初始化执行自定义接口
SpringBoot初始化执行自定义接口 直接加载接口的方法上即可 PostConstructpublic void init() {//加载初始化数据}PostConstruct是一个在Java EE 5规范中引入的注解,用于标记在依赖注入完成后需要执行的方法。这个注解定义在javax.annotation包中,而不…...
【Ubuntu与Linux操作系统:一、Ubuntu安装与基本使用】
第1章 Ubuntu安装与基本使用 1.1 Linux与Ubuntu Linux是一种开源、类Unix操作系统内核,拥有高稳定性和强大的网络功能。由于其开源性和灵活性,Linux被广泛应用于服务器、嵌入式设备以及桌面环境中。 Ubuntu是基于Debian的一个流行Linux发行版…...
C++大端小端判断方法
文章目录 大端小端定义判断方法方法一:利用联合体(Union)特性判断方法二:通过指针类型转换判断方法三:利用位运算与移位操作判断方法四:使用系统提供的字节序相关宏(特定平台支持) 联…...
【IO编程】标准IO和文件IO的对比
标准 I/O 和 文件 I/O 是两种常见的输入输出操作方式。它们的核心功能都是处理数据流,但使用场景和实现方式有所不同,适用于不同的需求。 标准 I/O 标准 I/O 是指与标准输入、标准输出和标准错误流(分别为 stdin、stdout 和 stderr…...
C#范围表达式,模式匹配,逆变和协变--11
目录 一.范围表达式 1.概述 2.语法 3.代码示例 4.实现原理 5.应用场景 二.模式匹配 1.概述 2.核心概念 3.常用模式类型 4.Switch表达式 5.使用示例 6.优势 三.逆变和协变 1.概述 2.泛型类型参数的变性 3.协变示例 4.逆变示例 5.注意事项 6.应用场景 总结 一…...
矩阵求逆的几种方式
矩阵求逆的几种方式(以二阶为例) 矩阵求逆的方法有多种,以下是常用的几种方式总结: 1. 行列式公式法 这是最常见的方法,适用于 2 2 2 \times 2 22矩阵。 对于矩阵: Φ [ a b c d ] , \Phi \begin{bma…...
全新市场阶段, Plume 生态不断壮大的 RWAfi 版图
加密市场在 2024 年迎来了新的里程碑。BTC 不仅成功推出 ETF,以 BTC 为代表的主流加密货币还在一系列传统金融机构的推动下逐步与主流金融市场接轨。与此同时,随着特朗普成功当选下一任美国总统,他承诺推出一系列友好的加密政策,并…...
HTTPS SSL/TLS 工作流程
目录 一、HTTP/HTTPS 简介1、HTTP协议相关内容2、HTTPS协议3、HTTP版本差异: 二、HTTPS 协议工作流程解析1. 客户端请求 SSL 握手2. 服务端接收 SSL 握手连接3. TLS 握手中的密钥协商4. HTTP 数据的加密与解密5. 安全性保障 三、HTTPS 协议的相关知识拓展1. TLS 与 …...
基于异步IO的io_uring
基于异步IO的io_uring 1. io_uring的实现原理 io_uring使用了一种异步IO机制,它通过一对环形缓冲区(ring buffer)实现用户态于内核态之间的高效通信,用户只需将IO请求放入提交队列,当内核完成IO请求时,会将结果放入完成队列&…...
【redis】centos7下安装redis7
在CentOS 7下安装Redis7可以通过以下两种方法实现:手动编译安装和使用YUM进行安装。 CentOS 7系统的环境和版本: $ cat /etc/centos-release CentOS Linux release 7.9.2009 (Core)手动编译安装 参考官方文档:https://redis.io/docs/lates…...
信息系统项目管理-采购管理-采购清单示例
序号类别产品/服务名称规格/功能描述数量备注1硬件服务器高性能处理器,大容量存储10HP、DELL2网络设备高速路由器和交换机10华为3工作站多核处理器,高分辨率显示器25国产设备4移动检查设备手持式移动检查仪,可连接云平台30国产设备5打印机和扫…...
python 代码使用 DeepXDE 库实现了一个求解二维非线性偏微分方程(PDE)的功能
import deepxde as dde import numpy as np import matplotlib.pyplot as plt import tensorflow as tf# 设置时空计算域 Lx 1 # x 范围从 0 到 1 Ly 1 # y 范围从 0 到 1 Lt 0.05 # t 范围从 0 到 0.05 geom dde.geometry.Rectangle([0, 0], [Lx, Ly]) # 空间域 timed…...
后端技术选型 sa-token校验学习 下 结合项目学习 后端鉴权
目录 后端注册拦截器 实现对 WebMvcConfigurer 接口的类实现 静态变量 方法重写 注册 Spring Framework拦截器 Sa-Token中SaServletFilter拦截器 思考 为什么使用两个拦截器 1. Spring Framework 拦截器 2. SaServletFilter 为什么要注册两个拦截器? 总结 …...
继承(8)
大家好,今天我们来学习一下继承方式相关的知识,有助于我们对java的继承有更深的了解,话不多说,来看。 1.10 继承方式 在现实生活中,事物之间的关系是非常复杂,灵活多样。 Java中支持以下几种继承方式: 单继承: 多层…...
深度学习-图神经网络-超图概念及在Hyper-YOLO的应用(小白也看懂)
为什么需要超图? 在一个复杂系统中,某些节点(实体)之间的互动可能不是仅限于两个节点之间的关系,而是多个节点同时参与的更复杂的关系(超边)。简单说就是为了更好的描述事物之间的关系…...
django基于Python的校园个人闲置物品换购平台
Django 基于 Python 的校园个人闲置物品换购平台 一、平台概述 Django 基于 Python 的校园个人闲置物品换购平台是专为校园师生打造的一个便捷、环保且充满活力的线上交易场所。它借助 Django 这一强大的 Python Web 开发框架,整合了校园内丰富的闲置物品资源&…...
opencv的NLM去噪算法
NLM(Non-Local Means)去噪算法是一种基于图像块(patch)相似性的去噪方法。其基本原理是: 图像块相似性:算法首先定义了一个搜索窗口(search window),然后在该窗口内寻找…...
嵌入式系统中的 OpenCV 与 OpenGLES 协同应用
🎬 秋野酱:《个人主页》 🔥 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 一、OpenCV 在嵌入式中的基石地位二、OpenGLES 为嵌入式图形渲染赋能三、二者协同的精妙之处四、面临的挑战与应对策略 在嵌入式开…...
第三十六章 Spring之假如让你来写MVC——拦截器篇
Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…...