HTML常问合集（二）

尤雨溪不懂VUE
108 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

14.CSS sprit是什么？有什么优缺点？

将许多小图片拼接到一张图片里面，通过background-position来调节位置，展示要显示的内容。

优点

  • 减少了http请求，提高了页面加载速度。
  • 便于压缩。
  • 便于更换风格，只需要更换大图片的颜色。

缺点

  • 图片合并麻烦。
  • 图片修改麻烦。
  • 首次请求精灵图图片响应速度慢。

15.link和@import的区别

  • link是HTML引入的方式，@import是CSS的引入方式。
  • link权重大于@import。
  • link最大限度支持并行下载；@import过多的嵌套会导致串行下载，会出现FOUC（文档样式短暂失效，页面闪烁）。

16.display与float、position的关系

如果display取值为none，则float、position都不起作用。

17.清除浮动的几种方式

  • 父级div定义height
  • 父级div也浮动，定义宽度
  • 父级div定义 overflow：hidden
  • 结尾处加空div标签
  • 父级定义伪类 :after （最优解）

之所以清除浮动，是因为子元素如果浮动，则脱离标准流，若父元素靠子元素撑开，则此时会撑不开。

18.解决外边距塌陷

父子元素都有上外边距，则父元素塌陷较大值

  1. 给父元素底部border
  2. 给父元素底部padding
  3. 给父元素overflow:hidden
  4. 定位或者浮动

19.为什么要初始化CSS样式

因为浏览器的兼容问题，每个浏览器对标签的默认值都不尽相同，所以要初始化默认值。

但是，初始化CSS对SEO有影响，所以要在影响最小化的情况下初始化。

20.CSS3新增伪类有哪些？

  • p:first-of-type

  • p:last-of-type

  • p:only-of-type

  • P:only-of-child

  • p:nth-child(2)

  • :after 在元素之前添加内容，也可用来清除浮动

  • :before 在元素之后添加内容

  • :enable 已启用的表单元素

  • :disable 已禁用的表单元素

  • :checked 单选框或者复选框被选中

21.行内元素float:left后可否变为块级元素

浮动后更像是行内块元素，此时给他设置宽高都是有效果的。

22.行内元素和块级元素

行内元素

每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等

行内元素

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。

一般不可以设置宽度，高度以及对齐等属性。

常见的行内元素有：<a>,<strong>,<b>,<em>,<del>,<span>等

默认的宽度就是它本身的宽度

行内块元素

和其他行内或行内块级元素元素放置在同一行上；

元素的高度、宽度、行高以及顶

和底边距都可设置。

23.动画的最小间隔

一般屏幕刷新率是60HZ，即1s刷新60次，所以最小间隔理论是1/60*1000ms=16.7ms

24.CSS合并

避免使用@import导入多个文件，可以使用css工具将多个文件合并成一个css文件，例如Sass。

25.列出你知道的改变页面布局的属性

width ,height ,float ,left ,right ,position ,top ,bottom ,padding ,margin

26.Sass和Less是什么？为什么要使用他们？

他们是CSS预处理器，赋予了CSS语言的动态特性，例如变量，继承，运算，函数等

优点：

  • 结构清晰
  • 多级继承
  • 无视浏览器之间的差异
  • 完全兼容CSS，可以和老项目混合使用

27.如何实现小于12px的字体效果

transform:scale() 这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个 display:inline-block;

28.前端要注意的SEO

  • 合理的title，description，keywords：搜索权重逐个减小。title值要强调重点，不同页面要不同；不同页面的description也要不同；keywords要列举关键词。

  • 语义化HTML，要符合W3C的标准，让搜索引擎更容易理解网页。

  • 重要的HTML代码放在前面，因为搜索引擎抓代码是从上到下，要保证重要的被抓到。

  • 重要内容不用JS。

  • 少用iframe标签：里面的内容不会被浏览器抓取。

  • 非装饰性图片要加alt属性。

  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标。

29.HTTP的几种请求方法用途

  • GET：发送一个请求来获得服务器上的资源。
  • POST：向URL指定的资源提交数据。
  • PUT：类似POST，也是向服务器提交数据，但是PUT指定了资源在服务器的位置。
  • DELETE：删除服务器上的某资源。

30如何提高网站速度

content方面

  • 减少HTTP请求：合并文件，CSS精灵，图片懒加载（当页面有很多图片时，先加载上面的，下面的等滚到时再加载）

  • 减少DNS查询

  • 减少DOM

server方面

  • 使用CDN（简化很多耗时的优化任务，例如图片的渐进渲染）

  • 对组件压缩

cookie方面

  • 减小cookie大小

js方面

  • 将脚本放在页面底部

  • 精简，压缩脚本

  • 从外部引入js

  • 减少DOM访问

CSS方面

  • 将样式表放在顶部

  • 不使用CSS表达式

  • 使用，不使用@import

31.对于浏览器内核的理解

主要有两部分：渲染引擎和JS引擎。

渲染引擎：获取网页内容，加入样式，计算页面的显示方式。

JS引擎：解释和执行JS，以此来实现页面的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就偏向于只指渲染引擎。

32.HTML5的新特性

绘画canvas

媒体标签video和audio

localStorage和sessionStorage存储

新的表单控件：calendar，url，search等

新的技术：websocket(基于TCP的全双工通信协议。浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性连接，并进行双向数据传输)等。

33.HTML5离线存储怎么使用

用户没联网时，可以正常访问站点或者应用；当联网时，更新缓存文件。

原理：基于.appcache文件的缓存机制（不是存储），通过文件上的解析清单离线存储资源。之后再没网状态下，浏览器会将这些资源展示到界面上。

34.img的alt和title有什么不同

alt：当img不能正常显示时显示里面的文字

title：为设置该属性的元素提供建议性信息

35.渐进增强和优雅降级

渐进增强：针对低版本浏览器构建页面，保证最基本的功能，然后针对高级浏览器进行优化。

优雅降级：一开始就构建完整的功能，然后针对低版本浏览器进行兼容。

36.一个页面上有大量图片，如何进行优化？

  • 懒加载

  • 预加载

  • 渐进渲染

  • 大图片使用精灵图

  • 小图片使用Iconfont，Base64等技术

37.Logo SEO优化

  1. logo里面放一个h1标签，目的是为了提高权重，告诉浏览器这个地方很重要

  2. h1里面放一个链接，可以返回首页的。

  3. 链接里面要放网站名称，但文字不要显示。（font-size=0）

avatar
文章
阅读
粉丝