html+css+js基础问答

前端协作规范

HTML

1. HTML、XML、XHTML 的区别

HTML:超文本标记语言,是语法较为松散的、不严格的Web语言;
XML:可扩展的标记语言,主要用于存储数据和结构,可扩展;
XHTML:可扩展的超文本标记语言,基于XML,作用与HTML类似,但语法更严格。

HTML与XML的区别?
(1)XML用来传输和存储数据,HTML用来显示数据;
(2)XML使用的标签不用预先定义
(3)XML标签必须成对出现
(4)XML对大小写敏感
(5)XML中空格不会被删减
(6)XML中所有特殊符号必须用编码表示
(7)XML中的图片必须有文字说明

2. 什么是HTML5以及和HTML的区别是什么

概念
HTML5是HTML的新标准,其主要目标是无需任何额外的插件如Flash、Silverlight等,就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。
HTML5是由万维网联盟(W3C)和Web Hypertext Application Technology Working Group 合作创建的HTML新版本。

区别

  • 从文档声明类型上看:

HTML是很长的一段代码,很难记住。如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5却只有简简单单的声明,方便记忆。如下:

<!DOCTYPE html>
  • 从语义结构上看:

HTML4.0:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div>,这样表示网站的头部。
HTML5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>
拓展: 不输入,浏览器将无法识别html文件,因此html将无法正常工作。

3. HTML、XHTML和HTML5区别以及有什么联系

XHTML与HTML的区别

XHTML标签名必须小写;
XHTML元素必须被关闭;
XHTML元素必须被正确的嵌套;
XHTML元素必须要有根元素。
XHTML与HTML5的区别

HTML5新增了canvas绘画元素;
HTML5新增了用于绘媒介回放的video和audio元素;
更具语义化的标签,便于浏览器识别;
对本地离线存储有更好的支持;
MATHML,SVG等,可以更好的render;
添加了新的表单控件:calendar、date、time、email等。
HTML、XHTML、HTML5之间联系

XHTML是HTML规范版本;
HTML5是HTML、XHTML以及HTML DOM的新标准。

4. HTML5 为什么只需要写

这是因为HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他们应该的方式来运行)而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

5. 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素: a, b, span, img, input, select, strong;
块级元素: div, ul, li, dl, dt, dd, h1-5, p等;
空元素:<br>, <hr>, <mg>, <link>, <meta>;

6. 页面导入样式时,使用link和@import有什么区别

link属于HTML标签,而@import是css提供的;
页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载;
@import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;
link方式的样式的权重高于@import的权重。

7. 支持HTML5的浏览器有哪些

现在几乎所有现有的浏览器都支持HTML5,例如Chrome, Opera, Safari, IE, 火狐等;

8. Label 的作用是什么? 怎么用?

label 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label> 
<input type=“text“ name="Name" id="Name"/>

9. 标签上title属性与alt属性的区别是什么

alt是为了在图片未能正常显示时(屏幕阅读器)给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

10. 如何理解语义化标签

概念

语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。

语义化的好处:用正确的标签做正确的事情;

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构;
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

11. 文档声明(Doctype)和<!Doctype html>有何作用? 严格模式与混杂模式如何区分?它们有何意义?

文档声明的作用
文档声明是为了告诉浏览器,我们写的HTML文档当前使用什么版本的HTML来写的,这样浏览器才能按照我们声明的版本来正确的解析。

<!Doctype html>的作用
<!doctype html> 的作用就是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面;如果不写,浏览器就会进入混杂模式,我们需要避免此类情况发生。

严格模式与混杂模式的区分
严格模式: 又称为标准模式,指浏览器按照W3C标准解析代码;
混杂模式: 又称怪异模式、兼容模式,是指浏览器用自己的方式解析代码.混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作;

区分:
网页中的DTD,直接影响到使用的是严格模式还是浏览模式,可以说DTD的使用与这两种方式的区别息息相关。

如果文档包含严格的DOCTYPE ,那么它一般以严格模式呈现(严格 DTD ——严格模式);

包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式);

DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现(DTD不存在或者格式不正确——混杂模式);

HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总的来说,严格模式让各个浏览器统一执行一套规范.兼容模式保证了旧网站的正常运行。

12. 如何实现浏览器内多个标签页之间的通信

可以通过调用localstorge、cookies等本地存储方式。

13. webSocket如何兼容低浏览器

Adobe Flash Socket;
ActiveX HTMLFile (IE) ;
基于 multipart 编码发送 XHR;
基于长轮询的 XHR;

14. iframe有哪些优缺点

优点

iframe可以实现无刷新文件上传;
iframe可以跨域通信;
解决了加载缓慢的第三方内容如图标和广告等的加载问题。

缺点

iframe会阻塞主页面的Onload事件;
无法被一些搜索引擎索引到;
页面会增加服务器的http请求;
会产生很多页面,不容易管理。

15. src与href有什么区别

src用于替换当前元素;href用于在当前文档和引用资源之间确立联系;
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;而href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接。

16. table的作用以及其优缺点

作用
可用于布局(已过时);
用于显示批量数据;

优点
在某些场合,使用Table是100%的适合、恰当和正确。比如,用table做表格是完全正确的

缺点
Table要比其它html标记占更多的字节,会导致延迟下载时间,占用服务器更多的流量资源;
Table会阻挡浏览器渲染引擎的渲染顺序,这会导致延迟页面的生成速度,让用户等待更久的时间;
灵活性差,比如要通多td才能设置tr的border属性;
代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱;
混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱;
深层的嵌套,导致搜索引擎读取困难,同时还很大程度上增加了代码冗余;
不够语义。

17. 浏览器乱码的原因是什么?如何解决?

产生乱码的原因

网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码。反之也会出现乱码;
html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码;
浏览器不能自动检测网页编码,造成网页乱码。
解决办法

使用软件进行编辑HTML网页内容;
如果网页设置编码是gbk,而数据库储存数据编码格式是UTF-8,此时需要程序查询数据库数据显示数据前进程序转码;
如果浏览器浏览时候出现网页乱码,在浏览器中找到转换编码的菜单进行转换;

18. HTML和DOM有何关系?

HTML是死的,只是一个字符串;而DOM是由html解析而来,是活的,我们可以通过Javascript维护DOM。

19. property和attribute的区别是什么

property是DOM中的属性,是JavaScript里的对象;
attribute是HTML标签上的特性,它的值只能够是字符串;
简单的理解就是:Attribute就是DOM节点自带的属性,例如html中常用的id、class、title、align等;而Property是这个DOM元素作为对象,其附加的内容,例如childNodes、firstChild等。

20. HTML元素如何体现其嵌套关系

块级元素可以包含行内元素;
块级元素不一定能包含块级元素;
行内元素一般不能包含块级元素(a元素例外)

21. 几种Doctype文档类型

标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:分别是Strict、Transitional 以及 Frameset;
XHTML 1.0 规定了三种 XML 文档类型:分别是Strict、Transitional 以及 Frameset;
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页;
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

22. html5有哪些新特性、移除了那些元素

新特性
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
拖拽释放(Drag and drop)API;
语义化更好的内容标签(header, nav, footer, aside, article,section);
音频、视频API(audio, video);
画布(Canvas)API;
地理(Geolocation)API;
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
表单控件:calendar、date、time、email、url、search ;
新的技术webworker, websocket, Geolocation等;

移除元素
纯表现元素:
<basefont> 默认字体,不设置字体,以此渲染;
<font> 字体标签;
<center> 水平居中;
<u> 下划线;
<big>字体;
<strike>中横字;
<tt>文本等宽;

对可用性产生负面影响的元素:
<frameset>,<noframes>和<frame>;

23. Quirks模式是什么?它和Standards模式有什么区别?

Quirks模式,又称怪癖模式、诡异模式、怪异模式。

Quirks和Standards模式的区别
当我们在写程序时,遇到新旧功能不兼容的时候,如何做才能保证原来的接口不变,又可以提供强大的功能?

一般情况下可以通过增加参数和分支来解决。也就是当某个参数为true时,使用新功能,为false时使用旧功能,这样就能不破坏原有的程序,又能提供新功能。

