前端面试题HTML-2

常用的meta标签有哪些？

meta标签由name和content属性定义，用来描述网页文档的属性，比如网页作者、网页描述、关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常见的meta标签：

charset：用来描述HTML文档的编码类型

<meta charset = "UTF-8" />

keywords：页面关键词

<meta name = "keywords" content = "关键词" />

description：页面描述

 <meta name = “description" content = "页面描述内容" />

refresh：页面重定向和刷新（下面的0指的是页面重定向秒数）

  <meta http-equiv = "refresh" content = "0;url = "/>

viewport：适配移动端，可以控制视口的大小和比例

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

其中，content参数有几种：

• width viewport：宽度
• height viewport：高度
• initial-scale：最大缩放比例
• minimum-scale：最小缩放比例
• user-scalable：是否允许用户缩放（yes/no） 

搜索引擎索引方式

 <meta name = “robots" content =”index，follow“ />

 其中，content参数有几种：

• all：文件将被检索，且页面上的链接可以被查询
• none：文件将不被检索，且页面上的链接不介意查询
• index：文件将被检索
• follow：页面上的链接可以被查询
• noindex：文件将不被检索
• nofollow：页面上的链接不可以被查询

HTML5有哪些更新？

• 新增语义化标签：nav、header、footer、aside、section、article
• 音频、视频标签：audio、video
• 数据存储：localStorage、sessionStorage
• canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
• input标签新增属性：placeholder、autocomplete、autofocus、required
• history API：go、forward、back、pushstate

移除的元素有：

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

img的srcset属性的作用？

响应式页面中经常用到根据屏幕密度设置不同的图片，这时就用到了img标签的srcset属性。该属性用于设置不同屏幕密度下，img会自动加载不同的图片，用法如下：

<img src = "image-128.png" srcset = "image-256.png 2x" />

使用上面代码可以实现在屏幕密度为1时加载image-128.png,在屏幕密度为2.x时加载image-256.png。 

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

sizes语法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。