重拾前端基础知识：HTML

前言
- HTML编辑器
- 标签
- - 锚链接
- id和class
- 表单
- Iframe
- 字符实体
- HTML CSS
- HTML JavaScript
- HTML 统一资源定位器(Uniform Resource Locators)
- XHTML
- HTML5
- - 新的语义化元素
  - 视频和音频支持
  - Canvas绘图
  - 本地存储
  - 表单增强
  - Web Workers
  - 地理定位
  - Web存储
  - 伸缩矢量图形(Scalable Vector Graphics)
  - 拖放
  - Web WebSocket
  - Server-Sent 事件

前言

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

这是一个标准的HTML模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

解析如图
在这里插入图片描述

文件后缀为.html，HTML文档也叫做 web 页面。

HTML 标签是由尖括号包围的关键词，比如 <html>。
HTML 标签通常是成对出现的，比如 <b> 和 </b>（第一个标签是开始标签，第二个标签是结束标签）。

HTML编辑器

可以使用专业的 HTML 编辑器来编辑 HTML：

VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/

以VS Code为例，先去官网下载软件。

要新建HTML文件，可以按下“Ctrl + N”，然后，将文件保存为HTML文件。可以使用“Ctrl + S”，保存文件时，需要将文件命名为“filename.html”。

在这里插入图片描述

你也可以使用左上角的New File创建页面

在这里插入图片描述

Ctrl+Shift+P：俗称万能键，可以输入任何命令

在这里插入图片描述

Ctrl+P：根据名称查找文件。

在这里插入图片描述
然后下载插件：

Chinese (Simplified) (简体中文)：中文（简体）语言包为 VS Code 提供本地化界面。

在这里插入图片描述

open in browser：在浏览器打开。

在这里插入图片描述
右击或者ait+b使用浏览器浏览

在这里插入图片描述

你可以使用!创建html模板

在这里插入图片描述

如果没有反应，使用Ctrl+Shift+P命令，输入Change Language Mode，改为html，即可。

在这里插入图片描述

一切准备就绪，下面主要介绍常用和有用的知识。

属性	描述	备注
`rel`	指定了与当前文档之间的关系。	`stylesheet`：指定引入的资源是一个样式表文件。`icon`：指定引入的资源是一个图标文件。`prefetch`：指定需要预加载的资源。`canonical`：指定当前页面的主要版本，等等。
`href`	指定了引入资源的 URL。可以是相对路径或绝对路径。
`type`	指定了引入资源的 MIME 类型。对于样式表文件，通常使用 `text/css`。

下面是一些示例：

引入外部 CSS 样式表：

<link rel="stylesheet" href="styles.css" type="text/css">

引入网站图标：

<link rel="icon" href="favicon.ico" type="image/x-icon">

浏览器上方小图标，如图所示
在这里插入图片描述

预加载资源：

<link rel="prefetch" href="large-image.jpg" type="image/jpeg">

指定主要版本：

<link rel="canonical" href="https://www.example.com/page.html">

<style> 标签是 HTML 中用于定义内部样式表的标签。通过 <style> 标签，我们可以在 HTML 文档中直接编写 CSS 样式规则，而不需要引入外部的样式表文件。

