HTML前端知识点

HTML、CSS、浏览器 相关

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

2. 请简述 css 盒子模型

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

4.HTML5 新增的内容有哪些

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

6.Css3 新增的特性

7.清除浮动的方式有哪些？请说出各自的优点

8.定位的属性值有何区别

9.子元素如何在父元素中居中

10.Border-box 与 content-box 的区别

11.元素垂直居中

12. 如何让 chrome 浏览器显示小于 12px 的文字

13.Css 选择器有哪些，那些属性可以继承，优先级如何计算？Css3 新增的伪类有哪些

14.网页中有大量图片加载很慢 你有什么办法进行优化？

15.行内元素/块级元素有哪些？

16.浏览器的标准模式和怪异模式区别？

17.Margin 和 padding 在什么场合下使用

18.弹性盒子布局属性有那些请简述?

19.怎么实现标签的禁用

20.Flex 布局原理

21. Px，rem，em 的区别

22.网页的三层结构有哪些

25.常见的兼容性一阶段内容中记几个

26.垂直与水平居中的方式

27.三栏布局方式两边固定中间自适应

28.Doctype 作用

29.说一下 HTML5 drag api

30 对 HTML 语义化标签的理解

31.web 性能优化

32.浏览器缓存机制

33.浏览器输入网址到页面渲染全过程

34.画一条 0.5px 的线

35.关于 JS 动画和 css3 动画的差异性

36.双边距重叠问题（外边距折叠）

37.浮动清除

38.CSS 选择器有哪些，优先级呢

39.css 动画如何实现

40.如何实现元素的垂直居中

41.CSS3 中对溢出的处理

- 2 - 42.对 CSS 的新属性有了解过的吗？

43.overflow 的原理

44.css 定位

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

JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小在ps以jpeg格式存储时，提供11级压缩级别

2.请简述css盒子模型

一个css盒子的模型有着content（内容）,width（宽度）,height（高度）,padding（内边距）,border（边框）,margin（外边距）组成。

盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框

盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

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

视频：<video src=""></video>

视频标签属性：

src需要播放的视频地址

width/height 设置播放视频的宽度，和img标签的宽度属性一样

autoplay 是否自动播放

controls 是否显示控制条

poster 没有播放之前显示的展位图片

loop 是否循环播放

perload 预加载视频（缓存）与autoplay相冲突，设置了autoplay属性，perload属性会失效。

muted 静音模式

<audio>

<source src="" type="">

<audio>

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:图像边框是否平铺

背景：

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轴）

transfrom-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

优点：简单，代码少，兼容性好

缺点：内容宽度超过父级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.子元素如何在父元素中居中

水平居中：

1.子元素宽度固定，子元素设置margin:auto,并且子元素不能设置浮动，否则居中失效

2.子父元素宽度固定，父元素设置text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动否则居中失效

水平垂直居中：

子元素相对于父元素绝对定位，子元素top,left设置50%，子元素margin-top和margion-left减去各自宽高的一半

子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin:auto

父元素设置 display:table-cell vertical-align:middle,子元素设置margin:auto

子元素相对定位，子元素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

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

12.如何让chrome浏览器显示小于12px的文字

本来添加谷歌私有属性 -webkit-text-size-adjust:none,现在-webkit-transform:scale()

13.css选择器有哪些，哪些属性可以继承，优先级如何计算？

css3新增的伪类有哪些

css2选择器：

元素选择器，id选择器，群组选择器，类选择器，*通配符选择器，后代选择器

css2伪类选择器：a:link/visited/hover/active

css3选择器：

空格 > +相邻兄弟选择器  ～通用选择器（查找后面所有）

结构伪类选择器：

查找第几个nth-child(n)

查找唯一类型 only-of-type

属性选择器：根据标签属性查找[attr=value]

:root查找根元素html标签

:empty查找空标签

目标伪类选择器:(表单)

;enabled查找可以使用的标签

:disabled查找禁止使用的标签

:checked查找被选中的标签

伪元素选择器::selection设置选中文本内容的高亮显示(只能用于背景和文本颜色)

否定伪类选择器not()

语言伪类选择器lang(取值)

优先级(权重)：

元素选择器1

伪元素选择器1

