Web前端必备基础知识点

小灰灰 2022-04-04 03:22 388阅读 0赞

因为要告知浏览器的解析器用什么文档标准解析这个文档，所以在文档的开头要写上文档类型声明，H5的文档类型声明要比H4文档类型声明简洁的多。因为H5不基于SGML（标准通用标记语言），所以不需要对DTD文档类型定义）进行引用，但是H4是基于SGML，必须对DTD进行引用。H4的三种文档类型声明是：过渡模式，严格模式，框架模式。

> **想学习web前端找工作这里推荐一下我的学习交流q.u,n: 95694，**
> 
> **0552 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。**

自己整理了-份201 8最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

![Web前端必备基础知识点][Web]

HTML是HyperText Markup Language（超文本文本标记标签语言），通过HTML，浏览器才能解析文档，在页面上显现文档的内容和结构。同时HTML

也是网络三大基石之一：URL（统一资源定位符），HTTP（超文本传输协议）。超文本就是视频，音频和图片。

HTML的行内标签，块级标签，空标签有哪些？

行内标签：a b span img input select strong

块级标签：div ul ol li dl dt dd h1-h6 p

空/单标签：br hr img link meta base source

页面导入外部样式文件时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还可以定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只用用于加载CSS。

（2）页面被加载时，link会同时被加载，而@import引用的CSS只能等页面加载完才能加载。

（3）link无兼容性问题，而@import只能在IE5+上才被识别。

HTML和XHTML的区别？

（1）XHTML标签必须拥有根元素HTML

（2）标签必须被正确地嵌套

（3）标签必须正确关闭

（4）标签必须用小写字母

（5）空标签页必须关闭

（6）XHTML兼容性比较好

（7）XHTML不允许使用target="\_blank"

（8）XHTML标签属性值必须用引号

w3c的标准与标签语义化？

W3C标准：

（1）所有的标签都使用小写字母

（2）所有的属性值都放在引号里

（3）标签正确嵌套/关闭

（4）符合HTML,CSS,JS的规则

（5）结构层+表示层+行为层

遵循W3C标准和标签语义化有利于：

让页面更友好，支持更多的终端，让更多的人可以使用互联网获得自己想要的信息。

（1）搜索引擎的搜索，有利于爬虫抓取内容

（2）支持多终端

（3）支持样式布局让站点支持个性化

（4）有利于开发和维护

（5）有利于降低成本

（6）提高用户体验

（7）页面能更好的呈现内容结构

浏览器内核的理解？

浏览器的内核分为两部分：渲染引擎和JS引擎，但是由于JS引擎越来越独立了，所以内核也就是倾向渲染引擎。但是因为各个浏览器的内核不一样，所以它们的渲染

引擎就不一样，所以渲染出来的页面也就不一样，这就是为什么浏览器有差异性，为什么我们要去适配浏览器的兼容性。

浏览器的内核有哪些？

firefox内核：Gecko

IE TT 360 世界之窗 搜狗浏览器内核：Trident

Opera：Presto 现为：Blink

Safari Chrome：Webkit

Chrome：blink

H5新特性+新语义化标签

HTML5不是SGML（标准通用标记语言）的子集了，主要是关于图像，位置，存储多任务等功能的增加。

新语义化标签：

绘画：canvas

视频：video

音频：audio

article footer header nav section calendar date time email url search

低端IE通过document.createElement方法添加标签

新特性：

客户端存储机制

cookie是网站为了标示用户身份而储存在用户本地终端上的数据（经过加密）

cookie数据始终在同源的http请求中携带（即使不需要），在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie数据不能超过4k

sessionStorage和localStorage虽然也有存储大小的限制，可以达到5m更大。

期限时间：

localStorage 浏览器关闭后数据不丢失除非删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

作用域是限定在文档源中，文档源url是通过协议+主机+端口决定的，同文档源可以共享数据，不同文档源不能共享

cookie 设置过期时间之前一直有效，即使窗口或浏览器关闭

cookie兼容性好，但是难用，是早期为服务器端脚本设计的客服端存储机制

webworker提供一个简单的方法使得web内容能够在后台运行脚本。

websocket 标签页之间的通信

1.地理位置API

地理位置API(https://www.w3.org/TR/geolocation-API/)它能够允许浏览器（用户允许的情况下）检测用户的地理位置。

2.历史管理API

它允许web应用保存和更新它们的状态，以便当用户点击浏览器的后退与前进按钮的时候，无需刷新页面而立即做出响应。

3.跨文档消息传递

![Web前端必备基础知识点][Web 1]

**Web Worker**

单位与字体

1.px:（Pixel）单位名称像素，相对长度单位，是相对显示器屏幕分辨率而言的。国内使用的多。

2.em:单位名称为相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸。国外使用的多。

3.pt:单位名称为点(point)，绝对长度单位一般老版本的table使用，现在已经不用了。

4.rem:是CSS3中新增加的一个单位值，是相对长度单位。

em是相对于元素的父元素的font-size进行计算。

rem是相对于根元素html的font-size进行计算。

这样rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

![Web前端必备基础知识点][Web 2]

**CSS**

盒子模型：

标准盒子（w3c盒子模型）：content+padding+margin+border

IE盒子模型：content(padding+border+content)+margin

CSS选择符？哪些属性是可以继承？

id\# class. 标签 相邻+ 子选择器 > 后代选择 li a 通配符\* 属性选择器 伪类选择器

可继续的样式：font-size font-family color ul li dl dd dt

不可继承的样式：border padding margin width height

CSS优先级算法如何计算？

同级权重，遵循就近原则

载入样式以最后载入的定位为准

[Web]: http://p99.pstatp.com/large/pgc-image/4b561b9341b0484ca9c2a57a0f25c1c0
[Web 1]: http://p9.pstatp.com/large/dfic-imagehandler/7e6afe63-0e0a-4d54-8b92-100d497753d8
[Web 2]: http://p9.pstatp.com/large/dfic-imagehandler/842f6978-fc72-48e0-9d0d-5d03e91b2029