初级前端知识点整合-HTML+网络部分

时间 2020-03-10

标签初级前端知识整合 html 网络部分栏目 HTML 繁體版

原文原文链接

各位大佬以为不错能够点个赞收藏谢谢一块儿加油吧！！css

1.HTML优化：
避免html中写css样式，难以维护；
使用viewport加速页面渲染；
使用语义化标签，减小css代码，加强可读性和SEO；
优化DOM结构；
避免空src、href等属性值，空的也会发起HTTP请求；
减小DNS的查询次数；html

2.SEO：搜索引擎优化
<1>合理的title、description、keywords，搜索对这三项的权重逐渐减少，不一样的页面要有不一样的title和description，keywords列举重要的关键词；
<2>语义化HTML代码，让搜索引擎更容易理解网页；
<3>重要内容HTML代码放前面，由于搜索引擎抓取HTML顺序是从上到下；
<4>重要的内容不要用JS动态输出，由于爬虫不会执行JS获取内容；
<5>少用iframe，由于搜索引擎不会抓取iframe中的内容；
<6>非装饰图片必定要加alt属性，由于当图片没法显示的时候还能有文字提示。web

3.<img>的title属性和alt属性的区别：
通俗的来讲title属性用于当鼠标置于图片上方时显示文字提示，而alt则是用于当图片没法显示时能够用alt中的文字代替。canvas

4.从浏览器地址栏输入URL到显示页面的步骤：
DNS解析URL找到真实的IP-->向服务器发送请求-->服务器处理请求返回数据-->浏览器接收资源（HTMLCSSJS图片等）-->浏览器解析资源,创建内部结构DOM等-->载入解析完成的文件，渲染页面。浏览器

5.网站性能优化：
<1>content方面：减小请求（使用雪碧图、合并文件等）；减小DNS查询（DNS缓存等）；减小DOM元素数量；
<2>server方面：使用CDN；对组件使用GZip压缩。
<3>Cookie方面：减少Cookie大小。
<4>css方面：将样式表放到页面顶部；不适用行内样式；使用<link>避免使用@import。缓存

6.语义化HTML的理解：
HTML语义化就是让页面的内容结构化，便于搜索引擎、浏览器解析；在没有CSS样式的状况下也能以一种文档的格式显示，便于阅读；搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于SEO；提升可维护性。安全

7.浏览器内核：
主要分红两部分，渲染引擎和JS引擎。
渲染引擎用于取得网页的内容（HTML、XML和图片等）、整理讯息（CSS等），以及计算网页的显示方式。
JS引擎用于解析和执行JS来实现网页的动态效果。性能优化

8.HTML新特性以及移除的元素：
HTML新特性：绘画canvas、本地离线存储localstorage、sessionstorage、语义化标签（header、mainfooter、article、nav、section等）、表单控件（calendar、email、url、date、time、search）、新技术（websocket、webworker、Geolocation）服务器

HTML移除的元素：big、center、font、s、basefont、frame、frameset、noframes等websocket

9.HTML离线存储用法及工做原理：
<1>离线存储的工做原理：HTML离线存储是基于一个新建的.appcache文件的缓存机制，经过这个文件上的解析清单去离线存储资源，这些资源就会像Cookie同样被存储先来。当网络出于离线状态下时，浏览器会经过被离线存储的资源进行页面展现。

<2>离线存储的用法：
页面头部加入一个manifest属性，而后在cache.manifest文件中编写须要离线存储的资源，在离线状态时经过window.applicationCache进行需求实现。

//头部加入manifest属性
<html manifest="demo.appcache">

//manifest文件编写
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resource/logo.png
FALLBACK:
/ /offline.html

9.浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢
在线的状况下，浏览器解析html标签发现manifest属性时，它就会请求manifest文件(名字后缀为.appcache的文件)，若是是第一次访问app，那么浏览器就会根据manifest文件中的内容下载相应的资源并离线存储。
若是已经访问过app而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。而后浏览器会对比新的manifest文件和旧的manifest文件，若是未发生改变，就不作任何操做，若是文件改变了，那么就会从新下载manifest文件中的资源并离线存储。

10.Cookies、localstorage和sessionstorage之间的区别
<1>cookie数据始终在同源http请求中携带，会在浏览器和服务器之间来回传递。而sessionstorage和localstorage不会主动把数据发送到服务器，仅在本地保存。
<2>cookie数据大小不能超过4k，而sessionstorage和localstorage能够达到5M或更大；
<3>cookie在设定的有效期内有效，即便窗口或浏览器关闭；
sessionstorage则在浏览器关闭前有效；
localstorage长期有效的持久数据，除非主动删除。

11.Doctype的做用：
<!Doctype>声明位于文档的最前面，用于告知浏览器额解析器，用什么文档类型规范来解析这个文档。

12.行内元素、块级元素、空元素
<1>行内元素：<span><img> <input> <select> <strong> <a><b>
<2>块级元素：<div> <ul> <ol> <li> <p> <dl> <dt> <dd> <h1>
<3>空元素：<br/> <img/> <hr/> <input/> <link/> <meta/>

13.

网络协议部分：

1.Http状态码的含义：
100，200-202,301-304,400-404（缺402），500,503
如下只写大概含义，详情可百度，不写的那么严谨
100：继续，在post请求发送完头部信息以后服务器端返回此信息。
200：返回信息成功
201：请求发送成功
202：接收请求成功
301：网页已永久移动到一个新位置
302：临时重定向
303：临时重定向，且老是使用GET请求信的URI
304：网页自上次请求后未修改过
400：服务器没法理解请求的格式
401：未受权
403：禁止访问
404：找不到与URI匹配的资源
500：常见的服务器端错误
503：服务器端暂时没法处理请求（过载之类的）

2.网络分层：OSI模型和TCP/IP模型
<1>OSI模型:
应用层
表示层
会话层
传输层
网络层
数据链路层
物理层
<2>TCP/IP模型：
应用层
传输层
互联网层
网络接口层

3.HTTP/HTTPS：
Http的链接很简单，是无状态的；Https协议是有SSL+HTTP构建的可进行加密传输、身份认证的网络协议，比Http协议更安全。

4.HTTP的几种请求方法用途：
<1>GET：发送请求来获取服务器上的某一资源；
<2>POST：向URL指定的资源提交数据或附加新的数据；
<3>PUT：和POST同样用于提交数据。可是PUT指定了资源在服务器上的位置，而POST没有；
<4>HEAD：只请求页面的首部；
<5>DELETE：删除服务器上的某一资源；
<6>OPTIONS：用于获取当前URL支持的方法。若是请求成功，会有一个Allow的头包含相似“GET，POST”这样的信息；
<7>TRACE: 用于激发一个远程的，应用层的请求消息回路；
<8>CONNECT：把请求链接转换到透明的TCP/IP通道。