【前端学习笔记】HTML基础

于 2024-05-28 22:57:50 发布
阅读量990 收藏 31
点赞数 25
分类专栏： 前端学习 文章标签： 前端 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46056318/article/details/139177763
版权

HTML

一、HTML介绍

1.HTML概念

HTML 是超文本标记语言（HyperText Markup Language）的缩写。用于创建网页的标记语言，被用来描述和定义网页的结构和内容。HTML 使用标记来包围不同部分的文本或图像，并告诉浏览器如何显示这些内容。HTML 是构建万维网的基础之一，它定义了网页的结构，包括标题、段落、链接、图像等元素。HTML 文件通常以 .html 或 .htm 扩展名结尾。

2.文档声明

HTML已经由：HTML4 ===> XHTML2.0 ===> HTML5
HTML 文档声明（Document Type Declaration，DTD）是在 HTML 文档的开头声明的一行代码，用于告诉浏览器使用哪个 HTML 规范来解释该文档。它的目的是确保浏览器能够正确地解释和渲染 HTML 文档。

HTML5 的文档声明如下所示：

<!DOCTYPE html>

HTML 4.01 的文档声明如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

文档声明位于 HTML 文档的开头，通常是在 <html> 元素之前。

3.字符编码

字符编码（Character Encoding）是一种将字符集中的字符映射到数字代码的方式。它决定了浏览器如何解释和显示网页中的文本内容。

常见的字符编码包括：

  1. UTF-8：这是一种变长字符编码，能够表示 Unicode 字符集中的所有字符。UTF-8 是目前 web 开发中最常用的字符编码，因为它能够兼容几乎所有的字符集，并且支持多语言文本。

  2. UTF-16：与 UTF-8 类似，UTF-16 也是 Unicode 的一种编码方式，但是它使用固定长度的 16 位编码来表示字符。

  3. ISO-8859-1（Latin-1）：这是一种单字节编码，主要用于西欧语言。它包含了 ISO 标准中的第一个 256 个字符。

  4. GB2312、GBK、GB18030：这些是中文字符编码标准，用于表示简体中文字符。GB2312 是早期的标准，GBK 是它的扩展，GB18030 则是更加完整和兼容性更好的标准。

在 HTML 中，可以通过在文档的 <meta> 元素中指定字符编码来告诉浏览器使用哪种编码来解释文档。例如：

<meta charset="UTF-8">

4. HTML标签

HTML标签由一对尖括号组成，成对顺序出现。每个 HTML 标签通常包含两个部分：起始标签（opening tag）和结束标签（closing tag）。起始标签用于指示元素的开始，结束标签用于指示元素的结束。标签之间可以包含文本内容、其他标签、属性等。浏览器会对不正确的标签进行修正。

标签可以分为语义标签和非语义标签：主要基于它们在页面上的语义含义和作用来区分。

  1. 语义标签（Semantic Elements）：

    • 语义标签是具有明确含义和语义的 HTML 元素，它们传达了元素在文档中的意义和结构，使得文档更易于理解和维护。
    • 使用语义标签有助于提高文档的可读性、可访问性和搜索引擎优化（SEO），因为它们能够为浏览器、屏幕阅读器和搜索引擎提供更多的信息。
    • 常见的语义标签包括 <header>、<nav>、<main>、<section>、<article>、<aside>、<footer>、<figure>、<figcaption> 等。

  2. 非语义标签（Non-semantic Elements）：

    • 非语义标签是没有明确语义含义的 HTML 元素，它们被用作样式或布局的目的，而不是传达内容的结构或含义。
    • 非语义标签通常用于创建视觉效果，但并不提供关于文档内容的任何额外信息。
    • 常见的非语义标签包括 <div>、<span>、<b>、<i>、<font> 等。

总的来说，语义标签更倾向于传达文档内容的意义和结构，而非语义标签更倾向于样式和布局的目的。在编写 HTML 代码时，应该尽可能地使用语义标签来提高文档的可读性和可访问性。

标签还可以分为以下几类：

  1. 块级元素（Block-level Elements）：这些元素在页面上以块的形式显示，即它们会从新行开始，占据其父元素的整个可用宽度。常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li> 等。一般用于页面布局

  2. 内联元素（行内元素）（Inline Elements）：这些元素在页面上以行内的形式显示，即它们只占据其内容所需的宽度，并且不会强制换行。常见的内联元素包括 <span>、<a>、<strong>、<em>、<img>、<input> 等。一般用于包裹文字

  3. 内联块元素（行内块元素）（Inline-block Elements）：这些元素结合了块级元素和内联元素的特点，它们在页面上以行内的形式显示，但可以设置宽度和高度，并且可以在同一行上显示多个元素。常见的内联块元素包括 <div>（通过设置 display: inline-block;）、<img>、<input> 等。

  4. 可替换元素（Replaced Elements）：这些元素的内容由外部资源（如图片、视频）决定，并且浏览器会根据资源的类型和属性来展示它们，而不是直接展示 HTML 中定义的内容。常见的可替换元素包括 <img>、<video>、<iframe> 等。

  5. 特殊元素：这些元素具有特殊的功能或语义，不同于普通的块级或内联元素。例如，<html>、<head>、<body>、<title> 等是文档结构的基本元素，<meta> 用于指定文档的元数据，<script> 用于嵌入脚本代码等。

5. HTML属性

  • id：为元素定义唯一标识符。
  • class：为元素定义一个或多个类名（用于 CSS 样式）。
  • src：定义图像、音频、视频等资源的 URL。
  • href：定义链接目标的 URL。
  • alt：定义图像的替代文本。

二、标签

1.meta标签