class选择器10

伪元素选择器10

属性选择器10

id选择器10

内联样式的权重1000

包含选择器权重为权重之和

继承样式权重为0

哪些属性可以继承：

Css继承特性主要是文本方面

所有元素可继承:visibility 和 cursor

块级元素可继承：text-indent 和 text-align

列表元素可继承: list-style,list-style-type,list-style-position,list-style

内联元素可继承:letter-spacing,word-spacing,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transorm,direction

字母间距 段落间距 行高 字体颜色 字体种类 字体大小 字体样式 字体粗细 小型大写字母文本 文本修饰 转换不同元素中的文本 文本方向

14.网页中有大量图片加载很慢 你有什么办法进行优化？

1.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小鱼后者，优先加载

2.使用拖预加载技术，将当前展示图片的前一张和后一张优先下载

3.使用csssprite或者svgsprite

15.行内元素/块级元素有哪些？

行内元素：相邻的行内元素会排列在同一行，不会独占一行设置宽高无效. span

块级元素：会独占一行 可以设置宽高等属性  div

可变元素：根据上下预警决定该元素为块元素还是内联元素

块级元素：div h1-h6 hr p ul ol table address blockquote dir from menu

行内元素：a br i em img input select span sub sup 

可变元素：button del iframe ins

16.浏览器的标准模式和怪异模式区别？

标准模式：浏览器按照W3C标准解析执行代码

怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析执行方式不一样，所以叫怪异模式

17.margin和padding在什么场合下使用

margin 外边距 自身边框到另一个边框之间的距离

padding 内边距自身边距到自身内容之间的距离

当需要在border外侧添加空白时用margin,当需要在border内侧添加空白时用padding

18.弹性盒子布局属性有哪些请简述？

flex-direction:弹性容器中子元素排列方式（主轴排列方式）

flex-wrap:设置弹性盒子的子元素超出父容器时是否换行

flex-flow:是flex-direction和flex-wrap简写形式

align-item：设置弹性盒子元素在测抽上的对齐方式

align-content:设置行对齐

justify-content:设置弹性盒子元素在主轴上的对齐方式

19.怎么实现标签的禁用

添加disabled属性

20.flex布局原理

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

21.px,rem,em的区别

px 绝对长度单位，像素px是相对于显示器屏幕分辨率来说的

em 相对长度单位，相对于当前对象内文本的字体尺寸

        em的值并不是固定的

        em会继承父级元素的字体大小（参考物是父元素的font-size）

        em中所有的字体都是相对于父元素的大小决定的

rem 相对于html根元素的font-size

1em=1rem=16px 在body中加入font-size:62.5%这样直接就是原来的px数值除以10加上em就可以

22.网页的三层结构有哪些

结构（html或xhtm标记语言）表现（css样式表）行为（js）

请简述媒体查询

媒体查询扩展了media属性，就是根据不同的媒体类型设置不同的css样式，达到自适应的目的。

rem缺点

比如：小说网站，屏幕越小的移动设备如果用了rem肯定文字就越小，就会导致看文章的时候特别费眼

27.三栏布局方式两边固定中间自适应

1.margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来

2.自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后

3.绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体用左右margin值撑开距离。

4.flex左右固定宽 中间 flex:1

5.网格布局

6.table布局

28.Doctype作用

声明文档类型

30.对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article,header,footer等等标签。

31.web性能优化

降低请求量：合并资源，减少http请求数，minify/gzip压缩，webP,lazyLoad.加快请求速度：预解析CDN分发。

缓存：http协议缓存请求，离线缓存manifest,离线数据缓存localStorage.渲染：JS/css优化，加载顺序，服务端渲染，pipeline.

36.双边距重叠问题（外边距折叠）

多个相邻（兄弟或者分子关系）普通流的块元素垂直方向marigin 会重叠折叠的结果为：

两个相邻的外边距都是正数，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。

37.浮动清除

方法一：使用带clear属性的空元素在浮动元素后使用一个空元素如<div class="clear"></div>，并在css中赋予.clear{clear:both}属性即可清除浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理

方法二：使用css的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在IE6中还需要触发hasLayout，列如为父元素设置容器高度或设置zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

方法五：使用css的:after伪元素