IE6也是类似这样做的,它将DTD当成了这个“参数”,因为以前的页面大家都不会去写DTD,第一IE6就假定,如果写了DTD就意味这个页面将采用对CSS支持更好的布局,而如果没有就采用兼容之前的布局方式,这就是Quirks模式(怪癖,诡异,怪异模式)。

其与Standards的区别总体会有布局、样式解析、和脚本执行三个方面的区别:

盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border;

设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效;

设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的;

设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:

body{
   text-align:center};
#content{
   text-align:left}

quirk模式下设置图片的padding会失效

quirk模式下Table中的字体属性不能继承上层的设置

quirk模式下white-space:pre会失效

24. 前端页面构成及什么是前端的结构,样式和行为相分离?以及分离的好处是什么?

前端页面有哪三层构成:
a. 结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。

b. 表示层:由CSS负责创建,解决了页面“如何显示内容”的问题。

c. 行为层:由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

结构,样式和行为分离

小编的理解是: 若是将前端比作一个人来举例子,结构(HTML)就相当于是人体的“骨架”,样式就相当于人体的“装饰”,例如衣服,首饰等;行为就相当于人做出的一系列“动作”。
在结构,样式和行为分离,就是将三者分离开,各自负责各自的内容,各部分可以通过引用进行使用。

在分离的基础上,我们需要做到代码的:精简, 重用, 有序。
分离的好处

代码分离,利于团队的开发和后期的维护;
减少维护成本,提高可读性和更好的兼容性;

25. 对HTML5有什么了解?

良好的移动性,以移动设备为主;
响应式设计,以适应自动变化的屏幕尺寸;
支持离线缓存技术,webStorage本地缓存;
新增了canvas,video,audio等新标签元素;以及特殊内容元素:article,footer,header,nav,section等;以及表单控件:calendar,date,time,email,url,search等;
新增webSocket/webWork技术;
还有新增的地理位置等。

26. 如何对网站的文件和资源进行优化

文件合并(目的是减少http请求);
文件压缩 (目的是直接减少文件下载的体积);
使用缓存;
使用cdn托管资源;
gizp压缩需要的js和css文件;
反向链接,网站外链接优化;
meta标签优化(title, description, keywords),heading标签的优化,alt优化;

27. Html5中datalist是什么

<datalist>标签,用来定义选项列表,与input元素配合使用该元素,来定义input可能的值。
datalist及其选项不会被显示出来,他仅仅是合法的输入列表值。

<input id="fruits" list="fruit" />
<datalist id="fruit">  
	<option value="apple">  
	<option value="orange">  
	<option value="banana">
</datalist>

28. Html5中本地存储概念是什么,有什么优点,与cookie有什么区别?

HTML5的Web storage的存储方式有两种:sessionStorage和localStorage。

sessionStorage用于本地存储一个会话中的数据,当会话结束后就会销毁;
和sessionStorage不同,localStorage用于持久化的本地存储,除非用户主动删除数据,否则数据永远不会过期;
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。

区别:
从浏览器和服务器间的传递看: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

从大小看: 存储大小限制不同,cookie数据不能超过4k,只适合保存很小的数据;而sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

从数据有效期看: sessionStorage在会话关闭会立刻关闭,因此持续性不久;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。而localStorage始终有效。

从作用域看: sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;而localStorage和cookie都是可以在所有的同源窗口中共享的。

29. 常见的浏览器内核有哪些

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则:解析和执行javascript来实现网页的动态效果。

Trident内核:IE最先开发或使用的, 360浏览器;

Webkit内核:Google Chrome,Safari, 搜狗浏览器,360极速浏览器, 阿里云浏览器等;

Gecko内核: Mozilla FireFox (火狐浏览器) ,K-Meleon浏览器;

Presto内核:Opera浏览器;

30. Canvas是什么?怎样写Canvas?

概念
Canvas是HTML5的一个元素,它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。

使用方式
如果要在我们的HTML文档中添加Canvas标签,我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。