meta主要用于设置网页中的一些元数据，元数据并不是给用户看的

  • charset ：指定网页的字符集 。
  • name ：指定的数据的名称 。
    • keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开，用于搜索引擎优化（SEO）。
    • description：表示网站的描述信息，通常在搜索结果中显示。
    • viewport（视口）：用于控制页面在移动设备上的显示方式。
    • author（作者）：指定页面的作者。
    • robots（搜索引擎蜘蛛）：用于控制搜索引擎蜘蛛对页面的抓取和索引行为。
  • content ：指定的数据的内容，会作为搜索结果的超链接上的文字显示。
  • charset（字符编码）：指定文档的字符编码。例如， 告诉浏览器使用 UTF-8 编码来解释文档。
  • http-equiv：用于模拟 HTTP 头部中的响应字段。它可以用来指示浏览器在处理文档时执行某些特定的操作，类似于服务器发送的 HTTP 头部。常见的 http-equiv 属性值包括：
    • content-type：指定文档的 MIME 类型和字符集。例如，<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 会告诉浏览器文档的 MIME 类型为 HTML，并且使用 UTF-8 字符集。
    • refresh：指定页面自动刷新或重定向的时间间隔和目标。例如，<meta http-equiv="refresh" content="5;url=https://example.com"> 表示页面将在 5 秒后自动跳转到 https://example.com。
    • cache-control：指定页面的缓存控制行为。例如，<meta http-equiv="cache-control" content="no-cache"> 表示禁用缓存。
    • pragma：类似于 cache-control，用于控制页面的缓存行为。例如，<meta http-equiv="pragma" content="no-cache"> 也表示禁用缓存。

这些 http-equiv 属性可以影响浏览器对文档的处理方式，但它们不会直接影响文档的内容或样式。通常情况下，应该尽量避免使用 http-equiv 属性，而是通过适当配置服务器端的 HTTP 头部来实现相应的功能。

<meta charset="utf8" version='1'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城!"/>
<meta name="Keywords" content="网上购物,网上商城,京东"/>

2.语义标签

块元素：

  • <h1>-<h6>：标题，一般一个页面只有一个<h1>。
  • <hgroup>：标题组，多层次的标题。它将一组<h1> ～ <h6>元素分组。
  • <p>：段落，页面中的一个段落，由空行或第一行缩进将相邻的文本块分开。
  • <blockquote>：长引文，用缩进表示所包含文本。可以用cite属性表示引文来源，用<cite>元素表示来源的文本表述。

行内元素：

  • <q>：短引文，用一个简短的内联引号包围文本。大多数浏览器通过在文本周围加上引号来实现。该元素用于不需要段落分隔的短引文。
  • <br/>：换行。
  • <em>：强调/斜体，表示强调作用。<em>元素可以嵌套，每一级嵌套表示更高的强调程度<i>元素效果与它相同，不过<i>不属于语义标签。
  • <strong>：重要，表示重要性、严肃性或紧迫性。浏览器通常以粗体字呈现内容，<b>元素效果与它相同，不过<b>不属于语义标签。

h5新增语义标签：

  • <header>：页眉，介绍性的内容
  • <footer>：页脚，通常包含有关作者的信息、版权或文件链接
  • <nav>：导航链接，可以是当前文档内的，也可以是到其他文档的。常见例子是菜单、目录和索引
  • <main>：文档主内容，中心主题直接相关或扩展的内容
  • <article>：文章，自成一体，独立分发，可重复使用
  • <section>：文档中的节，没有一个更具体的语义元素来代表
  • <aside>：页面内容以外的内容，其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现
  • <mark>：重要或强调的文本，为参考或记事目的而被标记或突出的文本，表明其相关性和重要性
  • <summary>：<details>的标题，为<details>指定一个摘要、标题或图例。点击<summary>
    可以切换<details>。打开和关闭
  • <details>：用户能够查看或隐藏的额外细节，其中的信息只有被切换到 "打开 "状态时才可见。必须使用<summary>提供一个摘要或标签
  • <figure>：自包含内容独立的内容，用<figcaption>元素指定一个可选的标题。比如图示、图表、照片、代码清单等
  • <figcaption>：<figure>的标题，描述其父元素
  • <time>：定义日期/时间，可能包括datetime属性，将日期翻译成机器可读的格式，以便获得更好的搜索引擎结果或自定义功能。

3.布局标签

  • header表示网页的头部（页眉）
  • main表示网页的主体部分（一个页面中只会有一个main）
  • footer表示网页的底部（页脚）
  • nav表示网页中的导航
  • aside和主体相关的其他内容（侧边栏）
  • article表示一个独立的文章
  • section表示一个独立的区块，上边的标签都不能表示时使用section
  • div 块元素，没有任何的语义，就用来表示一个区块。目前来讲，div还是主要的布局元素
  • span 行内元素，没有任何的语义，一般用于在网页中选中文字

4.列表

html共有三种列表：

  • 有序列表：<ol> <li>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
  • 无序列表：<ul> <li>
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>
  • 自定义列表：<dl> <dt> <dd>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>A programming language commonly used in web development</dd>
</dl>
  • 嵌套列表：可以在列表里嵌套列表形成多级列表
  • CSS 来自定义有序和无序列表的项目符号和序号样式：
<style>
  ul.custom-list {
    list-style-type: square;
  }
  ol.custom-list {
    list-style-type: upper-roman;
  }
</style>
<ul class="custom-list">
  <li>Square item one</li>
  <li>Square item two</li>
</ul>
<ol class="custom-list">
  <li>Roman numeral item one</li>
  <li>Roman numeral item two</li>
</ol>

5.超链接

HTML 中的超链接（hyperlink）通过 <a> 标签创建，用于在网页之间导航，或在网页和其他资源（如文件、电子邮件地址等）之间创建链接。行内元素。

<a href="URL">Link Text</a>
  • href 属性：指定链接的目标 URL。
  • Link Text：用户可见的、可点击的文本。

可以链接到另一个网页，也可以链接到同一网页的不同部分（锚点）：

<!-- 目标位置 -->
<h2 id="section1">Section 1</h2>
<p>Content of section 1...</p>

<!-- 链接到目标位置 -->
<a href="#section1">Go to Section 1</a>

  • target：指定链接打开地方

    • _self：默认值，在本页面打开；
    • _blank：在新窗口或标签页中打开链接。

  • 链接到电子邮件地址：

    <a href="mailto:example@example.com">Send an Email</a>

  • 链接到电话：

    <a href="tel:+1234567890">Call Us</a>

  • 链接到本地其他文件页面：

    <a href="../test4/test4.html">超链接4</a>

  • 直接将超链接的href属性设置为#，这样点击超链接以后页面跳转转到当前页面的顶部的位置；

  • 可以使用javascript:;来作为href的属性值，此时点击这个超链接什么也不会发生。

  1. title：提供链接的额外信息，当用户将鼠标悬停在链接上时显示。

     <a href="https://www.example.com" title="Go to Example.com">Visit Example</a>

  2. download：指示浏览器下载链接指向的文件，而不是导航到它（如果资源是可下载的文件）。

    <a href="path/to/file.pdf" download>Download PDF</a>

  3. rel：指定当前文档与链接目标之间的关系。常见的值包括 noopener 和 noreferrer（与 target="_blank" 一起使用以提高安全性和隐私性）。

    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

