likes
comments
collection
share

HTML5 【1】

作者站长头像
站长
· 阅读数 6

HTML5介绍

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

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

<!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 开发的时候，为保证页面的健壮性，需要进行兼容性检测（当用户浏览器不适配的时候，跳出提示）：

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

语义化标签

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

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

HTML5 【1】

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

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

HTML5 【1】

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

HTML5 【1】

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

<nav></nav> 导航栏

HTML5 【1】

<article></article> 文章 文档

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

<aside></aside> 侧边栏

HTML5 【1】

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

好玩的还有一个color type(颜色选择器)：

<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 更新，以便显示新的计算结果。HTML5 【1】
<datalist>用于提供输入建议。<datalist> 元素包含一个或多个 option 元素，这些元素定义了输入框中可以选择的值。用户在输入框中输入时，可以从预定义的选项中进行选择。HTML5 【1】

output的使用：

<!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 表单新增属性

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

Input新增属性

HTML5 多媒体标签

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

音频标签 <audio>

<audio src="audio_file.mp3"></audio>
  • controls：在音频播放器中显示控件，如播放、暂停、音量控制等。
<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>

HTML5 【1】

  • autoplay：音频文件自动播放，无需用户点击播放按钮。

  • loop：音频文件循环播放。

视频标签 <video>

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

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

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

<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 标准，它允许在网页中直接显示数学公式。

MathML基础语法

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

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

HTML5 【1】

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

<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>

HTML5 【1】

Microdata

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

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

@Azureky