HTML基础问题总结

阅读() @2018-07-27 17:21:04

1、 Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。

严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。

混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

如何区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。

意义:严格模式与混杂模式存在的意义与其来源密切相关,如果说只存在严格模式,那么许多旧网站必然受到影响,如果只存在混杂模式,那么会回到当时浏览器大战时的混乱,每个浏览器都有自己的解析模式。

2、 严格模式与混杂模式的语句解析不同点有哪些?

html严格模式与混杂模式的解析方法异同

(1)盒模型的高宽包含内边距padding和边框border;

在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在IE5.5及以下的浏览器及其他版本的混杂模式下,IE的宽度和高度还包含了padding和border。

(2)可以设置行内元素的高宽

在标准模式下,给span等行内元素设置wdith和height都不会生效,而在混杂模式下,则会生效。

(3)可设置百分比的高度

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

(4)用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在标准模式下可以使元素水平居中,但在混杂模式下却会失效, 混杂模式下的解决办法,用text-align属性:

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

(5)混杂模式下设置图片的padding会失效;

(6)混杂模式下Table中的字体属性不能继承上层的设置

(7)混杂模式下white-space:pre会失效。

3、HTML5 为什么只需要写 <!DOCTYPE HTML>

HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为。其中,SGML是标准通用标记语言,简单的说,就是比HTML,XML更老的标准,这两者都是由SGML发展而来的。但是,HTML5不是的。

4、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

(1)行内元素:span,   strong,   em,  img ,  input,  label,  select,  textarea,  cite。

(2)块级元素:div  , p  , form,   ul,  li ,  ol,  dl, form,   address,  fieldset, menu,  table。

(3)空元素:br-换行, hr-水平分割线。

5、页面导入样式时,使用link和@import有什么区别?

(1)老祖宗的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义type,定义rel连接属性等,@import就只能加载CSS了。

(2)加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显,这个问题主要集中在IE浏览器。

(3)兼容性的差别:由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

(4)使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

(5)@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表。

6、对浏览器内核的理解,常见的浏览器内核有哪些?

浏览器最重要或者说最核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

Traindent(IE、360)、Webkit(谷歌、safari)、Gecko(火狐)、Presto(欧朋)。

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

新增了很多类似于web语义化的标签,例如header、footer、video、audio等等。

移除的标签有:font、center、big等等。

通过doctype声明和网页html5标签可以进行区分。

可以通过添加css前缀来解决兼容性问题。

8、对HTML语义化的理解

<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>。根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。有利于SEO。

9、HTML离线存储

在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

页面头部比如html标签内像加入一个manifest = "cache.manifest"的属性;然后在这个文件里边按照规则书写需要缓存的文件。

浏览器解析manifast文件的方式,浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

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

(2) 离线的情况下,浏览器就直接使用离线存储的资源。

使用HTML本地缓存需要注意的问题:

(1)如果服务器对离线的资源进行了更新,那么必须更新manifest文件之后这些资源才能被浏览器重新下载,如果只是更新了资源而没有更新manifest文件的话,浏览器并不会重新下载资源,也就是说还是使用原来离线存储的资源。

(2)对于manifest文件进行缓存的时候需要十分小心,因为可能出现一种情况就是你对manifest文件进行了更新,但是http的缓存 规则告诉浏览器本地缓存的manifest文件还没过期,这个情况下浏览器还是使用原来的manifest文件,所以对于manifest文件最好不要设 置缓存。

(3)浏览器在下载manifest文件中的资源的时候,它会一次性下载所有资源,如果某个资源由于某种原因下载失败,那么这次的所有更新就算是失败的,浏览器还是会使用原来的资源。

(4)在更新了资源之后,新的资源需要到下次再打开app才会生效,如果需要资源马上就能生效,那么可以使用window.applicationCache.swapCache()方法来使之生效,出现这种现象的原因是浏览器会先使用离线资源加载页面,然后再去检查manifest是否有更新,所以需要到下次打开页面才能生效。

10、localStorage、sessionStorage、cookie的区别?

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。

localStorage可以永久的将数据存储到浏览器,除非用户手动清除缓存,但是只能存储字符串。

sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。

11、Label的作用是什么?是怎么用的?

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

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

12、HTML5的form如何关闭自动完成功能?

(1)在IE的Internet选项菜单里的内容--自动完成里面设置。

(2)设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能.

(3)设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能。

注意,要提交之后才会有历史记录。

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

这个方法有很多,通过后端设置的session、cookie可以实现,同样前端的本地存储localStorage、sessionStorage等都可以,看具体应用场景了。

14、如何在页面上实现一个圆形的可点击区域?

(1)设置div的border-radius:50%。

(2)js实现,指定某个位置是圆点,然后指定一个半径长度,最后获取鼠标点击位置坐标,判断其到圆点的距离是否不大于圆的半径,来判断点击位置是否在圆内。

15、网页验证码是干嘛的,是为了解决什么安全问题?

防止机器短时间内批量恶意提交表单数据。

17、tite与h1的区别、b与strong的区别、i与em的区别?

Title一般是描述当前整个网页的主题,h1是描述当前页面中的某一篇文章的主题,一般那h1标签在同一个页面中只出现1次。

文章内容部分参考自网络,且持续更新中!

微信二维码