使用 CSS 可以改变链接的外观。

  1. 改变链接颜色：

    <style>
  a {
    color: blue; /* 普通状态下的链接颜色 */
  }
  a:visited {
    color: purple; /* 用户已访问过的链接颜色 */
  }
  a:hover {
    color: red; /* 鼠标悬停时的链接颜色 */
  }
  a:active {
    color: green; /* 链接被点击时的颜色 */
  }
</style>

  2. 去掉链接下划线：

    <style>
  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
  }
</style>

6.图片

图片标签用于向当前页面中引入一个外部图片。<img>标签是一个自结束标签，这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

  • src：属性指定的是外部图片的路径（路径规则和超链接是一样的）
  • alt：图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片
  • title：提供额外的信息，当用户将鼠标悬停在图片上时显示
  • style：通过内联样式指定图片的样式
  • width：图片的宽度（单位是像素或者百分比）
  • height ：图片的高度（单位是像素或者百分比）
    • 宽度和高度中如果只修改了一个，则另一个会等比例缩放
    • 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
    • 但是在移动端，经常需要对图片进行缩放（大图缩小）

将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，不需要获取图片得发送请求，加载速度快。

使用 元素实现响应式图片
元素可以根据不同的屏幕尺寸或设备条件显示不同的图片。

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 400px)">
  <img src="image-small.jpg" alt="Responsive image">
</picture>

picture标签
在 HTML 中，<picture> 元素用于提供响应式图片，以便根据不同的设备和显示条件（如屏幕宽度、像素密度等）加载不同的图片资源。这可以优化性能和用户体验。下面是如何使用 <picture> 元素实现响应式图片的详细说明。

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 400px)">
  <img src="image-small.jpg" alt="Responsive image">
</picture>
  • <picture>：包含一个或多个 <source> 元素和一个 <img> 元素。
  • <source>：定义不同的图片资源及其媒体条件。
    • srcset 属性：指定图片的路径或 URL。
    • media 属性：指定媒体查询条件。
  • <img>：提供默认图片，当没有匹配的媒体查询时使用。
  1. 根据屏幕宽度加载不同的图片：
<picture>
  <source srcset="image-large.jpg" media="(min-width: 1200px)">
  <source srcset="image-medium.jpg" media="(min-width: 768px)">
  <source srcset="image-small.jpg" media="(min-width: 480px)">
  <img src="image-default.jpg" alt="Responsive image">
</picture>
  • 解释：
    • 当屏幕宽度大于或等于 1200px 时，加载 image-large.jpg。
    • 当屏幕宽度在 768px 到 1199px 之间时，加载 image-medium.jpg。
    • 当屏幕宽度在 480px 到 767px 之间时，加载 image-small.jpg。
    • 如果屏幕宽度小于 480px，加载 image-default.jpg。
  1. 根据设备像素密度加载不同的图片：
<picture>
  <source srcset="image-highres.jpg" media="(min-resolution: 2dppx)">
  <img src="image-default.jpg" alt="Responsive image">
</picture>
  • 解释：
    • 当设备像素密度大于或等于 2dppx（典型的 Retina 显示屏）时，加载 image-highres.jpg。
    • 否则，加载 image-default.jpg。
  1. 使用不同的图片格式（如 WebP 和 JPEG）：
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image-default.jpg" alt="Responsive image">
</picture>
  • 解释：
    • 如果浏览器支持 WebP 格式，则加载 image.webp。
    • 否则，加载 image.jpg。
    • 如果上述两者都不适用，则加载 image-default.jpg。

使用 srcset 和 sizes 属性进行更高级的响应式图片：

srcset 和 sizes 属性允许为不同的屏幕尺寸和分辨率提供多种图片选项。

<img src="image-default.jpg"
     srcset="image-small.jpg 480w,
             image-medium.jpg 768w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1200px) 768px,
            1200px"
     alt="Responsive image">

  • 解释：

    • srcset 列出了不同分辨率的图片及其宽度描述。
    • sizes 描述了图片在不同媒体查询下应该占据的宽度。

  • 详细说明：

    • 如果视口宽度小于或等于 600px，使用 480px 宽的图片。
    • 如果视口宽度在 600px 到 1200px 之间，使用 768px 宽的图片。
    • 如果视口宽度大于 1200px，使用 1200px 宽的图片。

7.字符实体

实体名称显示结果描述
&nbsp; 空格
&gt;>大于号
&lt;<小于号
&amp;&与
&copy;©版权
&reg;®注册商标
&trade;™商标
&times;×乘号
&divide;÷除号
&iquest;¿倒问号

8.内联格式

在 HTML 中，内联框架（<iframe>）用于在网页中嵌入另一个 HTML 文档。<iframe> 可以在一个网页中展示来自不同源的内容，如视频、地图、其他网页等。

<iframe src="URL"></iframe>

  1. src：指定嵌入内容的 URL。

    <iframe src="https://www.example.com"></iframe>

  2. width 和 height：指定 <iframe> 的宽度和高度（可以用像素或百分比）。

    <iframe src="https://www.example.com" width="600" height="400"></iframe>

  3. name：为 <iframe> 指定一个名称，以便其他链接或脚本可以引用它。

    <iframe src="https://www.example.com" name="myIframe"></iframe>

  4. sandbox：启用额外的安全和限制选项。

    <iframe src="https://www.example.com" sandbox="allow-scripts allow-same-origin"></iframe>

  5. allowfullscreen：允许全屏显示。

    <iframe src="https://www.example.com" allowfullscreen></iframe>

  6. frameborder：设置边框宽度（一般用 CSS）。

    <iframe src="https://www.example.com" frameborder="0"></iframe>

  7. loading：指定加载策略（lazy、eager）。

    <iframe src="https://www.example.com" loading="lazy"></iframe>

  8. referrerpolicy：控制 Referer HTTP 头的发送策略。

    <iframe src="https://www.example.com" referrerpolicy="no-referrer"></iframe>

使用iframe：

  1. 安全性：

    • 使用 sandbox 属性限制嵌入内容的行为，提高安全性。
    • 注意跨域问题，不同源的内容可能会有访问限制。
    • 嵌入的内容可能会影响你的网站性能和用户体验。

  2. 性能：

    • 使用 loading="lazy" 延迟加载 iframe，可以提高页面初始加载速度。
    • 避免嵌入过多的 iframe，因为每个 iframe 都会增加页面的加载时间。

  3. 兼容性：

    • 检查不同浏览器对 <iframe> 属性的支持情况，确保跨浏览器兼容性。

