meta标签

Meta标签介绍:

  • <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
  • <meta>标签位于文档的头部,不包含任何内容。
  • <meta>提供的信息是用户不可见的。

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

常用的meta标签:

  1. http-equiv属性

相当于http的文件头作用,它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
默认3秒刷新一次页面
<meta http-equiv="Refresh" Content="3">

两种指定HTML的编码类型都可以

这种是简写
 <meta charset="UTF-8">

另外一种指定编码类型写法

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> == <meta charset="UTF-8">
两种指定编码类型写法
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 这种是简写-->
<meta charset="UTF-8"> <!-- 这种另外一种编码写法 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body> </body>
</html>
2.name属性

主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到。

<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />

只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO(search engine optimization,搜索引擎优化)。

 
<meta name=viewport content="width=device-width, initial-scale=1">

上面这个标签,是让我们网页支持移动端,移动设备优先


 

前端 HTML 常用标签 head标签相关内容 meta标签的更多相关文章

  1. 前端 HTML 常用标签 head标签相关内容 title标签 网页的标题信息

    title标签 <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中. 可以把它看成是一个网页 ...

  2. 前端 HTML 常用标签 head标签相关内容 style标签 定义内部样式表

    styple标签 <!-- 定义内部样式表 --> <style type="text/css"></style>

  3. 前端 HTML 常用标签 head标签相关内容 script标签

    script标签 定义JavaScript代码 <!--定义JavaScript代码--> <script type="text/javascript"> ...

  4. 前端 HTML 常用标签 head标签相关内容 link标签

    link标签 引入CSS样式文件 href="./index.css" CSS文件的路径 <!-- 引入CSS样式文件 --> <link rel="s ...

  5. 【Web前端HTML5&CSS3】03-字符实体与语义标签

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素(bloc ...

  6. 移动前端不得不了解的HTML5 head 头标签 —— Meta 标签

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  7. html标签,格式控制标签,内容容器标签,超链接标签,图片标签,表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  8. 移动前端工作的那些事---前端制作篇之meta标签篇

    移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移 ...

  9. 前端制作篇之meta标签篇

    移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上 ...

随机推荐

  1. AngularJS中$timeout和$interval的用法详解

    1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.controller('controllerCtrl', ['app', '$scope','$htt ...

  2. 一、K3 Cloud 实施指导《K3 Cloud实施手册》

    1.在BOS的单据体取不到序号字段 举例:单据体标识是FValueGrid,序号标识是FSeq,取到的序号标识要写成FValueGrid_FSeq才能识别到 2.k3 Cloud目前不支持在表头字段调 ...

  3. 同一个tomcat使用不同http端口配置多个web项目

    1.复制 conf/server.xml下的 复制粘贴新的一个Service元素下的所有内容,并修改name为Catalina2,<Service name="Catalina&quo ...

  4. 9.26/27 blog项目

    2018-9-26 18:05:20 放上一个老男孩b站视频连接 :https://shimo.im/docs/VN0BLgAIBdMVSa4S/ b站连接: https://space.bilibi ...

  5. .net core 支持apk下载

    在 app.UseStaticFiles(); 后面加上 app.UseStaticFiles(new StaticFileOptions { //FileProvider = new Physica ...

  6. ztree 文件夹类型的 树状图

    未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件 选择领导弹窗*/ .xuandao{ disp ...

  7. ipv6禁用导致rpcbind服务启动失败解决办法

    参考文档:http://blog.51cto.com/hld1992/2055028

  8. ML.NET速览

    什么是ML.NET? ML.NET是由微软创建,为.NET开发者准备的开源机器学习框架.它是跨平台的,可以在macOS,Linux及Windows上运行. 机器学习管道 ML.NET通过管道(pipe ...

  9. .NET Core开发日志——Linux版本的SQL Server

    SQL Server 2017版本已经可以在Linux系统上安装,但我在尝试.NET Core跨平台开发的时候使用的是Mac系统,所以这里记录了在Mac上安装SQL Server的过程. 最新的SQL ...

  10. Python:random模块

    近排练习代码时候经常会用到random模块,以防后面忘记还是需要记录一下. 首先导入模块: import random random.random():用于生成一个0到1的随机浮点数: 0 <= ...