前端面试题HTML(1)

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

• 1.gif支持动画，只有全透明和不透明两种模式，只有256中颜色
• 2.jpg采用有损压缩算法，体积小，不支持透明，不支持动画
• 3.png采用有损压缩算法，体积也相对较小，支持透明背景，不支持动画
• 4.svg一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰
• 5.bpm无损压缩格式，画质最好，文件太大，不利于网络传输

2.请简述css盒子模型

• 在网页中，一个元素占有空间的大小由几个部分组成，其中包括元素的内容（content）,元素的内边距（padding）,元素的外边距(margin)四个部分，这就是盒子模型。

3.视频/音频标签的使用

1.视频

<video src="视频/qr.ogg" controls heighr="300" autoplay loop muted></video>

• 属性：controls 控件、autoplay 自动播放 谷歌和火狐静音不支持 ie支持、muted静音播放、loop 循环、poster 未播放前显示的内容

2.音频

<audio src="音频/少年.mp3" controls autoplay loop muted></audio>

• 属性：controls 控件、autoplay 自动播放 谷歌不支持，火狐静音不支持 ie支持、loop 循环播放、muted 静音播放

4.HTML5新增的内容有哪些

1.h5语法

• 1）DOCTYP可以使用小写
• 2）单标签没有结束标签
• 3）可以省略结束的标签：li、dt、dd、p、option、colgroup(用于对表格中的列进行组合、以便对其进行格式化)、thead、tbody、tfoot、tr、td、th
• 4）可以省略的标签html head body tbody

2.新增标签特点：语义化，ie8及以下不生效

• 1）header标签 头部
• 2）section 划分板块
• 3）article 可以放侧边工具栏
• 4）nav 导航
• 5）figure和figcaption类似于dl标签
• 6）footer 底部
• 7）main 比较重要的部分
• 8）mark 标记 默认是黄色高亮，可以修改样式 内联

3.多媒体标签

1）音频

<audio src="音频/少年.mp3" controls autoplay loop muted></audio>内联
<audio contrils>
    <source src="音频/少年.ogg" type="audio/ogg"></source>
    <source src="音频/少年.mp3" type="audio/mpeg"></source>
    你的浏览器不支持此文件，换个电脑吧
</audio>

• controls 控件
• autoplay 自动播放 谷歌不支持，火狐静音下支持 ie支持
• loop 循环播放
• muted 静音播放

2）视频

<video src="视频/qr.ogg" controls height="300" autoplay loop muted></video>
<video controls>
    <source src="实例/wje.mp4" type="video/mp4"></source>
    <source src="实例/wje.ogg" type="video/ogg"></source>
    <source src="实例/wje.webm" type="video/webm"></source>
</video>

• controls 控件
• autoplay 自动播放，谷歌和火狐静音下支持ie支持
• muted 静音播放
• loop 循环
• poster 未播放前显示的内容

4.表单新增

1）type类型

• email 邮件格式
• number 限制输入是数字 min最小值 max最大值 step每次增加的数
• url 地址 路径或者网址都可以
• color 色块
• time 时间
• range 滑动条

2）属性

• required必填

<input type="text" required autofocus>

• placeholder 提示信息
• autocomplete 自动提示 on提示 off不提示

<input type="text" name="test" autocomplete="on">

• autofocus 自动聚焦 只能写一个
• multiple 多选

<input type="file" multiple>

• pattenr 正则 陷入输入的内容类型

<input type="text" pattern="[0-9]"> 限制输入0-9之间的数

5.HTML新增的语义化标签有哪些

• 1.header 头部
• 2.section 划分板块
• 3.article 与上下文无关的内容
• 4.aside 可以放侧边工具栏
• 5.nav 导航
• 6.figure和caption 类似于dl标签
• 7.footer 底部
• 8.main 比较重要的部分
• 9.mark 标记 默认是黄色高亮，可以修改样式 内联

6.CSS3新增的特性

css3选择器

• 属性选择器
  [属性名]可以选择到官方或者自定义的属性

• [属性名=“属性值”]匹配属性值
  ~=“”]包含该值，必须单独出现的

• [属性名*=""]只要包含该值就行
  ^=""]以该值开头

• [属性名$=""]以该值结尾

伪类选择器

• 结构性伪类选择器（child系列）
  • E:first-child 必须是父元素里面的第一个孩子
  • E:last-child 必须是父元素里面的最后一个孩子
  • E:nth-child(n) 不匹配前面的元素类型，如果对应的位置是该元素才匹配
  • E:only-child 必须只有他自己一个孩子
• 结构性伪类选择（type系列）
  • E:first-of-type 匹配到该元素中的第一个孩子
  • E:last-of-type 匹配到该元素的最后一个孩子
  • E:nth-of-type(n) 匹配到该元素的第几个孩子
    n可以是表达式 event（偶数）odd（奇数）
  • E:nth-last-of-type(n) 匹配到该元素的倒数第几个孩子
