什么是HTML5：语义

Posted 2022-06-17 gigi就是我

html5 是 HTML 标准的最新演进版本。
这个术语代表了两个不同的概念：

• 它是一个新的 HTML 语言版本，包含了新的元素，属性和行为
• 同时包含了一系列可以被用来让 Web 站点和应用更加多样化、功能更强大的技术

HTML5从以下几个方面进行了改进：

语义

语义化就是用正确的标签描述内容的含义。
便于对浏览器、搜索引擎解析：

• 在没有CCS情况下也以一种文档格式显示，并且是容易阅读的。

• 有利于搜索引擎的优化：搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。

而HTML5的出现为页面的各个部分赋予了语义，标签表明了其内部内容是什么样的。

HTML5语义化结构

HTML5中新提出的节元素标签：

• section：表示文档中的一个区域，一般会包含一个标题
• article：表示文档、页面、应用或网站中的独立结构
• nav：表示导航栏
• header：表示页面的头部，通常会包含logo和站点名称以及可能有的水平菜单. 尽管名字是header，但是不一定是在页面的开始
• footer：表示页脚，一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
• aside：表示一个和其余页面内容几乎无关的部分。通常表现为侧边栏或者嵌入内容
• hgroup：代表一个标题组

以上元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持，但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式，因为未知元素默认会样式化为display:inline：

section, article, aside, footer, header, nav, hgroup 
  display:block;

使用HTML5的音频和视频

HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。

audio

HTML <audio> 元素用于在文档中表示音频内容。

• <audio> 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述； 浏览器将会选择最合适的一个来使用。
• 对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。

属性：

• autoplay：使音频自动播放。
• buffered：你可以通过该属性获取已缓冲的资源的时间段信息。
• controls：如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
• loop：使音频自动重复播放
• muted：表示是否静音的布尔值。默认值为false，表示有声音。
• played：一个TimeRanges 对象，表示所有已播放的音频片段。
• preload：告诉浏览器如何下载音频。有三个属性值可供设置：
  
  • auto: 下载整个音频文件，以便用户单击播放按钮时就能播放
  • none: 不预先下载文件；
  • metadata: 仅下载文件的元数据，如音频的总时长等信息。
  • 空字符串 : 等效于auto属性。

如果使用的是none或metadata，那么浏览器会在用户单击播放按钮时立即下载音频文件。

• src：嵌入的音频的URL或本地文件的路径。 可以在audio元素中使用 <source> 元素来替代该属性指定嵌入的音频。
• volume：音频播放的音量。值从0.0 (无声) 到 1.0 (最大声).

<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

不同浏览器支持的音频格式不同，因此可以用 <source> 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

浏览器会选择播放第一个它所支持的文件。
当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。

最好的做法是像这里一样使用type属性提供正确的MIME类型，这样浏览器只会下载它认为自己能够播放的文件。

同样的做法也适用于video元素。

video

HTML <video> 元素 用于文档中嵌入视频内容。

属性：
有一部分属性和audio的相同：autoplay、buffered、controls、loop、muted、palyed、preload、src

另外还有一些自己特有的属性：

• width：视频显示区域的宽度，单位是CSS像素。
• height：视频展示区域的高度，单位是CSS像素。
• crossorigin：该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。
  不加这个属性时，抓取资源不会走CORS请求
• poster：用于设置替换视频的图片。在三种情况下会使用这个图片：
  
  • 视频第一帧未加载完毕
  • 把preload属性设为none
  • 没有找到指定的视频文件

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看!
</video>

第一个例子播放一个视频，视频一收到，允许播放的时候就会立马开始播放，而不会停下来直到下载更多内容。 图片 “posterimage.jpg” 会一直展示在视频区域，直到开始播放。

媒体回放控制

当你已经用新的元素将媒体嵌入 HTML 文档以后，你就可以用 javascript 代码 采用编程的方式来控制它们。
比如说，如果你想（重新）开始播放，可以写如下的代码：

var v = document.getElementsByTagName("video")[0];
v.play();

控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当：

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">播放声音</button>
  <button onclick="document.getElementById('demo').pause()">暂停声音</button>
  <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button>
  <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button>
</div>

终止媒体下载

停止媒体播放很简单，只要调用 pause() 方法即可，然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。

以下是即刻停止媒体下载的方法：

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src"); 

通过移除媒体元素的 src 属性（或者直接将其设为一个空字符串——这取决于具体浏览器）， 你可以摧毁该元素的内部解码，从而结束媒体下载。

有关更多HTML5使用媒体的信息可以参考使用 HTML5 音频和视频

表单

HTML5 中对 web 表单的改进：

• 强制验证 API
• 一些新的属性
• <input> 属性type 的一些新值
• 新的元素

input元素

HTML5为input元素的type添加了更多的值

• search: 这个元素呈现为一个搜索框。
• tel: 电话号码。这个控件的唯一用途是在移动端浏览器中定制虚拟键盘，键盘中只包含数字而没有字母。
• url: 这个元素呈现为一个编辑URL 的输入控件。
• email: 这个元素呈现为一个邮件地址。
• number：常规数值。一般与min、max、step属性一起使用，来增加输入数值的范围限制。
• range：滑动条控件。也支持min、max属性，用于设置允许的范围。
• date：用于输入日期的控件（年，月，日，不包括时间）。
• time：用于输入不含时区的时间控件。
• color：用于指定颜色，会显示一个下拉式色盘。浏览器支持度不高。

