1、关于HTML语义化，你知道都有哪些标签？
语义化就是让计算机能够快速读懂内容，高效的处理信息。搜索引擎只能通过标签来判断内容的语义，因为页面的很大一部分流量来自搜索引擎，要使页面尽可能地对搜索引擎友好，所以尽可能地使用语义化标签，如：
div是division分离，span是span范围，table是表格，ol是orderList有序列表，ul是unorderList无序列表，li是list item列表选项，html5进一步推进web语义化的发展，使用了一些新的标签有header、artical、address等。
2、HTML标签分类有哪些？都有啥特点?
- 块级标签
默认宽度是100%
块级标签独占一行
块级标签可以使用height设置高度
常见块级标签：div、p、h1~h6、ol、ul、table、form等等。
- 行级标签
默认宽度由内容撑开
行级标签不会自动换行，从左到右一次排列
行级标签height设置高度失效，高度由内容撑开。
常见行级标签：span、a、br、strong、lable、i、em。
- 行内块标签
结合行级和块级的优点
可以设置元素的宽高
还可以将多个元素显示在一行从左到右一次排列。
常见行内块标签：img、input。
3、网页编码设置有几种方式？
Charset属性规定HTML文档的字符编码，常见的属性值有以下几个：
- UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码，又称万国码。用在网页上可以同一页面显示中文简体繁体以及其他语言。
- GBK是汉字编码，是双字节码，可表示简体和繁体字。
- ISO8859-2字符集，也称Latin-2，收集了东欧字符。
4、HTML的框架优缺点有哪些？
Html框架有iframe和frame两个，将多个页面通过一个浏览器窗口显示。
框架的优点：
- 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，减少数据传输，加快网页加载速度。
- Iframe使用简单不需要引入任何插件，主要用于不需要搜索引擎搜索的页面。
- 方便制作导航，多个页面共用，方便开发和维护。
缺点：
- 会产生很多页面，不容易管理。
- 不方便打印，不能实现对frameset的打印。
- 浏览器后退按钮失效。
- 不利于SEO优化，不能为每个页面设置标题和关键字，影响搜索。
- 多数小型移动设备无法完全显示框架。
- 多框架页面会增加服务器的http请求。
- H5已经抛弃该标签。
5、HTML5有哪些新特性，移除了哪些元素？
H5新增了图像、位置、存储、多任务等功能。
新增元素：
- Canvas
- video和audio元素
- 本地离线缓存：localStorage长期存储，浏览器关闭之后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除。
- 语义化标签：artical、footer、header、nav、section
- 位置API：Geolocation
- 表单控件：calendar、date、time、email、search、url
- 新技术：web worker(运行在后台的js,独立于其他脚本，不影响页面性能。可以在页面继续任何操作，此时web worker在后台运行)、web socket
- 拖放API：drag、drop
移除元素：
- 框架元素：frame、frameset、noframes。
- 纯表现元素：basefont、font、center、u、big、strike、tt
Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
6、如何区分HTML和HTML5？
DOCUMENT声明方式是区分的重要元素。
- Html声明方式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd”>
- Html5声明方式：<!DOCTYPE html>
根据新增加的结构、功能来区分。H5有好多新增语义化标签。
7、H5文件离线存储怎么使用，工作原理是什么？
在线情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有改变，就不会有任何操作，如果文件改变了，那么就会重新下载资源，并进行离线缓存。
页面头部加入manifest属性。如：<html manifest="demo.appcache">
在cache.manifest文件中编写离线存储的资源。
8、Cookies,sessionStorage和localStorage的区别？
共同点：都是保存在浏览器端，而且都是同源的。
区别：
- Cookies是为了标识用户身份而存储在用户本地的数据，始终在同源http请求中携带，在浏览器与服务器间来回传递，而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
- 存储大小差异。Cookie保存的数据很小，不能超过4k，而sessionStorage和localStorage保存数据大，可达到5M。
- 存储有效期不同。Cookie在设置的cookie过期前始终有效，而sessionStorage仅在浏览器关闭之前有效，localStorage始终有效，与浏览器窗口没关系。
- 作用域不同：cookie在所有同源窗口都是共享，sessionStorage不能在不同浏览器窗口上共享，localStorage在所有同源窗口都是共享的。
9、title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义，只表示标题，h1表示层次明确的标题，对页面信息抓取也有很大的影响。
strong标明重点内容，语气加强含义，b表示无意义的视觉表示
em表示强调文本，i是斜体，是无意义的视觉表示
视觉样式标签：b、u、i、s
语义样式标签：strong、em、ins、del、code
10、viewport 所有属性 ？
viewport是用户网页的可视区域，使用meta设置viewport时有很多属性，分别对以下各个属性介绍
- width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';
- initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
- minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
- maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
- height:设置layout viewport的高度，这个属性对我们并不重要，很少使用
- user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。
- target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素。
11、meta标签的name属性值？
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索机器人查找信息和分类信息用的。
Meta标签的name属性语法格式是：
<meta name=”参数”content=”具体的参数值”>
Name主要有以下几个参数：
- Keywords（关键字）：关键字用来告诉搜索引擎你网页的关键字是什么。
- Description（网站内容描述）：描述用来浏览器你的网页主要内容是什么。
- Robots（机器人向导）：robots用来搜索机器人哪些页面需要索引，哪些页面不需要索引。
- Author（作者）：添加网页作者信息。
Content的参数主要有name的参数来决定，如果是关键字的时候，多个关键字之间使用逗号隔开，一般使用5个关键字为宜；如果是描述的时候，描述长度一般控制在200字左右；如果是索引的时候，一般使用inde、noindex、none、all，默认是all。
