JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以
jpeg 格式存储时，提供 11 级压缩级别
2. 请简述 css 盒子模型
一个 css 盒子从外到内可以分成四个部分：margin（外边距），border
（边框），padding（内边距），content（内容）。默认情况下，盒子的
width 和 height 属性只是设置 content（内容）的宽和高，
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框
3. 视频 / 音频标签的使用
视频：
视频标签属性：
src 需要播放的视频地址
width/height 设置播放视频的宽高，和 img 标签的宽高属性一样
autoplay 是否自动播放
controls 是否显示控制条
poster 没有播放之前显示的展位图片
loop 是否循环播放
perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属
性，perload 属性会失效。
muted 静音模式
音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用
4.HTML5 新增的内容有哪些
新增语义化标签
新增表单类型
表单元素
表单属性
表单事件
多媒体标签
5.Html5 新增的语义化标签有哪些
语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护
Header 页面头部 main 页面主要内容 footer 页面底部
Nav 导航栏 aside 侧边栏 article 加载页面一块独立内容
Section 相 当 于 div
figure 加 载 独 立 内 容 （ 上 图 下 字 ）
figcaption figure 的标题
Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须
配合 open 属性）
Embed 加载插件的标签 video 加载视频 audio 加载音频（支持格式
ogg，mp3，wav）
6.Css3 新增的特性
边框：
border-radios 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴
影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（
repeat 平铺 round 铺满
stretch 拉伸）
背景：
Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定
位
Background-clip 规定背景的绘制区域（padding-box，border-box，
content-box）
渐变：
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
文本效果：
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法：
rotate 旋转 translate（
x，y）指定元素在二维空间的位移 scale（
n）
定义缩放转换
3D 转换方法：
Perspective（
n）为 3D 转换 translate rotate scale 过渡：
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
动画：animation
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画
7. 清除浮动的方式有哪些？请说出各自的优点
高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时
候父元素就会产生高度塌陷。
清除浮动方式 1：给父元素单独定义高度
优点：快速简单，代码少 缺点：无法进行响应式布局
清除浮动方式 2：父级定义 overflow：hidden；zoom：1（针对 ie6 的
兼容）
优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时
要注意
清除浮动方式 3：在浮动元素后面加一个空标签，clear：both；height：
0；overflow：hidden
优点：简单快速、代码少，兼容性较高。
缺点：增加空标签，不利于页面优化
清除浮动方式 4：父级定义 overflow：auto
第 5 页 第 6 页
优点：简单，代码少，兼容性好
缺点：内部宽高超过父级 div 时，会出现滚动条
清除浮动方式 5：万能清除法：
给塌陷的元素添加伪对象
.father：after{
Content：“随便写”；
Clear：both；
display：block；
Height：0；
Overflow：hidden；
Visibility：hidden
}
优点：写法固定，兼容性高
缺点：代码多
8. 定位的属性值有何区别
Position 有四个属性值：relative absolute fixed static
Relative 相对定位 不脱离文档流，相对于自身定位
Absolute 绝对定位，脱离文档流 相对于父级定位
Fixed 固定定位，脱离文档流，相对于浏览器窗口定位
Static 默认值，元素出现在正常的流中
9. 子元素如何在父元素中居中
水平居中： 第 7 页
1.子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置
浮动，否则居中失效
2.子父元素宽度固定，父元素设置 text-align：center，子元素设置
display：inline-block，并且子元素不能设置浮动，否则居中失效
水平垂直居中：
子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素
margin-top 和 margin-left 减去各自宽高的一半
子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素
margin：auto
父元素设置 display：table-cell vertical-align：middle，子元素设置
margin：auto
子元素相对定位，子元素 top，left 值为 50%，transform：translate
（
-50%，-50%）
子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform：
translate（
-50%，-50%）
父元素设置弹性盒子，
display：flex； justfy-content：center ；align-item：center；
justfy-content：center
10.Border-box 与 content-box 的区别
Content-box 标准盒模型 width 不包括 padding 和 border
Border-box 怪异盒模型 width 包括 padding 和 border 第 8 页
11. 元素垂直居中
1.设置子元素和父元素的行高一样
2.子元素设置为行内块，再加 vertical-align：middle
3.已知父元素高度，子元素相对定位，通过 transform：
translateY（
-50%）
4.不知道父元素高度，子绝父相，子元素 top：50%，transform：
translateY（
-50%）
5.创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半
6.给父元素 display：
table，子元素 display：
table-cell，vertical-align：
middle
7.给父元素添加伪元素
8.弹性盒，父元素 display：flex，子元素 align-self：center
链接：https://www.waimaiguai.com/technology/article/5866382
来源：外卖怪
/*全局样式*/
*{padding:0margin:0}
div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{border:0}
img,input{border:nonevertical-align:middle}
body{font-family:Tahoma,Arial,Helvetica,"宋体"font-size:12pxtext-align:centerbackground:#FFFcolor:#000}
html{overflow-y:scroll}
ul,ol{list-style-type:none}
th,td,input{font-size:12px}
h3{font-size:14px}
button{border:nonecursor:pointerfont-size:12pxbackground-color:transparent}
select{border-width:1px_zoom:1border-style:solidpadding-top:2pxfont-size:12px}
.clear{clear:bothfont-size:1pxheight:0visibility:hiddenline-height:0}
.clearfix:after{content:""display:blockclear:both}
.clearfix{zoom:1}
a:link,a:visited{text-decoration:nonecolor:#333}
a:hover,a:active{text-decoration:underlinecolor:#f60}
http://www.w3school.com.cn/<!--...--> 定义注释。
<!DOCTYPE> 定义文档类型。
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<address> 定义文档作者或拥有者的联系信息。
<applet> 不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体字。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<body> 定义文档的主体。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<dd> 定义定义列表中项目的描述。
<del> 定义被删除文本。
<details> 定义元素的细节。
<dir> 不赞成使用。定义目录列表。
<div> 定义文档中的节。
<dfn> 定义定义项目。
<dialog> 定义对话框或窗口。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<fieldset> 定义围绕表单中元素的边框。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<font> 不赞成使用。定义文字的字体、尺寸和颜色。
<footer> 定义 section 或 page 的页脚。
<form> 定义供用户输入的 HTML 表单。
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<h1>to <h6> 定义 HTML 标题。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<html> 定义 HTML 文档。
<i> 定义斜体字。
<iframe> 定义内联框架。
<img> 定义图像。
<input> 定义输入控件。
<ins> 定义被插入文本。
<isindex> 不赞成使用。定义与文档相关的可搜索索引。
<kbd> 定义键盘文本。
<keygen> 定义生成密钥。
<label> 定义 input 元素的标注。
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目。
<link> 定义文档与外部资源的关系。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<menu> 不赞成使用。定义菜单列表。
<meta> 定义关于 HTML 文档的元信息。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> 定义针对不支持框架的用户的替代内容。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象。
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output> 定义输出的一些类型。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section> 定义 section。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source> 定义媒介源。
<span> 定义文档中的节。
<strike> 不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary> 为 <details>元素定义可见的标题。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期/时间。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track> 定义用在媒体播放器中的文本轨道。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video> 定义视频。
<wbr> 定义视频。
<xmp> 不赞成使用。定义预格式文本。
按功能类别排列
New : HTML5 中的新标签。
基础
标签 描述
<!DOCTYPE> 定义文档类型。
<html> 定义 HTML 文档。
<title> 定义文档的标题。
<body> 定义文档的主体。
<h1>to <h6> 定义 HTML 标题。
<p> 定义段落。
<br> 定义简单的折行。
<hr> 定义水平线。
<!--...--> 定义注释。
格式
标签 描述
<acronym> 定义只取首字母的缩写。
<abbr> 定义缩写。
<address> 定义文档作者或拥有者的联系信息。
<b> 定义粗体文本。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<del> 定义被删除文本。
<dfn> 定义定义项目。
<em> 定义强调文本。
<font> 不赞成使用。定义文本的字体、尺寸和颜色
<i> 定义斜体文本。
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<mark> 定义有记号的文本。
<meter> 定义预定义范围内的度量。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<small> 定义小号文本。
<strike> 不赞成使用。定义加删除线文本。
<strong> 定义语气更为强烈的强调文本。
<sup> 定义上标文本。
<sub> 定义下标文本。
<time> 定义日期/时间。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<var> 定义文本的变量部分。
<wbr> 定义视频。
表单
标签 描述
<form> 定义供用户输入的 HTML 表单。
<input> 定义输入控件。
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表（下拉列表）。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<isindex> 不赞成使用。定义与文档相关的可搜索索引。
<datalist> 定义下拉列表。
<keygen> 定义生成密钥。
<output> 定义输出的一些类型。
框架
标签 描述
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<noframes> 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。
图像
标签 描述
<img> 定义图像。
<map> 定义图像映射。
<area> 定义图像地图内部的区域。
<canvas> 定义图形。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
音频/视频
标签 描述
<audio> 定义声音内容。
<source> 定义媒介源。
<track> 定义用在媒体播放器中的文本轨道。
<video> 定义视频。
链接
标签 描述
<a> 定义锚。
<link> 定义文档与外部资源的关系。
<nav> 定义导航链接。
列表
标签 描述
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 不赞成使用。定义目录列表。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<command> 定义命令按钮。
表格
标签 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
样式/节
标签 描述
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header> 定义 section 或 page 的页眉。
<footer> 定义 section 或 page 的页脚。
<section> 定义 section。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<details> 定义元素的细节。
<dialog> 定义对话框或窗口。
<summary> 为 <details>元素定义可见的标题。
元信息
标签 描述
<head> 定义关于文档的信息。
<meta> 定义关于 HTML 文档的元信息。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
编程
标签 描述
<script> 定义客户端脚本。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<applet> 不赞成使用。定义嵌入的 applet。
<embed> 为外部应用程序（非 HTML）定义容器。
<object> 定义嵌入的对象。
<param> 定义对象的参数。
