+

HTML知识点（一）

+ + +
+ +

HTML知识点（一）

1、src和href的区别

    +

  • 资源加载方式

    +

    src 加载资源并且把资源嵌入到页面中，加载资源的过程中页面可能会等待资源加载完成。（比如 script 标签在加载时会阻塞页面渲染）。

    +

    href 用于建立连接，加载外部资源（比如 css）后并不直接嵌入内容，或仅在用户交互后导航到该资源。

    +
    • +

  • 适用标签

    +

    src 常用于 <img> 、 <script> 、 <frame> 等需要直接加载并显示内容的标签。

    +

    href 常用语 <a> 、 <link> 标签，分别用于建立超链接和加载外部样式/其他资源。

    +
    • +

  • 加载时机

    +

    src：浏览器在解析标签的时候，立即加载指定资源。

    +

    href：对于<a> 标签，用户点击链接后才会加载资源。对于 <link> 标签（比如css），浏览器在解析<head>时加载，但不会阻塞页面渲染。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 加载外部CSS样式表 -->
        <link rel="stylesheet" href="../CSS/demo.css">
    </head>
    <body>
        <!-- 图片 -->
        <img src="../Images/cat.jpg" alt="">
        <!-- 引入JS -->
        <script src="../JS/demo.js"></script>
        <!-- Frame -->
         <iframe src="https://oyoanan.github.io/" frameborder="0" width="600" height="400"></iframe>

         <!-- 超链接 -->
          <a href="https://oyoanan.github.io/" target="_blank" rel="noopener">访问安安的博客</a>
        </body>
    </html>
    • +
+

? 为什么script标签默认阻塞页面渲染？

+
+

<script> 标签默认的行为：浏览器必须停下渲染页面，先处理脚本，再继续渲染。

+

因为脚本可能改变页面内容、可能依赖已渲染的内容。

+
+

？那如何让脚本不阻塞渲染？

+
+

使用 async 属性（异步加载）— 下载完立即执行，但执行时机不确定，适合独立脚本（比如广告）。

+

使用 defer 属性（延迟执行） — 页面渲染完成后执行，保证了先后顺序，适合依赖页面内容的脚本。

+
+

2、HTML语义化的理解

    +

  • 提升可读性和可维护性

    +

    开发者使用具有明确含义的标签（比如 <header>、<nav>、<main>、<article>、<section>、<footer> 等）,代码的结构和目的更直观，其他开发者或者后续自己的维护时也能更快理解页面结构。

    +
    • +

  • 搜索引擎优化 SEO

    +

    搜索引擎根据页面的语义信息更好理解内容的层次和重点，有助于提升页面在搜索结果中的排名。

    +
    • +

  • 无障碍访问

    +

    使用语义化的标签可以帮助屏幕阅读器或者其他辅助技术正确的解释页面内容，帮助残障人士更好地使用网页。

    +
    • +

  • 标准化开发

    +

    遵循HTML语义化标准，提高代码的可移植性，确保代码在不同的浏览器或者设备上都有较好的表现。

    +
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<article>
    <header>
        <h1>文章标题</h1>
        <p>文章作者</p>
        <p>发表时间</p>
    </header>
    <section>
        <h2>文章主体</h2>
        <p>文章内容</p>
    </section>
    <footer>
        <p>版权所有</p>
    </footer>
</article>
+ +

？常见的HTML语义化标签

+
+

分为结构性标签、文本标签

+

结构性标签：<header> 、<nav> 、<aside> 、<section> 、<article> 、<footer> 、<main>

+

文本标签：<h1-h6> 、<p> 、<blockqueto> 、<a> 、<q>

+
+

3、DOCTYPE的作用

<!DOCTYPE> 声明，也称为文档类型声明。它的作用是告诉浏览器当前文档使用的是哪种HTML或XHTML规范，如何解析和渲染页面。

+
1
<!DOCTYPE html> 触发标准模式 HTML5
+ +
    +

  • 告诉浏览器使用哪种渲染模式

    +

    标准模式：浏览器安装W3C标准来渲染。

    +

    怪异模式：为了兼容老旧网页，用非标准的方式渲染页面，可能导致不同浏览器之间的显示效果差异。

    +
    • +
+

？如何启动怪异模式

+
+