html
<!DOCTYPE html>
<html>
<head>
    <title>内部样式表示例</title>
    <style>
        h1 {
            color: red;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

<meta> 标签提供了关于网页的元数据信息，如字符集、关键词、描述、作者和视口等。这些信息可帮助搜索引擎更好地了解网页内容，同时还可以优化网页在不同设备上的显示效果。

<!DOCTYPE html>
<html>
<head>
    <!-- 设置网页字符集为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 指定网页关键词 -->
    <meta name="keywords" content="HTML, meta">
    <!-- 指定网页描述信息 -->
    <meta name="description" content="A brief introduction to HTML meta tags.">
    <!-- 指定网页作者信息 -->
    <meta name="author" content="John Doe">
    <!-- 指定网页视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页标题 -->
    <title>HTML Meta Tags</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

HTML 背景

你可以使用bgcolor属性设置背景颜色。

<body bgcolor="#4285f4"></body>

如图所示
在这里插入图片描述
使用background属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="https://img1.baidu.com/it/u=1194889913,2752482023&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500">
</body>

如图所示

在这里插入图片描述
可以使用css样式background-size: cover，使背景图片按比例缩放，保持宽高比并覆盖整个背景区域。

HTML 标题

<h1>—<h6> 标签用于在 HTML 页面中定义标题。它是用于表示文章或页面主题的块级元素。

示例代码：

    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>

<h1>标签最大，<h6>标签最小，如图所示：

在这里插入图片描述

HTML 段落

<p> 标签用于在 HTML 页面中定义段落。它是用于包裹文本内容的块级元素，用于将文本分组为段落。

示例代码：

	<p>段落1</p>
	<p>段落2</p>

如图所示：

在这里插入图片描述

HTML 链接

<a> 标签用于创建超链接（链接到其他网页或同一页面的不同部分）。它可以在 HTML 页面中创建可点击的文本或图像，使用户能够导航到其他页面或位置。

属性	描述
`href`	指定链接的目标 URL。可以是其他网页的 URL，也可以是当前页面内的锚点。
`target`	指定链接在何处打开，常用的取值包括 `_blank`（在新窗口中打开）和 `_self`（在当前窗口中打开）。
`title`	提供关于链接的额外信息，当用户将鼠标悬停在链接上时会显示该信息。

示例代码：

    <a href="http://www.baidu.com" title="这是一个链接" target="_self">链接</a>

如图所示：

在这里插入图片描述

HTML 图像

<img> 标签用于在 HTML 页面中插入图像。它是一个自闭合标签，没有结束标签。

属性	描述
`src`	指定图像的 URL，即图像文件的路径。
`alt`	指定当图像无法显示时的替代文本。
`width`	指定图像的宽度（以像素为单位）。
`height`	指定图像的高度（以像素为单位）。

示例代码

    <img src="C:\Users\Shancw\Desktop\123456.jpg" alt="图片" width="200px" height="100px">
    <img src="C:\Users\Shancw\Desktop\1234526.jpg" alt="图片" width="200px" height="100px">

如图所示：

在这里插入图片描述

HTML 水平线

<hr> 标签用于在 HTML 页面中创建水平分隔线。它是一个自闭合标签，不需要闭合标签。

属性	描述
`color`	指定分隔线的颜色。
`size`	指定分隔线的粗细。
`width`	指定分隔线的宽度。可以使用像素值或百分比。

示例代码：

    <p>默认</p>
    <hr/>
    <p>这是一个段落</p>
    <hr color="red" size="3" width="50%"/>

如图所示：
在这里插入图片描述
可以使用style 属性来设置分隔线的样式。

HTML 换行

<br> 标签是 HTML 中的一个行级元素，用于在文本中插入换行符。它通常用于在段落中创建简单的换行效果，或者在文本中创建强制换行。

示例代码：

<p>这是一<br/>个段落</p>

如图所示：

在这里插入图片描述

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

    <!-- <p>默认</p>-->
    <hr color="red" size="3" width="50%">

HTML 文本格式化

你可以使用<b>标签或者<strong>加粗文字；使用<i>标签或<em>标签定义斜体文字；<sub>标签定义上标；<sup>标签定义下标。

示例代码：

    <b>加粗文字</b><br/><br/>
    <strong>加粗文字</strong><br/><br/>
    <i>斜体文字</i><br/><br/>
    <em>斜体文字</em><br/><br/>
    这是 <sub> 下标</sub> 和 <sup> 上标</sup>

如图所示：

在这里插入图片描述

除此之外：<small>标签定义小号字

示例代码：

    正常文字
    <small>小号文字</small><br/><br/>

如图所示：
在这里插入图片描述

你还可以定义下划线和删除线，分别使用<ins>标签和<del>标签

示例代码：

    <ins>下划线</ins>
    <del>删除线</del>

如图所示：

在这里插入图片描述

<q> 标签是 HTML 中的一个内联元素，用于标记短引用或引文。该标签表示被引文本是一个短语或句子的引用，通常以引号包围。

示例代码：

	<q>锄禾日当午，汗滴禾下土</q>

如图所示：

在这里插入图片描述

HTML 表格

HTML 表格是一种用于在网页上展示和组织数据的标记语言。通过使用 <table>、<tr>、<th> 和 <td> 等标签，可以创建出漂亮的表格结构。

    <table>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>北京</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>上海</td>
        </tr>
      </table>

在上面的示例中，<table> 标签表示整个表格，内部的 <tr> 标签表示表格的行，<th> 标签表示表格的表头单元格，<td> 标签表示表格的数据单元格。

如图所示
在这里插入图片描述

还可以使用一些属性来进一步控制表格的行为和样式，比如 colspan 和 rowspan 属性来合并单元格，以及 border 属性来设置表格的边框宽度。

    <table border="1">
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
        <tr>
          <td>张三</td>
          <td>25</td>
          <!-- 合并行 -->
          <td rowspan="2">北京</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
        </tr>
        <tr>
            <!-- 合并列 -->
            <td colspan="3">无</td>
          </tr>
      </table>

如图所示
在这里插入图片描述

HTML 列表

HTML 支持有序、无序和定义列表。

（1）有序列表：使用 <ol> 标签表示有序列表，其中的每一项使用 <li> 标签表示。示例代码如下：

    <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>

示例如图
在这里插入图片描述

（2）无序列表：使用 <ul> 标签表示无序列表，其中的每一项使用 <li> 标签表示。示例代码如下：

    <u>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>

示例如图
在这里插入图片描述

（3）定义列表：使用 <dl> 标签表示定义列表，其中的每一对术语和定义使用 <dt> 和 <dd> 标签表示。示例代码如下：

    <dl>
        <dt>术语1</dt>
        <dd>定义1</dd>
        <dt>术语2</dt>
        <dd>定义2</dd>
        <dt>术语3</dt>
        <dd>定义3</dd>
      </dl>

示例如图
在这里插入图片描述

HTML 区块元素

在 HTML 中，元素可以分为两类：块级元素和内联元素。

（1）块级元素：通常用于表示页面上的结构和主要内容，它们会独占一行空间，可以设置宽度、高度、边距和填充等样式属性。常见的块级元素包括 <div>、<p>、<h1> ~ <h6>、<ul>、<ol> 等。

例如，下面的代码将会生成一个块级元素：

    <div>块元素1</div>
    <div>块元素2</div>

如图所示

在这里插入图片描述

（2）内联元素：通常用于表示文本中的一些小部件或者标记，它们不会独占一行空间，并且不能设置宽度、高度和边距等样式属性。常见的内联元素包括 <span>、<a>、<em>、<strong>、<img>、<input> 等。

例如，下面的代码将会生成一个内联元素：

    <div>
        <span>内联元素1</span>
        <span>内联元素2</span>
    </div>

如图所示
在这里插入图片描述

HTML 计算机代码

<code> 标签是 HTML 中用于表示计算机代码的内联元素。它通常用于在文本中显示行内代码片段或程序代码。

示例代码如下：

<body>
    	var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
    <code>
        var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
    </code>
</body>

如图所示

在这里插入图片描述
肉眼可见的字体变化。

HTML 对象

（1）<object> 标签：用于向 HTML 文档中嵌入各种外部资源的通用元素。通过 <object> 标签，可以将多种类型的内容嵌入到页面中，例如图像、音频、视频、Flash 动画等。

<object data="example.pdf" type="application/pdf" width="600" height="400">
  <p>您的浏览器不支持查看 PDF 文件，请点击 <a href="example.pdf">这里</a> 下载 PDF 文件。</p>
</object>

（2）<embed> 标签是 HTML 中用于嵌入外部内容的标签，通常用于嵌入插件、媒体文件等。相比于 <object> 标签，它更加简单，而且在一些嵌入场景下使用更为方便。

<embed src="123456.jpg" width="500" height="300">

锚链接

锚链接（Anchor Link）是 HTML 中一种用于在同一页面内进行跳转的链接。通过使用锚链接，用户可以快速定位到页面中的指定部分，而无需滚动浏览器窗口。

设置 id 属性来作为锚点的名称，添加一个锚点。

<h2 id="section1">第一部分</h2>
<p>这是第一部分的内容。</p>

使用 <a> 标签，将 href 属性设置为锚点名称前面加上 # 符号，跳转到锚点位置。

<a href="#section1">跳转到第一部分</a>

如图所示

在这里插入图片描述

可以看到url中添加了锚点位置。

id和class

在 HTML 中，id 和 class 都是用于标识 HTML 元素的属性。它们可以被用于css和 JavaScript 中以便对元素进行选择和操作。

id 属性：用于唯一标识一个元素。每个 HTML 元素都可以拥有一个唯一的 id 属性，在 CSS 样式表中，可以使用 # 符号来选择具有特定 id 值的元素，例如：

<div id="header">这是头部</div>
<style>
#header {
  background-color: gray;
}
</style>

在上述例子中，我们给 <div> 元素添加了一个 id 属性值为 header，然后在样式表中使用 #header 来选择该元素并设置其背景颜色为灰色。

class 属性：用于标识一组元素。多个元素可以拥有相同的 class 属性值，这样它们就可以被同时选中并应用相同的样式。在 CSS 样式表中，可以使用 . 符号来选择具有特定 class 值的元素，例如：

<div class="box">这是一个盒子</div>
<div class="box">这也是一个盒子</div>
<style>
.box {
  border: 1px solid black;
  padding: 10px;
}
</style>

