html-meta标签详解(代码片段)

水香木鱼 水香木鱼     2022-11-29     795

关键词:

一、博主介绍

💒首页:水香木鱼

🛫专栏:HTML

简介: 博主姓:,名:春波。花名 “水香木鱼”,星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。

🔋 充电:相信付出终将会得到回报!


二、笔芯文章

<meta>标签用于设置或说明网页的元数据,必须放在<head>里面。

一个<meta>标签就是一项元数据,网页可以有多个<meta><meta>标签约定放在<head>内容的最前面。

不管什么样的网页,一般都可以放置以下两个<meta>标签。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>

上面例子中,第一个<meta>标签表示网页采用UTF-8格式编码,第二个<meta>标签表示网页在手机端可以自动缩放。

本期为大家提供的是前端HTML-mate 。一🔎 <meta>标签有五个属性,下面依次介绍。

(1)、charset 属性

<meta>标签的charset属性,用来指定网页的编码方式。该属性非常重要,如果设置得不正确,浏览器可能无法正确解码,就会显示乱码。

<meta charset="utf-8">

上面代码声明,网页为 UTF-8 编码。虽然开发者可以使用其他的编码方式,但正确的做法几乎总是应该采用 UTF-8。

注意,这里声明的编码方式,应该与网页实际的编码方式一致,即声明了utf-8,网页就应该使用 UTF-8 编码保存。

如果这里声明了utf-8,实际却是使用另一种编码(比如 GB2312),并不会导致浏览器的自动转码,网页可能会显示为乱码。

(2)、name 属性,content 属性

<meta>标签的name属性表示元数据的名字,content属性表示元数据的值。

它们合在一起使用,就可以为网页指定一项元数据。

<head>
  <meta name="description" content="HTML 语言入门">
  <meta name="keywords" content="HTML,教程">
  <meta name="author" content="张三">
</head>

上面代码包含了三个元数据:description是网页内容的描述,keywords是网页内容的关键字,author是网页作者。

元数据有很多种,大部分涉及浏览器内部工作机制,或者特定的使用场景,这里就不一一介绍了。下面是一些例子。

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Application Name">
<meta name="generator" content="program">
<meta name="subject" content="your document's subject">
<meta name="referrer" content="no-referrer">

(3)、http-equiv 属性,content 属性

<meta>标签的http-equiv属性用来补充 HTTP 回应的头信息字段,如果服务器发回的 HTTP 回应缺少某个字段,就可以用它补充。

<meta>标签的content属性是对应的字段内容。这两个属性与 HTTP 协议相关,属于高级用法,这里就不详细介绍了。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

上面代码设定 HTTP 回应的Content-Security-Policy字段。

下面是另一些例子。

<meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;URL='http://website.com'">

三、博主致谢

感谢小伙伴们,耐心的阅读完本篇文章,关注👉 水香木鱼🔔 获取更多精彩文章!

⭐⭐⭐ 别忘记一键三连呦!


文章摘自:----网道互联网文档计划----

html-meta标签详解

