1、请列举几个行内元素、块级元素，以及相互转换的方法（请尽可能多的列举）。
行内元素：
常用标签：a、span、img、input、button、textarea、sub、sup、br等。
废弃但常用来做样式钩子的标签：b、u、i等。
特点：设置上下margin、height无效。高度由子元素撑开。
特例：
img可设置上下margin，当img的src指向一张存在的图片时，可设置高度。
input、button、textarea、select标签可设置高度、上下margin。
块级元素：
html、body、div、p、h、header、footer、nav等；
特点：单独成行。可正常设置宽高、margin。
行内转块级：
display: block/flex/box/table/grid/list-item;
position: absolute/fixed;
块级转行内：
display: inline/initial/unset/contents
行内块(同时具备行内元素和块级元素的特点)：
display: inlne-block/inline-box/inline-flex/inline-table/inline-grid;
TODO:有空安排一下，元素的对齐方式
扩展：
单标签元素有哪些？
img、input、br
单标签元素加不加闭合符有什么影响?
html5放宽了html的书写规范，其中标签元素大小写均可，单标签加不加闭合符也均可。
浏览器解析时，无论是否加了‘/’,解析后都没有斜杠。
但html4.0严格模式必须加。
2、web页面常用的图片格式有哪些？为什么？
位图：
又叫做点阵图，是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px（像素）。
表现的色彩比较丰富。
常见的位图图片格式有JPG、PNG、gif、Bmp等。
矢量图：
由一个个点链接在一起组成的，是根据几何特性来绘制的图像，和位图的分辨率是没有关系的。
因此图片放大后也不会失真，不会出现位图的马赛克的样子，也就是说可以无限放大图片。
矢量图形色彩不丰富，无法表现逼真的实物，矢量图常常用来表示标识、图标、Logo等简单直接的图像。
最常用的矢量图是svg格式的。
如何在网页中使用svg图片：https://www.cnblogs.com/sese/p/8669746.html
'css+svg实现一些动画特效：https://www.html5tricks.com/tag/svg/'
3、input标签有哪些类型，分别有什么作用？
4、请写出可以实现上传且只能上传图片的标签。
<input type="file" accept="image/*" />
请写出可以调用手机照相机的标签。
<input type="file" accept="audio/*;capture=microphone" />"
5、如何理解HTML语义化？
① seo层面：有利于搜索引擎，爬虫在抓取页面时依赖标签确定页上下文及关键字来确定权重
② 代码维护层面：良好的语义化使用习惯，有利于代码维护，能迅速定位到要维护的代码块
③ 页面渲染层面：在没有css的情况下，也能比较好的呈现页面的结构
6、h5新增了哪些特性？
一、标签
1、新增了一些语义化标签，如：header[页眉]、footer[页脚]、nav[导航]、section[部分]、aside[侧边]
2、新增功能性的标签，如：多媒体元素[video、audio、source]、绘图[canvas]、表单[output、keygen]
3、input标签新增了一些属性,如：color\range\date\week\emal\url
4、移除了一些标签，如：big\font\frame
二、本地存储
h5提供了sessionStorage、localStorage和indexedDB加强本地存储
注意：localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
三、离线Web
参考文章
https://www.jianshu.com/p/eeb36802f549
http://www.divcss5.com/html5/h54951.shtml
离线web特点离线浏览: 用户可以在离线状态下浏览网站内容更快的速度: 因为数据被存储在本地，所以速度会更快减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源
使用方法
1、添加缓存文件
在要缓存的网络应用的每个页面上都添加manifest属性。
manifest属性指向一个缓存目录，如：<html manifest="/cache.manifest">
2、缓存文件的配置
manifest文件可以保存为任意的扩展名，但mime-type 必须是 text/cache-manifest。
在服务器上部署时需要在服务器给缓存文件cache.manifest添加相应的mime-type
简单的清单格式如下：
CACHE MANIFEST
#version 1.3
CACHE:
img/1.jpg
img/2.jpg
test.css
NETWORK:
*
以上这4个文件将被缓存，要注意：离线存储的容量限制是5M
若其中指定的资源无法下载，就无法进行整个缓存更新进程。在这种情况下，浏览器将继续使用原应用缓存
3、判断浏览器是否支持离线存储：window.applicationCache
离线存储的更新机制
当用户本地再次联网，本地的离线存储资源需要检查是否需要更新，更新过程，也是通过manifest的更新来控制的
更新manifest文件，浏览器会自动的重新下载新的manifest文件
并在下一次刷新页面的时候进行资源文件的重新请求（第三次刷新替换本地缓存为最新缓存），
而且这个请求是全局性的，也就是所有在manifest缓存列表中文件都会被请求一次，
而不是单独请求某个特定修改过的资源文件，因为manifest是不知道哪个文件被修改过。
对于全局更新的担心是不必要的，因为对于没有更新过的资源文件，请求依旧是304响应，
只有真正更新过的资源文件才是200。
所以控制离线存储存储更新有2个步骤：
1、更新资源文件
2、更新manifest文件
备注：更新manifest文件，只要随意一处地方修改，浏览器就会感知，对于资源文件名通常是固定的，
比如1017.css，更新内容在资源文件名不更新的情况下，比较好的方式就是在manifest上修改，
其目的是告诉浏览器这个manifest文件被更新过。
w3c离线存储的API规范：
http://www.whatwg.org/specs/web-apps/current-work/#applicationcache
四、地理定位
h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。
这个对象有三个方法:getCurrentPosition()、watchPosition()、clearWatch()
页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。
navigator.geolocation.getCurrentPosition((options)=>{
let lat = position.coords.latitude //纬度
let lng = position.coords.longitude //经度
})
**7、延伸：**什么是web.worker？如何创建一个简单的web.worker实例？
阮一峰
https://www.ruanyifeng.com/blog/2018/07/web-worker.html
JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。
前面的任务没做完，后面的任务只能等着。
Web Worker 的作用，就是为 JavaScript 创造多线程环境。
允许主线程创建 Worker 线程，将一些任务分配给后者运行。
在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。
等到 Worker 线程完成计算任务，再把结果返回给主线程。
这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，
主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
8、若某HTML页面使用GBK字符集，CSS文件使用UTF-8字符集，请简述如何可以避免乱码问题？
1、把html页面里面的字符集设置为utf-8
2、web.cofig文件中配置<system.web>
<globalization
fileEncoding="utf-8"
requestEncoding="utf-8"
responseEncoding="utf-8"
culture="zh-CN"
/>
</system.web>
