html5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML，是构建Web内容的一种语言描述方式，HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用。
1、HTML5新增语义化标签（h5新标签）有哪些？
语义化标签：根据内容的结构化选择合适的标签，便于开发者阅读和维护，同时也让浏览器很好地解析，语义化利于SEO。
一.新增块级元素标签
1.header 页眉 2.导航标签<nav> 3.main 主要内容 4.<aside>侧边栏标签
5.footer 页脚 6.<section>定义文档某个区域 7.内容标签 <article>
8.<details>关于查看详情出现与隐藏的情况
9.<figure>标签规定独立的流内容（图像、图表、照片、代码等等（ figure 元素的内容应该与主体
内容不相关，但如果被删除，则不应对文档流产生影响。）
二.新增行内块元素标签
10.进度条<progress>
11.度量衡<meter>
三、新增行内元素标签
12.<time> 标签定义公历的时间（24 小时制）或日期
13. 标记标签<mark>
其他新增的html5语义化标签：1、video，表示一段视频并提供播放的用户界面；2、audio，表示音频；3、canvas，表示位图区域；4、source，表示为video和audio提供数据源；5、svg，用于定义矢量图等等。
块标签，行标签，行内块标签的区别：
一、块级元素标签
1、独占一行，不和其他元素待在同一行
2、可以设置宽高
常见的块级标签有：<h1-h6>统称h标签、<ul>是无序<li> 、<ol>是有序列表<li>、<dl>< dd>< dt>、
<p>、<div>、<table>< tr>< td><th>、<hr>水平线、<fieldset> <legend>
(块级元素就算设置了宽高也只有再转换成行内或行内块元素才能和其他元素待在一行)
二、行内元素标签
1、能和其他元素待在一行
2、不可以设置宽高（但转化成块级或者行内块级就可以）
常见的行级标签：<a>、<span>（组合文档中的行内元素） 、<u>（定义下划线文本）、<em>（文本表示为强调且斜体）、
<i>（斜体的文本）、<b>(定义粗体的文本)
三、行内块元素标签
1、能和其他元素待在一行
2、能设置宽高
常见的行内块标签：<img>、<input>、<textarea>、<select> 、<option>、
<canvas>(但画布转换成行内元素依然可以设置宽高，其他元素只要转换成行内元素就不可以设置宽高了)(canvas受限于CORS策略,存在跨域问题)、
<svg>(但转换成行内元素依然可以设置宽高，其他元素只要转换成行内元素就不可以设置宽高了)
注：h标签是块级标签，不是行内标签，如<canvas>画布、<svg>、<img>、<input>等是行内块标签，行内块标签准确来说就是行内块标签，但认为是行内标签也没问题，但不能认为是块级标签
HTML中的标签大致分为双标签（有开始标签+结束标签）和单标签两种，单标签里有的标签是空标签，空标签指使用该标签但没有内容会在页面上显示。
双标签：<div></div>
单标签：
<hr />//水平线
<img />//图片
<input />//用于搜集用户信息
单标签也是空标签的有：
<base />//基础链接
<meta />//元数据
<br />//换行
<link />//外部链接
<area />//定义图像中的可点击区域，area 标签总是嵌套在 <map></map> 标签中。
其他空标签：<head></head> 、 <title></title>、<script></script>
html5移除的元素有：acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt、s、u等。
2、CSS盒模型是什么？CSS盒模型的计算方式？选择器有哪些？优先级顺序是什么？CSS3新特性有哪些？
CSS3盒模型是CSS技术所使用的一种思维模型，封装html元素，描述了元素所占的空间，内容(content)、内边距(padding)、边框(border)、外边距(margin)都是盒子模式的属性
标准盒子模型的尺寸为：“内容的宽高+两侧内边距padding的大小+两侧边框border的大小”；而IE盒子模型的尺寸直接就为：“内容的宽高”，盒子设置的宽/高属性就是盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现。
1、标准盒子的尺寸计算
盒子自身的尺寸：内容的宽高+两侧内边距的大小+两侧边框的大小
盒子在页面中占位的尺寸：内容的宽高+两侧内边距+两侧边框+两侧外边距
2、 IE盒子的尺寸计算
盒子自身的尺寸：内容的宽高
盒子在页面中占位的尺寸：内容的宽高+两侧外边距
IE盒子直接将宽/高属性设定为盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现
通配符选择器 < 伪类选择器<标签选择器、后代选择器、相邻兄弟选择器 < 类选择器 < 属性选择器< id选择器 <（内联样式权重<!important权重）
CSS3新特性：1.属性选择器 2. “:root”、“:empty”等伪类 3.圆角 border-radius 4. box-shadow盒阴影 5.背景图像 6. Transition动画效果、transform属性
3、CSS常用的定位方式有哪些？弹性布局Flex及其常用的属性？实现一个元素上下左右居中对齐有哪些方法？
position定位四种方式：relative–相对定位 absolute–绝对定位 fixed–固定定位static–默认值静态定位
Flex布局常用的属性：justify-content、align-items、flex-wrap
实现一个元素上下左右居中对齐的方法：
1.子绝父相后，子部分先left:50%和top:50% ，子部分再用margin-left和margin-top向左向上移动本身宽度和高度的一半
2. 子绝父相后，子部分先left:50%和top:50% ，子部分再用transform:translate(-50%,-50%)）向左向上移动本身宽度和高度的一半
3. 父元素设置成弹性盒，子元素横向居中，纵向居中
4. 子绝父相后，上下左右设置为0，然后利用margin:auto(注：只使用position:absolute和margin:auto，absolute会使margin失效，但设置完左右后，左右居中生效，设置完上下后，上下居中生效)，且想使用margin:auto也只能这样搭配去达到效果
4、响应式布局是什么？实现响应式布局有哪些方法？
响应式布局是就是一个网站能够兼容多个终端。
实现响应式布局的方法 1. @media媒体查询 2. flex弹性布局 3.百分比布局 4.利用vw 和vh
5.利用rem或者em
5.前端性能优化的方法：
- 减少HTTP请求，如使用base64图片处理、文件合并、利用客户端缓存方法
- 使用CDN服务
- 避免不必要的dom操作，减少重绘回流
- 前端代码结构的优化，如减少DOM深度及DOM数量
- 利用事件代理
css 、html、js注释代码的区别（ctrl+c快捷键）
<style>
li{
/* list-style:armenian; */ 注释
}
/* span{ 注释
width: 200px;
height: 100px;
} */
</style>
</head>
<body>
<!-- <div>22</div> --> 注释
<script>
// var a 注释
</script>
</body>
