HTML相关知识总结

118 阅读4分钟

Doctype是做什么的?

Doctype是用来文档的解析类型,主要是用来告诉浏览器的解析器使用什么类型的文档来解析这个文档,Doctype不存在或者格式不正确会导致文档以兼容的模式存在。

meta是做什么的?

  • meta元素用来设置页面的字符编码,在没有指定字符编码的情况下,浏览器会使用默认设置来解析和显示页面,如果默认的解析字符编码与页面的字符编码不一致,那么就会导致乱码的情况。
  • meta还可以用来设置文档的描述,以及其他信息,有利于SEO。
  • meta黑可以设置viewport,用于告诉浏览器如何控制页面的视口和缩放级别,以确保页面在移动设备上能够正确显示。

img中的title和alt有什么区别

title是鼠标放上去显示的文字,alt是图片加载失败后显示的替换文字,alt是必要属性

HTML语义化理解以及作用

  1. HTML语义化就是使用正确标签描述正确内容,例如p就表示段落,header就表示文档的头部,footer表示文档的脚部等。
  2. 作用
  • 能够清晰呈现文档结构,即使是没有样式的情况下也可以理解文档的内容
  • 搜索引擎是依赖于标签来确定上下文和各个关键字的权重,所以使用语义化标签可以提供更友好的SEO
  • 文档内容清晰分块,便于开发和维护

HTML5常用新标签以及新特性

新标签

  1. 语义化标签:
    <header><nav><main><footer><article><section>

2.** 多媒体标签: **

    <video>视频<audio>音频 

3.** 图形标签: **

   <canvas>

新特性

  1. 增强表单属性: :提供了多个新的input选择类型
  2. 地图定位 : navigator.geolocation
  3. 拖放API
  4. Web Worker
  5. Web Storage :后续介绍

ifram介绍以及优缺点

1. 作用

  • ifram是将一个网页嵌入到页面中,可以嵌入广告,地图,视频等。

2. 优点

  • 独立性,独立显示一个页面,不与其它元素产生冲突
  • 可以在多个页面复用,减少代码冗余
  • 加载是异步的,不会阻塞页面的加载

3. 缺点

  • 单独加载网页,使得页面加载时间变长
  • 不利于SEO,iframe不会被搜索引擎爬虫读取,影响网页搜索排名

async 和 defer 的作用是什么?有什么区别?

  • async和defer这两个属性会使脚本对页面的加载和渲染造成影响。

区别

  1. 不加任何属性的时候,HTMl的解析会按照文档出现的顺序进行加载和执行,在脚本执行的过程中,会阻塞HTML解析的解析,等脚本加载完毕后才继续解析。
  2. async属性表示应该异步执行,后台异步加载该脚本,一旦下载完成,立即执行该脚本,可能会在DOM完全加载之前执行。
  3. defer属性表示脚本应该延迟执行,会等HTML解析器解析完毕以后才执行。

Get和Post请求的区别有哪些?

请求语意

  • GET请求用来向服务器获取数据;
  • Post请求用来向服务器提交数据;

数据传递方式

  • GET请求没有请求体,请求参数直接放在url中,而且url长度是有限制的,所以传递参数也是有限制的。
  • POST请求有请求体,可以放在请求体中传递给服务器,所以没有长度限制,可以传大量数据

缓存

  • GET请求可以被浏览器缓存,可以直接使用缓存结果不用重新请求服务器
  • POST请求通常不会被缓存

安全性

  • GET请求参数暴露在地址栏中,而且也会保存到浏览器记录中,可能会带来安全隐患
  • POST请求参数放在请求体,而且也不会保存在浏览器记录中,相对来说比较安全。

操作浏览器行为

  • GET请求,用户点击后退和刷新不会产生副作用
  • POST请求,用户点击后退或者刷新可能会造成重复提交的问题

幂等性

  • GET请求通常不会用来修改服务器资源,多次执行相同的 GET 请求不会产生不同的结果。
  • POST请求多次执行会产生不同结果,POST请求会修改服务器资源。

浏览器从请求到加载一个页面需要经历哪些过程?

  1. 进行DNS解析,将输入的域名解析为ip地址
  2. 浏览器与服务器建立TCP连接
  3. 发送http请求,请求特定的资源
  4. 服务器响应请求并返回数据
  5. 浏览器解析拿到的数据
  6. 解析HTML,构建DOM树
  7. 解析CSS,生成CSSOM树
  8. DOM树与CSSOM树结合生成render树
  9. 计算元素大小及位置进行布局
  10. 绘制各个节点
  11. 浏览器将各层的信息发送给GPU,GPU将各层合成,将页面显示出来

cookie,sessionStorage 和 localStorage 有什么区别?

image.png

cookie和session有什么区别?

image.png