美文网首页
HTML常见问题

HTML常见问题

作者: 灼心者 | 来源:发表于2019-03-13 16:04 被阅读0次
1、DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义?

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
标准模式(Standards mode)以浏览器支持的最高标准运行;混杂模式(Quirks mode)中页面是一种比较宽松的向后兼容的方式显示。

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

HTML5不基于SGML(Standard Generalized Markup Language 标准通用标记语言),因此不需要对DTD(DTD 文档类型定义)进行引用,但是需要DOCTYPE来规范浏览器行为。
HTML4.01基于SGML,所以需要引用DTD。才能告知浏览器文档所使用的文档类型,如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

行内元素:a span img input select
块级元素:div ul ol li dl dt dd h1 p
空元素:<br><hr> <link> <meta>

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

相同的地方,都是外部引用CSS方式,区别:
link是xhtml标签,除了加载css外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS
link引用CSS时候,页面载入时同时加载;@import需要在页面完全加载以后加载,而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
link是xhtml标签,无兼容问题;@import是在css2.1提出来的,低版本的浏览器不支持
link支持使用javascript控制去改变样式,而@import不支持
link方式的样式的权重高于@import的权重
import在html使用时候需要<style type="text/css">标签

5、无样式内容闪烁

@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此,在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。
解决方法:使用link标签加载CSS样式文件。因为link是顺序加载的,这样页面会等到CSS下载完之后再下载HTML文件,这样先布局好,就不会出现FOUC问题。

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

新增加了图像、位置、存储、多任务等功能。

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

去掉或丢失样式的时候能够让页面呈现出清晰的结构。
有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的信息,爬虫依赖于标签来确定上下文和各个关键字的权重。
方便其它设备解析。
便于团队开发和维护,语义化根据可读性。

8、HTML5的文件离线储存怎么使用,工作原理是什么?

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

9、cookies,sessionStorage和localStorage的区别

共同点:都是保存在浏览器端,且是同源的。
区别:
cookies是为了标识用户身份而存储在用户本地终端上的数据,始终在同源http请求中携带,即cookies在浏览器和服务器间来回传递,而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存。
存储大小的限制不同。cookie保存的数据很小,不能超过4k,而sessionstorage和localstorage保存的数据大,可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存。
作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的浏览器共享,即使同一页面;localstorage在所有同源窗口都是共享

10、 iframe框架有那些优缺点

优点
iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
缺点
搜索引擎的爬虫程序无法解读这种页面
框架结构中出现各种滚动条
使用框架结构时,保证设置正确的导航链接。
iframe页面会增加服务器的http请求

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

label标签用来定义表单控件间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。label 中有两个属性是非常有用的, FOR和ACCESSKEY。

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

1、WebSocket SharedWorker
2、也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信。
注意:Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

13、 webSocket如何兼容低浏览器?

1、Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 编码发送 XHR 基于长轮询的 XHR
2、引用WebSocket.js这个文件来兼容低版本浏览器。

15、 页面可见性(Page Visibility)API 可以有哪些用途?

通过visibility state的值得检测页面当前是否可见,以及打开网页的时间。
在页面被切换到其他后台进程时,自动暂停音乐或视频的播放。

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

1、map+area或者svg
2、border-radius
3、纯js实现,一个点不在圆上的算法

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

区分用户是计算机还是人的程序;
可以防止恶意破解密码、刷票、论坛灌水;

18、title与h1的区别、b与strong的区别、i与em的区别?

title属性没有明确意义,只表示标题;h1表示层次明确的标题,对页面信息的抓取也有很大的影响
strong标明重点内容,语气加强含义;b是无意义
em表示强调文本;i是斜体,是无意义的视觉表示

19、元素的alt和title有什么异同?

在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。

20、简单说下前端的发展史

相关文章

  • html5你不知道的基础面试题

    html5常见问题 1.什么是html5 HTML5是最新的HTML标准。 设计目的 HTML5的设计目的是为了在...

  • 六、 Flex 布局

    常见问题 图中的链接 http://js.jirengu.com/kejobobiqe/1/edit?html,c...

  • HTML常见问题

    HTML、XML、XHTML 有什么区别? HTML:超文本标记语言,是语法较为松散的、不严格的Web语言,主要用...

  • HTML常见问题

    1、DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲...

  • HTML常见问题

    1、介绍一下你对浏览器内核的理解?主要分成两部分:渲染引擎(layout engineer或 Rendering ...

  • HTML的常见问题

    HTML、XML、XHTML 有什么区别 HTML:超文本标记语言(Hyper Text Mark-up Lang...

  • HTML表单常见问题

    form表单有什么作用? form表单用于搜集用户输入并提交至web服务器。 有哪些常用的input 标签,分别有...

  • html常见问题集合

    安卓手机video视频层级最高 如果打开一个新页面,但是这个页面应该要有权限才能打开,所有打开新窗口的时候报错50...

  • vue项目常见问题

    vue项目常见问题 1. 如何输出HTML? vue 语法中的“Mustache”语法 (双大括号) 只会将数据解...

  • 最全面的VPS主机常见问题及解答集锦

    原文豆丁博客:最全面的VPS主机常见问题及解答集锦(https://www.shluqu.cn/3573.html...

网友评论

      本文标题:HTML常见问题

      本文链接:https://www.haomeiwen.com/subject/dahtmqtx.html