最新前端面试题大全(html篇)
- 格式:doc
- 大小:75.00 KB
- 文档页数:8
前端开发工程师面试题及答案在前端开发领域,面试是选拔优秀人才的重要环节。
以下是一些常见的前端开发工程师面试题以及对应的参考答案。
一、HTML 和 CSS 相关问题1、解释一下盒模型以及它在布局中的作用。
答案:盒模型是 CSS 中用于布局的基本概念,它由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
在布局中,理解盒模型对于准确计算元素的尺寸和间距非常重要,能够帮助我们实现各种复杂的页面布局。
2、如何实现一个两栏布局,左边固定宽度,右边自适应?答案:可以使用多种方法实现。
一种常见的方式是使用浮动(float),将左边栏设置为固定宽度并向左浮动,右边栏不浮动,并设置其左边的外边距(marginleft)为左边栏的宽度。
也可以使用 flex 布局,将父容器设置为 display: flex; ,左边栏设置固定宽度,右边栏设置flex: 1; 以实现自适应。
3、说一说 CSS 选择器的种类和优先级。
答案:CSS 选择器包括元素选择器、类选择器、id 选择器、属性选择器、伪类选择器、伪元素选择器等。
选择器的优先级从高到低依次为:内联样式(通过 style 属性设置)> id 选择器>类选择器、属性选择器、伪类选择器>元素选择器、伪元素选择器。
二、JavaScript 相关问题1、谈谈你对 JavaScript 中作用域和闭包的理解。
答案:作用域决定了变量的可见性和可访问性。
在 JavaScript 中有全局作用域和函数作用域。
闭包是指有权访问另一个函数作用域中的变量的函数。
闭包可以让函数记住其创建时的环境,即使外部函数已经执行完毕,闭包仍能访问外部函数中的变量。
2、如何实现 JavaScript 的继承?答案:常见的实现方式有原型链继承、借用构造函数继承、组合继承、寄生组合继承等。
原型链继承通过将子类型的原型指向父类型的实例来实现继承;借用构造函数继承通过在子类型的构造函数中调用父类型的构造函数来继承属性;组合继承结合了原型链继承和借用构造函数继承的优点;寄生组合继承是一种优化的组合继承方式,避免了不必要的父类实例属性的重复创建。
前端常见的HTML+CSS⾯试题(附答案)HTML1. <image>标签上title属性与alt属性的区别是什么?alt属性是为了给那些不能看到你⽂档中图像的浏览者提供⽂字说明的。
且长度必须少于100个英⽂字符或者⽤户必须保证替换⽂字尽可能的短。
这包括那些使⽤本来就不⽀持图像显⽰或者图像显⽰被关闭的浏览器的⽤户,视觉障碍的⽤户和使⽤屏幕阅读器的⽤户等。
title属性为设置该属性的元素提供建议性的信息。
使⽤title属性提供⾮本质的额外信息。
参考《alt和title属性的区别及应⽤》2. 分别写出以下⼏个HTML标签:⽂字加粗、下标、居中、字体加粗:<b>、<strong>下标:<sub>居中:<center>字体:<font>、<basefont>3. 请写出⾄少5个html5新增的标签,并说明其语义和应⽤场景section:定义⽂档中的⼀个章节nav:定义只包含导航链接的章节header:定义页⾯或章节的头部。
它经常包含 logo、页⾯标题和导航性的⽬录。
footer:定义页⾯或章节的尾部。
它经常包含版权信息、法律信息链接和反馈建议⽤的地址。
aside:定义和页⾯内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
4. 请说说你对标签语义化的理解?a. 去掉或者丢失样式的时候能够让页⾯呈现出清晰的结构b. 有利于SEO:和搜索引擎建⽴良好沟通,有助于爬⾍抓取更多的有效信息:爬⾍依赖于标签来确定上下⽂和各个关键字的权重;c. ⽅便其他设备解析(如屏幕阅读器、盲⼈阅读器、移动设备)以意义的⽅式来渲染⽹页;d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
5. Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?声明位于⽂档中的最前⾯,处于标签之前。
告知浏览器以何种模式来渲染⽂档。
前端面试题及答案在前端领域中,面试是获取工作机会的重要环节。
为了帮助准备前端面试的候选人们,本文将提供一些常见的前端面试题及其答案,以供参考。
一、HTML相关面试题1. 请简述HTML的概念和作用。
HTML是超文本标记语言的缩写,用于构建网页的标准标记语言。
它通过标签来定义页面的结构和内容,并与CSS和JavaScript等其他技术协同工作,实现页面的渲染和交互。
2. 请解释一下HTML5的新特性。
HTML5引入了许多新特性,例如语义化标签(如header、footer、nav等)、视频和音频元素、Canvas绘图功能、本地存储(localStorage 和sessionStorage)、WebSocket等。
这些特性提升了网页的功能和性能,使开发者能够更好地构建富交互、多媒体的网页应用。
3. 请描述一下HTML元素的块级元素和内联元素的区别。
块级元素会独占一行,相邻的两个块级元素会自动换行。
常见的块级元素有div、p、h1等。
而内联元素不会换行,会在一行内按照从左到右的顺序排列。
常见的内联元素有span、a、em等。
此外,块级元素可以包含内联元素,但是内联元素不能包含块级元素。
二、CSS相关面试题1. 请解释一下盒模型。
盒模型描述了一个HTML元素所占空间的模型。
它由内容区、内边距、边框和外边距组成。
其中,内容区的大小由width和height属性决定,内边距由padding属性决定,边框由border属性决定,外边距由margin属性决定。
2. 如何实现水平居中一个块级元素?要实现水平居中一个块级元素,可以设置其左右外边距为auto,同时将其display属性设置为block。
例如,假设元素的宽度为300px,可以使用如下CSS代码:```css.element {width: 300px;margin-left: auto;margin-right: auto;display: block;}```3. 请解释一下CSS选择器的优先级。
web前端开发面试题及答案Web前端开发是互联网行业中一个非常热门的领域,涉及到网页设计、开发和用户体验等多个方面。
在面试过程中,面试官通常会提出一系列问题来评估应聘者的专业知识和技能。
以下是一些常见的Web前端开发面试题及答案:1. HTML相关问题- 问:HTML5有哪些新特性?- 答:HTML5引入了新的语义元素如`<header>`, `<footer>`,`<article>`, `<section>`等,增强了表单控件,如`<inputtype="date">`,`<input type="range">`等,支持多媒体内容,如`<video>`和`<audio>`,以及提供了绘图功能`<canvas>`。
2. CSS相关问题- 问:CSS选择器有哪些类型?- 答:CSS选择器主要有以下几种类型:元素选择器、类选择器(如`.class`)、ID选择器(如`#id`)、属性选择器(如`[type="text"]`)、伪类选择器(如`:hover`, `:first-child`)和伪元素选择器(如`::before`, `::after`)。
3. JavaScript相关问题- 问:JavaScript中的闭包是什么?- 答:闭包是指一个函数能够记住并访问其创建时的环境,即使该环境的外部上下文已经执行完毕。
闭包通常用于创建私有变量和方法,或者在回调函数中使用外部变量。
4. 响应式设计相关问题- 问:如何实现响应式网页设计?- 答:实现响应式网页设计主要依赖于CSS媒体查询(Media Queries),通过不同的屏幕尺寸和设备特性来应用不同的样式规则。
同时,使用流体布局(使用百分比而非固定像素)和可伸缩的图片和媒体元素也是关键。
2022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)随着互联网行业的快速发展,Web前端工程师成为了越来越受欢迎的职业。
面试是求职过程中不可或缺的一环,为了帮助前端开发者更好地备战面试,本文整理了2022最新Web前端经典面试试题及答案,希望对您有所帮助。
一、HTML/CSS相关问题1. Doctype声明的作用是什么?答案:Doctype声明用于告诉浏览器页面使用的HTML版本,它有助于浏览器确定如何渲染页面。
如果没有Doctype声明,浏览器将进入怪异模式(quirks mode),导致页面布局出现不一致。
2. HTML5有哪些新特性?答案:HTML5新增了许多新特性,包括语义化标签(如article、section等)、视频和音频标签、Canvas绘图、拖放API、地理位置API等。
3. CSS盒模型有哪些组成部分?答案:CSS盒模型包括四个组成部分:margin(外边距)、border(边框)、padding(内边距)和content(内容)。
4. 如何实现水平垂直居中?答案:可以使用Flexbox布局、Grid布局或者使用定位和transform属性实现水平垂直居中。
二、JavaScript相关问题1. 请解释一下事件冒泡和事件捕获。
答案:事件冒泡是指当子元素上的事件被触发后,会向上传播到父元素;事件捕获则是指事件从父元素开始,向下传播到子元素。
大多数现代浏览器默认使用事件冒泡。
2. 如何实现深拷贝和浅拷贝?答案:浅拷贝只复制对象的第一层属性,深拷贝则会复制对象的所有层级。
可以使用JSON.parse(JSON.stringify(obj))实现简单的深拷贝,但这种方法无法处理函数和循环引用。
对于复杂对象,可以使用递归或者其他第三方库(如lodash的cloneDeep方法)实现深拷贝。
3. 请解释一下闭包(Closure)。
答案:闭包是指在一个外部函数中定义了一个内部函数,内部函数可以访问外部函数作用域内的变量。
最新Web前端经典面试试题及答案一、HTML/CSS面试题1. 问题:Doctype声明的作用是什么?答案:Doctype声明用于告诉浏览器页面使用的HTML版本。
它对浏览器解析HTML文档的方式有重要影响。
如果没有声明Doctype,浏览器会进入怪异模式(quirks mode),导致不同浏览器之间的渲染差异。
2. 问题:请解释一下盒模型的概念。
答案:盒模型是CSS布局的基础,它将HTML元素视为一个矩形盒子,由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
通过调整这些属性,我们可以控制元素在页面上的布局。
3. 问题:如何实现水平垂直居中?答案:有多种方法可以实现水平垂直居中,以下是一些常见的方法:- 使用Flexbox布局:父元素设置为display: flex; justify-content: center; align-items: center;- 使用Grid布局:父元素设置为display: grid; place-items: center;- 使用定位和transform:子元素设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);- 使用表格布局:父元素设置为display: table; 子元素设置为display: table-cell; vertical-align: middle; text-align: center;4. 问题:什么是响应式设计?答案:响应式设计是一种网页设计方法,旨在使网页能够适应不同设备和屏幕尺寸。
通过使用媒体查询(Media Queries)和弹性布局(如Flexbox或Grid),可以实现在不同设备上提供最佳的用户体验。
二、JavaScript面试题1. 问题:什么是闭包?请给出一个例子。
web前端上机面试题一、HTML部分HTML(超文本标记语言)是构建网页的基础,是Web前端开发的入门必备知识。
下面是一些关于HTML的面试题。
1. 什么是HTML?HTML是一种标记语言,用来构建网页并告诉浏览器如何展示网页内容。
2. HTML的基本结构是什么?HTML文档由<html>标签包围,在<html>标签中分为<head>和<body>两个部分,<head>中包含了网页的元数据和链接引用,<body>中包含了网页的可见内容。
3. HTML中链接是如何创建的?链接可以使用<a>标签来创建,通过href属性指定链接的目标URL。
4. HTML中如何插入图片?使用<img>标签可以向网页中插入图片,通过src属性指定图片的路径。
5. HTML中如何创建表格?使用<table>标签可以创建表格,通过<tr>、<td>和<th>标签定义表格的行、列和表头。
6. HTML中如何创建无序列表和有序列表?使用<ul>标签创建无序列表,使用<ol>标签创建有序列表。
列表项可以使用<li>标签来定义。
二、CSS部分CSS(层叠样式表)用来定义网页的样式,可以让网页更加美观和易于阅读。
以下是一些关于CSS的面试题。
1. 什么是CSS?CSS是一种样式表语言,用于描述网页的外观和样式。
2. 如何在HTML中引入CSS样式?可以通过<link>标签在HTML文件的<head>部分引入外部CSS文件,也可以使用<style>标签在<head>中定义内部CSS。
3. 如何选择和修改HTML元素的样式?可以使用CSS选择器来选择需要修改的元素,然后使用CSS属性来改变其样式。
4. CSS中的盒模型是什么?盒模型是用来描述HTML元素布局的一种模型,包括内容区、内边距、边框和外边距。
html面试题及答案在面试过程中,HTML是经常问及的一个重要主题。
作为网页开发的基础语言,掌握HTML的知识对于获取相关职位至关重要。
以下是一些常见的HTML面试题及其答案,希望对你在面试中有所帮助。
1. 什么是HTML?HTML(超文本标记语言)是一种用于创建网页的标准标记语言。
它由一系列的元素(标签)组成,每个元素都有特定的含义和用途。
2. HTML中DOCTYPE的作用是什么?DOCTYPE声明告诉浏览器当前文档使用的是哪个HTML版本及其规范。
它的存在能够确保浏览器以标准模式渲染网页,避免触发浏览器的怪异模式。
3. 如何在HTML中注释?在HTML中,注释的格式是<!-- 这是注释 -->。
注释内容不会被浏览器渲染,并且可以用来告诉其他开发人员特定代码的用途或注意事项。
4. HTML中行内元素和块级元素的区别是什么?行内元素在一行内显示,只占据其内容的宽度空间,不强制换行。
常见的行内元素有a、span、strong等。
而块级元素则会独占一行,可以设置宽度、高度等样式属性,会自动换行。
常见的块级元素有div、p、h1等。
5. 什么是HTML表单,如何创建一个表单?HTML表单用于向服务器发送用户输入的数据。
创建一个表单需要使用<form>标签,并使用<input>、<textarea>等标签添加表单元素,同时还可以使用<button>标签添加提交按钮。
6. 如何在HTML中插入图像?要在HTML中插入图像,可以使用<img>标签,并通过src属性指定图像的路径。
例如:<img src="image.jpg" alt="图像描述">。
7. HTML5中的新特性有哪些?HTML5引入了许多新特性,例如语义化标签(如<header>、<footer>等),视频和音频支持(<video>、<audio>标签),本地存储(localStorage、sessionStorage),Canvas绘图等。
前端面试题库及答案1. HTML5 新增的表单元素有哪些?- 答案:HTML5 新增的表单元素包括 `<input>` 类型的 `email`、`url`、`number`、`range`、`date`、`month`、`week`、`time`、`datetime`、`datetime-local`、`search`、`tel`、`color`,以及`<datalist>`、`<keygen>`、`<output>` 等。
2. CSS3 中新增了哪些选择器?- 答案:CSS3 中新增的选择器包括属性选择器、伪类选择器(如`:nth-child`、`:nth-of-type`、`:last-child`、`:last-of-type`、`:first-of-type`、`:only-child`、`:only-of-type`、`:empty`、`:not`、`:target`、`:enabled`、`:disabled`、`:checked` 等)和伪元素选择器(如 `::before`、`::after`)。
3. JavaScript 中如何实现深拷贝?- 答案:JavaScript 中实现深拷贝的方法有多种,常见的有:- 使用 `JSON.parse(JSON.stringify(object))`,但这种方法不能拷贝函数和循环引用的对象。
- 使用递归函数手动遍历对象属性进行拷贝。
- 使用第三方库,如 Lodash 的 `_.cloneDeep` 方法。
4. 解释 JavaScript 中的原型继承和组合继承的区别。
- 答案:原型继承是通过原型链实现继承,子类型继承父类型的原型。
组合继承结合了原型链继承和构造函数继承,通过构造函数继承父类型的实例属性,通过原型链继承父类型的原型属性。
5. 什么是跨域请求?如何解决跨域问题?- 答案:跨域请求是指浏览器向与当前页面不同的域发送请求。
前端面试题目及答案一、HTML基础1. 什么是HTML?HTML的全称是什么?HTML是一种标记语言,用于定义网页的结构和内容。
其全称为超文本标记语言(HyperText Markup Language)。
2. 请列举HTML中常用的标签,并简要介绍其作用。
- `<h1>`至`<h6>`:用于定义标题,`<h1>`为最高级标题,`<h6>`为最低级标题。
- `<p>`:用于定义段落。
- `<a>`:用于创建超链接。
- `<img>`:用于插入图像。
- `<div>`:用于定义文档中的一个分区或节。
- `<span>`:用于对文档中的一部分进行分组。
3. HTML中的行内元素和块级元素有什么区别?行内元素通常在文档中与其他内容同行显示,不会独占一行,只占据自身内容所需的空间。
常见的行内元素有`<a>`、`<span>`等。
块级元素独占一行,会自动换行,并占据其父元素的全部宽度。
常见的块级元素有`<div>`、`<p>`等。
4. 请解释HTML5中的语义化标签,并列举几个例子。
HTML5引入了一些语义化标签,有助于理解和组织页面结构。
它们能够明确描述其内容的含义,提高了可读性和可维护性。
常见的例子包括:- `<header>`:文档或节的头部。
- `<nav>`:导航链接的区域。
- `<article>`:独立的自包含内容块。
- `<section>`:文档中的独立部分。
- `<footer>`:文档或节的底部。
二、CSS基础1. 什么是CSS?CSS的全称是什么?CSS是一种用于描述网页样式和布局的样式表语言。
其全称为层叠样式表(Cascading Style Sheets)。
2. 请解释什么是CSS选择器,并列举几种常见的选择器。
1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言。
最主要的不同:(1)XHTML元素必须被正确地嵌套(2)XHTML元素必须被关闭(3)XHTML标签名必须用小写字母(4)XHTML文档必须拥有根元素2.什么是语义化的HTML?html5的语义化是指用正确的标签包含正确的容,比如nav标签就应该包含导航条容(1)直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情!(2)html语义化就是让页面的容结构化,便于对浏览器、搜索引擎解析(3)在没有CCS样式情况下也以一种文档格式显示,并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重,利于SEO。
(4)使阅读源代码的人更容易将分块,便于阅读维护理解。
写一段语义的html代码(HTML5中新增加的很多标签如:<article>、<nav>、<header>和<footer>等。
就是基于语义化设计原则)< div id="header">< h1>标题< /h1>< h2>专注Web前端技术< /h2>< /div>语义 HTML 具有以下特性:文字包裹在元素中,用以反映容。
例如:段落包含在 <p> 元素中。
顺序表包含在<ol>元素中。
从其他来源引用的大型文字块包含在<blockquote>元素中。
HTML 元素不能用作语义用途以外的其他目的。
例如:<h1>包含标题,但并非用于放大文本。
<blockquote>包含大段引述,但并非用于文本缩进。
空白段落元素 (<p></p>) 并非用于跳行。
文本并不直接包含任何样式信息。
例如:不使用 <font> 或 <center> 等格式标记。
类或 ID 中不引用颜色或位置。
3.常见的浏览器核有哪些?Trident核:IE, Max Thon, TT, The World,360,搜狗浏览器等。
[又称MSHTML]Gecko核:Netscape6及以上版本,FF, Mozilla Suite / Sea Monkey等Presto核:Opera7及以上。
[Opera核原为:Presto,现为:Blink;]Webkit核:Safari, Chrome等。
[ Chrome的:Blink(WebKit的分支)]4.HTML5有哪些新特性、移除了那些元素?如何区分 HTML 和HTML5?HTML5 现在已经不是 SGML 的子集。
主要是关于图像,位置,存储,多任务等功能的增加:(1)标签语义化(如header,footer,nav,aside,article,section),新增很多表单元素,如email,url(2)音视频元素 video, audio不需要在依赖外部的插件就可以往网页中加入音/视频元素(3)新增很多api如获取用户地理位置的window.navigator.geoloaction(4) webstorage 本地存储,存储在客户端,包括localeStorage和sessionStorage(5)websocket一种协议,可以让我们建立客户端到服务器端的全双工通信,这就意味着服务器端可以主动推送数据到客户端(6) webworker是运行在浏览器后台的js程序,是另开的一个线程,不影响主程序运行可用webworker执行复杂的数据操作,再把操作结果通过postMessage传递给主线程这样在进行复杂且耗时的操作时就不会阻塞主线程了(7)缓存 html5允许我们自己控制哪些文件需要缓存,哪些不需要,具体的做法如下:1) 首先给html添加manifest属性,并赋值为cache.manifest2) cache.manifest的容为:CACHE MANIFEST#v1.2CACHE : //表示需要缓存的文件a.jsb.jsNETWORK: //表示只在用户在线的时候才需要的文件,不会缓存c.jsFALLBACK //表示如果找不到第一个资源就用第二个资源代替index.html移除的元素:纯表现的元素 basefont,big,center,font, s,strike,tt,u;对可用性产生负面影响的元素 frame,frameset,noframes;多个页面之间如何进行通信使用cookie,使用web worker,使用localeStorage和sessionStorage5.区分HTML和HTML5a在文档类型声明上, html有很长的一段代码,html5却只有简单的声明html:<!DOCTYPE html PUBLIC "…" "…"> <html xmlns="/1999/xhtml"> html5:<!doctype html>b在结构语义上html没有体现结构语义化的标签通常都是<div id="header"></div>这样来命名的,这样表示的头部。
Html5有体现结构语义化的标签(处理HTML5新标签的浏览器兼容问题最好的方式是直接使用成熟的框架如html5shim)6.请描述一下 cookies,sessionStorage 和 localStorage 的区别?cookie存储在客户端大小受限,并且每次你请求一个新的页面时Cookie都会被发送,浪费带宽。
需指定作用域,不可以跨域调用。
有一定的过期时间,过期后自动会消失作用是与服务器进行交互,作为HTTP规的一部分而存在web Storage存储在客户端是为更大容量存储设计的(8M, cookie 4K)拥有setItem,getItem,removeItem,clear等方法(cookie需要开发者自己封装setCookie,getCookie)作用是在本地“存储”数据sessionStorage会话级别的存储,仅用于在本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
7.如何实现浏览器多个标签页之间的通信?调用localstorge、cookies等本地存储方式。
8.HTML5 为什么只需要写 !DOCTYPE HTML?HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型HTML5 不基于SGML,因此不需对DTD进行引用,但需要doctype来规浏览器的行为(让浏览器按照它们应该的方式来运行)。
9.Doctype作用?标准模式与兼容模式各有什么区别?!DOCTYPE声明位于HTML文档第一行,处于html 标签之前。
告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
10.Doctype中区分严格模式与混杂模式有什么意义?严格模式:使用此类型的网页,浏览器解析将相对严格,不允许使用任何表现样式的标识和属性,比如在元素中直接使用background-color背景色属性。
混杂模式:浏览器对XHTML的解析较为宽松。
允许使用4.01中的标签,但必须符合XHTML 的语法。
如何触发这两种模式?加入XMl声明可触发11.简述一下src与href的区别href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档()之间的(用于超)src 是指向外部资源所在位置,指向的容将会嵌入到文档中当前标签所在位置(在请求src资源时会将其指向的资源下载并应用到文档,例如js脚本, img图片和frame等元素)(当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕) (这就是为什么将js脚本放在底部而不是头部)12、简述同步和异步的区别同步是阻塞模式: 指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;异步是非阻塞模式: 指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。
当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。
13、什么叫渐进增强和优雅降级?渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
区别:a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带14.浏览器渲染原理(1)首先获取html , HTML被解析成DOM Tree,CSS被解析成CSS Rule Tree(2)把DOM Tree和CSS Rule Tree经过整合生成Render Tree(布局阶段)(3)元素按照算出来的规则,把元素放到它该出现的位置,通过显卡画到屏幕上15.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、使用外链css和js脚本结构行为表现分离、加快文件下载与页面速度更少的代码和组件,容易维护、改版方便,提高易用性16.Restful API是什么Restful的意思就是(资源)表现层状态转化。
"资源": 就是网络上的一个实体,或者说网络上的一个具体信息。
它可以是一段文本、一图片、一首歌曲、一种服务,总之就是一个具体的实在,每一个URI代表一种资源(Resources)。
"表现层": 其实指的是"资源"的"表现层",把"资源"具体呈现出来的形式,叫做它的"表现层"(Representation)。
如果客户端想要操作服务器,必须通过某种手段,让服务器端发生"状态转化"(State Transfer)。