search

ArthurWangCN / notepad

reading notepad
0 stars 2 forks source link

HTML概念 #25

Open ArthurWangCN opened 1 year ago

ArthurWangCN commented 1 year ago

HTML语义化

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

优点：

  1. 对机器友好，适合搜索引擎的爬虫爬取有效信息，有利于SEO。语义类还支持读屏软件，根据文章可以自动生成目录；
  2. 对开发者友好，使用语义类标签增强了可读性，便于团队的开发与维护。

常见的语义化标签： header、nav、section、main、article、aside、footer

ArthurWangCN commented 1 year ago

src和href的区别

src和href都是用来引用外部的资源，它们的区别如下：

ArthurWangCN commented 1 year ago

DOCTYPE的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式：

ArthurWangCN commented 1 year ago

defer和async

都是为了解决脚本文件下载阻塞页面解析的问题。

不同：

defer

等DOM完成后，再执行js脚本，即在DOMContentLoaded 之前执行js脚本。并且保证执行顺序就是代码中的顺序。

解析HTML -> 发现defer的js文件 -> 继续解析HTML并且并行下载js文件 -> HTML解析完毕执行js

async

async可以保证脚本下载的同时，浏览器继续解析渲染。但是使用该属性，无法保证js文件执行顺序，哪个先下载完哪个先执行。

解析HTML -> 发现async的js文件 -> 继续解析HTML并且并行下载js文件 -> 脚本下载完成，停止解析HTML，执行js -> js执行完毕，恢复解析HTML

应该用哪个？

脚本之间没有依赖关系，用async；有依赖关系，用defer。如果同时用async和defer，defer会失效。

ArthurWangCN commented 1 year ago

DOMContentLoaded与load区别

css 和 html 是并行加载的，过程中如果遇到css 或者 img，则会向浏览器发送一个请求，待资源返回后，将其添加到dom的相应位置中。

ArthurWangCN commented 1 year ago

DOM渲染及阻塞问题

渲染问题

一、解析DOM树和CSSOM

  1. HTML标签进行Dom树解析：

解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。 script的加载或者执行都会阻塞html解析、其他下载线程以及渲染线程。 link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。 img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。

  1. CSS语法进行CSS树解析

二、DOM树和CSSOM渲染完成后合并生成Render树

三、布局（reflow重排发生在这个阶段）

这个阶段是通过递归调用进行布局的，引擎计算各元素的尺寸大小，进行布局树绘制

触发重排：

四、绘制（repainting重绘发生在这个阶段）

触发重绘：改变元素颜色、背景、visibility、outline等属性

重排一定会触发重绘，重绘不一定会触发重排。

ArthurWangCN commented 1 year ago

meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常见的有：

ArthurWangCN commented 1 year ago

HTML5新增内容

（1）新增语义化标签：nav、header、footer、aside、section、article （2）音频、视频标签：audio、video （3）数据存储：localStorage、sessionStorage （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议） （5）input标签新增属性：placeholder、autocomplete、autofocus、required （6）history API：go、forward、back、pushstate

ArthurWangCN commented 1 year ago

img的srcset属性的作⽤

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

ArthurWangCN commented 1 year ago

web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

ArthurWangCN commented 1 year ago

HTML5的离线储存

离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用方法：

（1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：

<html lang="en" manifest="index.appcache">

（2）在 cache.appcache文件中编写需要离线存储的资源：

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

ArthurWangCN commented 1 year ago

Canvas和SVG

（1）SVG：

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

（2）Canvas：

Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

ArthurWangCN commented 1 year ago

HTML5 drag API

ArthurWangCN commented 1 year ago

有哪些可能引起前端安全的问题?

ArthurWangCN commented 1 year ago

SEO的TDK

在 SEO 中，所谓的 TDK 其实就是 title、description、keywords 这三个标签，title 标题标签，description 描述标签，keywords 关键词标签