学习web前端的日常更新7.8

  OK啊,兄弟们今天还是不负众望的什么代码也没有说,哪我们就继续进行一下面试题的讲解。

13:一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。

a. 图片懒加载,滚动到相应位置才加载图片。

b. 图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。

c. 使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。

d. 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

14:你如何理解 HTML 结构的语义化

A:在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:裸奔时也好看;

B:用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;

C:有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

D:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备),更好的方式来渲染网页;

E:便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

15:前端角度出发有哪些注意事项有利于SEO?

(1).维护网站,提高内容质量,保持更新

(2).网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。

(3).控制首页链接数量,要适中

(4).导航优化:

a:尽量采用文字方式

b:搭配图片导航,但是图片代码一定要进行优化,img标签必须添加“alt”和“title”属性

c:应该加上面包屑导航

(5).控制页面的大小:减少http请求,提高网站的加载速度

(6).适量的关键词和网页描述

title标题,强调重点即可,

meta keywords标签:关键词,列重要关键字即可

meta description标签:网页描述,要高度概括

body中的标签:尽量让代码语义化

a标签:页内链接,要加 “title” 属性加以说明

img应使用 “alt” 属性加以说明

strong、em标签 : 需要强调时使用

巧妙利用CSS布局

谨慎使用 display:none

保留文字效果

16:对DOM设置CSS样式的方式有哪些

A:外部样式表,引入一个外部 css 文件

B:内部样式表,将 css 代码放在 <head> 标签内部,<style>里 

C:内联样式,将 css 样式直接定义在 HTML 元素内部

17:css选择器有哪些,选择器的权重的优先级

选择器类型

(1)、ID #id

(2)、class .class

(3)、标签  p

(4)、通用  *

(5)、属性  [type="text"]

(6)、伪类  a: hover

(7)、伪元素  li: nth - child

(8)、子选择器(ul < li) 、相邻选择器(h1 + p)、后代选择器(li a)

权重计算规则

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。

!important 比 内联优先级高

(1). 第一等:代表内联样式,如: style=””,权值为1000。

(2). 第二等:代表ID选择器,如:#content,权值为0100。

(3). 第三等:代表类,伪类和属性选择器,如.content,权值为0010。

(4). 第四等:代表标签和伪元素选择器,如div p,权值为0001。

(5). 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

(6). 继承的样式没有权值。

(7).相同权重

优先级就近原则,样式定义最近者为准,载入样式以最后载入的定位为准;

继承性

可继承: font-size font-family color;

不可继承 :border padding margin width height ;

CSS3 新增伪类举例:

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。

18:css对DOM元素设置不显示的方式

display:none;隐藏,并且不占位 ,宽高各种属性值,都‘丢失’
visibility:hidden;隐藏,占位,仅是视觉上‘看不见’
width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示

19:超链接访问过后hover样式就不出现的问题是什么如何解决

问题是:a标签的四种状态,排序出问题了。

正确排序:L-V-H-A

love hate原则,即l(link)ov(visited)e h(hover)a(active)te。

a:link 普通的、未被访问的链接

a:visited 用户已访问的链接

a:hover 鼠标指针位于链接的上方

a:active 链接被点击的时刻

20: 什么是 Css Hack?ie6,7,8 的 hack 分别是什么?

针对不同的浏览器写不同的 CSS code 的过程,就是 CSS hack。

21. 行内元素和块级元素的具体区别是什么?行内元素的 padding 和 margin 可设置吗?

(1):块级元素(block)特性:

总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

(2):内联元素(inline)特性:

宽度(width)、高度(height)、内外边距的上下都不可设置,内外边距的左右可设置,其大小就是里面文字或图片的大小。

(3):inline-block 元素

拥有内在尺寸,可设置高宽,但不会自动换行

<input> 、<img> 、<button> 、<texterea> 、<label>。

22:什么是外边距重叠?重叠的结果是什么?

外边距重叠就是 margin-collapse。

折叠外边距 :在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。

折叠结果遵循下列计算规则:

两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

两个外边距一正一负时,折叠结果是两者的相加的和。

23:rgba()和opacity的区别

opacity作用于元素,以及元素内的所有内容的透明度(元素会继承其属性)
而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)

24. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?

垂直方向:line-height

水平方向:letter-spacing 增加或减少字符间距。

可用于消除 inline-block 元素间的换行符空格间隙问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值