📁 HTML

2023-03-24 14:38| 来源: 网络整理| 查看: 265

1. HTML 结构2. HTML 标签分类3. -文档类型4. 页面语言 lang5. head 标签5.1 meta(1) charset 属性(2) name 属性，content 属性(3) http-equiv 属性，content 属性一些常用标签5.2 linkrel 属性资源的预加载">(1)">(2)">(3)">(4)">(5)5.3 base5.4 script动态脚本5.5 noscript5.6 style思考为什么link一个CSS要用href，而引入js要用src呢？defer和async区别和场景prefetch和preload的区别参考心得

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。所谓超文本，有2层含义：

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

HTML 不是一种编程语言，而是一种标记语言 (markup language)

1. HTML 结构 Document

2. HTML 标签分类

常规元素（双标签）

内容比如我是文字

空元素（单标签）

比如

是HTML5推荐写法。是XHTML1.1的写法

3. -文档类型

用法：

作用：声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

4. 页面语言 lang 指定html网页的语言

最常见的2个：

en定义语言为英语zh-CN定义语言为中文

5. head 标签：设置网页的元数据。：连接外部样式表。：设置网页标题。：放置内嵌的样式表。：引入脚本。：浏览器不支持脚本时，所要显示的内容。：设置网页内部相对 URL 的计算基准。

5.1 meta

标签用于设置或说明网页的元数据，必须放在里面。一个标签就是一项元数据，网页可以有多个。标签约定放在内容的最前面。

标签里的数据是供机器解读的，其主要作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等。

(1) charset 属性

UTF-8 是目前最常用的字符集编码方式

(2) name 属性，content 属性

标签的 name 属性表示元数据的名字，content 属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。

元数据有很多种，大部分涉及浏览器内部工作机制，或者特定的使用场景，这里就不一一介绍了。下面是一些例子。

(3) http-equiv 属性，content 属性

标签的 http-equiv 属性用来覆盖 HTTP 回应的头信息字段，content 属性是对应的字段内容。这两个属性与 HTTP 协议相关，属于高级用法。

content-type

refresh

3秒后刷新页面 3秒后跳转页面

X-UA-Compatible

IE=edge means IE should use the latest (edge) version of its rendering engine

chrome=1 means IE should use the Chrome rendering engine if installed

Content-Security-Policy

Content Security Policy 入门教程

一些常用标签

5.2 link

标签主要用于将当前网页与相关的外部资源联系起来，通常放在元素里面。

元素可以出现在元素或者元素中，具体取决于它是否有一个body-ok的链接类型。例如，stylesheet 链接类型是body-ok的，因此允许出现在body中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的元素从你的body内容中分离出来，将其放在中。Keywords that are body-ok affect whether link elements are allowed in the body. The body-ok keywords are dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender, and stylesheet.

标签的属性如下

crossorigin：加载外部资源的跨域设置。href：外部资源的网址。referrerpolicy：加载时Referer头信息字段的处理方法。as：rel=”preload” 或 rel=”prefetch”时，设置外部资源的类型。type：外部资源的 MIME 类型，目前仅用于 rel=”preload” 或 rel=”prefetch” 的情况。title：加载样式表时，用来标识样式表的名称。sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。

除了默认样式表，网页还可以加载替代样式表，即默认不生效、需要用户手动切换的样式表。

上面代码中，default.css是默认样式表，默认就会生效。fancy.css 和 basic.css 是替换样式表（rel=”alternate stylesheet”），默认不生效。title 属性在这里是必需的，用来在浏览器菜单里面列出这些样式表的名字，供用户选择，以替代默认样式表。还可以加载网站的 favicon 图标文件。

rel 属性

rel 属性表示外部资源与当前文档之间的关系，是标签的必需属性。它可以但不限于取以下值。

alternate：文档的另一种表现形式的链接，比如打印版。author：文档作者的链接。dns-prefetch：要求浏览器提前执行指定网址的 DNS 查询。help：帮助文档的链接。icon：加载文档的图标文件。license：许可证链接。next：系列文档下一篇的链接。pingback：接收当前文档 pingback 请求的网址。preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。search：提供当前网页的搜索链接。stylesheet：加载一张样式表。

资源的预加载

(1)

告诉浏览器尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。当加载页面几秒钟后需要该资源时，它会很有用。下载后，浏览器不会对资源执行任何操作，脚本未执行，样式表未应用。它只是缓存，当其他东西需要它时，它立即可用。

JS and CSS preload example bouncing balls https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

rel=”preload”除了优先级较高，还有两个优点：一是允许指定预加载资源的类型，二是允许onload事件的回调函数。下面是 rel=”preload” 配合 as 属性，告诉浏览器预处理资源的类型，以便正确处理。

as 属性指定加载资源的类型，它的值一般有下面几种。

