HTML5 (1)

本文是学习HTML5掘金小册所整理的笔记~ 2023.12.26

HTML5介绍

如何判断网页文档属于哪个标准

开发者可以通过 HTML 文档头部的 <!DOCTYPE> 标签来判断文档所属标准，具体常用文档声明对应标准如下

html 复制代码

<!DOCTYPE html>  //声明告诉浏览器使用 HTML5 规范来渲染页面

如今所有主流浏览器均已支持 HTML5 标准

什么是 HTML5

HTML5的新特性在IE9+ Edge12+ 谷歌5+以上版本或者移动端才能使用

HTML5 是 HTML（HyperText Markup Language 超文本标记语言）的第五个版本。

-HTML5 无需使用插件就能支持音频、视频、图形、动画以及交互式内容的原生嵌入。

语义化标签： 比如 <header>，<nav>，<footer> 和 <section> 等。
Web 表单 2.0： 改进了 HTML Web 表单，为标签引入了一些新的属性。
离线数据访问： 为了不通过第三方插件实现。
WebSocket： 用于 Web 应用程序的下一代双向通信技术。
服务器推送事件： HTML5 引入了从 Web 服务器到 Web 浏览器的事件，也被称作服务器推送事件（SSE）。
Canvas： 支持用 JavaScript 以编程的方式进行二维绘图。
音频和视频： 在网页中嵌入音频或视频而无需借助第三方插件。
地理定位： 用户可以选择与我们的网页共享他们的地理位置。
微数据： 允许我们创建 HTML5 之外的自定义词汇表，以及使用自定义语义扩展网页。
拖放： 把同一网页上的条目从一个位置拖放到另一个位置。
其他 API 等等...

HTML5新增标签

以下是 HTML5 新增的一写标签及其对应含义：

<header>：定义文档或节的页眉。
<nav>：定义导航链接的容器。
<section>：定义文档中的一个节（section）。
<article>：定义独立的自包含文章。
<aside>：定义与页面内容无关的侧栏内容。
<footer>：定义文档或节的页脚。
<main>：定义文档的主要内容。
<figure>：定义一段独立的流内容（图像、图表、照片、代码清单等）。
<figcaption>：定义<figure>元素的标题或说明。
很多新的表单元素，如<input type="date">、<input type="time">、<input type="search">等
新的媒体标签，如<audio>、<video>等。

兼容性编程

不是所有浏览器都支持 HTML5 新特性，因此我们在使用 HTML5 新特性进行 Web 开发的时候，为保证页面的健壮性，需要进行兼容性检测（当用户浏览器不适配的时候，跳出提示）：

js 复制代码

//以canvas为例
var canvas = document.createElement('canvas');
if (canvas.getContext) {
  // 浏览器支持 canvas
} else {
  // 浏览器不支持 canvas
  alert('您的浏览器不支持 canvas，请更换或升级浏览器');
}

语义化标签

语义化标签是指我们看着这个标签名字，就大概知道是用来装什么的

同时，相比于使用<div>,<span>等无意义的标签来构建页面，使用语义化标签使得HTML代码更易理解。以前的布局方式：

还能提高页面的搜索速度（SEO）

HTML5新语义标签： <header>、<nav>、<main>、<article>、<section>、<aside> 和 <footer> 等

`<header>` `</header>` 页眉（头部标签）

`<main>` `</main>` 页面主要部分

`<nav></nav>` 导航栏

`<article></article>` 文章文档

`<section></section>` 文档中的某个区域

`<aside></aside>` 侧边栏

`<footer></footer>` 尾部页尾

在IE9中，这些新标签默认不是块级元素，因此在使用的时候，需要将他们转为块级元素：{display：block}

移动端更喜欢这些标签

html5 Web表单2.0

详细见开发者文档：

：输入（表单输入）元素 - HTML（超文本标记语言） | MDN (mozilla.org)

Input标签新增type类型

在 HTML 的 <input> 标签内，通过属性 type=[xxx] 来指定数据类型

旧HTML：

类型	描述
text	自由形式的文本字段，名义上没有换行符。
password	用于敏感信息的自由形式的文本字段，名义上没有换行符。
checkbox	预定义列表中的一组零个或多个值。多选的时候使用
radio	一个枚举值。单选框的时候使用
submit	一个自由形式的启动表单的按钮。
file	带有 MIME 类型的任意文件以及可选的文件名。
image	一个坐标，相对于特定图片的尺寸，额外的语义是它必须是最后选中的值，同时启动表单提交。
hidden	默认不显示给用户的任意字符串。
select	枚举值，类似 radio 类型。
textarea	自由形式的文本字段，名义上没有换行的限制。
button	自由形式的按钮，可以启动按钮相关的任何事件。