• 目标伪类：综合锚点使用
  • 状态伪类选择器
  1. :enabled 元素可编辑
  2. :disabled 元素不可编辑
  3. :checked 选中
  4. ::selection 高亮状态，一般修改字体颜色和背景色
  • 动态伪类选择器
  1. :link 未访问前
  2. :visited 访问过后
  3. :hover 鼠标滑过
  4. :active 鼠标点击之后
• 层级选择器
  1.后代选择器 选择器 选择器
  2.子项选择器 选择器>选择器
  3.相邻的兄弟 选择器+选择器 紧挨着的兄弟
  4.相邻的兄弟们 选择器~选择器 紧挨着的弟弟们

+ css3属性
	- 阴影
		1.box-shadow:x轴偏移 y轴偏移 模糊距离 阴影的颜色 阴影的位置（outset/inset）
		2.text-shadow:x轴偏移 y轴偏移 模糊距离 阴影的颜色
	- 透明
		rgba 设置透明度

• 里面的内容不会被模糊

opacity:0-1; 0完全透明  1不透明
	1.里面的内容也会被模糊
	2.可以设置图片的模糊
	3.过渡效果对display的隐藏和出现没有效果，可以通过设置opacity
背景
	背景图的原点 background-origin
	1.padding-box 默认值 背景图从padding区域开始显示
	2.content-box 背景图从content区域开始显示
	3.border-box 背景图从border边框区域开始显示

	背景图的裁切 background-clip
	1.boxder-box 边框之外裁切
	2.padding-box padding之外裁切
	3.content-box 内容区开始裁切

	背景图大小的设置 background-size

圆角 border-radius
	1.一个值 四个角
	2.两个值 对角
	3.三个值 左上角 右上角/左下角 右下角
	4.四个值 左上角 右上角 右下角 左下角（顺时针的角度）
	5.正圆 border-radius:50%/100%;
图片边框 border-image
    1. border-image:图片路径 偏移 重复
    2. border-image-source:url() 图片的路径
    3. border-image-slice:数值 图片的裁切 不要加单位
    4. border-image-repeat:平铺(repeat) 铺满(round) 拉伸(stretch)默认
过渡 transition：transition-property transition-duration transition-delay transition-timing-function(顺序不固定，当只有一个时间的时候，表示过渡时间，两个时间第一个表示过渡时间，第二个表示延迟时间)
    transition-property 需要过渡的属性 
    transition-duration 过渡所需要的时间 s(秒)/ms(毫秒) 1s=1000ms
    transition-delay 过渡延迟时间 s(秒)/ms(毫秒)
    transition-timing-function 过渡效果
    1. linear: 匀速
    2. ease: 逐渐慢下来
    3. ease-in: 加速
    4. ease-out: 减速
    5. ease-in-out 先加速后减速
动画 animation：animation
    使用：animation: 动画名 动画持续时间 延迟时间 动画效果 执行次数
    animation-name: 动画名
    animation-duration: 动画的持续时间 s/ms
    animation-delay: 动画的延迟时间 s/ms
    animation-timing-function: 动画的效果
    animation-iteration-count: 具体的数值/infinite(无限循环)
    anmiation-direction: 动画执行的方向
       1. normal 正向
       2. reverse 反向
       3. alternate 正向和反向交替运动 
    animation-play-state 动画是否播放
       1. running 播放默认值
       2. paused 暂停  

定义动画
```css
@keyframes 动画名{
    from{} ==>0%
    to{}==>100%
 }
            关键帧分的是时间
            @keyframes 动画名{
              0%{
                css属性:css属性值
              }
              10%{} 0.5s
              20%{} 1s
              30%{}
              100%{}
            }
        ```
渐变
   线性渐变
     background-image/background:linear-gradient(方向,颜色1,颜色2……)
     渐变方向
        to bottom 向下
        to right 向右
        to top 向上
        to left 向左
        to right bottom 向右下角
        to left top 向左上角
        to right top 向右上角
        to left bottom 向左下角
     数值+deg(角度)
         设置百分比
          ```css
          /* 0%-40% 是红色的纯色 40%-60% 红色到蓝色渐变 60%-100% ；蓝色的纯色*/
          background: linear-gradient(red 40%, blue 60%);
          ```
         重复性的线性渐变
         background:repeating-linear-gradient(red 40%, blue 60%); 
         径向渐变
         bakrgound-image/background:radial-gradient(位置,颜色1,颜色2)
         位置
            center 中心
            水平方向：left/center/right
            垂直方向：top/center/bottom
            兼容写法
            ```css
                background: radial-gradient(left, red, blue);
                background: -webkit-radial-gradient(left, red, blue);
                background: -ms-radial-gradient(left, red, blue);
             ```
             重复性的径向渐变
             background: repeating-radial-gradient(red 20%, yellow 40%);