HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
所谓超文本，有2层含义：
- 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
- 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）
HTML 不是一种编程语言，而是一种标记语言 (markup language)
1. HTML 结构
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div></div></body></html>
2. HTML 标签分类
常规元素（双标签）
<标签名> 内容 </标签名> 比如 <body> 我是文字 </body>
空元素（单标签）
<标签名 /> 比如 <br />
是HTML5推荐写法。
是XHTML1.1的写法
3. <!DOCTYPE>-文档类型
用法：
<!DOCTYPE html>
作用：
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
4. 页面语言 lang
<html lang="en"> 指定html网页的语言
最常见的2个：
en定义语言为英语zh-CN定义语言为中文
5. head 标签
- ：设置网页的元数据。
- ：连接外部样式表。
：设置网页标题。</li><li><style>：放置内嵌的样式表。</li><li><script>：引入脚本。</li><li><noscript>：浏览器不支持脚本时，所要显示的内容。</li><li><base>：设置网页内部相对 URL 的计算基准。</li></ul> <p><a name="jDBEb"></a></p> <h2 id="5c4t3z"><a name="5c4t3z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.1 meta</h2><p><meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。</p> <p><meta>标签里的数据是供机器解读的，其主要作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等。</p> <p><a name="qBtbk"></a></p> <h3 id="abl92q"><a name="abl92q" class="reference-link"></a><span class="header-link octicon octicon-link"></span>(1) charset 属性</h3><p>UTF-8 是目前最常用的字符集编码方式</p> <pre><code class="lang-html"><meta charset="UTF-8" /> </code></pre> <p><a name="g4fW9"></a></p> <h3 id="9qbn08"><a name="9qbn08" class="reference-link"></a><span class="header-link octicon octicon-link"></span>(2) name 属性，content 属性</h3><p><meta>标签的 name 属性表示元数据的名字，content 属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。</p> <p><strong>元数据有很多种</strong>，大部分涉及浏览器内部工作机制，或者特定的使用场景，这里就不一一介绍了。下面是一些例子。</p> <pre><code class="lang-html"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 表示网页在手机端可以自动缩放 --> <meta name="keywords" content="HTML,教程"> </code></pre> <p><a name="SmMLE"></a></p> <h3 id="6gov5w"><a name="6gov5w" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h3><p><a name="QyGRM"></a></p> <h3 id="ap36i6"><a name="ap36i6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>(3) http-equiv 属性，content 属性</h3><p><meta> 标签的 http-equiv 属性用来覆盖 HTTP 回应的头信息字段，content 属性是对应的字段内容。这两个属性与 HTTP 协议相关，属于高级用法。</p> <ul> <li><p>content-type</p> <pre><code class="lang-html"><meta http-equiv="content-type" content="text/html;charset=utf-8"> </code></pre> </li><li><p>refresh</p> <pre><code class="lang-javascript"><meta http-equiv="refresh" content="3"> 3秒后刷新页面 <meta http-equiv="refresh" content="3;url=https://www.baidu.com" />3秒后跳转页面 </code></pre> </li><li><p><del>X-UA-Compatible</del></p> <pre><code class="lang-javascript"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </code></pre> </li><li><p><code>IE=edge</code> means IE should use the latest (edge) version of its rendering engine</p> </li><li><p><code>chrome=1</code> means IE should use the Chrome rendering engine if installed</p> </li><li><p>Content-Security-Policy</p> <pre><code class="lang-javascript"><meta http-equiv="Content-Security-Policy" content="default-src 'self'"> </code></pre> </li><li><p><a rel="nofollow" href="http://www.ruanyifeng.com/blog/2016/09/csp.html">Content Security Policy 入门教程</a></p> </li></ul> <p><br /> <a name="v7eSg"></a></p> <h3 id="bg39iu"><a name="bg39iu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>一些常用标签</h3><pre><code class="lang-html"><!-- 设定字符集 --> <meta charset="utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- 页面关键词 --> <meta name="keywords" content="your keywords"/> <!-- 页面描述内容 --> <meta name="description" content="your description"/> <!-- 定义网页作者 --> <meta name="author" content="author,email address"/> <!-- 定义网页搜索引擎索引方式 --> <meta name="robots" content="index,follow"/> <!-- 禁止google自动翻译 --> <meta name="google" content="notranslate" /> <!-- 优先使用最新的chrome版本 --> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- 禁止转码 --> <meta http-equiv="Cache-Control" content="no-transform"/> <!-- 选择使用的浏览器解析内核（webkit：360浏览器的极速模式） --> <meta name="renderer" content="webkit|ie-comp|ie-stand"/> <!--用于设定网页在特定时间内自动刷新并转到新页面--> <meta http-equiv="refresh" content="5;url=https://www.zpblogs.cn" /> </code></pre> <p><a name="iFfCS"></a></p> <h2 id="f6dolt"><a name="f6dolt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.2 link</h2><p><link>标签主要用于将当前网页与相关的外部资源联系起来，通常放在<head>元素里面。</p> <blockquote> <ul> <li><link>元素可以出现在<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head"><head></a>元素或者<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body"><body></a>元素中，具体取决于它是否有一个<strong>body-ok</strong>的<a rel="nofollow" href="https://html.spec.whatwg.org/multipage/links.html#body-ok">链接类型</a>。例如，stylesheet 链接类型是body-ok的，因此<link rel="stylesheet">允许出现在body中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的<link>元素从你的body内容中分离出来，将其放在<head>中。</li><li>Keywords that are body-ok affect whether link elements are allowed in the body. The body-ok keywords are <strong>dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender, and stylesheet.</strong></li></ul> </blockquote> <pre><code class="lang-html"><link rel="stylesheet" href="assets/css/app.min.css"> </code></pre> <p><link>标签的属性如下</p> <ul> <li>crossorigin：加载外部资源的跨域设置。</li><li>href：外部资源的网址。</li><li>referrerpolicy：加载时Referer头信息字段的处理方法。</li><li>as：rel=”preload” 或 rel=”prefetch”时，设置外部资源的类型。</li><li>type：外部资源的 MIME 类型，目前仅用于 rel=”preload” 或 rel=”prefetch” 的情况。</li><li>title：加载样式表时，用来标识样式表的名称。</li><li>sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。</li></ul> <p>除了默认样式表，网页还可以加载替代样式表，即默认不生效、需要用户手动切换的样式表。</p> <pre><code class="lang-html"><link href="default.css" rel="stylesheet" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" title="Fancy"> <link href="basic.css" rel="alternate stylesheet" title="Basic"> </code></pre> <p>上面代码中，default.css是默认样式表，默认就会生效。fancy.css 和 basic.css 是替换样式表（rel=”alternate stylesheet”），默认不生效。title 属性在这里是必需的，用来在浏览器菜单里面列出这些样式表的名字，供用户选择，以替代默认样式表。<br /><link>还可以加载网站的 favicon 图标文件。</p> <pre><code class="lang-html"><link rel="icon" href="/favicon.ico" type="image/x-icon"> </code></pre> <p><a name="gmGNE"></a></p> <h3 id="b5vsk5"><a name="b5vsk5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>rel 属性</h3><p>rel 属性表示外部资源与当前文档之间的关系，是 <link> 标签的必需属性。它可以但不限于取以下值。</p> <ul> <li>alternate：文档的另一种表现形式的链接，比如打印版。</li><li>author：文档作者的链接。</li><li><strong>dns-prefetch</strong>：要求浏览器提前执行指定网址的 DNS 查询。</li><li>help：帮助文档的链接。</li><li><strong>icon：加载文档的图标文件。</strong></li><li>license：许可证链接。</li><li>next：系列文档下一篇的链接。</li><li>pingback：接收当前文档 pingback 请求的网址。</li><li><strong>preconnect</strong>：要求浏览器提前与给定服务器，建立 HTTP 连接。</li><li><strong>prefetch</strong>：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。</li><li><strong>preload</strong>：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。</li><li><strong>prerender</strong>：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。</li><li>prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。</li><li>search：提供当前网页的搜索链接。</li><li><strong>stylesheet：加载一张样式表。</strong></li></ul> <p><a name="qR8pb"></a></p> <h3 id="3a1hix"><a name="3a1hix" class="reference-link"></a><span class="header-link octicon octicon-link"></span>资源的预加载</h3><p><a name="viWZU"></a></p> <h4 id="b246m1"><a name="b246m1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>(1)<link rel="preload"></h4><p><link rel="preload">告诉浏览器尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。当加载页面几秒钟后需要该资源时，它会很有用。下载后，浏览器不会对资源执行任何操作，脚本未执行，样式表未应用。它只是缓存，当其他东西需要它时，它立即可用。</p> <pre><code class="lang-html"><head> <meta charset="utf-8"> <title>JS and CSS preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload </code></pre> <p>rel=”preload”除了优先级较高，还有两个优点：一是允许指定预加载资源的类型，二是允许onload事件的回调函数。下面是 rel=”preload” 配合 as 属性，告诉浏览器预处理资源的类型，以便正确处理。</p> <p>as 属性指定加载资源的类型，它的值一般有下面几种。</p> <ul> <li>“script”</li><li>“style”</li><li>“image”</li><li>“media”</li><li>“document”</li></ul> <p>如果不指定 as 属性，或者它的值是浏览器不认识的，那么浏览器会以较低的优先级下载这个资源。<br />有时还需要 type 属性，进一步明确 MIME 类型。</p> <pre><code class="lang-html"><link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> </code></pre> <p>注意，所有预下载的资源，只是下载到浏览器的缓存，并没有执行。如果希望资源预下载后立刻执行，可以参考下面的写法。</p> <pre><code class="lang-html"><link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'"> </code></pre> <p>上面代码中，onload指定的回调函数会在脚本下载完成后执行，立即插入页面。</p> <p><a name="AlGIj"></a></p> <h4 id="fs3wfr"><a name="fs3wfr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>(2)<link rel="prefetch"></h4><p><link rel="prefetch"> 的使用场合是，如果后续的页面需要某个资源，并且希望预加载该资源，以便加速页面渲染。该指令不是强制性的，优先级较低，浏览器不一定会执行。这意味着，浏览器可以不下载该资源，比如连接速度很慢时。</p> <pre><code class="lang-html"><link rel="prefetch" href="https://www.example.com/"> </code></pre> <p><a name="fxKZt"></a></p> <h4 id="g6s1sc"><a name="g6s1sc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>(3)<link rel="preconnect"></h4><p><link rel="preconnect">要求浏览器提前与某个域名建立 TCP 连接。当你知道，很快就会请求该域名时，这会很有帮助。</p> <pre><code class="lang-html"><link rel="preconnect" href="https://www.example.com/"> </code></pre> <p><a name="DjvxH"></a></p> <h4 id="7c789g"><a name="7c789g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>(4)<link rel="dns-prefetch"></h4><p><link rel="dns-prefetch">要求浏览器提前执行某个域名的 DNS 解析。</p> <pre><code class="lang-html"><link rel="dns-prefetch" href="//gw.alicdn.com"> </code></pre> <p><a name="ZPEPf"></a></p> <h4 id="9mnuzk"><a name="9mnuzk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>(5)<link rel="prerender"></h4><p><link rel="prerender">要求浏览器加载某个网页，并且提前渲染它。用户点击指向该网页的链接时，就会立即呈现该页面。如果确定用户下一步会访问该页面，这会很有帮助。</p> <pre><code class="lang-html"><link rel="prerender" href="http://example.com/"> </code></pre> <p><a name="B49Cl"></a></p> <h2 id="7o4sn0"><a name="7o4sn0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.3 base</h2><p><base>标签<strong>指定网页内部的所有相对 URL 的计算基准。</strong>整张网页只能有一个<base>标签，而且只能放在<head>里面。它是单独使用的标签，没有闭合标签，下面是一个例子。</p> <blockquote> <p>一个文档的基本 URL, 可以通过使用<code>document.baseURI</code>的 JS 脚本查询。如果文档不包含 <base> 元素，baseURI 默认为 <code>document.location.href</code>。</p> </blockquote> <pre><code class="lang-html"><head> <base href="https://www.example.com/files/" target="_blank"> </head> </code></pre> <p><a name="uk54p"></a></p> <h2 id="95yntd"><a name="95yntd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.4 script</h2><p><script>用于加载脚本代码，目前主要是加载 JavaScript 代码。</p> <pre><code class="lang-html"><script> console.log('hello world'); </script> </code></pre> <p><script>也可以加载外部脚本，src属性给出外部脚本的地址。</p> <pre><code class="lang-html"><script type="text/javascript" src="javascript.js"></script> </code></pre> <ul> <li><code>type="text/javascript"</code> html5可以省略</li></ul> <p>type 属性也可以设成 module，表示这是一个 ES6 模块，不是传统脚本。</p> <pre><code class="lang-html"><script type="module" src="main.js"></script> </code></pre> <p>对于那些不支持 ES6 模块的浏览器，可以设置 nomodule 属性。支持 ES6 模块的浏览器，会不加载指定的脚本。这个属性通常 与type=”module” 配合使用，作为老式浏览器的回退方案。</p> <pre><code class="lang-html"><script type="module" src="main.js"></script> <script nomodule src="fallback.js"></script> </code></pre> <p><strong>带有type=”module”的<script>，是异步加载，等同于打开了<script>标签的defer属性。</strong></p> <p><script>还有下面一些其他属性 </p> <ul> <li>async：该属性指定 JavaScript 代码为异步执行，不是造成阻塞效果，JavaScript 代码默认是同步执行。</li><li>defer：该属性指定 JavaScript 代码不是立即执行，而是页面解析完成后执行。</li><li>crossorigin：如果采用这个属性，就会采用跨域的方式加载外部脚本，即 HTTP 请求的头信息会加上origin字段。</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2022/png/338495/1642322511410-9b898c48-c138-4916-a865-c9f56757087a.png#clientId=u140d26ee-a612-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=193&id=ue7b6d59d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=385&originWidth=1616&originalType=binary&ratio=1&rotation=0&showTitle=false&size=46841&status=done&style=none&taskId=u515fd168-418b-41fc-ae90-2fae83fd217&title=&width=808" alt="image.png"> <a name="s19q0"></a></p> <h3 id="eun4ty"><a name="eun4ty" class="reference-link"></a><span class="header-link octicon octicon-link"></span>动态脚本</h3><pre><code class="lang-javascript">let script = document.createElement('script'); script.src = "/article/script-async-defer/long.js"; document.body.append(script); // (*) </code></pre> <p>当脚本被附加到文档 (<em>) 时，脚本就会立即开始加载。<strong>默认情况下，动态脚本的行为是 </strong>async <em>*的。</em></em> <a name="lwRYU"></a></p> <h2 id="5n8ct4"><a name="5n8ct4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.5 noscript</h2><p><code><noscript></code>标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容。<br />用户关闭 JavaScript 可能是为了节省带宽，以延长手机电池寿命，或者为了防止追踪，保护隐私。</p> <pre><code class="lang-html"><noscript> 您的浏览器不能执行 JavaScript 语言，页面无法正常显示。 </noscript> </code></pre> <p><a name="GxKv7"></a></p> <h2 id="en3pju"><a name="en3pju" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.6 style</h2><pre><code class="lang-html"><style> p { color: red; } </style> <style media="all and (max-width: 500px)"> p { color: blue; background-color: yellow; } </style> </code></pre> <ul> <li>type 如果该属性未指定，则默认为 text/css</li><li>media 该属性规定该样式适用于哪个媒体。属性的取值<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries">CSS 媒体查询</a>，默认值为 all。 <a name="W7jQa"></a><h1 id="m7mzu"><a name="m7mzu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>思考</h1><a name="vYiDW"></a><h2 id="51quj3"><a name="51quj3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>为什么link一个CSS要用href，而引入js要用src呢？</h2><blockquote> <p>script 标签可以使用使用<code>src</code>属性来引用文件也可以直接写，属于<strong>替换型元素。</strong>都是的，<strong>链接型元素</strong>是使用 <code>href</code>标签的。 <code><style></code> 标签并非替换型元素，不能使用<code>src</code>属性，这样，我们用 <code><link></code>标签引入 CSS 文件，当然就是用<code>href</code>标签啦。 — <a rel="nofollow" href="https://time.geekbang.org/column/article/89491">重学前端</a></p> </blockquote> </li></ul> <blockquote> <ul> <li>CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。</li><li>JS 阻塞 DOM 解析，但浏览器会”偷看”DOM，预先下载相关资源。</li><li>浏览器遇到 <script>且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。</li></ul> </blockquote> <p>一般情况下,习惯性 <strong><link></strong> 标签写在 <strong><head></strong> 里面， <strong><script></strong> 标签写在body标签的尾部。 <a name="VysuU"></a></p> <h2 id="c5qpif"><a name="c5qpif" class="reference-link"></a><span class="header-link octicon octicon-link"></span>defer和async区别和场景</h2><ul> <li>html4中定义了 defer；html5中定义了 async</li><li>浏览器遇到该 defer 标签时，加载脚本的过程与解析后面标签的过程同时进行，但是在解析完所有元素之后才按顺序执行脚本，在 DOMContentLoaded 事件之前执行</li><li>浏览器遇到该 async 标签时，加载脚本的过程与解析后面标签的过程同时进行，加载完毕后<strong>执行</strong>该脚本，执行顺序取决于加载先后，可能在 DOMContentLoaded 事件的前后。</li></ul> <blockquote> <p>在实际开发中，defer 用于需要整个 DOM 的脚本，和/或脚本的相对执行顺序很重要的时候。 async 用于独立脚本，例如计数器或广告，这些脚本的相对执行顺序无关紧要。</p> </blockquote> <p><a name="csRTZ"></a></p> <h2 id="1a51zb"><a name="1a51zb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>prefetch和preload的区别</h2><ul> <li>preload 主要用于<strong>预加载</strong>当前页面需要的资源；而 prefetch 主要用于加载将来页面肯能需要的资源</li></ul> <p><a rel="nofollow" href="https://www.yuque.com/mewcoder/fe/ckdb1m?view=doc_embed">资源加载的优先级</a> <a name="AFveT"></a></p> <h1 id="3dwhh7"><a name="3dwhh7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>参考</h1><ul> <li><a rel="nofollow" href="https://wangdoc.com/html/intro.html">https://wangdoc.com/html/intro.html</a></li><li><a rel="nofollow" href="https://zh.javascript.info/script-async-defer">https://zh.javascript.info/script-async-defer</a></li><li><a rel="nofollow" href="https://juejin.cn/post/6844903936877395981"><script>和<link>标签对DOM解析和渲染的影响</a></li></ul> <p><a name="ODwzi"></a></p> <h1 id="kck4m"><a name="kck4m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>心得</h1><p>资源加载比较重要，涉及<strong>浏览器的原理</strong>以及<strong>性能优化</strong>相关</p>
若有收获，就点个赞吧
0 人点赞