9.HTML 表格

HTML 表格用于以行和列的形式显示数据。表格由 <table> 元素定义，包含若干 <tr> (表格行)，每个表格行又包含若干 <td> (表格数据单元) 和 <th> (表格头单元)。

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td>数据3</td>
    <td>数据4</td>
  </tr>
</table>
  1. <table>：定义表格。
  2. <tr>：定义表格行。
  3. <td>：定义表格数据单元。
  4. <th>：定义表格头单元，通常用于表头。

表格部分

  • <thead>：定义表格头部，包含表头行。
  • <tbody>：定义表格主体，包含数据行。
  • <tfoot>：定义表格底部，包含总结行或脚注行。
<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
    <tr>
      <td>数据3</td>
      <td>数据4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结1</td>
      <td>总结2</td>
    </tr>
  </tfoot>
</table>

属性

  1. colspan：合并列。
  2. rowspan：合并行。
<table>
  <tr>
    <th colspan="2">合并两列的表头</th>
  </tr>
  <tr>
    <td rowspan="2">合并两行的数据</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td>数据3</td>
  </tr>
</table>

表格样式

通过 CSS 可以美化表格，如添加边框、背景颜色、对齐方式等。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

10.HTML 表单

HTML 表单（Form）用于收集用户输入的数据，并将其发送到服务器进行处理。表单由 <form> 元素定义，包含各种输入字段和提交按钮。

<form action="submit.php" method="post">
  <!-- 输入字段 -->
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  
  <!-- 提交按钮 -->
  <button type="submit">提交</button>
</form>

常见表单控件

  1. 文本输入框：<input type="text">

    <input type="text" name="username" placeholder="请输入用户名">

  2. 密码输入框：<input type="password">

    <input type="password" name="password" placeholder="请输入密码">

  3. 单选按钮：<input type="radio">

    <input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

  4. 复选框：<input type="checkbox">

    <input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐

  5. 下拉菜单：<select>

    <select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

  6. 文本域：<textarea>

    <textarea name="message" placeholder="请输入留言"></textarea>

  7. 文件上传：<input type="file">

    <input type="file" name="file">

表单属性

  1. action：定义表单提交的目标 URL。
  2. method：定义提交表单的 HTTP 方法（GET 或 POST）。
  3. target：定义提交后在哪个窗口显示结果。
  4. autocomplete：定义是否启用表单字段的自动完成。
  5. enctype：定义表单数据的编码类型（通常用于文件上传时，值为 multipart/form-data）。
  6. novalidate：定义是否禁用表单的客户端验证。

表单按钮

  • 提交按钮：<button type="submit">提交</button>
  • 重置按钮：<button type="reset">重置</button>

表单验证

  • required 属性：定义字段为必填项。
  • 表单验证 API：使用 JavaScript 进行自定义验证。

三、HTML5新特性

1. 本地存储

本地存储是指在用户的浏览器或设备上保存数据的能力。通过本地存储，网页应用程序可以在用户的设备上存储和检索数据，而无需将所有数据都传输到服务器上。这样做可以提高应用程序的性能，并允许在离线状态下访问应用程序。

HTML5引入了几种本地存储机制，包括Web Storage和IndexedDB。Web Storage提供了一种简单的键值对存储方式，包括sessionStorage和localStorage两种类型，而IndexedDB则是一个更为强大、面向对象的客户端存储数据库，允许存储结构化数据并支持索引。

Web Storage：
Web Storage是HTML5提供的一种在客户端（即用户的浏览器）上存储数据的机制，用于将键值对数据保存在用户设备上。

  1. sessionStorage:
    • sessionStorage对象允许你存储特定于一个会话的数据。会话指的是用户在关闭标签页或浏览器窗口之前打开的所有页面。当用户关闭标签页或浏览器窗口时，存储的数据将被清除。
    • 通过JavaScript的sessionStorage对象，您可以将字符串键值对存储在特定于当前会话的存储区域中，并在同一页面或同一窗口中的其他页面中访问这些数据。
sessionStorage.setItem(key, value) //存储数据
sessionStorage.getItem(key) //获取数据
sessionStorage.removeItem(key) //删除数据
sessionStorage.clear() //删除所有数据
  1. localStorage:
    • localStorage对象允许你存储特定于某个域名的数据。这意味着存储在localStorage中的数据将一直存在，直到被显式删除。它不受会话结束、标签页关闭或浏览器重启的影响。
    • 与sessionStorage类似，您可以使用JavaScript的localStorage对象将数据存储为字符串键值对，并且该数据将一直保留在用户的设备上，直到被手动删除，关闭页面也会存在。可以多窗口多页面共享。
localStorage.setItem(key, value) //存储数据
localStorage.getItem(key) //获取数据
localStorage.removeItem(key) //删除数据
localStorage.clear() //删除所有数据

Web Storage的优点包括：

  • 简单易用：采用简单的键值对存储方式，易于使用。
  • 支持大容量：相比传统的Cookie，Web Storage的存储容量更大，可以存储更多的数据。
  • 安全性：存储在Web Storage中的数据不会随着每个HTTP请求发送到服务器，有助于保护用户隐私。

本地存储特性

  • 数据存储在用户浏览器中
  • 设置、读取方便、甚至页面刷新不丢失数据
  • 容量较大，sessionStorage约5M、localStorage约20M
  • 只能存储字符串，可以将对象JSON.stringify() 编码后存储

IndexedDB：
IndexedDB是一个浏览器内置的用于存储大量结构化数据的低级API。它提供了一种在客户端（即浏览器）中存储和检索可通过键访问的对象的方法。IndexedDB允许开发者存储和检索大量数据，并且支持复杂的查询操作，适合用于构建复杂的Web应用程序或离线应用程序。

  • 对象存储：IndexedDB使用对象存储来组织数据。每个数据库可以包含多个对象存储空间，每个对象存储空间可以存储不同类型的对象。
  • 事务：IndexedDB使用事务来确保数据的完整性和一致性。对于读取和写入数据的操作都需要在事务内执行。
  • 异步操作：IndexedDB的API是异步的，这意味着大部分操作都是通过回调函数或Promise进行处理的。
  • 索引：IndexedDB允许为存储的对象指定一个或多个索引，这样就可以通过这些索引来高效地检索数据。
  • IndexedDB适合存储大量结构化数据，比如离线应用程序的数据、浏览器缓存数据、本地日志等。它也常用于在Web应用程序中实现数据的本地存储和离线访问功能。
  • IndexedDB通常与Web Worker一起使用，因为IndexedDB的操作可能会阻塞主线程，为了避免对用户界面的影响，通常会将IndexedDB的操作放在独立的后台线程中执行。