<canvas id="myCanvas" width="100" height="100"> </canvas>

31. 使用HTML5需要遵守哪些规则

新的特性应该基于HTML、CSS、DOM和JavaScript,减少对外部插件的需求(如Flash);
更好的错误处理;
更多的替换脚本的标志;
HTML5应与设备无关;
开发过程必须可视化;

32. Html5应用程序缓存和HTML浏览器缓存有什么区别

新的HTML5规范的应用缓存最关键的就是支持离线应用,允许浏览器在链接客户端时预取一些或全部网站资产,如HTML文件,图像,CSS以及JS等,预取文件加速了站点的性能。换句话说,应用程序缓存可以预取完全未被访问的页面,从而在常规的浏览器缓存中不可用。与传统的浏览器缓存比较,该特性并不强制要求用户访问网站。

33. 最新的HTML5标准中的API是什么

Canvas :Canvas由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域,这与其他常见的2D API类似,因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。
媒体定时回放;
离线存储数据库;
文档编辑;
拖放;
跨文档消息传递;
浏览器历史管理;
MIME类型和协议处理程序注册;

34. LocalStorage本地存储在HTML5中有什么用途

localStorage本地存储相当于一个轻量级的数据库,可以在本地永久的储存数据(除非人为删除)。此外,还可以在断网情况下读取本地缓存的cookies。

使用localStorage保存数据: localStorage.setItem(key, value);
使用localStorage获取保存的数据: localStorage.getItem(key);
清除localStorage保存的数据: localStorage.removeItem(key);
清除全部localStorage对象保存的数据: localStorage.clear( );

35. 有关HTML5中新的输入类型属性

36. 对于web标准以及w3c有何理解与认识

于WEB而言:web标准简单来说可以分为结构、表现和行为。web标准一般是将该三部分独立分开,使其更具有模块化。但一般产生行为时,就会有结构或者表现的变化,也使这三者的界限并不那么清晰;
于W3C而言: W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范,如下:

结构上的要求:
标签必须闭合、标签小写、不乱嵌套,可以提高搜索机器人对网页内容的搜索几率;

对于css和js来说:
建议使用外链css和js脚本,从而达到结构与行为、结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容;
样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件, 从而降低维护成本、改版更方便;
不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性;

总之,遵循w3c制定的web标准,能够使用户浏览者更方便的阅读,使网页开发者之间更好的交流。

37. 新的HTML5文档类型和字符集是什么

HTML5文档类型:<!doctype html>
字符集:HTML5使用的编码

38. 渐进增强和优雅降级之间的区别

渐进增强(progressive enhancement):主要是针对低版本的浏览器进行页面重构,保证基本的功能情况下,再针对高级浏览器进行效果,交互等方面的改进和追加功能,以达到更好的用户体验。

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

区别
优雅降级是从复杂的现状开始的,并试图减少用户体验的供给;而渐进增强是从一个非常基础的,能够起作用的版本开始的,并在此基础上不断扩充,以适应未来环境的需要;

降级(功能衰竭)意味着往回看,而渐进增强则意味着往前看,同时保证其根基处于安全地带。

39. 为什么利用多个域名来存储网站资源会更有效

CDN缓存更加方便;
突破浏览器并发限制;
节约cookie宽带;
节约主域名的连接数,优化页面下响应速度;
防止不必要的安全问题;

40. 自身对网页标准和标准制定机构重要性有何理解

小编个人觉得:网页标准和标准制定机构是让web更加规范,更加标准,健康的发展所必不可少的东西。

于开发者而言: 开发者可以遵循统一的开发标准,大大降低了开发难度,开发成本,从而也提高了代码的可阅读性以及易于后期维护;

于SEO而言: 对SEO更加友好,提升了搜索效率。
使用网页标准和标准制定机构,对于提高网站的易用性起着非常大的作用。

41. 哪些浏览器支持HTML5

几乎所有的高版本浏览器Safari,Chrome,Firefox,Opera,IE8以上都支持HTML5。

42. 为什么HTML5里面我们不需要DTD