在上述例子中，我们给两个 <div> 元素都添加了一个 class 属性值为 box，然后在样式表中使用 .box 来选择这两个元素并设置它们的边框和内边距大小。

表单

HTML 表单是一种用于收集用户输入的标记语言，可以用来创建各种类型的表单，例如注册表单、登录表单、搜索表单等。在表单中，可以使用多种表单元素来收集用户输入，如文本框、单选框、复选框、下拉列表等。

<form> 标签：是 HTML 中用来创建表单的元素。它定义了一个 HTML 表单，用于收集用户输入的数据，并将其提交到服务器进行处理。

属性	描述
`action`	指定表单数据提交的目标 URL。可以是相对 URL 或绝对 URL。当用户提交表单时，浏览器会将表单数据发送到该 URL。
`method`	指定提交表单的 HTTP 方法。常用的值是 `"GET"` 和 `"POST"`。默认为 `"GET"`。使用 `"GET"` 方法时，表单数据将附加在 URL 的查询参数中；使用 `"POST"` 方法时，表单数据将作为请求的正文发送。
`target`	指定表单数据提交后响应的目标窗口或框架。常用的值有 `"_blank"`（在新窗口打开响应）、`"_self"`（在当前窗口打开响应）等。

示例代码如下：

	<form action="/submit" method="POST" target="_blank">
	  <!-- 表单内容 -->
	</form>

<label> 标签：是 HTML 中用于与表单元素关联的标签元素。它通常用于为表单元素提供可点击的文本描述或标识。

<label> 标签的常见用法是与表单元素的 id 属性配合使用，通过将 <input>、<select>、<textarea> 等表单元素的 id 属性与 <label> 的 for 属性相匹配，以便用户点击标签时能够触发关联的表单元素。

	<label for="username">用户名：</label>
	<input type="text" id="username" name="username">

在这里插入图片描述

<input> 标签：是 HTML 中最常用的表单元素之一，用于创建各种类型的表单控件，例如文本框、单选按钮、复选框、提交按钮等。

属性	描述
`type`	用于指定控件的类型，取值包括 text、password、radio、checkbox、submit、button 等。
`name`	用于指定控件的名称，通常用于在提交表单时将控件的值与后台处理程序进行关联。
`value`	用于指定控件的默认值（或者用户选择的值），不同类型的控件可能有不同的取值。
`id`	用于指定控件的唯一标识符，通常用于与 `<label>` 标签关联或者进行 JavaScript 操作。
`placeholder`	用于指定控件的占位符，提供给用户输入提示信息。
`required`	用于指定控件是否为必填项，如果用户没有填写此项，表单将无法提交。
`readonly`	用于指定控件是否为只读状态，如果设置为只读，则用户无法修改控件的值。

以下是一些控件的示例：

	<!-- 文本框 -->
	<label for="username">用户名：</label>
	<input type="text" id="username" name="username" placeholder="请输入用户名">
	<!-- 密码框 -->
	<label for="password">密码：</label>
	<input type="password" id="password" name="password" placeholder="请输入密码">
	
	<!-- 单选按钮 -->
	<label><input type="radio" name="sex" value="male">男性</label>
	<label><input type="radio" name="sex" value="female">女性</label>
	
	<!-- 复选框 -->
	<label><input type="checkbox" name="hobby" value="music">音乐</label>
	<label><input type="checkbox" name="hobby" value="movie">电影</label>
	<!-- 按钮 -->
	<input type="button" value="提交">
	<!-- 提交按钮 -->
	<input type="submit" value="提交">

展示如图

在这里插入图片描述

要设置单选框（radio）或复选框（checkbox）的默认选中状态，可以使用 checked 属性。

	<!-- 单选按钮 -->
	<label><input type="radio" name="sex" value="male">男性</label>
	<label><input type="radio" name="sex" value="female">女性</label>
	
	<!-- 复选框 -->
	<label><input type="checkbox" name="hobby" value="music">音乐</label>
	<label><input type="checkbox" name="hobby" value="movie">电影</label>

示例如图

在这里插入图片描述

你可以使用file属性进行文件上传

  <form>
    <label for="file">文件上传：</label>
    <input type="file" id="file" name="file" autofocus>
    
    <input type="submit" value="提交">
  </form>

如图所示
在这里插入图片描述

<button> 标签：用于在 HTML 中创建按钮。并且可以在用户点击时触发相关的 JavaScript 函数或提交表单数据。

属性	描述
`disabled`	禁用按钮，使其无法点击。
`type`	指定按钮的类型。常用的类型有 `"submit"`（提交按钮，默认行为是提交表单）和 `"button"`（普通按钮）、`"reset"`清空form表单内容。如果不指定类型，默认为 `"submit"`。
`name`、`value`	用于在表单提交时传递按钮的名称和值。

    <button disabled>点击我</button>
    <button type="submit">点击我</button>

示例如图
在这里插入图片描述

<textarea> 标签用于在 HTML 中创建文本域，允许用户输入多行文本。通常用于表单中收集较长的文本输入，例如用户评论、留言等。

<textarea> 标签还有一些其他的属性，可以用来设置文本域的行数、列数、默认值等，例如：

属性	描述
`rows`	指定文本域的行数（默认为 2）。
`cols`	指定文本域的列数（默认为 20）。
`name`	指定文本域的名称，用于在表单提交时传递数据。
`placeholder`	指定文本域的占位符文本，用于提示用户输入内容。
`readonly`	将文本域设置为只读模式，防止用户编辑。

    <form action="/submit" method="POST">
        <label>可编辑的文本框：<textarea  id="comment" name="comment" rows="5" placeholder="请输入评论"></textarea></label>
        <label>不可编辑的文本框：<textarea readonly></textarea></label>
    </form>

示例如图

在这里插入图片描述

<select> 标签：用于在 HTML 中创建下拉列表框，允许用户从预定义的选项中选择一个或多个选项。通常用于表单中收集单选或多选的数据，例如用户国家、城市、兴趣等。

<select> 标签还有一些其他的属性，可以用来设置下拉列表框的名称、大小、默认选项等，例如：

属性	描述
`name`	指定下拉列表框的名称，用于在表单提交时传递数据。
`size`	指定下拉列表框的可见选项数目（默认为 1）。
`multiple`	指定是否允许多选（默认为单选）。
`disabled`	禁用下拉列表框，使其无法选择。
`selected`	指定默认选项，可以将 `<option>` 标签的 `selected` 属性设置为 `"selected"`。

    <form action="/submit" method="POST">
        <label for="country">请选择您的国家：</label>
        <select id="country" name="country">
          <option value="china" selected>中国</option>
          <option value="us" disabled>美国</option>
          <option value="uk">英国</option>
          <option value="japan">日本</option>
        </select>
      </form>

