前言
题目来自ConardLi的blog
写的是自己的题解，水平有限，所以仅供参考
代码会整合在github，觉得有帮助就给个star吧~
正文
二、HTML和CSS
HTML
1、从规范的角度理解HTML，从分类和语义的角度使用标签
语义化
html5的主要进步之一就是引入了语义化：
- header
- footer
- section
- aside
- main
- nav
- address
它通常在主页<footer>中用于标记企业的邮寄地址，电话号码，客户服务邮箱地址等等
block，inline和inlinke-block
display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
display:inline
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
- 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
inline-block的缺陷
- 两个inline-block元素中间有空白间隔
原因：我们的代码中的换行和空格等都会产生这样的间隔，除非我们把代码首尾相连写在一起，但是这样的代码并不容易阅读。
还有一个解决办法是设置父元素font-size：0；因为空白字符也是一个字符，只要设置为0，则间隔就消失了。
- 左边inline-block元素和右边inline-block元素中的文字始终处于底端对齐的状态
解决方法：
给两个元素各加上，overflow: hidden和vertical-align：middle
2、常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式
3、元信息类标签(head、title、meta)的使用目的和配置方法
元信息：描述自身信息
head：
1、head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。
2、如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。title：
网页标题base ：
base 标签作用是给页面上所有的 URL 相对地址提供一个基础。mate:
表示的是一个键值对，是一种通用的元信息表示符
1、指定字符集
<meta charset="UTF-8">
2、http-equiv
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
3、viewport
移动端适配的页面，应该把用户缩放功能禁止掉，宽度设为设备宽度
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
4、HTML5离线缓存原理
HTML5的离线存储是基于一个manifest文件(缓存清单文件，后缀为.appcache)的缓存机制(不是存储技术)，通过这个文件上的清单解析离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。
5、可以使用Canvas API、SVG等绘制高性能的动画
暂时不会