HTML5的新增项：(方便开发者在进行表单开发的时候进行格式验证以及快速实现不同类型的需求。)

类型	描述
email	只接受邮箱值。这个类型适用于应该包含一个邮箱地址的输入字段。如果尝试提交一个简单的文本，它会强制要求输入 email@example.com 格式的邮箱地址。
url	只接受 URL 值。这个类型适用于应该包含一个 URL 地址的输入字段。如果尝试提交一个简单的文本，它会强制要求输入 www.juejin.cn 或者 juejin.cn 格式的 URL 地址。

datetime-local	年，月，日，时，分，秒，分秒。不带时区信息。
date	年，月，日。不包括时，分，秒
month	年和月组成的日期。

week	年和星期数组成的日期。
time	用于输入时间（时、分、秒）的控件，不包括时区。
number	只接受数值。step 属性可以指定精度，默认为1。 `<input type="number" id="num1" value="0">` value指定默认值
range	range 类型适用于应该包含某个范围内数值的输入字段。

好玩的还有一个color type(颜色选择器)：
html 复制代码
<label for="favorite-color">Choose a color:</label>  
<input type="color" id="favorite-color" name="favorite-color" value="#ff0000"><br>
name ：输入字段的名称。这用于标识服务器端代码中的输入字段。

value ：输入字段的初始值。这应该是十六进制颜色值，例如白色的 #ffffff 。

disabled ：如果此属性设置为 true ，输入字段将被禁用，用户将无法与其交互。

HTML5新增表单标签

标签	描述
`<output>`	用于显示计算结果或用户输入的内容。它可以在表单中显示计算结果，也可以在表单外显示。`<output>` 标签可以用 JavaScript 更新，以便显示新的计算结果。
`<datalist>`	用于提供输入建议。`<datalist>` 元素包含一个或多个 option 元素，这些元素定义了输入框中可以选择的值。用户在输入框中输入时，可以从预定义的选项中进行选择。

output的使用：

html 复制代码

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>html中output标签详细介绍</title>
</head>

<body style="background-color: bisque;">
   <h4>output标签演示：</h4>
   <h5>加法计算器</h5>
   <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
       <input type="number" id="a" value="0"> +
       <input type="number" id="b" value="0"> =
       <output name="x" for="a b">0</output>
   </form>
</body>
</html>

HTML5新增属性

Form 表单新增属性

属性	描述
autocomplete	autocomplete 属性用于指定表单是否应该启用自动填充功能。当该属性值为"on"时，浏览器可以自动填充表单中的输入字段。当该属性值为"off"时，浏览器不会自动填充。（也就是能否使用保存的数据）
novalidate	novalidate 属性用于指定表单在提交时是否进行验证。该属性是一个 boolean 值，当为 true 时表单不会进行验证，可以提交任何值。

Input新增属性

属性	描述
placeholder	placeholder 属性用于指定输入框中的默认提示文本。当输入框获得焦点时，提示文本会自动消失。
required	required 属性是一个 boolean 属性，required 属性规定文本框在提交时不能为空
autofocus	autofocus 属性是一个 boolean 属性，规定在页面加载时，域自动地获得焦点。
pattern	pattern 属性描述了一个正则表达式用于验证 `<input>` 元素的值。
...	还有更多属性，但是平时使用的比较少，因此不做过多扩展，感兴趣的可以去 MDN 官方文档查看

HTML5 多媒体标签

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素

音频标签 `<audio>`

html 复制代码

<audio src="audio_file.mp3"></audio>

controls：在音频播放器中显示控件，如播放、暂停、音量控制等。
html 复制代码
<figure>
   <figcaption>点击播放听歌曲，点击扩展按钮下载歌曲：></figcaption><br>
   <audio controls src="https://interactive->examples.mdn.mozilla.net/media/cc0-audio/t-rex->roar.mp3"> <a href="https://interactive->examples.mdn.mozilla.net/media/cc0-audio/t-rex->roar.mp3" download> 下载 </a>
   </audio>
</figure>
autoplay：音频文件自动播放，无需用户点击播放按钮。

loop：音频文件循环播放。

视频标签 `<video>`

html 复制代码

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

video的常用属性跟<audio>一样

下面是一个示例，展示如何在网页上嵌入一个视频文件，并显示控件：

html 复制代码

<h1>HTML5 多媒体标签</h1>
<video src="
https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls/>

注意：<video> 标签的 controls 属性内置了一些功能，不同浏览器有不同的实现

媒体资源标签 `<source>`