HTML5没有使用SGML或者XHTML,HTML5是一个全新的东西,因此不需要参考DTD,对于HTML5,仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档就行。

43. .浏览器如何对HTML5的离线储存资源进行管理和加载

有线情况下:
(1),浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。
(2),如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后 浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。

在离线情况下: 浏览器直接使用离线缓存的资源;

44. 页面可见性(Page Visibility)API 可以有哪些用途

在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放。

45. HTML5的form如何关闭自动完成功能

给不想要提示的input是设置 autocomplete=off 即可。

46.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求,浏览器得到html代码

e. 浏览器解析html代码,并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

47.网站重构的理解

重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。

a. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

b. 对于移动平台的优化,针对于SEO进行优化

c. 减少代码间的耦合,让代码保持弹性

d. 压缩或合并JS、CSS、image等前端资源

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

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

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

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

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

49.请阐述table的缺点

a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。

b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td

c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱

d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。

e. table需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。

50.HTTP和HTTPS

HTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS。

默认HTTP的端口号为80,HTTPS的端口号为443。

51.性能优化问题

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。

缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等

请求数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。

请求带宽:压缩文件,开启GZIP,

代码层面的优化

用hash-table来优化查找

少用全局变量

用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能

用setTimeout来避免页面失去响应

缓存DOM节点查找的结果

避免使用CSS Expression

避免全局查询

避免使用with(with会创建自己的作用域,会增加作用域链长度)

多个变量声明合并

避免图片和iFrame等的空Src。空Src会重新加载当前页面,影响速度和效率

尽量避免写在HTML标签中写Style属性

移动端性能优化

尽量使用css3动画,开启硬件加速。

适当使用touch事件代替click事件。

避免使用css3渐变阴影效果。

可以用transform: translateZ(0)来开启硬件加速。

不滥用Float。Float在渲染时计算量比较大,尽量减少使用

不滥用Web字体。Web字体需要下载,解析,重绘当前页面,尽量减少使用。

合理使用requestAnimationFrame动画代替setTimeout

CSS中的属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)会触发GPU渲染,请合理使用。过渡使用会引发手机过耗电增加

PC端的在移动端同样适用

52.cookie 和session 的区别:

1、cookie数据存放在客户的浏览器上,session数据放在服务器上。

2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能

考虑到减轻服务器性能方面,应当使用COOKIE。

4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

53.为什么HTTPS安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS,密钥在你和终点站才有。https之所以比http安全,是因为他利用ssl/tls协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性

54.请说出三种减少页面加载时间的方法。

1.优化图片
2.图像格式的选择
3.优化CSS
4.网址后加斜杠
5.标明高度和宽度
6.减少http请求(合并文件,合并图片)。

css

1.标签语义化

在这里插入图片描述
顾名思义,合理的标签干合适的事情

块级(display:block):div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot

行级(display:inline):a、span、small、strong、em、i、code、

行内块(display:inline-block):img、input

区别:

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

display还有none(隐藏dom)、flex(弹性)、table(表)

display:none和visibility:hidden、ocpacity:0(兼容用fliter)

filter滤镜:对比度、饱和度、阴影、色相、透明度

display:flex 响应式、兼容性

2.盒子水平垂直居中

在这里插入图片描述
项目中经常遇到这种需求,最开始xxx,喜欢用flex,后来发现xxx,在xx博客上突然发现xx更好,xx解决了兼容性(拒绝背书式)

(1)定位1:需要知道父的宽高
在这里插入图片描述
(2)定位2:需要父亲有宽高限定
在这里插入图片描述
(3)定位3:不需要父有具体宽高限制(兼容性不如上边Ie9+)
在这里插入图片描述
(4)display:flex(ie10+)
在这里插入图片描述
(5)js实现就是模拟css写样式
在这里插入图片描述
(6)固定宽高的父级 display:table-cell 子级inline-block
在这里插入图片描述

3.盒模型标准

标准盒模型(content-box)、ie怪异盒模型(border-box)、flex弹性伸缩盒模型、column多列盒模型

盒模型:分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分

IE盒模型和W3C标准盒模型的区别:

(1)W3C标准盒模型:属性width,height只包含内容content,不包含border和padding
(2)IE盒模型:属性width,height包含content、border和padding,指的是content+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制,默认值为content-box,即标准盒模型;如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型,所有的浏览器都会把盒模型解释为W3C盒模型。
在这里插入图片描述
在这里插入图片描述

4.::before 和:after 中双冒号和单冒号有什么区别?解释一下这 2 个伪元素的作用。

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)

双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前,使用::before,否者,使用::after;在代码顺序上,::after生成的内容也比::before生成的内容靠后。如果按堆栈视角,::after生成的内容会在::before生成的内容之上。

伪类一般匹配的是元素的一些特殊状态,如hover、link等,而伪元素一般匹配的特殊的位置,比如after、before等。

5.CSS 选择符有哪些?

(1)id选择器(#myid)
(2)类选择器(.myclassname)
(3)标签选择器(div,h1,p)
(4)后代选择器(h1p)
(5)相邻后代选择器(子)选择器(ul>li)
(6)兄弟选择器(li~a)
(7)相邻兄弟选择器(li+a)
(8)属性选择器(a[rel=“external”])
(9)伪类选择器(a:hover,li:nth-child)
(10)伪元素选择器(::before、::after)
(11)通配符选择器(*)

6.伪类与伪元素的区别

CSS伪类:用于向某些选择器添加特殊的效果。
CSS伪元素:用于将特殊的效果添加到某些选择器。

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说,我们可以通过::before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号(::)而不是一个冒号(:)。这是CSS3的一部分,并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用(::)而不是(:),从而区分伪类和伪元素。但是,由于在旧版本的W3C规范并未对此进行特别区分,因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

7.CSS 中哪些属性可以继承?

每个CSS属性定义的概述都指出了这个属性是默认继承的,还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算值。

当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值(这里的意思应该是在该属性本身的定义中的默认值)。

当元素的一个非继承属性(在Mozillacode里有时称之resetproperty)没有指定值时,则取属性的初始值initialvalue(该值在该属性的概述里被指定)。

有继承性的属性:

(1)字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

(2)文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color

(3)表格布局属性
caption-sideborder-collapseempty-cells

(4)列表属性
list-style-type、list-style-image、list-style-position、list-style

(5)光标属性
cursor

(6)元素可见性
visibility

(7)还有一些不常用的;speak,page,设置嵌套引用的引号类型quotes等属性

注意:当一个属性不是继承属性时,可以使用inherit关键字指定一个属性应从父元素继承它的值,inherit关键字用于显式地指定继承性,可用于任何继承性/非继承性属性。

8.CSS 优先级算法如何计算?

CSS的优先级是根据样式声明的特殊性值来判断的。

选择器的特殊性值分为四个等级,如下:

(1)标签内选择符x,0,0,0
(2)ID选择符0,x,0,0
(3)class选择符/属性选择符/伪类选择符 0,0,x,0
(4)元素和伪元素选择符0,0,0,x

计算方法:

(1)每个等级的初始值为0
(2)每个等级的叠加为选择器出现的次数相加
(3)不可进位,比如0,99,99,99
(4)依次表示为:0,0,0,0
(5)每个等级计数之间没关联
(6)等级判断从左向右,如果某一位数值相同,则判断下一位数值
(7)如果两个优先级相同,则最后出现的优先级高,!important也适用
(8)通配符选择器的特殊性值为:0,0,0,0
(9)继承样式优先级最低,通配符样式优先级高于继承样式
(10)!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。

计算实例:

(1)#demoa{color:orange;}/特殊性值:0,1,0,1/
(2)div#demoa{color:red;}/特殊性值:0,1,0,2/

注意:
(1)样式应用时,css会先查看规则的权重(!important),加了权重的优先级最高,当权重相同的时候,会比较规则的特殊性。

(2)特殊性值越大的声明优先级越高。

(3)相同特殊性值的声明,根据样式引入的顺序,后声明的规则优先级高(距离元素出现最近的)

9关于伪类 LVHA 的解释?

a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active;

当链接未访问过时:

(1)当鼠标滑过a链接时,满足:link和:hover两种状态,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;

(2)当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

当链接访问过时,情况基本同上,只不过需要将:link换成:visited。

这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。

10.CSS3 新增伪类有那些?

(1)elem:nth-child(n)选中父元素下的第n个子元素,并且这个子元素的标签名为elem,n可以接受具体的数值,也可以接受函数。

(2)elem:nth-last-child(n)作用同上,不过是从后开始查找。

(3)elem:last-child选中最后一个子元素。

(4)elem:only-child如果elem是父元素下唯一的子元素,则选中之。

(5)elem:nth-of-type(n)选中父元素下第n个elem类型元素,n可以接受具体的数值,也可以接受函数。

(6)elem:first-of-type选中父元素下第一个elem类型元素。

(7)elem:last-of-type选中父元素下最后一个elem类型元素。

(8)elem:only-of-type如果父元素下的子元素只有一个elem类型元素,则选中该元素。

(9)elem:empty选中不包含子元素和内容的elem类型元素。

(10)elem:target选择当前活动的elem元素。

(11):not(elem)选择非elem元素的每个元素。

(12):enabled 控制表单控件的禁用状态。

(13):disabled 控制表单控件的禁用状态。

(14):checked单选框或复选框被选中。

11.display 有哪些值?说明他们的作用。

block 块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
none 元素不显示,并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block默认宽度为内容宽度,可以设置宽高,同行显示。
list-item 像块类型元素一样显示,并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。

12.position 的值 relative 和 absolute 定位原点是?

absolute
生成绝对定位的元素,相对于值不为static的第一个父元素的paddingbox进行定位,也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的paddingbox的左上角为原点的。

fixed(老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。

relative
生成相对定位的元素,相对于其元素本身所在正常位置进行定位。

static
默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right,z-index声明)。

inherit
规定从父元素继承position属性的值。

13.CSS3 有哪些新特性?(根据项目回答)

新增各种CSS选择器 (:not(.input):所有class不是“input”的节点)
圆角 (border-radius:8px)
多列布局 (multi-columnlayout)
阴影和反射 (Shadow\Reflect)
文字特效 (text-shadow)
文字渲染 (Text-decoration)
线性渐变 (gradient)
旋转 (transform)
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:

14.请解释一下 CSS3 的 Flexbox(弹性盒布局模型),以及适用场景?

Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素,称为Flex容器(flexcontainer),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flexitem),简称"项目"。