<body>
    <h1>学生信息管理</h1>
    <div>
        <label for="name">姓名：</label>
        <input type="text" id="name">
        <label for="age">年龄：</label>
        <input type="number" id="age">
        <button onclick="addStudent()">添加学生</button>
    </div>
    <div id="studentList">
        <h2>学生列表</h2>
        <ul id="list"></ul>
    </div>

    <script>
        var db;
        var request = window.indexedDB.open("student_db", 1);

        request.onerror = function(event) {
            console.error("数据库打开出错");
        };

        request.onsuccess = function(event) {
            db = event.target.result;
            displayStudents();
        };

        request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("students", { keyPath: "id", autoIncrement:true });
            objectStore.createIndex("name", "name", { unique: false });
            objectStore.createIndex("age", "age", { unique: false });
        };

        function addStudent() {
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;

            var transaction = db.transaction(["students"], "readwrite");
            var objectStore = transaction.objectStore("students");
            var request = objectStore.add({ name: name, age: age });

            request.onsuccess = function(event) {
                displayStudents();
            };

            request.onerror = function(event) {
                console.error("添加学生失败");
            };
        }

        function displayStudents() {
            var transaction = db.transaction(["students"], "readonly");
            var objectStore = transaction.objectStore("students");

            var list = document.getElementById("list");
            list.innerHTML = "";

            objectStore.openCursor().onsuccess = function(event) {
                var cursor = event.target.result;
                if (cursor) {
                    var li = document.createElement("li");
                    li.textContent = cursor.value.name + " - " + cursor.value.age + "岁";
                    list.appendChild(li);
                    cursor.continue();
                }
            };
        }
    </script>
</body>

2. Cookie

Cookie 是存储在用户计算机上的小型文本文件，由 Web 服务器发送并由 Web 浏览器保存。Cookie 用于在不同页面之间传递状态信息，通常用于跟踪会话、存储用户偏好设置和身份验证等。

每个 Cookie 包含以下几部分信息：

  • 名称：Cookie 的名称。
  • 值：Cookie 的值。
  • 域：Cookie 所属的域。
  • 路径：Cookie 的路径。
  • 过期时间：Cookie 的有效期。
  • 安全标志：如果设置为 Secure，则 Cookie 仅通过 HTTPS 发送。
  • HttpOnly 标志：如果设置为 HttpOnly，则 Cookie 不能通过 JavaScript 访问。

设置 Cookie：

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
  • username=JohnDoe：设置 Cookie 名称为 username，值为 JohnDoe。
  • expires：设置 Cookie 的过期时间。如果未设置，Cookie 在会话结束时（关闭浏览器）失效。
  • path：设置 Cookie 的路径。默认情况下，Cookie 仅在设置它的路径及其子路径中可用。

读取 Cookie：

function getCookie(name) {
  let cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    if (cookie.indexOf(name + "=") == 0) {
      return cookie.substring(name.length + 1, cookie.length);
    }
  }
  return "";
}

// 使用示例
let username = getCookie("username");
if (username != "") {
  alert("Welcome again " + username);
} else {
  alert("Welcome new user!");
}

删除 Cookie：

删除 Cookie 的方法是将它的过期时间设置为一个过去的时间：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Cookie 的属性：

  1. expires：指定 Cookie 的到期时间。如果未设置，Cookie 在会话结束时失效。
  2. max-age：指定 Cookie 的有效期（以秒为单位）。与 expires 类似，但更精确。
  3. path：指定 Cookie 的路径，默认是当前路径及其子路径。
  4. domain：指定 Cookie 的域名，默认是当前域名。
  5. secure：指定 Cookie 仅通过 HTTPS 发送。
  6. HttpOnly：指定 Cookie 不能通过 JavaScript 访问。

在这里插入图片描述

  • Cookie 适用于需要与服务器交互的状态信息存储（如用户登录状态），以及需要跨页面和子域共享的小型数据。
  • Local Storage 适用于需要长期存储较大数据的情况，不需要与服务器频繁交互（如用户设置、主题选择）。
  • Session Storage 适用于在当前会话中需要临时存储数据的情况（如临时表单数据、页面状态）。

3. 语义化标签

4.多媒体元素

在 HTML 中，可以使用 <audio> 元素来嵌入音频文件。

<audio src="audio-file.mp3" controls></audio>

  1. src：指定音频文件的路径或 URL。

    <audio src="audio-file.mp3"></audio>

  2. controls：显示音频控件。

    <audio src="audio-file.mp3" controls></audio>

  3. autoplay：音频加载后自动播放。

    <audio src="audio-file.mp3" autoplay></audio>

  4. loop：音频播放结束后重新播放。

    <audio src="audio-file.mp3" loop></audio>

  5. muted：音频默认静音。

    <audio src="audio-file.mp3" muted></audio>

  6. preload：指定音频文件的预加载行为（auto, metadata, none）。

    <audio src="audio-file.mp3" preload="auto"></audio>

可以使用 <source> 元素为不同格式的音频文件提供多个源，以提高浏览器兼容性。

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<track> 元素用于指定 <audio> 或 <video> 元素的文本轨道（如字幕、字幕、描述等）。它允许您为您的媒体内容提供多语言或多版本的文本。

可以使用 JavaScript 来控制音频播放，并处理各种事件。

  • play(): 播放音频。
  • pause(): 暂停音频。
  • load(): 重新加载音频。

常用事件

  • play: 当音频开始播放时触发。
  • pause: 当音频暂停时触发。
  • ended: 当音频播放结束时触发。
  • timeupdate: 当音频播放位置改变时触发。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Audio Example</title>
