当前位置:首页 > Web开发 > 正文

每个meta元素只能用于一种用途

2024-03-31 Web开发

文章同步到github

以前没怎么太注意过meta标签的感化,只是简单了解一些常用属性,此刻结合小我私家了解的进行记录与总结:

元数据 首先需要了解一下元数据(metadata)元素的观点,用来构建HTML文档的根基布局,以及就如何措置惩罚惩罚文档向浏览器供给信息和指示,它们自己不是文档内容,但供给了关于后面文档内容的信息。——出自《html5权威指南》

如title、base、meta都是元数据元素。本文主要介绍<meta>。

<meta>元素

<meta> 元素可供给有关页面的元信息(meta-information),好比针对搜索引擎和更新频度的描述和关键词。--W3school

<meta>元素可以界说文档的各类元数据,供给各类文档信息,通俗点说就是可以理解为供给了关于网站的各类信息。html文档中可以包罗多个<meta>元素,每个<meta>元素只能用于一种用途,如果想界说多个文档信息,则需要在head标签中添加多个meta元素。

元素 meta
父元素   head  
属性   http-equiv、name、content、charset  
HTML5中的变革   1. charset为HTML5中新增的,用来声明字符编码;2. http-equiv属性在HTML4中有很多值,在HTML5中只有refresh、default-style、content-type可用  
<meta>具体用途

<meta>元素出去charset属性外,都是http-equiv属性或name属性结合content来使用

1. 指命名/值对界说元数据

name属性与content属性结合使用, name用来暗示元数据的类型,暗示当前<meta>标签的具体感化;content属性用来供给值。

<meta content="具体描述信息">

例如:

<!DOCTYPE HTML> <html> <head> <title>demo</title> <meta content="电商,物流"> <meta content="张三"> <meta content="网站描述..."> </head> <body> <div>welcome</div> </body> </html> 元数据名称(name的值) 说明
application name   当前页所属Web应用系统的名称  
keywords   描述网站内容的关键词,以逗号离隔,用于SEO搜索  
description   当前页的说明  
author   当前页的作者名  
copyright   版权信息  
renderer   renderer是为双核浏览器筹备的,用于指定双核浏览器默认以何种方法衬着页面  
viewreport   它供给有关视口初始巨细的提示,仅供移动设备使用  

viewreport

技术图片

备注:图片截取自MDN

主要介绍一个当meta标签的name属性值为viewreport时的视口的巨细

1.mate标签name属性不设置viewreport

如果不设置name的值为viewreport,默认视口宽度为980

2.mate标签name属性设置viewreport

1.content内容为空时,默认视口宽度为980

2.content设置width,不设置initail-scale时,视口宽度为设置的width值

3.content不设置width,只设置initail-scale时,是可以按照initail-scale的值计算出视口的宽度

initail-scale = 屏幕宽度 / 视口宽度

4.content同时设置width和initail-scale时,视口宽度为width的值,页面显示凭据initail-scale比率进行缩放

5.一般都是进行如下设置,来实现视口宽即是设备宽,,构造完成后屏幕显示也不进行缩放

<meta content="width=device-width, initial-scale=1.0">

renderer

<meta content="webkit"> //默认webkit内核 <meta content="ie-comp"> //默认IE兼容模式 <meta content="ie-stand"> //默认IE标准模式 <meta content="webkit|ie-comp|ie-stand"> 2. 声明字符编码

charset属性为HTML5新增的属性,用于声明字符编码,以下两种写法效果一样

<meta charset="utf-8"> //HTML5 <meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML 3. 模拟http标头字段

http-equiv属性与content属性结合使用, http-equiv属性为指定所要模拟的标头字段的名称,content属性用来供给值。

<meta http-equiv="参数" content="具体的描述">

content-Type 声明网页字符编码:

<meta http-equiv="content-Type" content="text/html charset=UTF-8">

refresh 指定一个时间间隔(以秒为单位),在此时间过去之后从处事器从头载入当前页面,也可以此外指定一个页面.

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">//2秒后在当前页跳转到百度

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31272.html