关于HTML
img标签的title和alt属性有什么区别
- alt：图片加载失败时，显示在网页上的替代文字
- title：鼠标（手机端该属性无意义）放在图片上时显示的文字
图片懒加载的原理
图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。
懒加载的思路及实现代码详见js实现图片懒加载原理
H5新增了哪些标签？
布局标签：header、nav、article、aside、main、section、footer
媒体标签：audio、video
绘图元素：canvas
块级元素、行内元素分别有哪些？
块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite
SVG和CANVAS的区别？
SVG
表示以XML格式定义图像的可伸缩矢量图形。
CANVAS
通过 JavaScript 来绘制 2D 图形。
二者比较
svg如何调整颜色
标签fill属性设置即可
关于CSS
css3新的特性
CSS3边框如border-radius，box-shadow等；
CSS3背景如background-size，background-origin等；
CSS3 2D,3D转换如transform等；CSS3动画如animation等。
RGBA和透明度
是RGB颜色模型的一个扩展。本质上，在设置元素中添加了一个alpha通道，即一个表示除红色、绿色和蓝色三种颜色之外的透明度的通道。
background属性
- background-image：设置元素的背景图像。
- background-origin：规定背景图片的定位区域。
- background-size ：规定背景图片的尺寸。
- background-repeat：设置是否及如何重复背景图像。
word-wrap属性
word-wrap 属性允许长单词或 URL 地址换行到下一行。
注：所有主流浏览器都支持 word-wrap 属性。
基础语法：
word-wrap: normal|break-word;
text-shadow属性
text-shadow 属性：向文本设置阴影。
text-shadow基础语法：
text-shadow： 5px 5px 5px #FF0000;
参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；
font-face属性
font-face属性：定义自己的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
border-radius属性
border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。
基础语法：
border-radius: 1-4 length|% / 1-4 length|%;
注：该属性允许您为元素添加圆角边框！
border-image属性
border-image：将图片规定为包围 div 元素的边框
border-image基础语法：
border-image: url(border.png) 30 30 round
box-shadow属性
box-shadow属性：向框添加一个或多个阴影。（盒阴影）
box-shadow基础语法：
box-shadow: 10px 10px 5px #888888
媒体查询
媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。
CSS水平垂直居中？
- Flexbox 布局
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 示例高度，可以是任意值 */
}
.child {
/* 子元素的样式 */
}