</head>
<body>
  <audio id="myAudio" controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    <source src="audio-file.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>

  <button onclick="playAudio()">Play</button>
  <button onclick="pauseAudio()">Pause</button>
  <button onclick="reloadAudio()">Reload</button>

  <script>
    const audio = document.getElementById('myAudio');

    function playAudio() {
      audio.play();
    }

    function pauseAudio() {
      audio.pause();
    }

    function reloadAudio() {
      audio.load();
    }

    audio.addEventListener('play', () => {
      console.log('Audio is playing');
    });

    audio.addEventListener('pause', () => {
      console.log('Audio is paused');
    });

    audio.addEventListener('ended', () => {
      console.log('Audio has ended');
    });

    audio.addEventListener('timeupdate', () => {
      console.log('Current time: ' + audio.currentTime);
    });
  </script>
</body>
</html>

5.表单增强

表单增强是指在网页开发中为表单元素添加一些额外的功能和属性，以提高用户体验和数据的完整性。

  1. 新增表单类型：
    HTML5引入了一些新的表单类型，这些新的表单类型可以帮助浏览器更好地验证用户输入的数据，并在移动设备上提供更好的输入体验。例如，使用<input type="email">可以告诉浏览器这是一个邮箱地址输入框，从而在提交表单前进行邮箱格式的验证。

    • email：用于接受电子邮件地址的输入。
    • url：用于接受URL地址的输入。
    • tel：用于接受电话号码的输入。
    • number：用于接受数值的输入。
    • date、month、week、time、datetime-local：用于接受日期和时间相关的输入，分别表示日期、月份、周、时间、本地日期时间。
    • range：用于接受一定范围内数字的输入。
    • color：用于接受颜色值的输入。

  2. 验证属性：
    HTML5引入了一些内置的验证属性，可以在不需要JavaScript的情况下进行基本的数据验证。例如，使用<input type="text" required>将会强制要求用户在提交表单前填写该字段，否则将会收到相应的提示信息。

    • required：指定字段是否为必填项，如果添加了这个属性，则用户在提交表单时必须填写该字段。
    • pattern：使用正则表达式定义输入的模式，如果输入不符合模式要求，则会触发验证失败。
    • min 和 max：用于限制数值输入的最小值和最大值。
    • minlength 和 maxlength：用于限制输入的最小长度和最大长度。
    • type：对于文本输入框，可以使用不同的type属性来指定输入的类型，如email、url、tel等，浏览器会进行相应的格式验证。
    • step：对于数字输入框，可以指定数字的间隔步长。
    • title：为字段添加一个标题，用于说明输入的要求，通常当鼠标悬停在输入字段上时会显示。
    • autocomplete：指示浏览器是否应该自动完成输入字段。可以是on（允许自动完成）或者off（禁止自动完成）。
    • autofocus：指定页面加载后该字段是否自动获得焦点。

  3. 自定义验证规则：
    除了内置的验证属性外，还可以使用JavaScript自定义验证规则。通过JavaScript编写自定义的验证逻辑，可以实现更复杂的验证需求，比如检查密码强度、确认密码是否一致等。这样可以在客户端即时反馈错误信息给用户，提高用户体验。

  4. 实时反馈：
    表单增强还包括实时反馈用户输入。通过JavaScript监听用户输入事件，可以实时对用户的输入进行验证和处理，及时提示用户输入是否符合要求。这种实时反馈可以避免用户在提交表单后才发现输入错误，提高用户对数据输入的可控性。

6.Canvas

<canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。
Canvas是HTML5新增的一个用于在网页上绘制图形和动画的元素。使用Canvas，开发者可以通过JavaScript动态地在网页上生成图形、图表、动画等视觉内容。<canvas> 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。

在HTML中，我们可以通过<canvas>标签来创建一个Canvas元素，例如：

<canvas id="myCanvas" width="400" height="200"></canvas>

这个<canvas>标签定义了一个固定大小的画布，可以通过CSS样式或者直接设置width和height属性来调整其显示大小。

通过JavaScript的Canvas API，可以在Canvas上绘制各种图形，包括线条、矩形、圆形、路径等。常用的绘图方法包括strokeRect()（绘制矩形轮廓）、fillRect()（填充矩形）、arc()（绘制圆弧）、lineTo()（绘制直线路径）等。

Canvas也支持在画布上绘制文本内容，可以使用fillText()和strokeText()等方法来绘制文本，并指定字体、颜色等属性。

开发者可以直接访问和修改Canvas上每个像素的颜色值，以实现一些复杂的图形处理效果。

Canvas可以用于创建动画效果，通过在每一帧更新画布内容，并使用定时器控制刷新频率实现动画效果。

Canvas元素也支持事件处理，比如鼠标点击、移动等事件，开发者可以通过监听这些事件来实现交互式的Canvas应用。

    <script>
        // 获取Canvas元素
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 绘制矩形
        ctx.fillStyle = 'red'; // 设置填充颜色为红色
        ctx.fillRect(10, 10, 50, 50); // 绘制一个宽50、高50的矩形，起始点坐标为(10, 10)

        // 添加文本
        ctx.font = '16px Arial';
        ctx.fillStyle = 'blue'; // 设置文本颜色为蓝色
        ctx.fillText('Hello, Canvas!', 10, 80); // 在坐标(10, 80)处绘制文本

    </script>

7.SVG 矢量图形支持

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维矢量图形的XML标记语言，它可以通过文本编辑器编辑，也可以通过代码或矢量图形编辑软件生成。SVG图形可以在HTML中嵌入，并且支持被JavaScript、CSS和动画脚本操作。（不同于Canvas，它支持圆形、矩形以及简单和复杂曲线）

  1. 矢量图形：
    SVG使用矢量图形来描述图像，与基于像素的位图图形不同，矢量图形使用数学公式来定义形状，因此无论如何缩放，图像都不会失真。这使得SVG非常适合用于图标、图表和其他需要在不同尺寸和分辨率下保持清晰度的场景。

  2. 嵌入方式：
    在HTML中，可以使用<svg>标签将SVG图形嵌入到页面中，例如：

    <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

  3. 基本形状：
    SVG支持多种基本形状，如矩形、圆形、椭圆、线段、多边形等，每种形状都有相应的SVG标签来描述，开发者可以利用这些标签来创建各种复杂的图形。

  4. 路径：
    除了基本形状外，SVG还支持使用路径来描述更加复杂的图形，开发者可以使用<path>标签来定义路径，从而绘制出各种自定义的曲线和图案。

  5. 样式和动画：
    与HTML元素类似，SVG图形可以通过CSS样式表来定义样式，如颜色、边框、填充等属性。此外，SVG也支持通过CSS和JavaScript来添加动画效果，以实现图形的交互和视觉效果。

  6. 交互性：
    由于SVG图形是文档对象模型（DOM）的一部分，因此可以通过JavaScript来控制和修改SVG图形，比如改变形状、颜色、位置等属性，实现交互式功能。

