【前端9】meta标签

【前端9】meta标签

Posted by LineXic on February 5, 2024

前言

本教程总结自作为前端,你必须要知道的meta标签知识发布,尚硅谷的有些看不太懂了😀

回顾

回顾之前先来写一下浏览器最标准的HTML格式

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
   <html>
 <head>
<meta charset="UTF-8">
  <title>简单的复习/总结</title>
</head>
  <boby>
  <!-- boby中写网页内容,如<h1>这样的标签 -->
<h1>HTML中的大标题</h1>
<boby>
</html>

其中doctype html用来告知浏览器使用HTML5编写 <html><head>是网页必写的标签它们都要有结束标签 <meat><title>都是写在<head>里的,作用分别是编辑网页信息和设置网页标题 而这篇文章就来详细说一说meat标签

meat标签

概览

MDN中是这样说的

HTML<meta>元素表示那些不能由其他 HTML 元相关(meta-related)元素表示的元数据信息。如:<base><link><script><style><title>

来看看meta定义的元数据类型

  • 如果设置了 name属性,meta元素提供的是文档级别的元数据,应用于整个页面。

  • 如果设置了http-equiv属性,meta元素则是编译指令,提供的信息与类似命名的HTTP头部相同 。
  • 如果设置了charset属性,meta元素是一个字符集声明,告诉文档使用哪种字符编码。

  • 如果设置了itemprop属性,meta元素提供用户定义的元数据。

我们其实只需要重点了解name就好

name属性

namecontent一起使用,前者表示元数据要表示属性后者表示元数据的

如果要表示网页开发的某一机构或者人就需要用到author,例如

1
<meta name="author" content="[email protected]">

description是一段简短而精确的、对页面内容的描述。以头条和taobao的description标签为例: pF81rwV.png pF81soT.png

keywords定义与页面内容相关的关键词,使用逗号分隔。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。还是以头条和taobao为例 CSDN_1707149423821

大概就是这么多了,这边在指路一下更多教程


%