“script”“style”“image”“media”“document”

如果不指定 as 属性，或者它的值是浏览器不认识的，那么浏览器会以较低的优先级下载这个资源。有时还需要 type 属性，进一步明确 MIME 类型。

注意，所有预下载的资源，只是下载到浏览器的缓存，并没有执行。如果希望资源预下载后立刻执行，可以参考下面的写法。

上面代码中，onload指定的回调函数会在脚本下载完成后执行，立即插入页面。

(2)

的使用场合是，如果后续的页面需要某个资源，并且希望预加载该资源，以便加速页面渲染。该指令不是强制性的，优先级较低，浏览器不一定会执行。这意味着，浏览器可以不下载该资源，比如连接速度很慢时。

(3)

要求浏览器提前与某个域名建立 TCP 连接。当你知道，很快就会请求该域名时，这会很有帮助。

(4)

要求浏览器提前执行某个域名的 DNS 解析。

(5)

要求浏览器加载某个网页，并且提前渲染它。用户点击指向该网页的链接时，就会立即呈现该页面。如果确定用户下一步会访问该页面，这会很有帮助。

5.3 base

标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个标签，而且只能放在里面。它是单独使用的标签，没有闭合标签，下面是一个例子。

一个文档的基本 URL, 可以通过使用document.baseURI的 JS 脚本查询。如果文档不包含元素，baseURI 默认为 document.location.href。

5.4 script

用于加载脚本代码，目前主要是加载 JavaScript 代码。

console.log('hello world');

也可以加载外部脚本，src属性给出外部脚本的地址。

type="text/javascript" html5可以省略

type 属性也可以设成 module，表示这是一个 ES6 模块，不是传统脚本。

对于那些不支持 ES6 模块的浏览器，可以设置 nomodule 属性。支持 ES6 模块的浏览器，会不加载指定的脚本。这个属性通常与type=”module” 配合使用，作为老式浏览器的回退方案。

带有type=”module”的，是异步加载，等同于打开了标签的defer属性。

还有下面一些其他属性

async：该属性指定 JavaScript 代码为异步执行，不是造成阻塞效果，JavaScript 代码默认是同步执行。defer：该属性指定 JavaScript 代码不是立即执行，而是页面解析完成后执行。crossorigin：如果采用这个属性，就会采用跨域的方式加载外部脚本，即 HTTP 请求的头信息会加上origin字段。

动态脚本let script = document.createElement('script'); script.src = "/article/script-async-defer/long.js"; document.body.append(script); // (*)

当脚本被附加到文档 () 时，脚本就会立即开始加载。默认情况下，动态脚本的行为是 async *的。

5.5 noscript

标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容。用户关闭 JavaScript 可能是为了节省带宽，以延长手机电池寿命，或者为了防止追踪，保护隐私。

您的浏览器不能执行 JavaScript 语言，页面无法正常显示。

5.6 style p { color: red; } p { color: blue; background-color: yellow; } type 如果该属性未指定，则默认为 text/cssmedia 该属性规定该样式适用于哪个媒体。属性的取值CSS 媒体查询，默认值为 all。思考为什么link一个CSS要用href，而引入js要用src呢？

script 标签可以使用使用src属性来引用文件也可以直接写，属于替换型元素。都是的，链接型元素是使用 href标签的。标签并非替换型元素，不能使用src属性，这样，我们用标签引入 CSS 文件，当然就是用href标签啦。 — 重学前端

CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。JS 阻塞 DOM 解析，但浏览器会”偷看”DOM，预先下载相关资源。浏览器遇到且没有defer或async属性的标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。

一般情况下,习惯性标签写在里面，标签写在body标签的尾部。

defer和async区别和场景 html4中定义了 defer；html5中定义了 async浏览器遇到该 defer 标签时，加载脚本的过程与解析后面标签的过程同时进行，但是在解析完所有元素之后才按顺序执行脚本，在 DOMContentLoaded 事件之前执行浏览器遇到该 async 标签时，加载脚本的过程与解析后面标签的过程同时进行，加载完毕后执行该脚本，执行顺序取决于加载先后，可能在 DOMContentLoaded 事件的前后。

在实际开发中，defer 用于需要整个 DOM 的脚本，和/或脚本的相对执行顺序很重要的时候。 async 用于独立脚本，例如计数器或广告，这些脚本的相对执行顺序无关紧要。

prefetch和preload的区别 preload 主要用于预加载当前页面需要的资源；而 prefetch 主要用于加载将来页面肯能需要的资源

资源加载的优先级

参考 https://wangdoc.com/html/intro.htmlhttps://zh.javascript.info/script-async-defer和标签对DOM解析和渲染的影响

心得

资源加载比较重要，涉及浏览器的原理以及性能优化相关

【本文地址】

📁 HTML

📁 HTML

今日新闻

推荐新闻