8.拖放API

拖放（Drag and Drop）API 是一组用于实现网页元素拖拽和放置的功能的接口，它使得开发者能够轻松地为网页添加拖放交互功能。用户可以使用鼠标选择可拖动元素，将这些元素拖动到可放置元素，然后通过释放鼠标按钮来放置它们。在拖动操作期间，可拖动元素的半透明表示会跟随指针。
您可以自定义哪些元素可以拖动、可拖动元素产生的反馈类型以及可放置元素。

拖放操作通常指用户在页面上点击并按住鼠标左键不放，随后移动鼠标，最终释放鼠标左键的操作。这个过程中，被拖拽的元素会跟随鼠标的移动而移动，直到被放置到目标区域。

拖放API主要包含了一系列事件，这些事件允许开发者在拖放过程中监听并执行相应的操作。常见的事件包括dragstart（拖拽开始）、drag（拖拽中）、dragenter（进入目标区域）、dragover（在目标区域中移动）、dragleave（离开目标区域）、drop（释放鼠标进行放置）、dragend（拖动结束）等。

通过设置draggable属性为true，可以使得元素变为可拖拽的。例如：<div draggable="true">...</div>。

拖放API还提供了一系列的 JavaScript 方法，用于控制拖拽操作的行为，比如setData（设置拖拽数据）、getData（获取拖拽数据）、preventDefault（阻止默认操作）等。

文件拖放：

<div id="drop-area">将文件拖到此处</div>

<script>
    var dropArea = document.getElementById('drop-area');

    // 阻止浏览器默认行为
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults (e) {
        e.preventDefault();
        e.stopPropagation();
    }

    // 处理拖入效果
    dropArea.addEventListener('dragenter', () => {
        dropArea.style.background = '#f7f7f7';
    });

    // 处理拖出效果
    dropArea.addEventListener('dragleave', () => {
        dropArea.style.background = '#ffffff';
    });

    // 实现文件拖放
    dropArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        let dt = e.dataTransfer;
        let files = dt.files;

        handleFiles(files);
    }

    function handleFiles(files) {
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            console.log('文件名:', file.name, '文件大小:', file.size, '文件类型:', file.type);
        }
    }
</script>

9.地理定位

10.离线Web应用程序 cache manifest

Cache Manifest 是一种用于创建离线 Web 应用程序的技术，它允许开发者指定需要在客户端缓存的文件列表，在没有网络连接时，浏览器可以使用缓存中的这些文件来加载应用程序。

Cache Manifest 文件是一个简单的文本文件，通常以.appcache作为后缀名，它定义了需要在离线状态下缓存的文件列表，包括 HTML、CSS、JavaScript、图像等资源。浏览器会根据这个清单文件下载和存储相关资源，并在离线状态时使用这些资源来呈现应用程序。

开发者需要在应用程序的根目录下创建一个以.appcache为扩展名的文本文件，并在其中列出需要缓存的文件路径，例如：

CACHE MANIFEST
# 版本号
# Version 1.0.0

CACHE:
index.html
styles.css
script.js
images/logo.png

NETWORK:
*

FALLBACK:
/ /offline.html
  • 在 CACHE MANIFEST 文件中，CACHE 区块用于列出需要离线缓存的文件列表。这些文件会在首次访问应用程序时被下载并存储在本地缓存中，以备离线时使用。
  • NETWORK 区块允许开发者指定不需要缓存的文件、URL模式或域名。在该区块中添加星号*表示除了 CACHE 中列出的资源外，其他所有资源都需要联网获取。
  • FALLBACK 区块定义了一个替代方案，当用户请求的资源不可用时（如离线状态），浏览器将使用 FALLBACK 中指定的替代页面来代替请求的页面。
  • 当应用程序的 CACHE MANIFEST 文件内容发生变化时，浏览器会重新下载和缓存指定的文件。开发者可以通过修改版本号或者修改 CACHE MANIFEST 文件来触发应用程序的更新。

使用：<html manifest="manifest.appcache">

11. Web Workers

Web Workers 是一种在 Web 应用程序中运行后台脚本的机制，它允许开发者将耗时的任务、大量计算或需要与服务器进行大量数据交换的操作放在独立的线程中执行，从而不会阻塞主线程，提高了 Web 应用程序的性能和响应速度。

  • Web Workers 允许创建额外的工作线程，使得耗时操作可以在后台线程中执行，不影响主线程的执行。（让复杂耗时的后台执行
  • 每个 Web Worker 都有自己独立的全局上下文（Global Context），它们无法访问 DOM，也无法直接使用 window 和 document 对象，无法访问主线程的变量和函数。这样做的好处是，可以避免 Web Worker 对主线程的干扰，同时提高了 Web 应用程序的安全性。
  • 主线程和 Web Worker 之间可以通过消息进行通信。主线程可以向 Web Worker 发送消息，Web Worker 也可以向主线程发送消息，从而实现二者之间的数据交换和协作。

Web Workers 适合用于处理大量数据的计算、复杂的算法运算、大规模数据的处理和网络请求等耗时操作，以及需要长时间运行的任务。

目前存在两种类型的 Web Workers：Dedicated Workers（专用 Worker）和 Shared Workers（共享 Worker）。Dedicated Workers 只能被创建它们的脚本所调用（一个专用线程对应一个主线程），而 Shared Workers 则可以被多个脚本共享（一个共享线程对应多个主线程）。

  • 主线程通过 new Worker(scriptURL) 来创建一个 Worker 实例，其中scriptURL是指定 Worker 线程执行脚本的 URL。
  • 在 Worker 线程中，可以通过监听 onmessage 事件来接收来自主线程的消息。
  • 在 Worker 线程中，可以通过调用 postMessage(data) 方法向主线程发送消息，data 可以是任意序列化的数据。
  • 在主线程中，可以通过调用 worker.terminate() 方法来终止 Worker 线程。
  • 在 Worker 线程中，可以使用 importScripts() 方法加载其他 JavaScript 脚本，类似于在主线程中使用 <script> 标签。
  • 当 Worker 线程抛出未捕获的异常时，会触发 onerror 事件，并可在主线程中监听该事件。
  • navigator.hardwareConcurrency 属性：这个只读属性返回设备的逻辑处理器内核数量，可以帮助决定在 Worker 线程中执行并行计算的最佳线程数。