示例如图
在这里插入图片描述
以下是一个简单的form表单代码：

    <form action="/submit" method="post">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name"><br><br>
      
        <label for="gender">性别：</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br><br>
      
        <label for="hobbies">兴趣爱好：</label>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">阅读</label>
        <input type="checkbox" id="traveling" name="hobbies" value="traveling">
        <label for="traveling">旅游</label><br><br>
      
        <label for="country">国家：</label>
        <select id="country" name="country">
          <option value="china">中国</option>
          <option value="us">美国</option>
          <option value="uk">英国</option>
          <option value="japan">日本</option>
        </select><br><br>
      
        <input type="submit" value="提交">
      </form>

示例如图

在这里插入图片描述

Iframe

<iframe> 标签主要用于在当前 HTML 页面中嵌入另一个 HTML 页面或者其他资源，例如视频、音频、PDF 文档等。通过使用 <iframe> 标签，可以将多个网页内容组合在一起，使得页面的布局更加灵活。

除了 src 属性，<iframe> 标签还可以使用其他属性来控制嵌入内容的显示方式，例如：

属性	描述
`width` 和 `height`	指定 `<iframe>` 的宽度和高度。
`frameborder`	指定是否显示边框（默认为 1）。
`scrolling`	指定是否允许滚动（默认为 auto）。
`name`	指定 `<iframe>` 的名称，可以在页面中使用 JavaScript 来访问该 `<iframe>`。

例如，在一个页面中创建一个带有边框和滚动条的 <iframe>：

<iframe src="https://www.baidu.com"
        width="500"
        height="300"
        frameborder="0"
        scrolling="yes"></iframe>

示例如图
在这里插入图片描述

字符实体

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

字符	编码	说明
	` `	空格
