<!Doctype html>的作用
<!doctype html>
的作用就是让浏览器进入标准模式
,使用最新的HTML5
标准来解析渲染页面;如果不写,浏览器就会进入混杂模式
,我们需要避免此类情况发生。
严格模式与混杂模式的区分
严格模式: 又称为标准模式
,指浏览器按照W3C
标准解析代码;
混杂模式: 又称怪异模式、兼容模式
,是指浏览器用自己的方式解析代码
.混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作;
区分:
网页中的DTD,直接影响到使用的是严格模式还是浏览模式,可以说DTD的使用与这两种方式的区别息息相关。
-
如果文档包含严格的
DOCTYPE
,那么它一般以严格模式呈现(严格 DTD ——严格模式); -
包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式);
-
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现(DTD不存在或者格式不正确——混杂模式);
-
HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
总的来说,严格模式让各个浏览器统一执行一套规范
.兼容模式保证了旧网站的正常运行。
12. 如何实现浏览器内多个标签页之间的通信
可以通过调用localstorge
、cookies
等本地存储方式。
13. webSocket如何兼容低浏览器
Adobe Flash Socket
;
ActiveX HTMLFile (IE)
;
基于 multipart 编码发送 XHR
;
基于长轮询的 XHR
;
14. iframe有哪些优缺点
优点
-
iframe可以实现
无刷新文件上传
; -
iframe可以
跨域通信
; -
解决了加载缓慢的第三方内容如图标和广告等的
加载问题
。
缺点
-
iframe
会阻塞主页面的Onload事件
; -
无法被一些搜索引擎索引到
; -
页面
会增加服务器的http请求
; -
会产生很多页面,不容易管理
。
15. src与href有什么区别
src
用于替换当前元素
;
href
用于在当前文档和引用资源之间确立联系
;
src是source的缩写,指向外部资源的位置
,指向的内容将会嵌入到文档中当前标签所在位置
;
href是Hypertext Reference的缩写,指向网络资源所在位置
,建立和当前元素(锚点)或当前文档(链接)之间的链接
。
17. 浏览器乱码的原因是什么?如何解决?
产生乱码的原因
网页源代码是gbk
的编码,而内容中的中文字是utf-8
编码的,这样浏览器打开即会出现html乱码。反之也会出现乱码;
html网页编码是gbk
,而程序从数据库中调出呈现是utf-8
编码的内容也会造成编码乱码;
浏览器不能自动检测网页编码,造成网页乱码。
解决办法
使用软件进行编辑HTML网页内容;
如果网页设置编码是gbk,而数据库储存数据编码格式是UTF-8,此时需要程序查询数据库数据显示数据前进程序转码;
如果浏览器浏览时候出现网页乱码,在浏览器中找到转换编码的菜单进行转换;
18. HTML和DOM有何关系?
HTML
是死的
,只是一个字符串
;而DOM
是由html解析
而来,是活的
,我们可以通过Javascript维护DOM
。
19. property和attribute的区别是什么
property
是DOM
中的属性
,是JavaScript里的对象
;
attribute
是HTML标签上的特性
,它的值只能够是字符串
;
简单的理解就是:Attribute就是DOM节点自带的属性
,例如html中常用的id、class、title、align等;而Property是这个DOM元素作为对象
,其附加的内容,例如childNodes、firstChild等。
20. HTML元素如何体现其嵌套关系
-
块级元素可以包含
行内元素` -
块级元素不一定能包含块级元素
-
行内元素一般不能包含块级元素
(a元素例外)
22. html5有哪些新特性、移除了那些元素
新特性
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务
等功能的增加。
拖拽释放
(Drag and drop) API;
语义化更好的内容标签
(header, nav, footer, aside, article, section);
音频、视频API
(audio, video);
画布
(Canvas) API;
地理
(Geolocation) API;
本地离线存储 localStorage 长期存储数据
,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
;
表单控件
:calendar
、date
、time
、email
、url
、search
;
新的技术webworker, websocket, Geolocation
等;
移除元素
纯表现元素
:
<basefont>
默认字体,不设置字体,以此渲染;
<font>
字体标签;
<center>
水平居中;
<u>
下划线;
<big>
字体;
<strike>
中横字;
<tt>
文本等宽;
对可用性产生负面影响的元素
:
<frameset>
,<noframes>
和<frame>
;
23. Quirks模式是什么?它和Standards模式有什么区别?
Quirks模式
Quirks模式,又称怪癖模式、诡异模式、怪异模式
。
Quirks和Standards模式的区别
当我们在写程序时,遇到新旧功能不兼容的时候,如何做才能保证原来的接口不变,又可以提供强大的功能?
一般情况下可以通过增加参数和分支
来解决。也就是当某个参数为true时,使用新功能,为false时使用旧功能
,这样就能不破坏原有的程序,又能提供新功能。
IE6
也是类似这样做的,它将DTD
当成了这个“参数”,因为以前的页面大家都不会去写DTD,第一IE6就假定,如果写了DTD就意味这个页面将采用对CSS支持更好的布局,而如果没有就采用兼容之前的布局方式,这就是Quirks模式(怪癖,诡异,怪异模式)
。
其与Standards的区别总体会有布局
、样式解析
、和脚本执行
三个方面的区别:
盒模型:在W3C标准
中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度
,而在Quirks 模式下,IE的宽度和高度还包含了padding和border
;
设置行内元素的高宽:在Standards
模式下,给行内元素设置wdith和height都不会生效
,而在quirks模式下,则会生效
;
设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的
,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用;
设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中
,但在quirks模式下却会失效。
24. 什么是前端的结构,样式和行为相分离?以及分离的好处是什么?
结构,样式和行为分离
小编的理解是: 若是将前端比作一个人来举例子,结构(HTML)就相当于是人体的“骨架”,样式就相当于人体的“装饰”,例如衣服,首饰等;行为就相当于人做出的一系列“动作”。
结构,样式和行为分离,就是将三者分离开,各自负责各自的内容,各部分可以通过引用
进行使用。
在分离的基础上,我们需要做到代码的:精简
, 重用
, 有序
。
分离的好处
-
代码分离,利于团队的开发和后期的
维护
; -
减少维护成本,提高可读性和更好的
兼容性
;
25. 对HTML5有什么了解?
-
良好的
移动性
,以移动设备为主; -
响应式设计
,以适应自动变化的屏幕尺寸; -
支持
离线缓存
技术,webStorage本地缓存
; -
新增了
canvas,video,audio
等新标签元素;以及特殊内容元素:article,footer,header,nav,section等;以及表单控件:calendar,date,time,email,url,search等; -
新增
webSocket/webWork
技术; -
还有新增的
地理位置
等。
26. 如何对网站的文件和资源进行优化
文件合并
(目的是减少http请求);
文件压缩
(目的是直接减少文件下载的体积);
使用缓存
;
使用cdn托管资源
;
gizp
压缩需要的js和css文件;
反向链接
,网站外链接优化;
meta
标签优化(title, description, keywords
),heading
标签的优化,alt
优化;
28. Html5中本地存储概念是什么,有什么优点,与cookie有什么区别?
HTML5的Web storage的存储方式有两种:sessionStorage
和localStorage
。
sessionStorage用于本地存储一个会话中的数据,当会话结束后就会销毁
;
localStorage用于持久化的本地存储
,除非用户主动删除数据,否则数据永远不会过期
;
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)
。
区别:
从浏览器和服务器间的传递看:
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
一个人可以走的很快,但一群人才能走的更远。如果你从事以下工作或对以下感兴趣,欢迎戳这里加入程序员的圈子,让我们一起学习成长!
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
欢的话别忘了 关注、点赞哦~。
[外链图片转存中…(img-IfxGb971-1712331952038)]
一个人可以走的很快,但一群人才能走的更远。如果你从事以下工作或对以下感兴趣,欢迎戳这里加入程序员的圈子,让我们一起学习成长!
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算