（不可用于Service Worker ，Service Worker是一种特殊类型的 Web Worker，它主要用于实现像缓存、消息推送、网络代理等与网络相关的功能，通常用于创建离线应用程序和向客户端推送通知。）

使用场景：

  • 计算密集型任务：例如图像处理、数值计算、复杂算法等。通过将这些任务放入 Web Worker 中进行处理，可以避免阻塞主线程，保持页面的响应性。
  • 大规模数据处理：当需要处理大量数据时，比如数据排序、搜索、过滤等操作，可以利用 Web Worker 在后台进行处理，从而提高页面的性能和响应速度。
  • 网络请求与数据缓存：Web Worker 可以用于执行网络请求，处理返回的数据，并将数据进行本地缓存，这样可以避免阻塞主线程对 UI 的渲染影响。
  • 实时通信和消息推送：Web Worker 可以用于接收服务器端的实时消息推送，然后将消息传递给主线程，实现实时通信功能。
  • 文件操作：对文件的读取、解析、处理等操作是典型的 Web Worker 使用场景，尤其是对大型文件的处理，可以避免阻塞主线程。
  • 加密和安全操作：Web Worker 可以用于执行加密和安全相关的操作，例如密码学运算、身份验证等，确保这些敏感操作不会暴露在主线程中。

12.Web Sockets

Web Sockets可以在客户端和服务器之间进行双向通信的技术。它允许在单个TCP连接上进行全双工通信，从而使得客户端和服务器能够实时、高效地交换数据。（长连接）

  • 全双工通信：与传统的HTTP请求不同，Web Sockets允许客户端和服务器在同一个连接上同时进行发送和接收操作，实现了真正的双向通信。
  • 持久连接：一旦建立了Web Sockets连接，它将保持打开状态，直到客户端或服务器明确关闭连接。这意味着可以在不断开连接的情况下持续进行数据交换，避免了HTTP的短连接模式带来的开销。
  • 低延迟：由于Web Sockets使用单个TCP连接，并且不需要重复建立连接，因此它能够实现低延迟的实时通信，非常适合于需要快速交换数据的场景，比如在线游戏、股票行情等。
  • 跨域支持：Web Sockets遵循同源策略，但通过特定的协议和头部，它也可以支持跨域通信。
  • 客户端通过JavaScript代码发起Web Sockets连接请求，然后服务器端也可以使用相应的技术建立对应的Web Sockets连接。一旦连接建立成功，客户端和服务器就可以通过发送消息的方式进行实时的数据交换。

适用于：实时聊天、实时数据更新、协作编辑。

// 服务器端代码（Node.js）

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    // 收到消息时，向所有连接的客户端广播该消息
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});


<!-- 客户端页面 -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket 聊天室</title>
</head>
<body>
  <div id="chat"></div>
  <input type="text" id="messageInput">
  <button onclick="sendMessage()">发送</button>

  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('已连接至WebSocket服务器');
    };

    ws.onmessage = function(event) {
      const chatDiv = document.getElementById('chat');
      chatDiv.innerHTML += '<div>' + event.data + '</div>';
    };

    function sendMessage() {
      const messageInput = document.getElementById('messageInput');
      ws.send(messageInput.value);
      messageInput.value = '';
    }
  </script>
</body>
</html>
咔叽布吉
关注
  • 25
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html基础知识学习笔记分享
04-09
HTML（HyperText Markup Language）是前端开发的基础，用于构建网页结构。HTML标签是其核心组成部分，它们告诉浏览器如何展示内容。下面将详细讲解HTML的一些基础知识。 1. **文档类型声明**： `<!DOCTYPE>` 用来...
前端学习笔记（不断更新中）
01-08
文章目录HTML基础CSS基础ES6 HTML基础 1.img标签中alt：图片加载失败时的提示文字 2.a标签中的target： _blank：在新窗口中打开被链接文档 _top：在窗口主体中打开被链接文档 _self：在被点击时的同一框架中打开被...
HTML基础
Mr_wh_2014的博客
03-26 246
一、HTML基本框架 <html> 　　<head> 　　　　<title>无标题文档</title> 　　</head> 　　<body> 　　　　<!--代码-->　　</body></html> 二、什么是 HTML？ HTML 是用来描述网页的一种语言。 ...
html 基础
Claroja
11-13 451
html元素(标签) html> head> 等标签 --> meta charset="utf-8"> title>html5title> link rel="stylesheet" type="text/css" href="mystyle.css"> style type="text/css">style> script>scri
html基础
菜鸟一个
08-02 247
什么是HTML： HTML（HyperText Markup Language）超文本标记语言。 什么是超文本： 指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 html历史： HTML基本结构： 不区分大小写 不区分单双引号 DOCTYPE/title/meta： 我的第一个网页： 先建立一个空的txt文档， 然后插入下面代码： &lt;html&...
前端基础学习笔记,pdf
最新发布
10-12
【前端基础学习笔记】 前端开发是构建网页或应用程序用户界面的关键部分，主要包括HTML、CSS和JavaScript这三大核心技术。这篇学习笔记涵盖了JavaScript的基础知识，以及与前端开发相关的其他重要概念。 ...
前端工程师学习笔记 超级详细
10-31
正则表达式学习笔记 微信小程序学习笔记 前端部署相关笔记 前端UI库使用记录笔记 前端JS工具库使用笔记 Webpack学习笔记 Vue笔记整合 UmiJS笔记 TypeScrip笔记 Scss笔记 React笔记 ReactHooks笔记 Promise学习笔记 ...
h5前端学习笔记
03-21
综合以上信息，这份“h5前端学习笔记”涵盖了HTML5的基础到高级特性，CSS样式设计，JavaScript编程，以及一些实际应用场景的案例，对于想要系统学习和提升前端技能的开发者来说，是非常宝贵的资源。
HTML 基础
wgchen
10-17 511
HTML 基础
前端学习笔记(B站黑马程序员)
11-17
前端学习笔记(B站黑马程序员) 我是根据黑马程序员的教程来学习前端开发的，并进行了详细的笔记记录。在学习过程中，我接触到了许多前后端的知识，其中包括了 HTML 的介绍，常用浏览器，以及 Web 标准等内容。 首先...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值