它通常而且最好是与 <audio> 和 <video> 标签一起使用，以便在不同的浏览器中提供不同的媒体文件格式。因为它本身没有意义。多用于兼容性编程中存储多个src路径。

MathML

W3C 开发了 MathML 标准，它允许在网页中直接显示数学公式。

感觉暂时比较少会接触到，详细看：HTML5 入门教程 - 前端周公子 - 掘金小册 (juejin.cn)

MathML基础语法

使用 MathML 之前，让我们一起来学习一下它的基础语法，一个完整的 MathML 应该包含如下几部分：

声明 MathML：在 HTML5 页面中使用 MathML，需要在 <math> 标签中添加 xmlns="``http://www.w3.org/1998/Math/MathML``" 属性。
MathML 标签：MathML 标签包括 <math>、<mtext>、<mrow>、<msup>、<msqrt>、<mo> 等。这些标签用于表示数学公式中的各种元素，例如数字、符号、指数、根号等。
MathML 属性：MathML 还提供了一些属性，例如 mathcolor、mathbackground、mathsize 等，用于控制数学公式的颜色、背景和大小等方面。
嵌入数学公式：在 HTML5 页面中嵌入 MathML 公式，可以使用 <math> 标签将数学表达式包裹起来，并在其中使用各种 MathML 标签和属性来表示不同的元素和属性。

html 复制代码

<h1>下面是一个等式的 MathML 公式：</h1>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow mathbackground="#efefef">
    <msup><mi>a</mi><mn>2</mn></msup>
    <mo>+</mo>
    <msup><mi>b</mi><mn>2</mn></msup>
    <mo>=</mo>
    <msup><mi>c</mi><mn>2</mn></msup>
  </mrow>
 </math>

开发者可以使用 <mfrac> 标签来定义一个分数，分数的分子和分母都是 <mrow> 标签：

html 复制代码

<h1>下面是一个分数的 MathML 公式：</h1>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac mathcolor="red">
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mi>y</mi>
    </mrow>
  </mfrac>
</math>

Microdata

HTML5 Microdata 是一种由 W3C 提出的用于标记网页内容的语义标准，它允许开发人员在网页中添加结构化数据，以描述网页内容的含义和属性。可以帮助搜索引擎更好地理解网页内容，并提高网页的可读性和可发现性，为网站内容添加更多的语义信息。

Microdata 的语法类似于 HTML 标签，每个 Microdata 项都由一个类型和一组属性值组成

首先，定义一个包含 Microdata 的 HTML 标签，例如 <div> 或 <section>。
其次，在标签上添加 itemscope 属性，表示该标签是一个 Microdata 项。
然后，在标签上添加 itemtype 属性，表示该项的类型。类型可以是任何 URL，通常是指向某个标准或自定义的术语集合。
html 复制代码
```
<div itemscope itemtype="https://juejin.cn/cources">
    //中间插入的就是带有itemprop='xxx'的标签 表明属性和对应的值
</div>
```

最后，在标签上添加 itemprop 属性，表示该项的属性。属性可以是任何字符串，通常是指向某个标准或自定义的属性集合。

html 复制代码

     <h1 itemprop="name">HTML5 入门教程</h1>
     <div>
        <span itemprop="author">前端周公子</span>
        <span itemprop="datePublished">2023-05-01</span>
     </div>

*Microdata 微数据引入了几个全局属性，这些属性适用于在 HTML 任意标签上并且为数据提供上下文机制。HTML5 入门教程 - 前端周公子 - 掘金小册 (juejin.cn)

@Azureky

HTML5介绍

如何判断网页文档属于哪个标准

什么是 HTML5

HTML5新增标签

兼容性编程

语义化标签

<header> </header> 页眉（头部标签）

<main> </main> 页面主要部分

<nav></nav> 导航栏

<article></article> 文章 文档

<section></section> 文档中的某个区域

<aside></aside> 侧边栏

<footer></footer> 尾部 页尾

html5 Web表单2.0

Input标签新增type类型

HTML5新增表单标签

HTML5新增属性

Form 表单新增属性

Input新增属性

HTML5 多媒体标签

音频标签 <audio>

视频标签 <video>

媒体资源标签 <source>

MathML

MathML基础语法

Microdata

`<header>` `</header>` 页眉（头部标签）

`<main>` `</main>` 页面主要部分

`<nav></nav>` 导航栏

`<article></article>` 文章文档

`<section></section>` 文档中的某个区域

`<aside></aside>` 侧边栏

`<footer></footer>` 尾部页尾

音频标签 `<audio>`

视频标签 `<video>`

媒体资源标签 `<source>`