精华内容
下载资源
问答
  • HTML基础简答题

    千次阅读 2018-08-08 13:35:26
    1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: *——XHTML 元素必须被正确地嵌套。 *——XHTML 元素必须被关闭。 *——标签名必须用小写字母。 *——...

    1.XHTML和HTML有什么区别


    HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
    最主要的不同:
    *——XHTML 元素必须被正确地嵌套。
    *——XHTML 元素必须被关闭。
    *——标签名必须用小写字母。
    *——XHTML 文档必须拥有根元素。


    2.前端页面有哪三层构成,分别是什么?作用是什么?


    结构层 Html 表示层 CSS 行为层 js;


    3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?


    Ie(Ie内核) 火狐(Gecko) 谷歌(webkit,Blink) opera(Presto),Safari(wbkit)


    4.什么是语义化的HTML?


    *——直观的认识标签 对于搜索引擎的抓取有好处,用正确的标签做正确的事情!
    *——html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
    *——在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
    *——使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。


    5.HTML5 为什么只需要写 !DOCTYPE HTML?


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

     

    6.Doctype作用?标准模式与兼容模式各有什么区别?


    !DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
    标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。


    7.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和HTML5?

     

    新特性:


    *——HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
    *——绘画 canvas
    *——用于媒介回放的 video 和 audio 元素
    *——本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
    *——sessionStorage 的数据在浏览器关闭后自动删除
    *——语意化更好的内容元素,比如 article、footer、header、nav、section
    *——表单控件,calendar、date、time、email、url、search
    *——新的技术webworker, websockt, Geolocation


    移除的元素:


    *——纯表现的元素:basefont,big,center,font, s,strike,tt,u;
    *——对可用性产生负面影响的元素:frame,frameset,noframes;


    支持HTML5新标签:


    *——IE8/IE7/IE6支持通过document.createElement方法产生的标签,
    *——可以利用这一特性让这些浏览器支持HTML5新标签,
    *——浏览器支持新标签后,还需要添加标签默认的样式:


    8.请描述一下 cookies,sessionStorage 和 localStorage 的区别?


    *——cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
    *——sessionStorage和localStorage的存储空间更大;
    *——sessionStorage和localStorage有更多丰富易用的接口;
    *——sessionStorage和localStorage各自独立的存储空间;


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


    调用localstorge、cookies等本地存储方式

    展开全文
  • 简答题

    千次阅读 2019-01-07 22:20:38
    1、请描述HTML、CSS、DOM、JavaScript分别表示的含义。 2、请列举出HTML常用的标记。(至少10个) 1、简述HTTP1.1协议的通信过程? 2、简述POST请求和GET请求有什么不同?(至少2点) 3、Tomcat安装目录下的子...

    目录
    1、请描述HTML、CSS、DOM、JavaScript分别表示的含义。
    2、请列举出HTML常用的标记。(至少10个)
    1、简述HTTP1.1协议的通信过程?
    2、简述POST请求和GET请求有什么不同?(至少2点)
    3、Tomcat安装目录下的子目录及其说明如下:
    1、请列举Servlet接口中的方法,并分别说明这些方法的特点及其作用。
    2、简述ServletContext接口的三个主要作用。
    1、简述请求转发与重定向的异同?(至少写3点)
    2、请写出禁止浏览器缓存页面的核心代码。
    1、简述什么是会话技术?
    2、简述Cookie与Session的区别?(至少写出3点)
    1、请简述JSP的运行原理。
    2、请简述JSP中的9个隐式对象。
    1、简述Javabean规范都有哪些?(至少写出2点)
    2、简述定义EL标识符的规范。
    1、简述过滤器的作用。
    2、简述Servlet事件监听器的作用。(写出三点)
    1、请简述什么是JDBC。
    2、简述JDBC的实现步骤。
    1、请思考数据库连接池的工作机制是什么?
    2、简述DriverManager和DataSource中的getConnection()方法的区别。
    1、简述什么是MVC设计模式。
    2、简述MVC设计模式中模型(Model)模块的作用。
    3、 实现文件上传的表单页面都需要哪些配置?
    4、简述文件下载的实现原理。
    1、请描述传智书城项目的开发环境。
    2、请写出传智书城项目搭建所需要导入的jar包。

    1、请描述HTML、CSS、DOM、JavaScript分别表示的含义。

    HTML:HTML是英文Hyper Text Markup Language的缩写,中文译为“超文本标记语言”,其主要作用是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
    CSS:CSS 是 Cascading Style Sheet 的缩写,译作“层叠样式表单”,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
    DOM:DOM是Document Object Model(文档对象模型)的简称,是W3C组织推荐的处理可扩展标志语言的标准编程接口,它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
    JavaScript:JavaScript是Web中一种功能强大的脚本语言,被设计为向 HTML 页面增加交互性,常用来为网页添加各式各样的动态功能,它不需要进行编译,直接嵌入在HTML页面中,就可以把静态的页面转变成支持用户交互并响应事件的动态页面。

    1、简述HTTP1.1协议的通信过程?

    HTTP1.1协议的通信过程如下:

    1. 客户端与服务器端建立TCP连接。
    2. 客户端可以向服务器端发送多个请求,并且在发送下个请求时,无需等待上次请求的返回结果。
    3. 服务器必须按照接受客户端请求的先后顺序依次返回响应结果。
      4)客户端发出关闭TCP连接的请求。
    4. 服务器端关闭TCP连接。

    2、简述POST请求和GET请求有什么不同?(至少2点)

    1. POST传输数据大小无限制
    2. POST比GET请求方式更安全

    3、请列举出Tomcat安装目录下的子目录,并对其进行简要说明?(至少列出5个)

    Tomcat安装目录下的子目录及其说明如下:
    bin:用于存放Tomcat的可执行文件和脚本文件(扩展名为.bat的文件),如tomcat7.exe、startup.bat;
    conf:用于存放Tomcat的各种配置文件,如web.xml、server.xml;
    lib:用于存放Tomcat服务器和所有Web应用程序需要访问的JAR文件;
    logs:用于存放Tomcat的日志文件;
    temp:用于存放Tomcat运行时产生的临时文件;
    webapps:Web应用程序的主要发布目录,通常将要发布的应用程序放到这个目录下;
    work:Tomcat的工作目录,JSP编译生成的Servlet源文件和字节码文件放到这个目录下。

    1、请列举Servlet接口中的方法,并分别说明这些方法的特点及其作用。

    sservlet接口中有init、service、destroy 、getServletConfig和getServletInfo这 5个方法,这些方法的特点及其作用具体如下:
    1)init(ServletConfig config)方法,该方法在服务器对Servlet第一次访问时调用,负责Servlet初始化工作。在一个Servlet的生命周期中只执行一次。该方法接收一个ServletConfig类型的参数,Servlet容器可以通过这个参数向Servlet传递初始化配置信息。
    2)service(ServletRequest request,ServletResponse response)方法,该方法负责响应用户的请求,当容器接收到客户端访问Servlet对象的请求时,就会调用此方法。
    3)destroy()方法,该方法方法负责释放Servlet对象占用的资源。当Servlet对象被销毁时,容器会调用此方法。
    4)getServletConfig()方法,该方法返回容器调用init(ServletConfig config)方法时传递给Servlet的ServletConfig对象。
    5)getServletInfo()方法,该方法返回一个字符串,其中包含了关于Servlet的信息,例如,作者、版本和版权等信息。

    2、简述ServletContext接口的三个主要作用。

    1)获取Web应用程序的初始化参数
    2)实现多个Servlet对象共享数据
    3)读取Web应用下的资源文件

    1、简述请求转发与重定向的异同?(至少写3点)

    1、请求转发与重定向的异同点如下:
    1)请求转发和重定向都可以实现访问一个资源时转向当前应用资源
    2)请求转发是一次请求一次响应,而重定向为两次请求两次响应
    3)一般情况下应该使用请求转发,减少浏览器对服务器的访问,减轻服务器压力
    4)如果需要改变浏览器的地址栏,或更改浏览器的刷新按钮的功能时需要使用重定向

    2、请写出禁止浏览器缓存页面的核心代码。

    response.setDateHeader(“Expires”,0);
    response.setHeader(“Cache-Control”,“no-cache”);
    response.setHeader(“Pragma”,“no-cache”);

    1、简述什么是会话技术?

    会话过程类似于生活中的打电话过程,它指的是一个客户端(浏览器)与Web服务器之间连续发生的一系列请求和响应过程。在Servlet技术中,提供了两个用于保存会话数据的对象,分别是Cookie和Session。

    2、简述Cookie与Session的区别?(至少写出3点)

    1)Cookie和HttpSession是保存会话相关数据的技术,其中Cookie将信息存储在浏览器端,是客户端技术,Session将数据保存在服务器端,是服务器端技术
    2)Cookie是基于HTTP协议中的Set-Cookie响应头和Cookie请求头进行工作的
    3)默认情况下HttpSession是基于一个名称为JSESSIONID 的特殊Cookie工作的
    4)浏览器对Cookie具有严格的限制,一个网站能在浏览器中保存多少Cookie是有限制的
    5)HttpSession默认是基于Cookie运作的。

    1、请简述JSP的运行原理。

    1)客户端发出请求,请求访问JSP文件。
    2)JSP容器先将JSP文件转换成一个Java源文件(Java Servlet源程序),在转换过程中,如果发现JSP文件中存在任何语法错误,则中断转换过程,并向服务端和客户端返回出错信息。
    3)如果转换成功,则JSP容器将生成的Java源文件编译成相应的字节码文件*.class。该class文件就是一个Servlet,Servlet容器会像处理其他Servlet一样来处理它。
    4)由Servlet容器加载转换后的Servlet类(.class文件)创建一个该Servlet(JSP页面的转换结果)实例,并执行Servlet的jspInit()方法。jspInit()方法在Servlet的整个生命周期中只会执行一次。
    5)执行jspService()方法来处理客户端的请求。对于每一个请求,JSP容器都会创建一个新的线程来处理它。如果多个客户端同时请求该JSP文件,则JSP容器也会创建多个线程,使得每一个客户端请求都对应一个线程。JSP运行过程中采用的这种多线程的执行方式可以极大地降低对系统资源的需求,提高系统的并发量并缩短响应时间。需要注意的是,由于第(4)步生成的Servlet是常驻内存的,所以响应速度非常快。
    6)如果JSP文件被修改了,则服务器将根据设置决定是否对该文件重新编译,如果需要重新编译,则使用重新编译后的结果取代内存中常驻的Servlet,并继续上述处理过程。
    7)虽然JSP效率很高,但在第一次调用的时候往往由于需要转换和编译,所以会产生一些轻微的延迟。此外,由于系统资源不足等原因,JSP容器可能会以某种不确定的方式将Servlet从内存中移除,发生这种情况时首先会调用jspDestroy()方法,然后Servlet实例会被加入“垃圾收集”处理。
    8)当请求处理完成后,响应对象由JSP容器接收,并将HTML格式的响应信息发送回客户端。

    2、请简述JSP中的9个隐式对象。

    1)out:主要用于页面输出;
    2)request:用于得到用户请求信息;
    3)response:表示服务器向客户端的回应信息;
    4)config:包含服务器的配置信息,可以使用该对象获得Servlet初始化参数;
    5)session:主要用来保存用户信息;
    6)application:包含所有用户的共享信息;
    7)page:指当前页面转换后的Servlet类的实例;
    8)pageContext:表示JSP页面容器,它提供了对JSP页面内所有的对象及名字空间的访问;
    9)exception::表示JSP页面所发生的异常,在错误页中才起作用。

    1、简述Javabean规范都有哪些?(至少写出2点)

    1)它必须具有一个公共的、无参的构造方法,这个方法可以是编译器自动产生的缺省构造方法。
    2)它提供公共的setter方法和getter方法让外部程序设置和获取JavaBean的属性。
    3)它是一个公有类。
    4)通常需要实现java.io.Serializable,用于序列化。

    2、简述定义EL标识符的规范。

    1)可以由任意顺序的大小写字母、数字和下划线组成
    2)不能以数字开头
    3)不能是EL中的保留字,如and、or、gt;
    4)不能是EL隐式对象,如pageContext;
    5)不能包含单引号(’)、双引号(")、减号(-)和正斜线等特殊字符

    1、简述过滤器的作用。

    Filter被称作过滤器或者拦截器,其基本功能就是对Servlet容器调用Servlet的过程进行拦截,从而在Servlet进行响应处理前后实现一些特殊功能。
    2、简述Servlet事件监听器的作用。(写出三点)
    1)监听Web应用程序中ServletContext、HttpSession和ServletRequest等域对象的创建和销毁过程。
    2)监听ServletContext、HttpSession和ServletRequest等域对象属性的修改。
    3)感知绑定到HttpSession域中某个对象的状态。

    1、请简述什么是JDBC。

    JDBC的全称是Java数据库连接(Java Database Connectivity),它是一套用于执行SQL语句的Java API。应用程序可通过这套API连接到关系数据库,并使用SQL语句来完成对数据库中数据的查询、更新和删除等处理。
    2、简述JDBC的实现步骤。
    1)加载并注册数据库驱动
    2)通过DriverManager获取数据库连接
    3)通过Connection对象获取Statement对象
    4)使用Statement执行SQL语句
    5)操作ResultSet结果集
    6)关闭连接,释放资源

    展开全文
  • HTML+CSS简答题总结

    千次阅读 2019-12-14 11:03:17
    CSS中文译为“层叠样式表”,主要是对HTML标记的内容进行更加丰富的装饰,并将网页表现样式与网页结构分离的一种样式设计语言。可以使用CSS控制HTML页面中的文本内容、图片外形以及版面布局等外观的显示样式。 二、...

    一、请简要描述一下什么是CSS。

    CSS中文译为“层叠样式表”,主要是对HTML标记的内容进行更加丰富的装饰,并将网页表现样式与网页结构分离的一种样式设计语言。可以使用CSS控制HTML页面中的文本内容、图片外形以及版面布局等外观的显示样式。

    二、请简要说明在使用font-family设置字体时,需要注意哪些问题

    使用font-family设置字体时,需要注意以下问题:
    1.各种字体之间必须使用英文状态下的逗号隔开;
    2.中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英 文字体时,英文字体名必须位于中文字体名之前;
    3.如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双 引号;
    4.尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

    三、请简要描述嵌套元素垂直外边距的合并。

    对于两个嵌套关系的块元素,如果父标记没有上内边距及边框,则父标记的上外边距会与子标记的上外边距发生合并,合并后的外边距为两者中的较大者,即使父标记的上外边距为0,也会发生合并。

    四、在考虑权重时需要注意哪些问题?

    1.继承样式的权重为0。即在嵌套结构中,不管父标记样式的权重多大,被子标记继承时,它的权重都为0,也就是说子标记定义的样式会覆盖继承来的样式(子标记可以不继承)。
    2.行内样式优先。应用style属性的标记,其行内样式的权重非常高,可以理解为远大于100。总之,它拥有比上面提到的选择器都大的优先级。
    3.权重相同时,CSS遵循就近原则。也就是说靠近标记的样式具有最大的优先级,或者说排在最后的样式优先级最大。

    五、简要描述一下类选择器和后代选择器。

    类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
    .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    上述语法中,类名即为HTML标记的class属性值,大多数HTML标记都可以定义class属性。类选择器最大的优势是可以为标记对象定义单独或相同的样式。

    后代选择器用来选择某标记的后代标记,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。

    六、请简要描述什么是外边距塌陷。

    当上下相邻的两个块元素相遇时,如果上面的标记有下外边距margin-bottom,下面的标记有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

    七、请简要描述,background-position属性的取值方法。

    (1)使用不同单位(最常用的是像素px)的数值:直接设置图像左上角在标记中的坐标,例如“background-position:20px 20px;”。
    (2)使用预定义的关键字:指定背景图像在标记中的对齐方式。
    水平方向值:left、center、right
    垂直方向值:top、center、bottom
    (3)使用百分比:按背景图像和标记的指定点对齐。
    0% 0% 表示图像左上角与标记的左上角对齐,50% 50% 表示图像50% 50%中心点与标记50% 50%的中心点对齐,20% 30% 表示图像20% 30%的点与标记20% 30%的点对齐,100% 100% 表示图像右下角与标记的右下角对齐,而不是图像充满标记,如果只有一个百分数,将作为水平值,垂直值则默认为50%。

    八、请简要描述清除特殊浮动的方法。

    (1)使用空标记清除浮动:在浮动标记之后添加空标记,并对该标记应用“clear:both”样式,可清除标记浮动所产生的影响,这个空标记可以是<div>、<p>、<hr />等任何标记。
    (2)使用overflow属性清除浮动:对标记应用“overflow:hidden;”样式,也可以清除浮动对该标记的影响。另外,这种方式还弥补了空标记清除浮动的不足。
    (3)使用after伪对象清除浮动:使用after伪对象也可以清除浮动,但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。

    展开全文
  • 面试简答题

    2021-03-01 20:04:59
    2.块级元素能够直接设置宽高,行内元素在html中不可以直接设置宽高,css中可利用display:inline-block为行内元素设置宽高 3.块级元素可以包含块级元素与行内元素,行内元素只能包含行内元素与文本 二、块级元素与...

    html

    块级元素与行内元素的区别

    1.块级元素独占一行空间,行内元素可以与其他元素共享一行空间
    2.块级元素能够直接设置宽高,行内元素在html中不可以直接设置宽高,css中可利用display:inline-block为行内元素设置宽高
    3.块级元素可以包含块级元素与行内元素,行内元素只能包含行内元素与文本

    块级元素、行内元素与空元素

    在这里插入图片描述在这里插入图片描述

    块级/行内元素水平垂直居中

    块级行内均可
    给父元素设计display:flex;
    align-items:center;
    justify-content:center;

    行内
    text-align:水平居中
    line-height:垂直居中(高度和父元素一致)

    块级
    1.给父元素设置display:flex;
    给子元素设置margin:auto;
    2.给父元素设置相对定位,子元素设置绝对定位,子元素的所有配合属性(top,left,right,bottom)都设置为0px,然后再给子元素设置margin:auto;
    3.给父元素设置相对定位,子元素设置绝对定位,将子元素的top、left值设置为父元素的一半,此时子元素的左上角位于父元素的中心,再设置子元素的margin-left和margin-top为子元素宽高的一半

    在对行内元素设置水平垂直居中时建议将行内转换为块级元素使用display:flex,margin:auto。非常方便,不用记

    使用link和@import有什么区别

    一:建议使用link,慎用@import
    二:区别

    从属关系
    link:link是HTML提供的标签,不仅可以加载CSS,还可以定义rel等属性
    @import:@import是css提供的语法,只有导入样式表的作用
    
    加载顺序
    link:link在页面加载时CSS同时被加载
    @import:引入的CSS要等页面加载完毕后再加载
    
    兼容性问题
    link是HTML提供的语法,不存在兼容性问题
    @import是css2.1提供的语法,ie5以上才兼容
    
    DOM可控性
    js控制DOM时,可以通过插入link标签来改变样式,不能通过@import改变
    
    权重问题(有争议)
    link标签引入的样式权重大于@import标签
    

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

    HTML5的新特性
    1、语义化标签:<hrader></header><nav></nav>
    2、绘画canvas
    3、SVG绘图
    4、视频和音频,用于媒介的video和audio元素
    5、input增强型表单控件:calendar,date,time,email,url,search
    6、本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
    7、新的技术webworker,websocktGeolocation

    Html5新增了 27 个元素,废弃了 16 个元素,根据现有的标准规范,把 HTML5 的元素按优先级定义为

    结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类
    新增的元素:

    (1) 结构性元素主要负责web上下文结构的定义

    section:在 web 页面应用中,该元素也可以用于区域的章节描述。

    header:页面主体上的头部, header 元素往往在一对 body 元素中。

    footer:页面的底部(页脚),通常会标出网站的相关信息。

    nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。

    article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。

    (2) 级块性元素主要完成web页面区域的划分,确保内容的有效分割。

    aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

    figure:是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用。

    code:表示一段代码块。

    dialog:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容。

    (3) 行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。

    meter:表示特定范围内的数值,可用于工资、数量、百分比等。

    time:表示时间值。

    progress:用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监事。

    video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。

    audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。

    (4) 交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。

    details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。

    datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。

    menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。

    command:用来处理命令按钮。

    移除的元素:

    纯表现的元素u、big、center、strike、tt、font、basefont
    框架集frame、frameset、noframes

    如何处理HTML5新标签的浏览器兼容问题

    当在页面中使用HTML5新标签时,可能会得到三种不同的结果:

    1)结果1:新标签被当作错误处理并被忽略,在DOM构建时会当作这个标签不存在。

    2)结果2:新标签被当作错误处理,并在DOM构建时,这个新标签会被构造成行内元素。

    3)结果3:新标签被识别为HTML5标签,然后用DOM节点对其进行替换。

    不能识别HTML5新标签而不能使用,解决办法有两种:

    1)方法1:实现标签被识别

    通过document.createElement(tagName)方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加CSS样式。

    2)方法2:JavaScript解决方案

    a)使用html5shim:

    <head>中调用以下代码:

    <!--[if lt IE 9]>
    	<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
    <![endif]-->
    

    当然也可以直接把这个文件下载到自己的网站上,但这个文件必须在head标签中调用。

    b)使用kill IE6

    </body>之前调用以下代码:

    <!--if lte IE 6]>
    	<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 
    <![endif]-->
    

    如何区别html和html5

    1)在文档类型声明上不同:
    HTML是很长的一段代码,很难记住,而HTML5却只有简简单单的声明,方便记忆。
    2)在结构语义上不同:
    HTML:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div>,这样表示网站的头部。
    HTML5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>

    简述一下你对HTML语义化的理解

    1、用正确的标签做正确的事。

    2、html语义化让页面的内容结构化,结构更清晰,便于浏览器和搜索引擎解析。

    3、即使没有CSS样式,它也以一种文档格式显示,方便阅读。

    4、搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重,利于SEO。

    5、使阅读源代码的人更容易将网站分块,方便阅读、维护和理解。

    html和XHTML的区别

    1、HTML是超文本标记语言,它对于各大浏览器,兼容性较差;XHTML是可扩展超文本标识语言,它能够很好地兼容各大浏览 器。

    2、XHTML要求元素必须正确嵌套。

    3、XHTML要求所有元素必须关闭。

    4、XHTML要求标签名必须是小写字母。

    5、XHTML必须拥有根元素。

    6、XHTML用id属性代替name属性。

    7、XHTML属性值不能简写。

    cookies,sessionStorage 和 localStorage 的区别

    共同点:都是储存在浏览器端

    区别:
    1.cookie产生于服务器端,每次发送http请求都会携带,但是sessionStorage和localStorage一直保存在浏览器中
    2.存储数据的大小不一样,cookie能够存放的数据比较小,不能超过4kb,另外两个,一般来说不能超过5m
    3.有效期,cookie在设置的有效期内有效,sessionStorage在会话窗口关闭之前一直有效,localStorage一直有效除非手动删除

    1.localStorage 的生命周期是永久的,sessionStorage 的生命周期是仅在当前会话下有效。
    2.关闭页面或浏览器之后 localStorage 中的数据也不会消失,除非主动删除数据,否则数据永远不会消失。
    sessionStorage 是在同源的窗口中始终存在的数据,只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。

    3.cookie
    cookie是一种浏览器会话技术,将浏览器和服务器之间的产生数据记录下来,在登录时有效。

    1)只能存储String类型的数据
    2)浏览器存储cookie的个数限制:300个,tomcat/webapp里面的文件都是站点,每一个站点可以存储20多个cookie,每一个cookie的大小不超过4Kb.
    3)cookie的有效期:默认浏览器关闭时
    设置cookie的最大生存时间,以秒为单位。参数为正整数:超过了当前的值,表示cookie过期了。
    4)cookie不能存储中文的数据。要存储中文,必须加密和解密。

    使用场景:
    1)打开浏览器–>访问网站—>填写用户登录数据(会话数据)—>校验成功–>首页,显示当前用户的用户名信息–>关闭浏览器
    直接打开浏览器—>访问同一个网站–>直接显示用户信息
    2)访问一个商品列表–>点击某一个商品—>浏览器关闭
    下一次进来–>访问商品列表–>记录之前访问过的商品数据

    如何实现不同尺寸的页面自适应

    方案一、用比例控制大小

    1.在网页代码的头部,添加一行viewport元标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    • width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)
    • height:和 width 相对应,指定高度
    • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例,1.0就是占网页的100%
    • maximum-scale:允许用户缩放到的最大比例
    • minimum-scale:允许用户缩放到的最小比例
    • user-scalable:用户是否可以手动缩放

    2.不写绝对宽度,用百分比写宽度

    .myDiv {
        width: 30%;
    }
    

    盒子的组成
    盒子=内容+内边距+边框+外边距
    盒子的高度=内容+内边距+边框
    盒子所占空间高度=内容+内边距+边框+外边距

    盒子的分类
    1.标准盒子/w3c盒子
    默认都是标准盒子
    特点:设置的宽高属性是直接设置给元素内容
    box-sizing:content-box
    2.边框盒子/怪异盒子
    box-sizing:border-box
    特点:属性的宽高设置给盒子:内容+内边距+边框

    3.让子元素撑起父元素的高度,而不要写绝对高度

    .parent {
        width: 30%;
    }
    .child {
        width:100%;
        height:100px;
    }
    

    4.字体使用相对大小"em"或"rem"

    h1 {
        font-size: 2rem;
    }
    

    1.浏览器默认字体为 16px ,2rem 即 2 * 16px = 32px
    2.em(font size of the element)是指相对于父元素的字体大小的单位,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,因此 em 的大小并不是固定的
    3.rem(font size of the root element)是指相对于根元素的字体大小的单位

    • 目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
    h1 {
        font-size: 32px;
        font-size: 2rem;
    }
    

    5.图片的大小也用百分比表示

    img {
        width: 100%;
    }
    

    也可以设置 max-width ,这样一来图片最大不会超过原始尺寸,避免图片由于放大而模糊

    img {
        max-width: 100%;
        width: auto;
    }
    

    方案二、使用媒体查询(CSS3 @media查询)

    当网页需要在移动端和PC端展示时,由于二者屏幕尺寸差别较大,可能需要用两种不同的布局才能更加友好地展示内容
    此时可以使用媒体查询来检测屏幕(或浏览器窗口)的大小,然后采用相应的css样式来渲染页面

    举个例子,当浏览器窗口小于 500px 时,背景变为蓝色:

    @media only screen and (max-width: 500px) {
        body {
            background-color: lightblue;
        }
    }
    

    分别说明 HSLA ----- RGB 分别代表什么H — 色调

    S — 饱和度
    L — 亮度
    A — 透明度
    R – 红
    G – 绿色
    B-- 蓝色

    CSS

    盒模型

    盒子的组成
    盒子=内容+内边距+边框+外边距
    盒子的高度=内容+内边距+边框
    盒子所占空间高度=内容+内边距+边框+外边距

    盒子的分类
    1.标准盒子/w3c盒子
    默认都是标准盒子
    特点:设置的宽高属性是直接设置给元素内容
    box-sizing:content-box
    2.边框盒子/怪异盒子
    box-sizing:border-box
    特点:属性的宽高设置给盒子:内容+内边距+边框

    position的6个属性

    1.position: relative;相对定位

    1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)

    2> 不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新位置)

    3> 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)

    4>提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面,z-index只能在position属性值为relative或absolute或fixed的元素上有效。) (两个都为定位元素,后面的会覆盖前面的定位)

    2.position: absolute;绝对定位

    1> 使元素完全脱离文档流(在文档流中不再占位)

    2> 使内联元素在设置宽高的时候支持宽高(改变内联元素的特性)

    3> 使区块元素在未设置宽度时由内容撑开宽度(改变区块元素的特性)

    4> 相对于最近一个有定位的父元素偏移(若其父元素没有定位则逐层上找,直到document——页面文档对象)

    5> 相对定位一般配合绝对定位使用(将父元素设置相对定位,使其相对于父元素偏移)

    6> 提升层级(同相对定位)

    3.position: fixed;固定定位

    fixed生成固定定位的元素,相对于浏览器窗口进行定位。

    4.position:static:默认值

    默认布局。元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

    5.position: sticky 粘性定位

    粘性定位,该定位基于用户滚动的位置。

    它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

    注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

    6.position: inherit

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

    7.posiyion: initial

    设置该属性为默认值,详情查看CSS initial 关键字

    initial 关键字用于设置 CSS 属性为它的默认值。

    initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

    CSS3有哪些新特性

    1.CSS3的选择器

    1)E:last-child 匹配父元素的最后一个子元素E。
    2)E:nth-child(n)匹配父元素的第n个子元素E。
    3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

    2.@Font-face 特性

    Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。

    @font-face { 
     font-family: BorderWeb; 
     src:url(BORDERW0.eot); 
     } 
     @font-face { 
     font-family: Runic; 
     src:url(RUNICMT0.eot); 
     } 
     .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
     .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
    

    3.圆角border-radius

    border-radius: 15px;
    

    4.多列布局 (multi-column layout)

    <div class="mul-col">
        <div>
            <h3>新手上路</h3>
            <p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
        </div>
        <div>
            <h3>付款方式</h3>
            <p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
        </div>
        <div>
            <h3>淘宝特色</h3>
            <p>手机淘宝 旺信 大众评审 B格指南</p>
        </div>
    </div>
    
    .mul-col{
        column-count: 3;
        column-gap: 5px;
        column-rule: 1px solid gray;
        border-radius: 5px;
        border:1px solid gray;
        padding: 10px   ;
    }
    

    5.阴影(Shadow)

     .class1{ 
          text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
     } 
    

    6.CSS3 的渐变效果

    background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
    

    7.css弹性盒子模型

    <div class="boxcontainer">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    .boxcontainer { 
        width: 1000px; 
        display: -webkit-box; 
        display: -moz-box; 
        -webkit-box-orient: horizontal; 
        -moz-box-orient: horizontal; 
    } 
                
     .item { 
        background: #357c96; 
        font-weight: bold; 
        margin: 2px; 
        padding: 20px; 
        color: #fff; 
        font-family: Arial, sans-serif; 
    }
    
    1. CSS3制作特效
    1. Transition 对象变换时的过渡效果

      transition-property 对象参与过渡的属性
      transition-duration 过渡的持续时间
      transition-timing-function 过渡的类型
      transition-delay 延迟过渡的时间

    2. Transforms 2D转换效果

    主要包括 translate(水平移动)、rotate(旋转)、scale(伸缩)、skew(倾斜)
    3) Animation动画特效

    CSS3的flex布局

    伸缩盒(弹性盒)
    父元素:
    display
    flex;//设置当前盒子为弹性盒子

    1.所有子元素自动成为成员项item
    2.子元素宽高尺寸超过父元素时默认被压缩
    3.所有子元素的float属性失效

    flex-direction 设置当前子元素的排列顺序
    row:按行排序(默认)
    row-reverse:反转
    column:按列排序
    column-reverse:

    flex-wrap:wrap;//子元素宽度超出父元素是否换行

    align-items:center;//控制伸缩盒子在垂直轴上的显示
    stretch:(默认)将盒子在y轴上进行了拉伸,直至适应整个伸缩盒子容器
    center:盒子在y轴中心显示
    flex-start:在伸缩盒子容器的伸缩开始位置显示,即伸缩盒子容器顶部
    flex-end:在伸缩盒子容器的伸缩结束位置显示,即伸缩盒子容器底部

    justify-content 控制伸缩盒子在主轴上的显示
    flex-start:(默认)在主轴的开始显示
    flex-end:在主轴的结束显示
    center:在主轴的中心显示
    space-around:填充空白自适应在主轴中心显示
    space-between:填充空白自适应在主轴中心显示,但是首尾两个元素距离容器没有空白

    子元素:
    flex:number;//当前子元素占据父元素剩余空间的份数

    为什么要初始化CSS样式

    首先,因为浏览器的兼容问题,不同浏览器对有些标签的默认值也是不同的,所以,如果没对CSS初始化,那么往往就很容易出现浏览器之间的页面显示差异的问题。

    其次,初始化CSS样式主要是提高编码质量,如果不初始化整个页面,做完的东西是会很糟糕,重复的CSS样式很多。去掉标签的默认样式如:margin和padding,其他浏览器默认解析字体大小,字体设置。

    3.CSS选择器哪些可以继承

    css继承特性主要是指文本方面的继承,盒模型相关的属性基本没有继承特性。
    不可继承的:
    display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
    所有元素可继承的:
    visibility和cursor
    终极块级元素可继承的:
    text-indent和text-align
    内联元素可继承的:
    letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
    列表元素可继承的:
    list-style、list-style-type、list-style-position、list-style-image

    清除浮动

    为什么要清除浮动
    清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题

    父子级

    父元素设置overflow:hidden

    优点: 简单、代码少、浏览器支持好
    缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。

    兄弟级(额外标签法)

    在两个div之间添加一个空标签,给这个空标签添加clear:both

    优点: 通俗易懂,书写方便。(不推荐使用)
    缺点: 添加许多无意义的标签,结构化比较差。

    使用after伪元素 推荐使用

    :after方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after,,zoom(IE专有属性)可解决ie6,ie7浮动问题(较常用推荐)

    优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

    缺点: 由于IE6-7不支持:after,使用zoom:1

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        .clearfix{
            *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
        }
     
    <body>
        <div class="father clearfix">
            <div class="big">big</div>
            <div class="small">small</div>
            <!--<div class="clear">额外标签法</div>-->
        </div>
        <div class="footer"></div>
    </body>
    

    使用before和after双伪元素 推荐使用

    优点:代码简洁
    缺点:用zoom:1触发hasLayout.

    <style>
                .father{
                    border: 1px solid black;
                    *zoom: 1;
                }
                .clearfix:after,.clearfix:before{
                       content: "";
                       display: block;
                       clear: both;
                   }
                   .big ,.small{
                    width: 200px;
                    height: 200px;
                    float: left;
                   }
                   .big{
                    background-color: red;
                   }
                   .small{
                    background-color: blue;
                   }
            </style>
       <div class="father clearfix">
            <div class="big">big</div>
            <div class="small">small</div>
       </div>
        <div class="footer"></div>
    
    </div>  
    

    补充

    父级div定义 height: 父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

    优点: 简单、代码少、容易掌握

    缺点: 只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

    CSS优化、提高性能的方法有哪些

    加载性能

    压缩CSS
    通过link方式加载,而不是@import
    复合属性其实分开写,执行效率更高,因为CSS最终也还是要去解析如 margin-left: left;
    

    选择器性能

    尽量少的使用嵌套,可以采用BEM的方式来解决命名冲突;选择器优化嵌套,尽量避免层级过深;
    尽量少甚至是不使用标签选择器,这个性能实在是差,同样的还有*选择器
    利用继承,减少代码量
    

    渲染性能

    慎重使用高性能属性:浮动、定位;
    尽量减少页面重排、重绘;
    css雪碧图
    自定义web字体,尽量少用
    尽量减少使用昂贵属性,如box-shadow/border-radius/filter/透明度/:nth-child等
    使用transform来变换而不是宽高等会造成重绘的属性
    

    维护性能

    去除空规则;
    属性值为0时,不加单位;
    属性值为浮点数0.**时,可以省略小数点前的0;
    标准化各种浏览器前缀,带浏览器前缀的在前,标准的在后;
    抽象提取公用样式,减少代码量;
    将css文件放在页面的最上面;

    CSS 预处理器 / 后处理器都用过哪些

    目前最主流的 CSS 预处理器:Sass、LESS、Stylus 。
    优缺点
    优点:语言级逻辑处理,动态特性,改善项目结构
    缺点:采用特殊语法,框架耦合度高,复杂度高
    
    后处理器:Rework 、PostCSS、
    优缺点
    优点:使用 CSS 语法,容易进行模块化,贴近 CSS 的未来标准
    缺点:逻辑处理能力有限.
    

    JS

    Java和JavaScript区别

    1、javascript与Java是由不同的公司开发的不同产品。javascript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言;而Java是SUN Microsystems公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发。实际上,javascript最初的名字并不是javascript,而是LiveScript,名字中的“Java”是经过SUN Microsystems公司授权的。

    2、javascript是基于对象的,它是一种脚本语言,是一种基于对象和事件驱动的编程语言,因而它本身提供了非常丰富的内部对象供设计人员使用。而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序也必须设计对象。

    3、javascript与Java在浏览器中所执行的方式不一样。javascript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户,即javascript语句本身随Web页面一起下载下来,由浏览器解释执行。而Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码。

    4、javascript与Java所采取的变量是不一样的。javascript中的变量声明采用弱类型,即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。Java采用强类型变量检查,即所有变量在编译之前必须作声明。

    5、javascript采用动态联编,即javascript的对象引用在运行时进行检查。Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。

    6、javascript不直接对文本和图形进行操作,它在Web页面中与HTML元素组合一起发挥作用,但它可以控制浏览器,让浏览器直接对文本和图形进行处理。而Java则可以直接对文本和图形进行操作。

    会改变原数组的数组API

    不改变原数组
    将数组转化为字符串(String)
    把数组中的所有元素放入一个字符串(join)
    数组拼接(concat)
    数组选取,获取子数组(slice 含头不含尾)
    返回某个指定的字符串值在字符串中首次出现的位置(indexOf)

    改变原数组
    从数组中添加/删除项目,然后返回被删除的项目(splice(i,n)从第i个开始的n个元素)
    反转数组元素(reverse)
    对数组的元素进行排序(sort)
    向数组的末尾添加一个或多个元素,并返回新的长度(push)
    删除并返回数组的最后一个元素(pop)
    用于把数组的第一个元素从其中删除,并返回第一个元素的值(shift)
    向数组的开头添加一个或更多元素,并返回新的长度(unshift)

    迭代方法(不修改)
    every():对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true。
    filter():对数组中的每一项运行给定的函数,返回该函数会返回true的项组成的数组。
    forEach():对数组中的每一项运行给定的函数。这个方法没有返回值。
    map():对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组。
    some():对数组中的每一项运行给定的函数,如果该函数对任一项返回true,则返回true。

    归并方法
    reduce():从数组中的第一项开始,逐个遍历到最后。
    reduceRight():从数组的最后一项开始,向前遍历到第一项。

    W3C采用什么阻止默认事件行为

    event.preventDefault():阻止事件的默认行为

    如何取消事件冒泡

    event.stopPropagation():停止冒泡
    event.cancleBubble=true

    JS由什么组成

    ECMAScript5核心JS

    dom文档对象模型 是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。

    bom浏览器对象模型 可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的操作。

    DOM0级事件和DOM2级事件有什么不一样?(中间也经历过DOM1级事件,但是没什么变化,所以忽略了)

    1.语法:
    1.DOM0级事件处理程序:把一个函数赋值给一个事件处理程序属性
    示例:

        <div id="mydiv"></div>
        <script type="text/javascript">
          document.getElementById("mydiv").onclick = function() {
            //代码部分
          }
        </script>
    

    (缺点:多个事件会被覆盖掉,只会显示最后一个事件)

        <button id="btn1">按钮</button>
        <script>
          var btn1 = document.getElementById('btn1');
          btn1.onclick = function (){alert("hello 这是DOM 0级事件处理程序1")}; //被覆盖掉
          btn1.onclick = null; //清除0级事件处理程序
          //DOM 0级事件处理程序的优势是,只需在alert里改动一处就可以了,和HTML文档没关系了
          //btn1.onclick = function (){alert("hello 这是DOM 0级事件处理程序2")};
          //缺点:多个事件会被覆盖掉,只会显示最后一个事件(着重注意!!!!)
        </script>
    
    

    2.DOM2级事件处理程序:
    语法:addEventListener(‘事件类型’,‘函数名’,‘true/false’)
    用于监听某个事件,当监听到这个事件时去执行某个方法
    dom2级事件可以用于多重嵌套的事件中,最后一个参数true表示捕获,false表示冒泡。如果不写的话默认是冒泡的。而且使用dom2级事件还可以同时给同一个元素设置多个事件

    3.区别:
    1.删除dom0级事件: document.getElement("…").οnclick=null
    删除dom2级事件:removeEventListener(‘事件类型’,‘函数名’,‘true/false’)
    2.应用场景:
    在使用dom0级事件的时候,这个只支持冒泡不支持捕获。(IE只支持事件冒泡)
    dom2级事件可以通过设置true/false来实现冒泡或者捕获。但是注意冒泡可以被阻止,捕获不能被阻止。

    DOM事件流:将事件分为三个阶段:捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数,其次调用目标阶段的处理函数,最后调用冒泡阶段的处理函数。类似于当发出一个URL请求的时候,先调用前置拦截器,其次调用action,最后调用后置拦截器。

    4.事件冒泡是什么?事件捕获是什么?
    JS允许DOM元素嵌套在一起,在这种情况下,如果单击子级处理程序,父级的处理程序也会将执行同样的工作。
    取消事件冒泡:
    vent.cancelBubble = true;
    event.stopPropagation()

    事件捕获恰好相反,执行顺序为从外向里,在捕获的过程中,最外层(根)元素的事件先被触发,然后依次向内执行,直到触发最里面的元素(事件源)。

    5.简述事件代理
    原理:事件冒泡
    如果有大量的dom节点绑定相同的事件从处理程序,那么可以给他们的父元素进行事件绑定

    6.阻止默认事件
    (默认行为是指html标签自带的默认行为,比如a标签的默认跳转,button标签的默认提交。)
    方法:
    IE:e.returnValue = false;
    W3C:
    (1) e.preventDefault()
    (2) javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。

    preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

    注意:既然return false 和 e.preventDefault()都可以阻止默认行为,那么有什么区别呢?
    仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式阻止事件宿主的默认行为。

    谈谈对this对象的理解

    点这里!

    JavaScript原型、原型链?有什么特点

    jQuery

    什么是jQuery, 谈谈你对ajax技术的理解

    jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库(轻量库)。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

    Ajax是什么
    ajax是基于http协议的进行浏览器和服务器进行数据交互的技术。
    Ajax是异步的 JavaScript 和 XML,是一种用于创建快速动态网页的技术;
    Ajax不需要刷新整个页面,就能够更新部分网页内容

    使用Ajax的好处
    Ajax使用异步传输,实现页面局部刷新,优化用户体验
    优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
    Ajax在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载

    其他

    script标签用于引入js文件
    link标签用于引入css样式

    展开全文
  • 人力资源管理简答题:第一章:1.从人力资源管理功能来看,人力资源管理的具体实践活动有哪些方面组成?(1)工作分析和工作设计。(2)人力资源规划。(3)招募和甄选。(4)培训与开发。(5)绩效考核。(6)薪酬、奖金和福利。...
  • php面试题集-简答题

    千次阅读 2014-04-07 00:57:38
    简答题 PHP的意思(送1分) 答:PHP是一个基于服务端来创建动态网站的脚本语言,您可以用PHP和HTML生成网站主页 请简单阐述您最得意的开发之作. 暂无答案 对于大流量的网站, 您采用什么样的方法来...
  • Java笔试题(三)简答题

    千次阅读 2020-08-15 19:27:04
    直接转发方式(Forward):客户端和浏览器只发出一次请求,Servlet、HTML、JSP或其它信息资源,由第二个信息资源响应该请求,在请求对象request中,保存的对象对于每个信息资源是共享的。 浏览器向Servlet1发出访问...
  • 前端笔试简答题珍贵笔记

    千次阅读 2017-05-04 10:14:59
    本部分内容大致分为以下几个方面: HTML, CSS, JavaScript, Node 和 HTTP。 HTML 1. DOCTYPE 作用?有哪些模式,模式怎么区分? 答:DOCTYPE是用来声明文档类型和DTD规范的,一个主要的用途便是文件的合法性...
  • 第四章掌握以下简答题: 1 什么是结构化布线系统? 2 结构化布线系统分为那六个子系统? 3 结构化布线系统的优点是什么? 4 双绞线,光纤的优缺点分别是什么? 5 简述如何制作直通线、交错线? 6 光纤...
  • 《Internet和Intranet应用》简答题

    千次阅读 2015-02-25 09:52:24
    ...《Internet和Intranet应用》简答题 简答题  1.什么是Internet?将Internet分别与Internet、intranet、Extranet进行区别。  答:Internet是一个遵从TCP/IP协议,将大大小
  • 文章目录vue+element 实现 试卷答题功能,单选题 ,多选题,判断题,简答题难点:一、后端返回数据()二、页面1.html2.js - 答题部分3.js - 回显部分总结 难点: 如何循环不同类型的题 如何记录点击的是哪道题,...
  • 一、简答题 1、html 中 title 属性和 alt 属性的区别? alt是在图片不能正常加载时候显示的提示语 title属性是鼠标划上去显示的内容 2、请说出几个常用的块级元素和行内元素. 块级元素:div、p、li、dt...
  • HTML第6章简答题4(商品分类列表页面)

    千次阅读 2019-07-22 11:50:10
    代码如下: ...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作商品分类列表页面</title> <style> * { padding: 0px; ...
  • 北大青鸟 JQuery 制作特效 第一章 课后简答题 简单三丶打印倒正金字塔直线 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>...
  • 第六次考试简答题

    2018-04-20 18:37:00
    1. 根据下面图片利用HTML,CSS, JavaScript写出下面的效果,当点击登录是提示用户名不能为空和密码不...DOCTYPE html> <html> <head> <title>考试</title> <meta charset="utf-8...
  • 简答题锦集(四)

    2020-06-26 16:59:02
    WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用? 可以其调用过程大致如下:用户使用WEB控件或者html服务端控件控件的调用方法事件被激发,于是 服务器开始自动寻找所匹配的方法代码,当在客户端...
  • 1、Post与get的区别,什么时候用post,什么时候用get? 1、用法不同,post一般是向服务器传输数据,get一般是向服务器获取数据,因为使用url传递数据 2、传输数据大小不同,post默认无限制传输数据的大小,get不超过...
  • web前端设计基础——HTML5、CSS3、JavaScript简答题整理 第一章 (1)解释一下名词的含义:IP地址、URL、域名  iP定义了如何连入因特网,以及数据如何在主机间传输的标准。 URL统一资源定位符,通过定义资源...
  • 代码如下,自需自看: ...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; ...
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
  • Java面试笔试题及答案(3)- 简答题

    千次阅读 2017-09-15 11:13:37
    1. JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?  JSP是Servlet技术的扩展,本质上是Servlet的简易方式,更强调应用的外表表达。...而JSP的情况是Java和HTML可以组合成一个扩展名为.jsp的
  • 简答题】名词解释PHP、URL、HTTP、SQL、HTML (4.0分)更多相关问题多次接受输血的病人所发生的非溶血性输血反应与下列哪种抗体有关A.ABO血型抗体B.Rh血型抗体C.抗D箭头所指的解剖结构是A.股动脉B.髂外动脉C....
  • 1、forward 和redirect的区别直接转发方式(Forward):客户端和浏览器只发出一次请求,Servlet、HTML、JSP或其它信息资源,由第二个信息资源响应该请求,在请求对象request中,保存的对象对于每个信息资源是共享的。...
  • jsp组成:HTML文件+java片段+jsp标签 CH2 jsp和servle的关系 本质: jsp:嵌套java代码的html代码;转换成对应的servlet类运行 servlet:嵌套html代码的Java代码 jsp生命周期 转译 编译 加载 实例化 初始化...
  • 1、请描述HTML、CSS、DOM、JavaScript分别表示的含义。 2、请列举出HTML常用的标记。(至少10个) 1、简述HTTP1.1协议的通信过程? 2、简述POST请求和GET请求有什么不同?(至少2点) 3、Tomcat安装目录下的子目录...
  • 1、局域网优点;局域网特点(5) 2、10BASE-T技术特性(8) 3、网桥/交换机的优点(3);缺点(3) 4、虚拟局域网特点(4) *转发表或原MAC地址规则:...转载于:https://www.cnblogs.com/junruo/p/10745739.html...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 272
精华内容 108
关键字:

html简答题