容器默认存在两根轴:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis),项目默认沿主轴排列。

以下6个属性设置在容器上。

flex-direction属性决定主轴的方向(即项目的排列方向)。

flex-wrap属性定义,如果一条轴线排不下,如何换行。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为rownowrap。

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content 只适用多行的flex容器(也就是flex容器中的子项不止一行时该属性才有效果),它的作用是当flex容器在交叉轴上有多余的空间时,将子项作为一个整体(属性值为:flex-start、flex-end、center时)进行对齐。

以下6个属性设置在项目上。

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认
值为auto,即项目的本来大小。

flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为01auto。

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

15.用纯 CSS 创建一个三角形的原理是什么?

采用的是相邻边框连接处的均分原理。将元素的宽高设为0,只设置border,把任意三条边隐藏掉(颜色设为transparent),剩下的就是一个三角形。

.demo {
   
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-top: 20px solid skyblue;
	}

16.CSS 多列等高如何实现?

(1)利用padding-bottom|margin-bottom正负值相抵,不会影响页面布局的特点。设置父容器设置超出隐藏(overflow:hidden),这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

.Article {
   
  overflow: hidden;
}

.Article>li {
   
  float: left;
  margin: 0 10px -9999px 0;
  padding-bottom: 9999px;
  background: #4577dc;
  width: 200px;
  color: #fff;
}

.Article>li>p {
   
  padding: 10px;
}

(2)利用table-cell所有单元格高度都相等的特性,来实现多列等高。

.Article {
   
  display: table;
  width: 100%;
  table-layout: fixed;
}

.Article>li {
   
  display: table-cell;
  width: 200px;
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color
  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值