蓁祎家进步中

# html 基础标签

返回：前端基础知识

# audio|video

TIP

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream

# iframe

# 跨域解决

  • document.domain

# meta

TIP

meta 是文档级元数据元素，用来表示那些不能由其它 HTML 元相关元素（<base>、<link>, <script>、<style>或 <title>）之一表示的任何元数据。

# name 属性

name 和 content 一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

  • author
    • 用来表示网页的作者的名字，例如某个组织或者机构。
  • description
    • 是一段简短而精确的、对页面内容的描述
<meta
  name="description"
  content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"
/>
1
2
3
4
  • keywords(keyword)
    • 与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类
<meta
  name="keyword"
  content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺"
/>
1
2
3
4
  • viewpoint
    • 为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。
  • robots
    • 表示爬虫对此页面的处理行为，或者说，应当遵守的规则，是用来做搜索引擎抓取的。
    • 它的 content 可以为：
      • all:搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索
      • none:搜索引擎讲忽略此网页
      • index:搜索引擎索引此网页
      • follow:搜索引擎继续通过此网页的链接索引搜索其它的网页
  • renderer
    • 用来指定双核浏览器的渲染方式，比如 360 浏览器，我们可以通过这个设置来指定 360 浏览器的渲染方式
<meta name="renderer" content="webkit" /> //默认webkit内核
<meta name="renderer" content="ie-comp" /> //默认IE兼容模式
<meta name="renderer" content="ie-stand" /> //默认IE标准模式
1
2
3

# http-equiv

http-equiv 也是和 content 一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

  • X-UA-Compatible
    • 我们最常见的 http-equiv 值可能就是 X-UA-Compatible 了，它常常长这个样子
<meta name="http-equiv" content="IE=edge,chrome=1" />
1

它是用来是做 IE 浏览器适配的。

  • IE=edge告诉浏览器，以当前浏览器支持的最新版本来渲染，IE9 就以 IE9 版本来渲染。
    • 这个属性支持的范围是 IE8-IE11
  • chrome=1告诉浏览器，如果当前 IE 浏览器安装了 Google Chrome Frame 插件，就以 chrome 内核来渲染页面。
  • 如果有 chrome 插件，就以 chrome 内核渲染，如果没有，就以当前浏览器支持的最高版本渲染。

TIP

如果在我们的 http 头部中也设置了这个属性，并且和 meta 中设置的有冲突，那么哪一个优先呢？
答案是：开发者偏好（meta元素）优先于 Web 服务器设置（HTTP头）

# content-type

用来声明文档类型和字符集

<meta name="Content-type" content="text/html;charset=utf-8" />
1

# x-dns-prefetch-control

一般来说，HTML 页面中的 a 标签会自动启用 DNS 提前解析来提升网站性能，但是在使用 https 协议的网站中失效了，我们可以设置：

<meta name="x-dns-prefetch-control" content="on" />
1

来打开 dns 对 a 标签的提前解析

# cache-control、Pragma、Expires

和缓存相关的设置，但是遗憾的是这些往往不生效，我们一般都通过 http headers 来设置缓存策略