meta标签的作用搜索引擎(SEO)优化;定义页面使用语言;自动刷新页面;控制页面缓存;网页定级评价;控制页面显示的窗口;等等...meta使用<meta>标签总共有4个属性,不同的属性和值组成了网页不同的功能:charset(HTML5新... 查看详情

marquee标签详解(代码片段)

<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们都是... 查看详情

python中verbaim标签使用详解(代码片段)

verbatim标签:默认在“DTL”模板中是会去解析那些特殊字符串的,比如%和%以及等。如果你在某个代码片段中不想使用“DTL”的解析引擎,那么就可以把这个代码片段放在“verbatim”标签中,之后在使用特定的解析引擎进行解析。... 查看详情

jstl详解(代码片段)

一、JSTL标签介绍 1、什么是JSTL?     JSTL是apache对EL表达式的扩展(也就是说JSTL依赖EL),JSTL是标签语言!JSTL标签使用以来非常方便,它与JSP动作标签一样,只不过它不是JSP内置的标签,需要我们自己导包... 查看详情

gnuradio学习streamtags流标签详解(代码片段)

Introduction(介绍)APIExtensionstothegr::block(gr::block的API扩展)StreamTagsAPI(流标签API)AddingaTagtoaStream(向流中增加一个标签)GettingtagsfromaStream(从流中 查看详情

androidapplication和activity标签详解(代码片段)

Application标签android:allowTaskReparenting  android:allowTaskReparenting=[“true”|“false”]  表明了这个应用在resettask时,它的所有activity是否可以从打开它们的task栈中迁移到它们声明的taskAffinity亲和性(taskAffinity属性可以查... 查看详情

html详解(代码片段)

1.网页基本标签<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>基本标签学习</title></head><body><!--养成良好的规范,自闭和标签加上/--><!--标题标签--><h1&g 查看详情

全网最全html标签详解大全-第一篇建议收藏(代码片段)

前文导读:前端学习路线Html代码都是由标签组成的,标签就是最基础的东西,所以我们要重点学习这些标签。本人爆肝整理了几乎所有常用的标签详解,期待各位的关注与支持。废话少说直接进入重点。基本结构... 查看详情

springmvc常用注解标签详解(代码片段)

1、@Controller在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Model 返回给对应的View 进行展示。在SpringMVC 中... 查看详情

javaweb详解(第六篇)之jstl标签简介(代码片段)

JavaWeb详解(第六篇)之JSTL标签简介1、JSTL概述1.1、什么是JSTLJSTL全称是指JavaServerPagesStandardTagLibrary(JSP标准标签库),提供了一系列的JSP标签,可以应用于各种领域,如:基本输入输出、流程控制... 查看详情

mybatis配置文件——相关标签详解(代码片段)

目录一、Mybatis配置文件—properties标签二、Mybatis配置文件—settings标签三、Mybatis配置文件—plugins标签四、Mybatis配置文件—typeAliases标签五、Mybatis配置文件—environments标签六、Mybatis配置文件—mappers标签一、Mybatis配置文件—propert... 查看详情

selectkey标签详解(代码片段)

1.为什么要使用selectKey数据库主键包括自增和非自增,有时候新增一条数据不仅仅知道成功就行,后边的逻辑可能还需要这个新增的主键,这时候再查询数据库就有点儿耗时耗力,我们可以采用selectKey来帮助我们... 查看详情

idea新建聚合项目并附上标签详解(代码片段)

首先新建父工程新建springboot项目填写项目信息指定该子项目的路径如果是组件类型的子项目可以删除application.xml和启动类父工程pom文件<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4. 查看详情

idea新建聚合项目并附上标签详解(代码片段)

首先新建父工程新建springboot项目填写项目信息指定该子项目的路径如果是组件类型的子项目可以删除application.xml和启动类父工程pom文件<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4. 查看详情

spring从入门到精通—bean标签详解(代码片段)

Bean标签基本配置用于配置对象交由Spring来创建。默认情况下它调用的是类中的无参构造函数,如果没有无参构造函数则不能创建成功。基本属性:id:Bean实例在Spring容器中的唯一标识class:Bean的全限定名称Bean标签范围配置scope:... 查看详情

spring之bean标签属性详解(代码片段)

一、bean标签属性id:bean在spring容器的唯一标识,spring容器中不可能同时存在两个相同的id。class:类的全限定名(类名+包名),用“.”号连接name:设置别名,在BeanFactory的getBean(“name”)中可以获取相应的bean。需要注意的是... 查看详情

javaweb——html表单标签详解(inputlabelselecttextarea)(代码片段)

目录1、表单标签概述2、表单项标签3、注册页面案例实现1、表单标签概述表单,是用于采集用户输入数据的,用于和服务器进行交互。比如登录系统,使用的标签是form,可以定义一个范围,范围代表采集用户... 查看详情

kubernetesyaml详解(代码片段)

【参考文章】:Kubernetes之yaml文件详解(汇总-详细)1.yaml标签详解#test-podapiVersion:v1#指定api版本,此值必须在kubectlapiversion中kind:Pod#指定创建资源的角色/类型metadata:#资源的元数据/属性name:test-pod#资源的名字,在同一个namespace中必... 查看详情