元数据:meta元素
元数据就是描述数据的数据,HTML中用< meta>元素来添加元数据。
属性
charset
用来声明当前文档所使用的字符编码,推荐使用UTF-8。
content
用来指定元数据的内容,作为http-equiv或name属性的值。
http-equip
这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content定义
- content-language
用来定义页面使用的默认语言,这个指令已经过时。使用< html>元素上全局的lang属性代替它。 - content-type
定义了页面的字符编码,这个指定已经过时,使用< meta>元素的charset属性代替。 - set-cookie 为页面定义cookie,这个指令已经过时,用HTTP的Set-Cookie头部代替。
- content-security-policy 内容安全策略
它允许页面作者定义当前页的内容策略。内容策略主要指定允许的服务器源和脚本端点,这有助于防止跨站点脚本攻击。 - default-style
这个属性指定了在页面上使用的首选样式表。content属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值,或者必须匹配同一文档中的一个style上的 title 属性的值。
<head>
<meta http-equiv="default-style" content="first">
<style title="second">
p{color:red;}
</style>
<style title="first">
p{color:blue;}
</style>
</head>
<body>
<p>我的代码日记</p>
</body>
- refresh 定义了多久页面重新刷新或刷新以后跳转到另一个页面。
- 如果content只包含一个正整数,则是刷新页面的时间间隔;
- 如果content包含一个正整数并且跟着一个URL,则是跳转到指定链接的时间间隔
<meta http-equiv="refresh" content="5; url='http://www.baidu.com'">
name
定义了文档级元数据的名称,content定义了这个元数据的值
- application-name 定义了正运行在该网页上的网络应用名称。
- author 定义了文档的作者名称,可以用自由的格式去定义。
- description 对页面内容的简短和精确的描述。一些浏览器,如Firefox和Opera,将其用作书签页面的默认描述。
- generator 生成页面的软件的标识符,说明页面是有什么软件制作的。
- keywords 与页面内容相关的关键字,关键字之间用逗号分隔。
- creator 定义文档创建者的名称,与author类似。
- publisher 文档发布者的名称
- robots 定义搜索引擎爬虫与页面应该具有的行为
- viewport 定义了移动端页面的属性
Value | 可能值 | 描述 |
width | 一个正整数或者device-width | 以px为单位,定义viewport的宽度 |
height | 一个正整数或者device-width | 以px为单位,定义viewport的高度 |
initial-scale | 一个0.0到10.0之间的正数 | 定义设备宽度(纵向模式下的设备宽度或横向模式下的设备宽度)与视口大小之间的缩放比 |
maximum-scale | 一个0.0到10.0之间的正数 | 定义缩放的最大值 |
minimum-scale | 一个0.0到10.0之间的正数 | 定义缩放的小大值 |
user-scalable | bool值(yes或者no) | 如果设置为no,用户将不能放大或缩小网页。默认值为yes |
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
og标签
Open Graph Protocol本身是一套Metatags的规范,用来标注页面的类型和描述页面的内容。由Facebook在2010年F8会议上发布。
og标签是一种新的http头部标记,即Open Graph Protocol(开放内容协议)。在页面添加这种协议可以让网页成为一个“富媒体对象”,表示同意网页内容可以被其他社会化网站引用等。
目前Facebook、人人等SNS网站都支持该协议。任何网页只要遵守该协议,SNS网站就能从页面上提取最有效的信息并呈现给用户;也能让SNS网站按照页面上og标签规定的内容呈现给用户。
og:type | 表示页面的类型,常用值:article、news、book、movie、product…… |
og:title | 页面的标题 |
og:description | 页面的描述 |
og:url | 页面地址 |
og:image | 缩略图地址 |
og:site_name | 页面所在的网站名 |
og:videosrc | 视频或者Flash地址 |
og:audiosrc | 音频地址 |
<meta property="og:description" content="我的代码笔记">
添加图标
在head标签里添加一下代码
<link rel="shortcut icon" href="图标.ico" type="image/x-icon">