1. 简述标签的语义化
    • 用正确的标签做正确的事情。
    • html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
    • 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
    • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
    • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
    1. 描述一下新增的h5标签和属性
      标签：
    • header定义头部
    • footer定义尾部
    • nav定义导航
    • article定义文章
    • section用于对网站或应用程序中页面上的内容进行分块
    • aside定义侧边栏
    • hgroup定义网页栏目或者模块之间的导航
    • figure，figcaption定义图片和图片标题组合
    • datalist定义下拉列表提示框
    • details显示或者隐藏用户需求的补充描述
    • video定义视频文件
    • audio定义音频文件

    属性：

    • contentEditable设置可编辑
    • hidden隐藏
    • spellcheck表示拼写检查
    • tabindex设置元素获取焦点的优先级
    • min定义最小值
    • max定义最大值
    • step表示步长
    • value默认值
    • autofocus自动聚焦
    • required设置必填项
    • pattern验证正则表达式
    1. css3新增选择器有哪些？哪些属性可以继承？哪些属性不可以继承？
    1. p[attr]  选中拥有attr属性的p标签元素
    2. div[attr=value] 选中attr=value值得div标签
    3. div[attr*=value]选中attr含有value值得div标签
    4. div[attr$=value]选中attr以value值结尾得div标签
    5. div[attr^=value]选中attr以value值开头得div标签
    6. div p:nth-of-type(3)选中div里面第3个p标签
    7. div span:nth-child(3)选中div里面第3个标签是span标签
    8. ul li:first-of-type选中ul中的第一个li标签
    9. div h3:first-child选中div中的第一个标签是h3标签
    10. p:last-child选中父元素里面的最后一个元素是p标签
    11. p:last-of-type选中父元素里面的最后一个p标签元素
    12. div:only-child选中父元素中只有一个子元素这个子元素是div标签
    13. div:only-of-type选中父元素中的唯一一个div标签（可以有其他的兄弟不是div）
    14. :empty选中没有子元素包括文本的元素
    15. :root选中页面的根元素html
    16. :selection选中被用户选中的文本的样式
    17. :disabled选中的是禁用状态的按钮
    18. :enabled选中的是启用状态的按钮
    19. :checked设置选中的单选或者复选框的样式
    20. :first-line选中第一行
    21. :first-letter选中第一个字符
    22. :target选中锚链接的目标元素
    23. div:after向div里面的后面添加伪元素
    24. div:before向div里面的前面添加伪元素
    25. li:nth-last-child(2n)选中倒数第偶数个元素是li标签
    26. li:nth-last-of-type(2n+1)选中倒数第奇数个li标签元素
    27. :not(p)选中非p标签的元素
    1. 继承属性：
    2.     关于文字排版的属性如：
    3.     font
    4.     word-break
    5.     letter-spacing
    6.     text-align
    7.     text-rendering
    8.     word-spacing
    9.     white-space
    10.     text-indent
    11.     text-shadow
    12.     line-height
    13.     color
    14.     visibility
    15. 非继承属性：
    16.     width，height，等处文字排版的属性外
    1. 介绍一下CSS的盒子模型？描述一下相关属性，低版本IE的盒子模型有什么不同的？
    1.     盒子模型有两种， IE 盒子模型、W3C标准盒子模型；
    2.     盒模型属性： 内容(width,height)、填充(padding)、边界(margin)、 边框(border)；
    3.     标准(W3C)盒模型：元素实际宽度 = width + padding + border
    4.     怪异(IE)盒模型：元素实际宽度 = width
    5.     区 别： IE 的 content 部分把 border 和 padding 计算了进去;
    6.     标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发IE盒模型计算宽高
    1. 介绍一下精灵图的作用，和base64图片有什么异同？
    • 当页面加载时，不再加载每一张图片，而是一次加载整个精灵图，从而大大减少了服务器的请求次数，减轻了服务器压力
    • 精灵图和base62图片都是为了减少http请求
    • 精灵图是将页面中许多细小的图片合并为一张大图，base64图片是将一张小图片编码成一串字符串，使用该字符串代替图像地址
    • 如果一张图片足够小且因为用处的特殊性无法被制作成精灵图（雪碧图），在整个网站的复用性很高且基本不会被更新时使用base64图片，否则使用精灵图
    1. 介绍让元素不可见的方法有哪些？
    1. visibility: hidden; 
    2. opacity: 0;
    3. position: absolute;使元素定位在可见区域之外
    4. display: none; 
    5. <div hidden="hidden">
    6. height: 0;
    1. 列举CSS清除浮动的原因和方法
    1. 原因：子元素添加浮动时如果父元素没有设置高度会造成父元素高度的塌陷此时需要对父元素清除浮动
    2. 方法：
    3.     定高法
    4.         给浮动元素的父元素设置高度
    5.     额外标签法
    6.         给浮动元素的父元素后面添加一个块元素，添加属性clear：both
    7.     给浮动元素的父元素添加属性：overflow:hidden
    8.     利用after伪元素清除浮动
    9.         给浮动元素的父元素加一个类名clearfix，通过after伪元素设置以下属性：
    10.         .clearfix:after{
    11.             content:"."     必须的元素
    12.             display:"block" 转化成块元素（默认是行内元素）
    13.             height:0;  将高度设置为0
    14.             clear：both;清除两端的浮动，必须作用在块元素上
    15.             visibility:hidden让伪元素的内容占位置
    16.         }
    1. CSS块元素水平和垂直居中有哪些方法？
    • 水平居中margin：0 auto；
      垂直居中：1.算数margin-top：(父元素高-子元素高)/2
    • 给父元素一个相对定位position: relative
      给子元素一个绝对定位position: absolute;
      left：50%
      top：50%
      margin-top：-本身高/2
      margin-left：-本身宽/2
    • 给父元素一个相对定位position: relative
      给子元素一个绝对定位position: absolute;
      position: absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
    1. css的margin重叠与穿透问题的解决办法
    1. 重叠问题解决：给两个元素同一个方向的margin
    2. 穿透问题解决办法：
    3.     1.给父元素添加一个边框
    4.     2.给父元素添加一个属性：overflow:hidden(溢出隐藏)
    5.     3.给父元素添加一个padding-top，但是此时高度要减去padding-top的值(替代margin-top的方法)
    1. 处理浏览器兼容问题的解决方案，其中css hack解决兼容的原理是什么？
    1. 兼容解决方案：条件注释;CSS Hack方法;meta标签兼容方法
    2. CSS Hack原理：利用不同浏览器对 CSS 的支持和解析结果不一样使用特殊符号编写针对特定浏览器样式。
    1. 解释下这个CSS选择器什么意思？
      [role=navigation] > ul a:not([href^=mailto]) {}
      表示选中role属性值为navigation的任何元素下面子元素ul下的除邮箱链接之外的所有a标签