1. 请说明ajax异步请求原理。 浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作 Ajax的核心是JavaScript对象XMLHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
  1. Ajax请求的五个步骤: (1）建立xmlHttpRequest对象 (2)设置回调函数 (3)使用open方法与服务器建立连接 (4)向服务器发送数据 (5)在回调函数中针对不同的响应状态进行处理
  1. 请简要说明axios对ajax的封装实现及优点。 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。他的优点： (1)从浏览器中创建 XMLHttpRequest (2)支持 Promise API (3)客户端支持防止CSRF (4)提供了一些并发请求的接口（重要，方便了很多的操作） (5)从 node.js 创建 http 请求 (6)拦截请求和响应 (7)转换请求和响应数据 (8)取消请求 (9)自动转换JSON数据
  1. 请简述HTML页面编码基本规范。 (1)所有标记均以“<”开始、以“>”结束。 (2)根据标记类型，正确输入标记，单个标记最好在右尖括号前加1个斜杠“/”，如换行标记是单标记<br/>，成对标记最好同时输入起始标记和结束标记，以免忘记。 (3)标记可以嵌套使用，但不能交叉使用。 (4)在HTML代码中不区分大小写。 (5)标记中可以设置各种属性，属性值建议用双引号标注起来 (6)书写开始与结束标记时，在左尖括号与标记名或与斜杠“/”之间不能留有多余空格，否则浏览器标记不能识别，导致错误标记直接显示在页面上，影响页面美观效果。 (7)编写HTML代码时，应该使用锯齿结构，即采用缩进风格，使代码结构清晰，便于理解和分析页面的结构，便于代码后期阅读和维护
  1. 请简要说明Web页面设计原则。 简洁：满足人们的实用和需求为目标，要求简练，准确。 一致性：网站中各个页面使用相同的页边距，页面中的每个元素与整个页面以及站点的色彩和风格上的一致性。 好的对比度：对比度的目的强调突出关键内容，以吸引浏览者，鼓励他们去发掘更深层次的内容。
  1. 请简要说明HTML5的特性。 (1)语义特性（Semantic）。HTML5赋予网页更好的意义和结构。 (2)离线与存储特性（Offline & Storage）。HTML5开发的网页APP，启动时间更短，联网速度更快。由于有HTML5 APP Cache、本地存储功能、Indexed DB和File API说明文档。 (3)设备访问特性 (Device Access)。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与麦克风及摄像头相联。 (4)多媒体特性(Multimedia)。 支持网页端的Audio、Video等多媒体功能，与网站自带的APPS、摄像头、影音功能相得益彰。 (5)三维、图形与特效特性（3D、Graphics & Effects）。基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。 (6)性能与集成特性（Performance & Integration）。 HTML5会通过Web Workers和XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。 (7)连接特性（Connectivity）。HTML5拥有更有效的服务器推送技术(Server-Sent Event和WebSockets)，能够帮助我们实现服务器将数据“推送”到客户端的功能。 (8)CSS3特性(CSS3)。CSS3中提供了更多的风格和更强的效果。
  1. 请简要说明HTML5 的优势。 (1)摆脱对平台的依赖。打开浏览器，直接就可以访自己的应用。 (2)实时更新。 (3)离线使用。用户可以离线使用，更新下载量较少。 (4)代码更安全。HTML5可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。 (5)跨平台。JavaScript的代码可以在许多地方使用，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。 (6)可以充分利用Native。HTML5可以通过浏览器作为中介充分利用Native的好处(使用GPS、照相机、本地相册、读取本地联系人等）。某些Web无法实现的功能，可以利用Native来实现。
  1. 请说明HTML5 Web Storage: HTML5 提供了两种在客户端存储数据的新方法，分别是持久化的数据存储localStorage、会话式的数据存储sessionStorage。 在HTML5 中，数据不需要由每个服务器进行请求传递，只需在有请求时使用数据，这样就不会影响网站的性能，而且能够存储大量数据。数据通常以“键值对(key-value pair)”形式存在，Web 网页的数据只允许该网页访问使用。 localStorage 对象存储的数据没有时间限制，所以称为持久化存储，数据存储长期可用。 使用此类对象之前，最好先检查一下浏览器是否支持。localStorage 对象和sessionStorage 对象具有同样的方法，仅仅是对象名称不同而已。 sessionStorage对象针对一个session进行数据存储。数据存储周期短，当用户关闭浏览器窗口后，数据会被删除。该对象的方法与localStorage 对象方法相同。
CSS规则由选择器和声明组成，声明由属性和属性值对组成。 CSS提供了丰富的选择器类型，   包括标记选择器、类选择器、id选择器及伪类选择器等
  1. 请说明CSS的优势。 (1)表现和内容相分离。CSS通过定义HTML标记的样式，使得页面内容和显示相分离，简化了网页格式设计，也使得对网页格式的修改更方便。 (2)加强了网页的表现力：CSS样式属性提供了比HTML更多的格式设计功能。例如，去掉网页超级链接的下划线、给文字添加阴影等。 (3)增强了网站风格的一致性。CSS样式定义到样式表文件中，在多个网页中同时应用样式表文件中的样式，就确保了多个网页具有一致的格式。可以随时更新样式表文件，改变网站风格。大大降低了网站的开发与维护工作。
  1. 举例说明CSS常用的几种类型的选择器。 (1)标记选择符：对HTML的标记重定义。该样式立即生效。p,h1{font-size:30px;color:blue;font-family:黑体;} (2)类选择符：以点号“.”开头，并可以任意命名，如.div1、.files等，该样式应用后生效，有些标记的样式相同时，可以定义成选择符组。 .div1,.file{background:red;color:white;} 联合选择器---标记+类选择器（p.c3{color:red;}） (3)ID选择符：以“#”开始，并可以任意命名。 #div1{background:red;color:white;} (4)伪选择符：一种特殊的类选择符，最大的作用就是对链接<a>的不同状态定义不同的样式效果。 a:link{color:#339999;text-decoration:none;} (5)CSS 属性选择器： 定义属性选择器时，方括号“[]”将属性包围住，如下所示： [title]{color:red;}
  • ID选择符与类选择符的区别：
（1）类选择符可以给任意多的标记定义样式，但ID选择符在页面中标记中只能使用一次；
（2）ID选择符样式比类选择符样式优先级高。ID选择符局限性大，只能单独定义某个元素的样式（特殊情况下使用）。
  1. 请解释一下 CSS3 的 flexbox（弹性盒布局模型）,以及适用场景？ 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。 试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
  • 浮动布局
      •  
  1. margin 和 padding 分别适合什么场景使用？ (1)何时应当使用margin 需要在border外侧添加空白时。 空白处不需要背景（色）时。 上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。 (2)何时应当时用padding 需要在border内测添加空白时。 空白处需要背景（色）时。 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
  1. px 和 em 的区别。 px和em都是长度单位，区别是：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
  1. 行内元素和块级元素的区别是是什么。 行内元素： （1）行内元素不换行 （2）行内元素不可以设置大小 （3）行内元素大小由内容决定 块元素： （1）块元素独立成行 （2）块元素可以设置大小 （3）块元素如果不设置宽度，宽度会自适应其父级的宽度
  1. 请说明JavaScript具有的特点： (1)简单性(小程序、无须编译、解释性、弱数据类型) (2)安全性( Browser无法访问本地硬盘数据/写入到数据库) (3)动态性（JS可以直接对用户提交的信息作出回应） (4)跨平台性（支持JS的Browser）
  1. JavaScript的对象类型： (1)本地对象(native object)，ECMA-262定义为“独立于宿主环境的ECMAScript实现提供的对象”。简单来说，本地对象就是ECMA-262定义的类（引用类型）。它们包括：Object、Function、Array、String、Boolean、Number、Date、RegExp（正则表达式）、Error、EvalError、RangeError、ReferenceError、SyntaxErro、TypeError、URIError等。这些对象独立于宿主环境，先定义对象，实例化后再通过对象名来使用。 (2)内置对象(built-in object)。由ECMAScript实现提供的、不依赖与宿主环境的对象，在ECMAScript运行之前就已经创建好的对象就叫做内置对象。这意味着开发者不必明确实例化内置对象，它已被实例化了。ECMA-262只定义了两个内置对象，即Global和Math。Global是全局对象，全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。例如isNam(),isFinite(),parseInt()和parseFloat()等，都是Global对象的方法。Math对象直接使用，如Math.Random()、Math.round(20.5)等。 (3)宿主对象(host object)。ECMAScript实现的宿主环境提供的对象。所有BOM和DOM对象都是宿主对象。通过它可以与文档和浏览器环境进行交互，如document、window和frames等。 (4)自定义对象。根据程序设计需要，由编程人员自行定义的对象。例如定义一个person对象，它有4个属性分别是firstName、lastName、age、eyeColor，同时给属性赋值。定义格式如下： var person=new Object(); /* 这是一种方法*/ person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue"; var person={firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};/另一方法/
  1. 请简单介绍一下Html 的document对象: document对象是客户端JavaScript最为常用的对象之一，在浏览器对象模型中，它位于window对象的下一层级。document对象包含一些简单的属性，提供了有关浏览器中显示文档的相关信息，例如：该文档的URL、字体颜色，修改日期等。document对象还包含一些引用数组的属性，这些属性可以代表文档中的表单、图象、链接、锚以及applet。 同其他对象一样，document对象还定义了一系列的方法，通过这些方法，可以使JavaScript在解析文档时动态地将HTML文本添加到文档中。
  1. 请介绍一下浏览器对象模型BOM 客户端浏览器这些预定义的对象统称为浏览器对象，它们按照某种层次组织起来的模型统称为浏览器对象模型（BOM-Browser Object Model）。浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。BOM提供了独立于内容而与浏览器窗口进行交互的对象。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 浏览器对象模型定义了JavaScript可以进行操作的浏览器的各个功能部件的接口，提供访问文档各个功能部件（如窗口本身、屏幕功能部件、浏览历史记录等）的途径以及操作方法。
  1. xhtml 和 html 有什么区别 功能上的差别：HTML是一种基本的WEB网页设计语言；XHTML是一个基于XML的置标语言，XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。 书写习惯上： (1) XHTML 所在标签都必须小写 (2) XHTML 标签必须成双成对 (3) XHTML 标签顺序必须正确 (4) XHTML 所有属性都必须使用双引号 (5) XHTML 不允许使用target=”_blank” (6) XHTML 文档必须拥有根元素。 (7) XHTML 元素必须被正确地嵌套。
  1. 介绍一下你对浏览器内核的理解 主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。 （1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。 （2）JS引擎则：解析和执行JavaScript 来实现网页的动态效果； 最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎。
  1. 制作一个访问量很高的大型网站，你会如何来管理所有CSS文件,js 与图片？ 涉及到人手、分工、同步 （1） 先期团队必须确定好全局样式，编码模式等 （2） 编写习惯必须一致 （3） 标注样式编写人，各模块都及时标注（标注关键样式调用的地方） （4） 页面进行标注 （5） Css与html分文件夹并行存放，命名都要统一 （6） Js分文件夹存放，命名以该JS功能为准英文翻译 （7） 图片采用整合的.png格式文件使用，尽量整合在一起，方便将来的管理。
 
 
  • 一个完整的JavaScript实现是由以下三个不同部分组成的：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）
  • DOM浏览器对象模型
      • document对象是客户端JavaScript最为常用的对象之一，在浏览器对象模型中，它位于window对象的下一层级。
      document对象包含一些简单的属性，提供了有关浏览器中显示文档的相关信息，例如：该文档的URL、字体颜色，修改日期等。
      document对象还包含一些引用数组的属性，这些属性可以代表文档中的表单、图象、链接、锚以及applet。
      同其他对象一样，document对象还定义了一系列的方法，通过这些方法，可以使JavaScript在解析文档时动态地将HTML文本添加到文档中。
      HTML DOM定义了访问和操作HTML文档的标准方法。
      DOM将HTML文档表达为树结构。HTML文档结构好像倒垂的一棵树一样，其中<html>标记就是树的根节点，<head>、<body>是树的两个子节点。这种描述页面标记关系的树型结构称为DOM节点树（文档树）。
      notion image
  • jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作 通过script标记的src属性引入外部jQuery文件库
  • 空格&nbsp 小于<&It 大于>&gt
      • notion image
      notion image
  • <hr size=""  color=""   width=""  align=""    > 水平分割线标记
  • 列表
      • notion image
      dl
      dl
  • 数值（1, 2, 3） 大写罗马数字（I II III） 小罗马数字（i ii iii） 大写字母（A B C） 小写字母（a b c） 为了表示不同的有序列表, <ol>标记中有5种类型的属性。
  • 创建电子邮件超链接
      • 一般网站上都会设置“联系我们”这样的栏目或超链接，目的是方便用户及时与网站管理员进行沟通与联系--电子邮件超链接。
      基本语法：
      <a href=“mailto:E-mail地址[ ?subject=邮件主题[&参数=参数值]]”>链接内容</a>
  • 创建图像链接
      • 链接标题是一个图像，浏览时单击链接图像时，可以打开超接href所设置的URL。
      基本语法：<a href=“#”><img src=“url” width=“” height=“” align=“” border=“” alt=“”></a>
  • 浮动框架
      • 浏览器窗口含有孤立的子窗口称为浮动框架。在浏览器窗口中使用<iframe></iframe>标记，可以嵌入浮动框架
      <iframe name=“ name ” src=“url”  width=“” height=“ ” ></iframe> <a href="target.html" target= " name" >链接标题</a>
  • 表格
      • notion image
      notion image
      notion image
  • CSS的特点
      • CSS 通过定义标记或标记属性的外在表现，对页面结构风格进行控制，分离文档的内容和表现，克服了传统HTML 的缺点。 将CSS 嵌入在页面中，通过浏览器解释执行，而且CSS 文件是文本文件，只要理解了HTML 就可以掌握它。
  • CSS注释：/* */
  • margin padding 上右下左
      • margin:10px; /* 4个边均为10px */ margin:10px 20px ; /* 上下|左右*/ margin:10px 20px 30px; /* 上|右左|下*/ margin:10px 20px 30px 40px; /* 上|右|下|左*/
  • 导入外部样式表
      • <style type="text/css"> @import url("外部样式表的文件名称"); p{font-size:18px; color:blue} </style>
  • 链接外部样式表
      • <link type="text/css" rel="stylesheet" href="外部样式表的文件名称"/ >
  • 表单信息输入
      • notion image
  • JavaScript放置
    • JS脚本插入在头部时，通常需要定义为函数格式，格式： function 函数名(参数1,参数2,…，参数n){函数体语句;}
    • JS脚本插入在主体时，JavaScript语句能够被立即执行。也可以定义成函数，但必须引用才能执行。
        • <body> <script type="text/javascript" > alert(“JS放置在主体中，直接运行！”); </script> </body>
    • 外部JS <script type=“text/javascript” src=“外部JS文件”></script>
    • JS代码直接放置在事件处理的代码中，可以直接运行。也可以加上“javascript:alert(‘信息’);”
        • <input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码">
  • CSS <link type = “text/css” rel = “stylesheet” href = “stylr.css”>
    • JavaScript标识符
        • 标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下：
        (1)必须使用字母或者下划线和$开始。
        (2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。
        (3)不能使用JavaScript关键字与JavaScript保留字。
        (4)不能使用JavaScript语言内部的单词，比如Infinity，NaN，undefined等。
        (5)大小写敏感，如name和Name是不同的两个标识符。
    • 浏览器端数据库IndexedDB
        • WebStorage可以用来存储键值对，然而它无法提供按顺序检索、高性能地按值查询或存储重复的键的功能。 IndexedDB 是一种轻量级NoSQL（Not Only SQL，泛指非关系型）数据库，用来持久化大量（250MB）客户端数据。它可以让Web 应用程序具有非常强大的查询能力，并且可以离线工作。 IndexedDB 的数据操作直接使用JS 脚本，不依赖SQL 语句（最初的Web SQL数据库已被废弃），操作返回均采用异步。 localStorage 和sessionStorage 对象是采用同步技术实现少量（2.5～10MB）客户端数据（字符串）存储。 一个网站可能有一个或多个IndexedDB 数据库，每个数据库必须具有唯一的名称。
      • 使用IndexedDB 的基本步骤如下： 打开数据库并且开始一个事务。 创建一个对象仓库(Object Store)。 构建一个请求来执行一些数据库操作，例如增加或提取数据等。 通过监听正确类型的DOM 事件以等待操作完成。 在操作结果上进行一些操作（可以在request 对象中找到）。
    • Canvas画布
        • HTML5 的canvas 标记用于图形的绘制，并通过JavaScript脚本来完成绘图。canvas标记本身并没有绘图能力，所有的绘制工作必须在JavaScript 内部完成。canvas 标记作为图形的容器，可以通过多种方法使用Canvas 绘制路径、盒、圆、字符以及添加图像。
    • HTML5 Web Worker
        • Web Worker允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应。
        Web Worker 的工作原理是在包含JavaScript 脚本的Web 页面中，运行的JS 脚本称为主线程，并在主线程中使用Worker 类创建一个Worker，并向其传入一个参数，该参数是需要在另一个线程中运行的JavaScript 文件名称 (myWorker.js)，然后在这个实例上监听onmessage 事件。
         
    Loading...