1.网络中使用最多的图片格式有哪些

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

来源：外卖怪

首先进入编辑状态，选择HTML格式然后就可以输入了，下面我们来看代码，首先来看第一种，比较简单的： “url”依然是路径名,loop表示循环数，-1表示始终循环 来看第二种： 其中各个属性的含义如下： SRC：音乐文件路径 （以下可选） AUTOSTART：音乐文件上传完后自动播放，TRUE为播放，FALSE为否 LOOP：设置循环TRUE为自动循环，FALSE为不循环，数值为次数 WIDTH，HEIGHT为播放控制面板的宽和高， 其余的属性有： volume：取值范围为"0-100"，设置音量，默认为系统本身的音量 starttime："分：秒"，设置歌曲开始播放的时间，如，starttime="00:10"，从第10秒开始播放 endtime： "分：秒"，设置歌曲结束播放的时间 controls ：控制面板的外观controls="console/smallconsole/playbutton/ pausebutton/stopbutton/volumelever" ·console 正常大小的面板 ·smallconsole 较小的面板 ·playbutton 显示播放按钮 ·pausebutton 显示暂停按钮 ·stopbutton 显示停止按钮 ·volumelever 显示音量调节按钮 hidden： 为true时可以隐藏面板 背景音乐代码精简 1、 --hidden="true"表示隐藏播放，即不显示播放器的外观，若要想显示，把"true" 替换为"false"即可，这样为默认是最小化播放，若还想具体显示播放器的大小，另加上height="高度值" width="宽度值" 就可以了。 --autostart="true"表示当前页一载入则自动播放，若不希望播放改为autostart="false" 即可... --loop="true"表示无限次循环播放音乐直到当前页关闭为止，不想循环播放替换为 loop="false"就OK了 2、 --loop="-1" 表示无限次循环播放，可设置播放次数，用具体数字代替即可，比如我希望它播放两次，则loop="2" --controls="ControlPanel"这个控制选项可省略 --width="0" height="0"表示隐藏播放，和前面的一样。 若欲设置播放器的外观，则替换为具体的数值就可以了，比如width="123" height="100" 其实要说最简化的播放背景音乐的代码，则下面的代码是最简单的了---> 另外:bgsound src="背景音乐路径" loop="-1">这个只支持IE浏览器，而且是完全下载完后才开始播放，不像前面所说的格式那样可以一边缓冲一边播放。这个一般用于mid音乐或较小的mp3,wav格式的音乐. 若是较大的文件还是用前面所说的格式吧~~ 这个随浏览器的打开而播放，当最小化窗口时即停止播放，当最大化窗口时又开始播放。 而，常用于mid，,wav,mp3类型的音乐类型. 这个则不管是否最小化窗口都始终播放，直至关闭当前窗口为止~~ 支持的音乐文件类型：只支持MP播放器所支持的音乐格式，比如mp3,asf,wma,asx等等. 不支持rm,ram.... 视频文件的插入方法也和上面所说的一样，设置好合适的 音乐代码解释 http://guest.anyp.cn/uploads/01.mid"></A>解释一下: AUTOSTART="TRUE / FALSE" 是否要在音乐档传完之后，就自动播放音乐。 TRUE 是要　 FALSE 是不要，内定值是不要。 LOOP="TRUE / FALSE / 整数" 设定是否要自动反覆播放，LOOP=2 表示重复两次，若要无限次重复可用 LOOP="TRUE"　 WIDTH 和 HIGH="整数" 设定控制面版的宽度和高度　 CONTROLS="CONSOLE / SMALLCONSOLE / PLAYBUTTON / PAUSEBUTTON / STOPBUTTON / VOLUMELEVER" 设定控制面板的样子，预设值是 CONSOLE　 CONSOLE 一般正常的面板 SMALLCONSOLE 较小的面板 PLAYBUTTON 只显示播放按钮 PAUSEBUTTON 只显示暂停按钮 STOPBUTTON 只显示停止按钮 VOLUMELEVER 只显示音量调整钮 希望对你有用~~

---