只要 DOCTYPE 的声明符合某个标准格式，就自动进入标准模式。反之，如果没有声明 DOCTYPE，或者使用了不完整或过时的 DOCTYPE 声明，进入怪异模式。

+
+

？差异具体表现在哪里

+
+

CSS盒模型的计算方式：标准模式下的宽高只包含了内容 content 区域，不包含边框或者内边距、外边距。而怪异模式下的宽高为它们的总和。

+

默认布局和对齐差异：怪异模式中，一些默认样式和行内元素的垂直对齐可能与标准模式下有所差别。例如，图片或内联块元素的基线对齐行为可能会不同。

+
+

4、常用的meta标签

meta 是HTML中用于提供元数据的标签。不会直接显示在页面，但对于SEO、浏览器解析和移动设备优化等方面很重要。

+
    +

  • 字符集声明

    +

    字符编码定义了字符与二进制数据之间的映射关系。如果编码设置不正确，浏览器可能会显示乱码。

    +
    1
    2
    <meta charset="UTF-8"> 
    # 支持几乎所有的语言字符（中文、英文、日文、韩文等），兼容ASCII码。
    + +
    1
    2
    <meta charset="ISO-8859-1"> 
    # 支持西欧语言（如英语、法语、德语、西班牙语等），不支持中文、日文等非拉丁字符。
    + +
    1
    2
    <meta charset="GBK"> <meta charset="GB2312">
    # 支持简体中文和部分繁体中文，是 GB2312 的扩展，支持更多汉字。
    + +
    1
    2
    <meta charset="Big5">
    #支持繁体中文，主要用于台湾、香港等地区。
    + +
    1
    2
    <meta charset="Shift_JIS">
    # 支持日文，是日本常用的字符编码。
    + +
    1
    2
    <meta charset="EUC-KR">
    # 支持韩文，是韩国常用的字符编码。
    + +

    其他编码

    +

    ASCII：仅支持英文字符和基本符号，不适合多语言网页。

    +

    UTF-16：支持 Unicode 字符，但文件体积较大，不推荐用于网页。

    +

    UTF-32：支持 Unicode 字符，但文件体积更大，极少使用。

    +
    • +

  • 视口设置

    +

    控制网页在不同设备上的显示和缩放行为。

    +
    1
    2
    <!-- 还可以设置minimum-scale、maximum-scale、user-scalable -->
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    +
    • +

  • 搜索引擎相关

    +

    允许/禁止 — 搜索引擎索引此网页内容、跟踪网页中的链接并爬取它们的内容。

    +

    noarchive： 禁止搜索引擎保存页面的缓存版本。

    +

    nosnippet：禁止搜索引擎在搜索结果中显示页面内容的摘要。

    +

    noimageindex：禁止搜索引擎索引页面上的图片。

    +

    nocache：禁止搜索引擎缓存页面（类似于 noarchive）

    +
    1
    2
    <!-- index/ follow/ noindex/ nofollow -->
    <meta name="robots" content="index,follow">
    +
    • +

  • 其他元数据

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!-- 设置作者 -->
    <meta name="author" content="anan">
    <!-- 设置版权 -->
    <meta name="copyright" content="© 2025 AnCompany">
    <!-- 页面描述 -->
    <meta name="description" content="This is a description">
    <!-- 页面关键字 -->
    <meta name="keywords" content="HTML, meta, 标签, 示例">
    <!-- 设置页面自动刷新 -->
    <meta http-equiv="refresh" content="5;url=https://www.google.com">
    <!-- 针对IE浏览器，使用最新的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 内容安全策略 只允许这些特定来源加载相应的资源 -->
    <meta http-equiv="Content-Security-Policy" 
    content="default-src 'self';
    script-src 'self' https://trusted.cdn.com;
    style-src 'self' 'unsafe-inline';
    img-src 'self' https://images.example.com;
    font-src 'self';">
    • +
+