<	`<`	小于号
>	`>`	大于号
&	`&`	和号
"	`"`	引号

只介绍常用的字符，有兴趣的可以自行查询。

HTML CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的。CSS 可以通过以下方式添加到HTML中：

内联样式：在HTML元素中使用"style" 属性
内部样式表：在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用：使用外部 CSS 文件

所有的标签都可以使用内联样式的"style" 属性为其添加样式，具有最高的优先级，会覆盖外部和内部样式表的规则。

以下是一个使用内联样式的示例：

<p style="color: red; font-size: 18px;">这是一个带有内联样式的段落。</p>

如图所示
在这里插入图片描述

内联样式的语法与 CSS 规则相同，样式属性和值之间使用冒号分隔，多个样式之间使用分号分隔。

更多CSS用法，点击进入。

HTML JavaScript

在 HTML 中，<script> 标签用于嵌入 JavaScript 代码或引用外部 JavaScript 文件。

示例代码如下：

<script>
  alert("Hello, world!");
</script>

如图所示

在这里插入图片描述
当页面加载时会弹出一个包含 “Hello, world!” 的提示框。

需要注意的是，<script> 标签可以放置在 HTML 文件的任何位置，但通常建议将其放置在文档的 <head> 或 <body> 标签内。

更多JavaScript用法，点击进入。

HTML 统一资源定位器(Uniform Resource Locators)

Web浏览器通过URL从Web服务器请求页面。URL 是一个网页地址。URL可以由字母组成，如"baidu.com"，或互联网协议（IP）地址： 192.68.22.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

scheme://host.domain:port/path/filename

说明:

scheme：定义因特网服务的类型。最常见的类型是 http、https
host：定义域主机（http 的默认主机是 www）
domain：定义因特网域名，比如 runoob.com
port：定义主机上的端口号（http 的默认端口号是 80）
path：定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename：定义文档/资源的名称

XHTML

XHTML（可扩展超文本标记语言）是一种基于 XML 的标记语言，它的目标是取代 HTML，以更加严格和规范的方式描述 Web 内容。可以被解析器解析成 DOM 树，与 HTML 相比，具有更好的可读性、可靠性和可扩展性。

XHTML 的语法规则要求所有标签必须正确嵌套，并且必须有开始标签和结束标签。同时，XHTML 规定所有标签和属性名称必须小写，所有属性值必须用引号括起来，例如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>示例</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>
</html>

注意，我们为 <html> 元素添加了一个 xmlns 属性来指定 XHTML 的命名空间。

需要注意的是，XHTML 规定所有标签必须正确嵌套，不能有交叉的标签，并且必须有开始标签和结束标签。例如，以下代码是不合法的 XHTML：

<p><em>这是一个<em>重要</p>的内容。</em>

HTML5

HTML5 是最新的 HTML 标准，它引入了许多新特性和功能，为 Web 开发带来了许多改进。下面是 HTML5 的一些主要特点和功能：

新的语义化元素

HTML5 引入了一些新的语义化元素，如 <header>、<nav>、<section>、<article>、<footer> 等，用于更清晰地定义页面的结构和内容。

在这里插入图片描述

标签	描述
`<header>`	用于定义网页或区块的头部，通常包含标题、导航、搜索框等内容。
`<nav>`	用于定义导航链接的部分，通常包含网站的主要导航菜单。
`<section>`	用于定义文档中的一个区块或部分，比如文章中的章节、页面中的内容区块等。
`<article>`	用于定义独立的、完整的内容块，比如一篇博客文章、一则新闻、一篇论坛帖子等。
`<footer>`	用于定义网页或区块的底部，通常包含版权信息、联系方式、相关链接等内容。
`<aside>`	用于定义和页面主要内容相关但可以被视为独立于页面主要内容的部分，比如侧边栏、广告、相关文章列表等。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    /* 添加一些基本样式 */
    header, nav, section, article, footer, aside {
      border: 1px solid black;
      padding: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/services">服务</a></li>
        <li><a href="/contact">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <h2>文章标题</h2>
    <article>
      <h3>第一篇文章</h3>
      <p>这是第一篇文章的内容。</p>
    </article>
    <article>
      <h3>第二篇文章</h3>
      <p>这是第二篇文章的内容。</p>
    </article>
  </section>

  <aside>
    <h3>相关链接</h3>
    <ul>
      <li><a href="/related1">相关页面1</a></li>
      <li><a href="/related2">相关页面2</a></li>
      <li><a href="/related3">相关页面3</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2024 版权所有</p>
    <p>联系方式：info@example.com</p>
  </footer>
</body>
</html>

示例如图
在这里插入图片描述

视频和音频支持

HTML5 提供了 <video> 和 <audio> 元素，用于在网页中嵌入视频和音频内容，而无需依赖第三方插件（如 Flash）。

<video> 标签：用于在网页中嵌入视频。

	<video src="video.mp4"></video>

src指定视频文件的URL路径，默认情况下不可操作。
在这里插入图片描述

controls显示视频播放器的控制条供用户操作。

  <video src="movie.mp4" controls></video>

在这里插入图片描述
autoplay设置视频自动播放（不可操作），muted设置视频静音播放，两次一起使用（据说是浏览器厂商防止突然吓到用户）。

  <video src="movie.mp4" autoplay muted></video>

在这里插入图片描述
loop设置视频循环播放，需要搭配controls一起使用。

  <video src="movie.mp4" loop controls></video>

poster设置视频封面图片。

  <video src="movie.mp4" poster="123456.jpg" controls></video>

在这里插入图片描述

width 和 height：设置视频的宽度和高度。

  <video src="movie.mp4" width="500" height="300" poster="123456.jpg" controls></video>

<source>标签，为 <video> 标签提供多个视频源文件，增加了视频在不同浏览器和设备上的兼容性，直到找到支持的格式为止。每个 <source> 标签需要指定 src 属性和 type 属性（指定视频文件的 MIME 类型）。

  <video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持视频标签。
  </video>

如果所有格式都不支持，将会显示后备内容（示例中的文本信息"您的浏览器不支持视频标签"）。

<track>标签：用于添加字幕或描述性文本轨道。

下面是常用的属性和用法：

属性	描述	备注
`src`	指定字幕文件的URL路径。
`kind`	指定轨道的类型	常见的值有：`"subtitles"`：字幕轨道。`"captions"`：标题轨道（类似字幕，但用于提供视频中的环境音效描述等）。`"descriptions"`：描述性文本轨道（用于提供对视频内容的描述）。`"chapters"`：章节标记（标记视频中的章节或较大的片段）。`"metadata"`：元数据轨道（提供与媒体相关的其他信息）。
`srclang`	指定字幕或描述性文本的语言代码。
`label`	指定轨道的标签，用于显示在用户界面上。
`default`	指定默认加载的轨道。

示例代码如下：

  <video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles.vtt"  kind="captions" label="English" srclang="en" default>
  </video>

vtt文件

WEBVTT

00:00:00.000 --> 00:00:10.000
1231231231

00:00:10.000 --> 00:00:15.000
123123123123

00:00:15.000 --> 00:00:20.000
123123123123

00:00:20.000 --> 00:00:25.000
12312312312

示例如图（需要把 html 文件运行在服务器（server）上才能正常运行）：
在这里插入图片描述

<audio>标签：提供了一种简单的方式来嵌入音频内容到网页中。使用 <audio> 标签，你可以将音频媒体文件（如 .mp3、.wav、.ogg 等），或者通过网络实时播放的音频流，嵌入到网页中。

  <audio controls>
    <source src="movie.mp4" type="audio/mp4">
  </audio>

在这里插入图片描述

除此之外可以使用loop属性进行自动播放和循环播放，其用法与<video>标签一样。

preload 属性用于控制浏览器在页面加载时是否预加载音频文件。它可以设置为以下三个值之一：

标签	描述
`none`	不预加载音频文件。当页面加载时，不会立即下载音频文件，只有在用户点击播放按钮或调用 play() 方法时才开始下载。
`metadata`	仅预加载音频文件的元数据。当页面加载时，只会下载音频文件的元数据（如持续时间、音频格式等），不会下载实际的音频内容。当用户点击播放按钮时，才会开始下载音频内容并进行播放。
`auto`	自动预加载音频文件。当页面加载时，会立即下载音频文件，无论用户是否点击播放按钮。这样可以确保音频能够立即播放，但可能会影响页面加载速度。

示例如下：

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

Canvas绘图

HTML5 的 <canvas> 元素允许通过 JavaScript 脚本绘制图形、动画以及进行图像处理，它为开发者提供了强大的图形渲染能力，比如：在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

我们使用 style 属性来添加边框，默认情况下标签的样子，示例代码如下：

<canvas id="myCanvas" style="border:1px solid #000000;">

如图所示
在这里插入图片描述

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script>
  //获取元素id
  var c=document.getElementById("myCanvas");
  // 创建 context 对象
  var ctx=c.getContext("2d");
  //fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
  ctx.fillStyle="#FF0000";
  //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
  ctx.fillRect(0,0,150,75);
</script>

在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。如图所示

在这里插入图片描述

canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)

Canvas - 路径

我们可以使用Canvas 绘制直线和圆

<script>
  // 获取元素id
  var c=document.getElementById("myCanvas");
  // 创建 context 对象
  var ctx=c.getContext("2d");
  // 定义线条开始坐标
  ctx.moveTo(0,0);
  // 定义线条结束坐标
  ctx.lineTo(200,100);
  ctx.stroke();
</script>

在这里插入图片描述

在canvas中绘制圆形, 我们将使用arc(x,y,r,start,stop)方法

<script>
  // 获取元素id
  var c=document.getElementById("myCanvas");
  // 创建 context 对象
  var ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
</script>

在这里插入图片描述

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

fillText(text,x,y) - 在 canvas 上绘制实心的文本

<script>
  // 获取元素id
  var c=document.getElementById("myCanvas");
  // 创建 context 对象
  var ctx=c.getContext("2d");
  //定义字体
  ctx.font="30px Arial";
  ctx.fillText("Hello World",10,50);
</script>

在这里插入图片描述

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

<script>
  // 获取元素id
  var c=document.getElementById("myCanvas");
  // 创建 context 对象
  var ctx=c.getContext("2d");
  ctx.font="30px Arial";
  ctx.strokeText("Hello World",10,50);
</script>

在这里插入图片描述

Canvas - 渐变

有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变

<script>
  // 获取元素id
  var c=document.getElementById("myCanvas");
  // 创建 context 对象
  var ctx=c.getContext("2d");
  // 创建渐变
  var grd=ctx.createLinearGradient(0,0,200,0);
  //指定颜色停止，参数使用坐标来描述，可以是0至1.
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");
 
  // 填充渐变
  ctx.fillStyle=grd;
  ctx.fillRect(10,10,150,80);
</script>

在这里插入图片描述

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

<script>
  // 获取元素id
  var c=document.getElementById("myCanvas");
  // 创建 context 对象
  var ctx=c.getContext("2d");
  // 创建渐变
  var grd=ctx.createRadialGradient(75,50,5,90,60,100);
  //指定颜色停止，参数使用坐标来描述，可以是0至1.
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");
 
  // 填充渐变
  ctx.fillStyle=grd;
  ctx.fillRect(10,10,150,80);
</script>

在这里插入图片描述

本地存储

HTML5 引入了本地存储机制，包括 localStorage 和 sessionStorage，使得网页可以在用户的浏览器中存储数据，以便离线访问或临时保存数据。

localStorage

Web 浏览器中的一个 JavaScript 对象，用于在用户的浏览器中存储数据。它允许开发者在用户浏览网页时存储键值对，并且在之后的会话中检索这些数据。存储在 localStorage 中的数据可以长期保留，直到被显式删除或者浏览器缓存被清除。

<script>
// 存储
window.localStorage.setItem("lastname", "Gates");
// 获取值
var getname = localStorage.getItem("lastname");
</script>

以上实例也可以这么写：

<script>
// 存储
localStorage.lastname="Gates";
// 获取值
var getname = localStorage.lastname;
</script>

你可以再浏览器中查看到存储的信息
在这里插入图片描述
你可以使用removeItem('key')方法，移除指定键及其对应的值（浏览器刷新后不会删除数据）。

<script>
localStorage.removeItem("lastname");
</script>

使用localStorage.clear()方法清空所有存储的数据。

模拟用户点击次数，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <button onclick="clickCounter()" type="button">点我！</button>
  <div id="result"></div>
<script>
  function clickCounter(){
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " +
    localStorage.clickcount + " 次。";
}
</script>
</body>
</html>

sessionStorage

与 localStorage 类似，也用于在用户的浏览器中存储数据。但是，与 localStorage 不同的是，sessionStorage 中存储的数据只在当前会话（即当前网页打开期间）有效，当用户关闭网页后，sessionStorage 中存储的数据也会被自动清除。

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <button onclick="clickCounter()" type="button">点我！</button>
  <div id="result"></div>
<script>
  function clickCounter(){
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
    } else {
      sessionStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " +
    sessionStorage.clickcount + " 次。";
}
</script>
</body>
</html>

表单增强

HTML5 为表单元素带来了一些新特性，如新的输入类型（如日期、时间、邮箱等）、表单验证、自动完成等，使得表单交互更加方便和灵活。

日期选择器

使用“date”类型的输入框，可以在移动设备上显示一个日期选择器。

  <label for="birthday">生日：</label>
  <input type="date" id="birthday" name="birthday">

如图所示
在这里插入图片描述

除此之外可以使用datetime-local属性选择一个日期和时间

  <label for="birthday">生日：</label>
  <input type="datetime-local" id="birthday" name="birthday">

如图所示
在这里插入图片描述
你也可以使用month属性，选择一个月份。

  <label for="birthday">生日：</label>
  <input type="month" id="birthday" name="birthday">

如图所示
在这里插入图片描述

邮箱验证

使用“email”类型的输入框，可以验证用户输入的是否为有效的电子邮件地址。

  <form>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    
    <input type="submit" value="提交">
  </form>

如图所示
在这里插入图片描述

数字输入

使用“number”类型的输入框，可以限制用户只能输入数字。

<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">

如图所示
在这里插入图片描述

范围输入

使用“range”类型的输入框，可以创建一个滑动条来选择一个数值范围（min最小值、max 最大值和 step间隔）。

  <label for="rating">评分：</label>
  <input type="range" id="rating" name="rating" min="0" max="10" step="0.5">

如图所示
在这里插入图片描述

颜色选择器

使用“color”类型的输入框，可以在移动设备上显示一个颜色选择器。

  <label for="color">颜色：</label>
  <input type="color" id="color" name="color">

如图所示
在这里插入图片描述

下拉列表

使用“datalist”元素，可以创建一个下拉列表，其中包含用户可以从中选择的预定义选项。

<body>
  <label for="country">国家：</label>
  <input list="countries" id="country" name="country">
  <datalist id="countries">
    <option value="中国">
    <option value="美国">
    <option value="英国">
    <option value="法国">
    <option value="德国">
  </datalist>
</body>

如图所示
在这里插入图片描述

搜索输入

使用“search”类型的输入框，可以在移动设备上显示一个搜索图标，以便用户轻松查找信息。

  <label for="search">搜索：</label>
  <input type="search" id="search" name="search">

如图所示
在这里插入图片描述

自动完成功能

使用“autocomplete”属性可以在输入框中自动填充用户已经输入过的内容，"on"（开），“off”（关）。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autocomplete="on">
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" autocomplete="current-password">
    
    <input type="submit" value="登录">
  </form>

如图所示
在这里插入图片描述

表单不校验

novalidate 是 HTML5 表单中的一个属性，用于禁用浏览器的表单验证。当你在 <form> 标签上添加 novalidate 属性时，浏览器将不会执行任何默认的表单验证。

  <form novalidate>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交">
  </form>

获得焦点

autofocus 属性规定在页面加载时，域自动地获得焦点。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交">
  </form>

如图所示
在这里插入图片描述

form 属性

管理输入框所属的一个或多个表单（如需引用一个以上的表单，请使用空格分隔的列表）。

<body>
  <form id="form1">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交">
  </form>
  <label for="username">验证码：</label>
  <input type="text" name="code" form="form1">
</body>

如图所示
在这里插入图片描述

formaction 属性

用于描述表单提交的URL地址。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交" formaction="/iogin">
  </form>

formenctype 属性

描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交" formenctype="multipart/form-data">
  </form>

formmethod 属性

定义了表单提交的方式。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交" formmethod="get">
  </form>

formnovalidate 属性

描述了 <input> 元素在表单提交时无需被验证。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交" formnovalidate>
  </form>

formtarget 属性

指定一个名称或一个关键字来指明表单提交数据接收后的展示（_blank表示打开新页面，_self原页面）。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交" formtarget="_self">
  </form>

multiple 属性

可选择多个值（multiple 属性适用于以下类型的 <input> 标签：email 和 file）。

  <form>
    <label for="file">文件上传：</label>
    选择图片: <input type="file" name="img" multiple>
    
    <input type="submit" value="提交">
  </form>

如图所示
在这里插入图片描述

pattern 属性

描述了一个正则表达式用于验证 <input> 元素的值。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" pattern="[A-Za-z]{3}" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交">
  </form>

如图所示
在这里插入图片描述

placeholder 属性

提供一种提示，描述输入域所期待的值。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" pattern="[A-Za-z]{3}" placeholder="请输入用户名">
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交">
  </form>

如图所示

在这里插入图片描述

required 属性

规定必须在提交之前填写输入域（不能为空）。

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" autofocus>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="提交" formtarget="_self">
  </form>

如图所示
在这里插入图片描述

Web Workers

HTML5 引入了 Web Workers 技术，允许在后台运行脚本，提高网页的性能和响应能力，使得复杂计算和任务可以在独立的线程中执行。

注意：不允许本地文件访问Web Workers，你可以将它部署到服务器。

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
<input type="text" id="message">
<button onclick="sendMessage()">发送消息</button>
<br>
收到消息：<div id="output"></div>
</body>
<script>
  // 创建Web Worker
  const worker = new Worker('worker.js');

  function sendMessage(){

    var message = document.getElementById("message").value;
    console.info(message);
    // 向Web Worker发送消息
    worker.postMessage(message);

    // 接收来自Web Worker的消息
    worker.onmessage = function(event) {
      document.getElementById("output").innerHTML = event.data;
      console.log('Received message from web worker:', event.data);
    };

    // 接收来自Web Worker的错误消息
    worker.onerror = function(event) {
      console.error('Error in web worker:', event);
    };

}
  function close(){
    // 关闭Web Worker
    worker.terminate();
  }


</script>
</html>

worker.js代码

// 接收来自主线程的消息
self.onmessage = function(event) {
    console.log('Received message from main thread:', event.data);
  
    // 在后台执行耗时操作
    const result = performTask();
  
    // 向主线程发送消息
    self.postMessage(result);
  };
  
  // 执行耗时操作的函数
  function performTask() {
    // 这里可以是一些复杂的计算或数据处理任务
    // 返回结果给主线程
    return 'Task completed!';
  }

如图所示
在这里插入图片描述
上述示例代码中，主线程创建了一个Web Worker，并向其发送消息。Web Worker接收到消息后，在后台执行耗时操作，并将结果发送回主线程。主线程通过监听onmessage事件和postMessage()方法来接收和发送消息。

地理定位

HTML5 提供了 Geolocation API，可以通过 JavaScript 获取用户的地理位置信息，用于开发基于地理位置的应用和服务。

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <h1>地理位置信息</h1>
  <p id="location"></p>

  <script>
    function showPosition(position) {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      // 显示经度和纬度
      const locationInfo = '您的位置：纬度 '+latitude+'，经度 '+longitude;
      document.getElementById('location').innerHTML = locationInfo;
    }

    function errorHandler(err) {
      switch(err.code) {
        case err.PERMISSION_DENIED:
          document.getElementById('location').innerHTML = '用户拒绝了位置请求';
          break;
        case err.POSITION_UNAVAILABLE:
          document.getElementById('location').innerHTML = '位置信息不可用';
          break;
        case err.TIMEOUT:
          document.getElementById('location').innerHTML = '请求位置超时';
          break;
        case err.UNKNOWN_ERROR:
          document.getElementById('location').innerHTML = '发生了未知错误';
          break;
      }
    }

    if (navigator.geolocation) {
      // 获得用户的位置 参数一：地理定位，参数二：错误处理
      navigator.geolocation.getCurrentPosition(showPosition, errorHandler);
    } else {
      document.getElementById('location').innerHTML = '浏览器不支持地理位置信息';
    }
  </script>
</body>
</html>

在这里插入图片描述

注意：Google 地理位置服务国内已经暂停服务，如果有需要可以使用国内厂商API，比如：高德、百度。

Web存储

HTML5 引入了 IndexedDB 和 WebSQL，用于在浏览器端存储和检索大量结构化数据，提供了更好的离线数据存储解决方案。

IndexedDB（索引数据库）是一个基于 JavaScript 的面向对象数据库。它提供了一种在浏览器中存储结构化数据的解决方案，可以存储大量数据，并支持高性能的查询和索引。IndexedDB 使用键值对的方式存储数据，其中键是唯一的，而值可以是任意类型的 JavaScript 对象。使用 IndexedDB，您可以创建、更新、删除对象存储空间，执行事务操作，并通过索引进行高效的数据检索。

打开数据库或者创建数据库

const request = window.indexedDB.open("myDatabase",1);

执行数据库结构的更改，当打开数据库请求成功，触发 onupgradeneeded 事件。

request.onupgradeneeded = function(event) {
  //打开的数据库对象，执行各种数据库操作
  const db = event.target.result;
  
  // 创建一个名为 "books" 的对象存储空间，并指定用作键路径的属性
  const store = db.createObjectStore("books", { keyPath: "id" });
  
  // 添加一个名为 "title" 的索引，指定索引是否唯一
  store.createIndex("title", "title", { unique: false });
  
  // 其他数据库结构的更改操作...
};

对数据库数据进行操作，触发onsuccess 事件。

request.onsuccess = function(event) {
  const db = event.target.result;
  console.log("数据库打开成功！");

  // 在这里可以进行对数据库的操作，例如读取数据或添加数据
};

打开数据库、添加数据，发生错误时触发onerror事件。

request.onerror = function(event) {
  console.error("IndexedDB 错误:", event.target.error);
};

以下是使用 IndexedDB 存储和检索数据的完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <button onclick="addData()">添加数据</button>
  <button onclick="getData()">获取数据</button>
  <script>
    // 打开或创建数据库
    const request = window.indexedDB.open('myDatabase', 1);

    request.onupgradeneeded = function(event) {
      const db = event.target.result;

      // 创建一个对象存储空间
      const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });

      // 创建索引，可提高检索性能
      objectStore.createIndex('name', 'name', { unique: false });
    };

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

      function addData() {
        // 开启事务
        const transaction = db.transaction(['myObjectStore'], 'readwrite');
        const objectStore = transaction.objectStore('myObjectStore');

        const data = { id: 1, name: 'John Doe', age: 30 };

        // 添加数据
        const request = objectStore.add(data);

        request.onsuccess = function() {
          console.log('数据添加成功');
        };

        transaction.oncomplete = function() {
          console.log('事务完成');
        };

        transaction.onerror = function(event) {
          console.log('事务错误:', event.target.error);
        };
      }

      function getData() {
        // 开启只读事务
        const transaction = db.transaction(['myObjectStore'], 'readonly');
        const objectStore = transaction.objectStore('myObjectStore');

        // 检索数据
        const request = objectStore.get(1);

        request.onsuccess = function(event) {
          const data = event.target.result;

          if (data) {
            console.log('检索到的数据:', data);
          } else {
            console.log('未找到该数据');
          }
        };

        transaction.oncomplete = function() {
          console.log('事务完成');
        };

        transaction.onerror = function(event) {
          console.log('事务错误:', event.target.error);
        };
      }

      window.addData = addData;
      window.getData = getData;
    };

    request.onerror = function(event) {
      console.log('打开数据库失败:', event.target.error);
    };
  </script>
</body>
</html>

如图所示

在这里插入图片描述
你可以在F12查看数据

在这里插入图片描述

在目前的 Web 标准中，IndexedDB 被广泛支持，而 WebSQL 技术已经被废弃，不再推荐使用。这是因为 IndexedDB 提供了更好的性能、可靠性和标准化支持。因此，如果您需要在浏览器中存储和检索大量结构化数据，建议使用 IndexedDB。

伸缩矢量图形(Scalable Vector Graphics)

HTML5 中的 SVG（可缩放矢量图形）是一种用于描述二维矢量图形的 XML 标记语言。SVG 允许开发人员创建基于标记的、可交互的图形，用于网页中的图形显示和动画效果。下面是一个简单的示例，演示了如何在 HTML 中使用 SVG：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <h1>SVG 示例</h1>

  <svg width="200" height="200">
    <circle cx="100" cy="100" r="80" fill="red" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
  </svg>
</body>
</html>

如图所示

在这里插入图片描述

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

SVG（Scalable Vector Graphics）和 Canvas 是 HTML5 中用于绘制图形的两种不同的技术。

图形描述方式：SVG 使用 XML 标记语言来描述图形，而 Canvas 使用 JavaScript API 来绘制图形。SVG 是基于矢量图形的描述，可以通过元素和属性来定义图形的形状、颜色和样式等。Canvas 则是基于像素的位图绘制，您可以使用 JavaScript 绘制像素级别的图形和动画。
渲染方式：SVG 创建的图形是矢量图形，它们在渲染时会根据设备的分辨率进行缩放，保持图像的清晰度和质量。Canvas 创建的图形是位图，它们不会自动缩放，而是直接绘制到固定大小的画布上。如果需要在不同分辨率的设备上展示相同的图形，SVG 通常更适合。
动态性和交互性：由于 SVG 使用 DOM 元素来表示图形，因此它更适合用于创建具有交互性和动态效果的图形。您可以使用 JavaScript 操作 SVG 元素的属性和事件，实现动画、响应用户交互等高级功能。而 Canvas 绘制的图形是静态的位图，要实现动画或交互，您需要借助 JavaScript 不断更新画布内容。
处理复杂图形：对于复杂的图形和数据可视化，SVG 通常更适合。因为 SVG 是基于矢量图形的描述，它可以轻松处理复杂路径、变换和层叠效果。而 Canvas 需要通过 JavaScript 逐像素地操作，对于复杂图形的绘制和变换可能更加复杂。

拖放

HTML5 提供了内置的拖放功能，使开发人员可以轻松地实现元素的拖动和放置。

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

  <div class="drag" id="drag1" draggable="true">可拖动的元素</div>

使用 ondragstart 事件处理程序在拖动开始时捕获被拖动元素的 ID，并将其存储在 dataTransfer 对象中。

  <div class="drag" id="drag1" draggable="true" ondragstart="handleDragStart(event)">可拖动的元素</div>

  // 当拖动开始时触发的函数
  function handleDragStart(e) {
    // 将被拖动元素的 ID 存储在 dataTransfer 对象中
    e.dataTransfer.setData("text", e.target.id);
  }

使用 ondragover 事件处理程序阻止默认的放置行为，并使用 ondrop 事件处理程序在元素被放置时触发。在函数中，我们获取被拖动元素的 ID，并将其添加到放置区域中。

  <div class="drop" id="drop1" ondragover="handleDragOver(event)" ondrop="handleDrop(event)">放置区域</div>

  // 在放置区域中阻止默认的放置行为
  function handleDragOver(e) {
    e.preventDefault();
  }

  // 当元素被放置时触发的函数
  function handleDrop(e) {
    e.preventDefault();
    // 获取被拖动元素的 ID
    var data = e.dataTransfer.getData("text");
    // 获取被拖动的元素
    var draggedElement = document.getElementById(data);
    // 将被拖动元素添加到放置区域中
    e.target.appendChild(draggedElement);
  }

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    .drag {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      margin: 10px;
      padding: 10px;
    }

    .drop {
      width: 200px;
      height: 200px;
      border: 2px dashed #aaa;
      margin: 10px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>拖放示例</h1>

  <div class="drag" id="drag1" draggable="true" ondragstart="handleDragStart(event)">可拖动的元素</div>

  <div class="drop" id="drop1" ondragover="handleDragOver(event)" ondrop="handleDrop(event)">放置区域</div>
</body>
<script>
  // 当拖动开始时触发的函数
  function handleDragStart(e) {
    // 将被拖动元素的 ID 存储在 dataTransfer 对象中
    e.dataTransfer.setData("text", e.target.id);
  }

  // 在放置区域中阻止默认的放置行为
  function handleDragOver(e) {
    e.preventDefault();
  }

  // 当元素被放置时触发的函数
  function handleDrop(e) {
    e.preventDefault();
    // 获取被拖动元素的 ID
    var data = e.dataTransfer.getData("text");
    // 获取被拖动的元素
    var draggedElement = document.getElementById(data);
    // 将被拖动元素添加到放置区域中
    e.target.appendChild(draggedElement);
  }
</script>
</html>

如图所示
在这里插入图片描述

Web WebSocket

WebSocket 是一种在 Web 浏览器和服务器之间进行全双工通信的协议。它提供了一种实时、持久的连接，允许服务器主动向客户端推送数据，而不需要客户端发起请求。

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket 示例</title>
  <script>
    var socket;

    function init() {
      // 创建 WebSocket 对象，并指定服务器的 URL
      socket = new WebSocket("ws://localhost:8080");

      // 在连接建立时触发
      socket.onopen = function(event) {
        console.log("连接已建立");
      };

      // 在接收到消息时触发
      socket.onmessage = function(event) {
        var message = event.data;
        console.log("接收到消息: " + message);
      };

      // 在连接关闭时触发
      socket.onclose = function(event) {
        console.log("连接已关闭");
      };
    }

    function send() {
      var message = document.getElementById("message").value;
      // 发送消息给服务器
      socket.send(message);
    }
  </script>
</head>
<body onload="init()">
  <h1>WebSocket 示例</h1>

  <input type="text" id="message" placeholder="输入消息">
  <button onclick="send()">发送</button>
</body>
</html>

在上面的示例中，我们使用 new WebSocket(url) 创建了一个 WebSocket 对象，并指定了服务器的 URL。在连接建立、接收到消息和连接关闭时，分别触发了 onopen、onmessage 和 onclose 事件处理程序。

在 send() 函数中，我们获取用户输入的消息，并使用 WebSocket 对象的 send() 方法将消息发送给服务器。

请注意，WebSocket 的 URL 必须以 ws://（对于非加密连接）或 wss://（对于加密连接）开头，后面跟着服务器的主机名和端口号。

Server-Sent 事件

SSE（Server-Sent Events）是一种在 Web 应用程序中实现服务器向客户端单向实时通信的技术。与 WebSocket 不同，SSE 是基于 HTTP 的，只支持服务器向客户端的单向通信。

<!DOCTYPE html>
<html>
<head>
  <title>SSE 示例</title>
  <script>
    // 创建 EventSource 对象，并指定服务器端点的 URL
    var eventSource = new EventSource("/server-sent-events");

    // 监听 message 事件，即服务器端发送的消息
    eventSource.onmessage = function(event) {
      var data = event.data;
      console.log("接收到消息: " + data);
      
      // 在页面上显示接收到的消息
      document.getElementById("output").innerHTML = data;
    };
  </script>
</head>
<body>
  <h1>SSE 示例</h1>

  <div id="output"></div>
</body>
</html>