如果浏览器不识别type属性值，则会将input作为一个普通的文本框来处理。

---

input元素自身也拥有一些新特性：

• list： <datalist> 元素的 ID，该元素的内容<option> 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。
• pattern： 一个正则表达式，用于检查控件的值，能够作用于 type 值是 text， tel， search， url， 和 email 的 input 元素。
• form： 一个字符串，用于表明该 input 属于哪个 <form> 元素。
  一个 input 只能存在于一个表单中。
• formmethod：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；
  如果定义了它，则可以覆盖 <form> 元素上的 method 特性。只有当 type 值为 image 或 submit，并且 form 特性被设置的情况下， formmethod 才能生效。

form元素

<form> 元素有了一个新特性：

• novalidate：设置了该特性，则不会在表单提交之前对其进行验证。

datalist元素

新的datalist元素可以让你在普通文本框中添加一个下拉建议列表。这样填表的人既可以直接从列表中选择输入，也可以自由输入。

datalist元素必须配合一个标准的input元素使用：

<label>Choose a browser from this list:
<input name="myBrowser" /></label>

• 要为这个文本框添加建议项列表，必须先创建一个<datalist>。从技术角度讲，可以在任何地方定义这个列表，因为<datalist>不会显示出来，而只会为使用它的文本框提供数据。
  但是一般讲datalist放在使用它的input元素前后比较合适。

• 与select元素一样，datalist元素也用 option定义数据项。
  每个option表示一个可供选择的建议，其label属性是显示在文本框中的内容，而value属性则是发送给服务器的值。

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

• 就其本身而言，datalist是完全不可见的。为了将他与文本框联系起来以便提供建议，下一步就是要将input元素的list属性设定为datalist的ID。

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

为了那些不支持datalist的浏览器，可以在datalist内部再加上一个包括option选项的select元素。这样在其他浏览器中会显示一个选择列表。

output元素

<output> 元素表示计算的结果。

placeholder特性

placeholder 特性作用于 <input> 与 <textarea> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。

autofocus特性

autofocus 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点。
一个文档内只有一个表单能够拥有 autofocus 特性，它是一个 Boolean 值。

这个特性适用于 <input>， <button>， <select>，与 <textarea> 元素。

例外情况是，如果一个 autofocus 元素的 type 特性值设置成了 hidden，则 autofocus 无法生效。

约束验证

HTML5 为客户端表单的验证提供了语法与 API。
当然这些功能无法取代服务器端验证，出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。
即，客户端验证是为访客提供方便的，而服务器端验证才是确保数据正确性的。

只有当用户点击提交按钮时，浏览器才会执行验证。

如果 <input> 元素设置了 title 特性，当验证失败时，特性值会显示在提示信息中。如果 title 设置为空字符串，则不会显示提示信息。

约束验证的HTML语法

• <input>, <select>，<textarea> 元素上的 required 特性，指定必须提供该元素的值。
• <input> 元素上的 pattern 特性用于限定元素值必须匹配一个特定的正则表达式。
• <input> 元素上的 min 与 max 特性限定了能够输入元素的最大与最小值。
• <input> 元素的 step 特性(与 min 与 max 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。
• <input> ，<textarea> 元素的 maxlength 特性限制了用户能够输入的最大字符数。
• type 的 url 与 email 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。

此外，若要阻止对表单进行约束验证

• 在 <form> 上设置 novalidate 特性
• 或在 <button> 与 <input> 元素(当 type 是 submit 或 image)上设置 formnovalidate 特性。

这些特性指定了当表单提交时不做验证。

验证相关的伪类

css3也相应地增加了几个与表单验证相关的伪类，用于修改验证的样式。

• ：required （必填）和：optional （选填），根据表单字段中是否使用了required属性来应用不同样式

• ：valid （有效）和：invalid （无效），表单控件中是否包含错误，只在提交表单时浏览器能判断哪些有效哪些无效。

• ：in-range （在范围内）和：out-of-range（超出范围），根据空间的min和max属性判断输入值是否超出范围，从而应用样式。

如果想为必填的input元素应用浅黄色背景，就可以为required伪类定义一条样式规则：

input:required 
  border-color: lightyellow;

如果只想突出那些必填且当前填入了无效值的字段，那么可以组合使用伪类：

input:required:invalid 
   border-color: lightyellow;

约束验证API

下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：

• HTMLFormElement 对象上的 checkValidity() 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。
• 在 表单相关元素上：略

新的语义元素

除了节段，媒体和表单元素之外，还有众多的新元素。
例如 <mark>， <figure>， <figcaption>， <data>， <time>， <output>， <progress>， 或者 <meter>和<main>。

HTML5实践

doctype

HTML5的doctype非常简单。表明你的HTML内容使用HTML5，只需要简单的使用：

<!DOCTYPE html>

这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。

这个doctype比以前更短，更简单，使的它更容易被记住并且减少必须下载的字节数。

用<meta charset>声明字符集

在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的<meta>元素，现在它变得非常简单：

<meta charset="UTF-8">

把这个元素放到head中。