5、HTML5有哪些更新？

    +

  • 新语义化标签

    +

    header, main, footer, nav, aside, section, article等。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!-- 新增语义化标签 -->
        <header></header>
        <main>
            <article></article>
            <aside></aside>
            <nav></nav>
            <section></section>
            <details></details>
            <summary></summary>
            <figure></figure>
            <figcaption></figcaption>
        </main>
        <footer></footer>
    +
    • +

  • 多媒体支持

    +

    audio, video, source。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- 多媒体支持 -->
       <audio src="" controls autoplay loop="true"></audio>
       <video src="" controls poster="../Images/cat.jpg"></video>
       <audio>
           <source src='audio.mp3' type='audio/mp3'>
           您的浏览器不支持音频标签。
       </audio>
       <video>
           <source src='video.mp4' type='video/mp4'>
           您的浏览器不支持视频标签。
       </video>
    + +

    ？ label是什么标签？

    +
    +

    label是为表单控件定义标签的元素，点击label标签浏览器自动转移焦点到相应控件。

    +

    将它与表单控件关联的方式有：

    +

    1、通过for属性的值与控件的id属性值一致。

    +

    2、将表单控件嵌套在label标签内部。

    +
    +

    ？ name属性的含义？

    +
    +

    name属性为表单控件指定名称，这个名称是键，控件输入内容为值，键值对会发送给服务器。

    +

    多个控件可以共享相同的 name，这样服务器会将这些值当作一组数据处理。（比如单选框、多选框）

    +
    +
    • +

  • 表单增强

    +

    新增输入类型 input type：email、url、date、time、detetime-local、number、range、color

    +

    新增属性：required、placeholder、pattern、autofocus。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!-- 表单增强 -->
    <form action="">
        <label for="email">电子邮件</label>
        <input type="email" id="email" name="email" required placeholder="输入电子邮件地址" >
        <label for="birthdate">出生日期</label> 
        <input type="date" id="birthdate" name="birthdate">
        <label> 时间
            <input type="time">
            <input type="datetime-local">
        </label> 
        <label> 数字
            <input type="number" autofocus>
        </label> 
        <label> 滑块
            <input type="range">
        </label> 
        <label for="color">颜色</label>
        <input type="color" id="color" name="color">
        <label>选择性别：
        <input type="radio" name="gender"  value="male">男
        <input type="radio" name="gender" value="female">女
        </label>
        <label>选择爱好：
        <input type="checkbox" name="hobbies[]" value="reading"> 阅读
        <input type="checkbox" name="hobbies[]" value="sports"> 运动
        <input type="checkbox" name="hobbies[]" value="music"> 音乐
        </label>
        <button type="submit">提交</button>
    </form>
    +
    • +

  • 图形和绘图支持

    +

    新增canvas标签，允许使用 JavaScript在页面上绘制图形。对 SVG 矢量图的支持进一步增强。

    +
    1
    2
    3
    4
    5
    6
    7
    8
      <!-- canvas -->
    <canvas id="myCanvas" width="400" height="300"></canvas>
       <script>
           var canvas = document.getElementById("myCanvas");
           var ctx = canvas.getContext("2d");
           ctx.fillStyle = "red";
           ctx.fillRect(10, 10, 100, 100);
       </script>
    + +

    ？ canvas的 getContext 方法？

    +
    +

    是 canvas 元素的核心 API，用于获取指定类型的绘图上下文。

    +

    传入参数”2d”：获取一个二维绘图上下文。

    +

    传入参数”webgl”或者”experimental-webgl”：进行 3D 绘图和高性能图形渲染。

    +
    +

    强化对svg标签的支持：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
         <circle
           cx="100"
           cy="100"
           r="80"
           stroke="green"
           stroke-width="4"
           fill="yellow"
         />
     </svg>
    + +

    ？xmlns属性是什么？

    +
    +

    全称：XML Namespace（XML 命名空间）。

    +

    命名空间的作用是防止在不同 XML 语言中可能存在的标签名称冲突。告诉浏览器，“这里定义的所有元素都属于 SVG 标准（由 W3C 定义的 SVG 规范）”，

    +
    +

    ？ XML是什么？和HTML的区别？

    +
    +

    XML（可扩展标记语言）和 HTML（超文本标记语言）都是基于标记的语言，但它们的设计目的和使用场景有明显的不同。

    +

    XML：主要目标是存储和传输数据，强调数据的结构和内容，而不是数据的显示。语法非常严格。“可扩展”的，意味着可以自定义标签和结构，以适应不同的需求。

    +

    HTML：主要用于在网页上显示和呈现数据。关注页面内容的结构、格式和外观，而不是数据本身的存储。语法较宽松，浏览器具有容错性。

    +
    +
    • +

  • 存储和离线

    +

    1、本地存储：在用户浏览器中存储数据。

    +

    **localStorage**：持久化存储，键值对形式，存储容量比COOKIE大。

    +

    **sessionStorage**：仅在浏览器会话 session 期间存储，关闭页面后数据会被清除。键值对形式，适合存储临时数据。

    +
    1
    2
    3
    4
    5
    6
    7
    <!-- 存储和离线支持 -->
        <script>
           localStorage.setItem("name1", "anan1");
           console.log(localStorage.getItem("name1"));
           sessionStorage.setItem("name2", "anan2");
           console.log(sessionStorage.getItem("name2"));
        </script>
    + +

    2、离线支持：网页或 Web 应用在没有网络连接的情况下，仍能正常运行或展示部分功能。

    +

    AppCache 已被视为过时技术，现代方法是使用 Service Worker 和 Cache API。

    +

    **AppCache**：在 HTML 页面中添加一个 manifest 属性，指定一个清单文件（manifest file）。这个文件列出了应用所需的所有资源，浏览器会将这些资源缓存到本地。当离线时，浏览器会使用缓存的资源加载页面。

    +

    **Service Worker**：是运行在浏览器后台的独立线程，可以拦截网络请求，控制资源缓存和离线加载行为。它允许开发者精确控制哪些文件需要缓存，以及如何在离线时响应请求。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <script>
        // 检查浏览器是否支持 Service Worker
        if ('serviceWorker' in navigator) {
          window.addEventListener('load', function() {
            // 注册 Service Worker 脚本（sw.js）
            navigator.serviceWorker.register('../JS/serviceworker.js')
              .then(function(registration) {
                console.log('Service Worker 注册成功，范围：', registration.scope);
              })
              .catch(function(error) {
                console.error('Service Worker 注册失败：', error);
              });
          });
        } else {
          console.log('当前浏览器不支持 Service Worker。');
        }
      </script>
    + +

    ？什么是manifest文件？

    +
    +

    用于列出一个 Web 应用中所有需要缓存的资源（例如 CSS、JavaScript、图片、字体等）。根据该文件的内容将指定资源下载并保存到本地缓存中。

    +

    第一行必须是 CACHE MANIFEST，告诉浏览器这是一个应用缓存文件。CACHE 部分列出所有需要缓存的资源 URL，NETWORK 部分指定哪些资源在离线时不缓存，而是始终通过网络请求。如果写 *，表示所有不在 CACHE 部分的资源都需要通过网络获取。

    +

    由于存在更新不灵活、错误处理较差等问题，现在已被 Service Worker 替代。

    +
    +

    ? 使用manifest的注意事项：

    +
    +

    1、创建 manifest 文件

    +

    2、在 HTML 文件的 <html> 标签中添加 manifest 属性，指定该 manifest 文件的 URL。

    +

    3、当应用中的资源发生变化时，需要更新 .manifest 文件的内容或修改版本号，这样浏览器才会检测到变化并更新缓存。

    +

    4、使用 .manifest 文件时，需要确保服务器正确配置了 MIME 类型（text/cache-manifest），否则浏览器可能无法正确解析文件。— 每个文件都有一个MIME 类型（也称为媒体类型）

    +
    +

    ? navigator是什么？

    +
    +

    在浏览器中，navigator 是 window 对象的一个属性，可以直接通过 navigator 来访问。

    +

    navigator 包含了关于浏览器和操作系统的一些基本信息，navigator 对象提供了多种接口，比如：

    +

    navigator.geolocation：用于访问地理位置信息。
    navigator.serviceWorker：用于注册和管理 Service Worker，从而实现离线支持、后台同步等。
    navigator.mediaDevices：用于访问摄像头和麦克风等媒体设备。】

    +
    +
    • +

  • 文档声明

    +
    1
    2
    3
    4
    5
    # 更简洁的文档声明和默认字符编码：
    <!DOCTYPE html>
    <head>
      <meta charset="UTF-8">
    </head>
    +
    • +

  • 设备适配

    +
    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    +
    • +

  • Geolocation API（地理定位）

    +

    允许网页或 Web 应用在获得用户授权后，获取用户的地理位置信息。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <script>
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
              function(position) { // 成功回调
                const latitude = position.coords.latitude;
                const longitude = position.coords.longitude;
                const accuracy = position.coords.accuracy;
                console.log('纬度：' + latitude);
                console.log('经度：' + longitude);
                console.log('精度：' + accuracy + ' 米');
              },
              function(error) { // 错误回调
                console.error('获取位置信息失败：', error);
              },
              {
                enableHighAccuracy: true, // 尽可能获取高精度位置
                timeout: 5000,            // 5 秒超时
                maximumAge: 0             // 不使用缓存，获取最新的位置
              }
            );
          } else {
            console.log("浏览器不支持 Geolocation API");
          }
    </script>
    +
    • +

  • 拖放 API（Drag and Drop API）

    +

    拖放 API 允许用户在网页上拖动元素，并将它们放置到目标区域。例如，文件上传可以通过拖拽文件实现。

    +

    拖放的实现基于以下事件：

    +
      +
    • 拖拽开始阶段：dragstart
      • +
    • 拖拽过程中的监控：drag
      • +
    • 进入目标区域时：dragenter
      • +
    • 在目标区域内移动：dragover
      • +
    • 离开目标区域时：dragleave
      • +
    • 放置时：drop
      • +
    • 拖拽结束时：dragend
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>拖放 API 示例</title>
      <style>
        #drag-item {
          width: 100px;
          height: 100px;
          background-color: blue;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: grab;
        }

        #drop-area {
          width: 200px;
          height: 200px;
          border: 2px dashed gray;
          margin-top: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: gray;
        }
        #drop-area.drag-over {
          border-color: green;
          color: black;
        }
      </style>
    </head>
    <body>
      <div id="drag-item" draggable="true">拖我</div>
      <div id="drop-area">放到这里</div>

      <script>
        const dragItem = document.getElementById('drag-item');
        const dropArea = document.getElementById('drop-area');

        dragItem.addEventListener('dragstart', (event) => {
          event.dataTransfer.setData('text/plain', '我是拖拽的数据');
        });

        dropArea.addEventListener('dragover', (event) => {
          event.preventDefault(); // 允许放置
          dropArea.classList.add('drag-over');
        });

        dropArea.addEventListener('dragleave', () => {
          dropArea.classList.remove('drag-over');
        });

        dropArea.addEventListener('drop', (event) => {
          event.preventDefault();
          const data = event.dataTransfer.getData('text/plain');
          dropArea.textContent = `接收到的数据：${data}`;
          dropArea.classList.remove('drag-over');
        });
      </script>
    </body>
    </html>

    + +

    ？ event.dataTransfer.setData方法

    +
    +

    用于在拖拽开始时将数据与拖拽事件关联起来，方便在放置时通过 getData() 获取该数据。

    +
    +

    ? event.preventDefault方法

    +
    +

    用于取消或阻止浏览器对特定事件的默认处理，确保拖放操作能够按照自定义逻辑执行（例如允许放置、阻止默认文件打开行为）。

    +
    +
    • +

  • Web Workers

    +

    Web Workers 允许在后台线程运行 JavaScript，不阻塞主线程。适用于耗时操作（如复杂计算、数据处理），提升页面响应速度和用户体验。

    +

    特点：

    +

    1、异步线程：运行在单独的线程中，与主线程通信通过 postMessage 和 onmessage。
    2、无 DOM 访问权限：Workers 无法直接操作 DOM，需通过主线程间接操作。

    +
    1
    const worker = new Worker('worker.js');
    +
    • +

  • WebSocket

    +

    WebSocket 是 HTML5 提供的一种实时双向通信协议，允许浏览器和服务器在单个持久连接上进行数据交换。适用于聊天、实时更新等应用。

    +

    特点：

    +

    1、双向通信：浏览器和服务器都能主动发送和接收数据。
    2、低延迟：持久连接降低了通信延迟，适合实时场景。
    3、轻量级：相比 HTTP 长轮询，WebSocket 更高效。

    +
    1
    const WebSocket = require('ws');
    • +
+ + +
+ +
+
+
+ +
+ + + + + + + + + + HTML + + + + + + + + +
+ + +
+ + + #src和href的区别 + + #HTML语义化的理解 + + #DOCTYPE的作用 + + #常用的meta标签 + + #HTML5有哪些更新 + +
+ +
+ + + + + +
+
+ + +
+ +
+ +
+ + +