前言

题目来自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一样被存储了下来。之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。

HTML5离线缓存

5、可以使用Canvas API、SVG等绘制高性能的动画

暂时不会