Html Meta 标签

Html Meta 标签

标签定义及使用说明

元数据（Metadata）是数据的数据信息。

标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

 

属性：

属性	值	描述
charsetNew	character_set	定义文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type default-style refresh	把 content 属性关联到 HTTP 头部。
name	application-name author description generator keywords	把 content 属性关联到一个名称。

1. name属性

name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
meta标签中name属性语法格式是：

。

例子:

//用于告诉搜索引擎，你网页的关键字。

//用于告诉搜索引擎，你网站的主要内容。

//这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport，width属性控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。（相应有height及device-height属性，可能对包含基于视口高度调整大小及位置的元素的页面有用。）initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

//用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。

具体参数如下：

1.none : 搜索引擎将忽略此网页，等价于noindex，nofollow。

2.noindex : 搜索引擎不索引此网页。

3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。

4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。

5.index : 搜索引擎索引此网页。

6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

//默认webkit内核 ,给双核浏览器，比如360

//默认IE兼容模式

//默认IE标准模式

 

2. http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。

 //用于设定网页字符集，便于浏览器解析与渲染页面，旧的HTML，不推荐。

//指定IE和Chrome使用最新版本渲染当前页面(浏览器采取何种版本渲染当前页面)

//(指定请求和响应遵循的缓存机制)

以下几种用法：

1. no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
2. no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
3. public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
4. private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
5. maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒

//用于禁止当前页面在移动端浏览时，被百度自动转码

//(网页到期时间) 用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

//意思是2秒后跳转

//(cookie设定) 如果网页过期。那么这个网页存在本地的cookies也会被自动删除。

//网站用的语言

PWA技术

Progressive Web Apps（以下简称 PWA）以及构成 PWA 的一系列关键技术的出现，能够显著提高应用加载速度、甚至让 web 应用可以在离线环境使用的 Service Worker 与 Cache Storage；用于描述 web 应用元数据（metadata）、让 web 应用能够像原生应用一样被添加到主屏、全屏执行的 Web App Manifest；以及进一步提高 web 应用与操作系统集成能力，让 web 应用能在未被激活时发起推送通知的 Push API 与 Notification API 等等。

 

Web App Manifest

Web App Manifest，即通过一个清单文件向浏览器暴露 web 应用的元数据，包括名字、icon 的 URL 等，以备浏览器使用，比如在添加至主屏或推送通知时暴露给操作系统，从而增强 web 应用与操作系统的集成能力。

让 web 应用在移动设备上的体验更接近原生应用的尝试其实早在 2008 年的 iOS 1.1.3 与 iOS 2.1.0 时就开始了，它们分别为 web 应用增加了对自定义 icon 和全屏打开的支持。

但是很快，随着越来越多的私有平台通过 / 标签来为 web 应用添加「私货」， 很快就被塞满了：

 

分散又重复的元数据定义多余且难以维持同步，与 html 耦合在一起也加重了浏览器检查元数据未来变动的成本。

社区里开始出现使用 manifest 文件以中心化地描述元数据的方案

manifest.json

{

  "short_name": "Manifest Sample",

  "name": "Web Application Manifest Sample",

  "icons": [{

      "src": "launcher-icon-2x.png",

      "sizes": "96x96",

      "type": "image/png"

   }],

  "scope": "/sample/",

  "start_url": "/sample/index.html",

  "display": "standalone",

  "orientation": "landscape"

  "theme_color": "#000",

  "background_color": "#fff",

}

 

name、icons、display 都是我们比较熟悉的，而大部分新增的成员则为 web 应用带来了一系列以前 web 应用想做却做不到（或在之前只能靠 hack）的新特性：

 

scope：定义了 web 应用的浏览作用域，比如作用域外的 URL 就会打开浏览器而不会在当前 PWA 里继续浏览。

start_url：定义了一个 PWA 的入口页面。比如说你添加 Hux Blog 的任何一个文章到主屏，从主屏打开时都会访问 Hux Blog 的主页。

orientation：终于，我们可以锁定屏幕旋转了（喜极而泣…）

theme_color/background_color：主题色与背景色，用于配置一些可定制的操作系统 UI 以提高用户体验，比如 Android 的状态栏、任务栏等。

 

数据优化的方案

一个系统若是查大于增，可以有针对性的将数据预处理和做缓存。

数据预处理，一条数据有quality,efficiency,importment 做分数，经常要获取一条数据是其中一个分数低于8，或者都高于9的数据，一个在上传的时候对数据就保存字段low8或up9。

在Djano上的运用

class Product(models.Model):

    code = models.CharField(max_length=20,unique=True)

    name = models.CharField(max_length=60)

    othername = models.TextField(null=True, blank=True)

class Clause(models.Model):

    product = models.ForeignKey(Product)

    month = models.ForeignKey(Month)

    month_date = models.DateTimeField()

work_number = models.CharField(max_length=20)

class ProductSerializer(serializers.ModelSerializer):

    class Meta:

        model = Product

        fields = '__all__'

class ClauseHomeSerializer(serializers.ModelSerializer):

    product = ProductSerializer ()

    class Meta:

        model = Clause

        fields = '__all__'

一般给定一组项目id列表，要我们获取对应的clause数据。

products = Product.objects.filter(pk__in=myproductids 

clauses = Clause.objects.all().filter(product__in=products).filter(month=month))

serializer = ClauseHomeSerializer (clauses, many=True)

return serializer.data

 

优化方案

def changeProductMsg(ids=[]):

    products = Product.objects.all().filter(id__in=ids)

    mappings_data = {}

    for product in products:

        main_data[product.id] = product

return products, mappings_data

 

clauses_data = []

for clause in clauses:

   serializer = {'work_number': clause.work_number, 'grader': clause.grader,

       'product_name': clause.product_name, 'quality': clause.quality,

'main_product_id': mappings_data[clause.product.id].id,

                          'main_product_name': mappings_data[clause.product_id].name,

                          'main_product_code': mappings_data[clause.product_id].code,

}

  clauses_data.append(serializer)

return clause_data

小知识

网页防止黑客跨框架攻击，很简单，在你的网页中添加如下代码就可以了。

 

在IE5.5及以上版本的浏览器中，增加了页面过渡效果，经过检查和实验，IE中是可以的，谷歌浏览器是不支持的。

http-equiv 作用很多,这里的值为 Page-Enter 是指在页面进入的时候发生,其他值还有:

Page-Enter : 进入页面

Page-Exit  : 离开页面

Site-Enter : 进入网站

Site-Exit  : 离开网站

content 当然就是内容咯,这里表示页面过渡的效果设置,这里的两个属性表示分别表示

Duration  : 过渡速度

Transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式

 

IE中防止网页另存为的方法

 

Dom上的小技巧

onselectstart="return false" 取消选取、防止复制，

οnpaste="return false" 不准粘贴,

οncοpy="return false;"

oncut="return false;" 防止复制