HTML5 介绍和语法规范

发布于 2021-06-18 12:39:07 字数 9194 浏览 1609 评论 0

认识 HTML5

HTML5 并不仅仅只是作为 HTML 标记语言的一个 最新版本，更重要的是它制定了 Web 应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5 定义了一系列 新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建丰富互联网应用，还提供了一系列的 Javascript API，如地理位置、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合 Canvas 我们可以开发网页版游戏，同时结合 CSS3的过渡、转换、动画等特性，可以极大的增强用户的体验，提升开发功能的可应用性。

我们日常讨论的H5其实是一个泛称，它指的是由 HTML5 + CSS3 + Javascript 等奇数组合而成的一个 应用开发平台。

语法规范

随着 Web 技术的更新，HTML也先后经历了 HTML4.01、XHTML1.0、HTML5 几个重要的版本，在版本的演变过程中新增或废除了一些属性，同时对语法规范也做了一些调整，为了能够保证浏览器可以兼容不同版本语法规范，我们可以使用 <!DOCTYPE> 指示浏览器应该如何处理我们的 HTML。

html:4s+tab html:4t+tab

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

html:xt+tab html:xs+tab

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

!+tab html:5

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

</body>
</html>

HTML5 在语法规范上也做了比较大的调整，去除了许多冗余，书写规则更加简洁、清晰。

通过以上的比较我们可以总结得出 HTML5 在语法规范上的特点：

更简洁
更宽松

但是我们在实际开发中应规范书写，不建议太随意！并且现在基本上所有网站都采用HTML5的语法规范。

语义化

所谓的语义化是要使HTML标签具备很好的可读性，可以清晰传达每个标签所要表达的意义，以方便其被友好的处理和解析。

对于语义化标签我们并不陌生，如 <p> 表示一个段落、<ul> 表示一个无序列表、<h1>~<h6> 表示一系列标题等，在此基础上 HTML5 增加了大量更有意义的语义标签，更有利于 搜索引擎 或 辅助设备 来理解HTML页面内容。

传统的做法我们通过添加类名如 class="header" class="footer"，使 HTML 页面具有语义性的，但是不具备通用性(如 class="hrader" 也可能被写成 class="head")。

HTML5则是通过增加 语义化标签 的形式来解决这个问题，例如 <header></header>、<footer></footer> 等，这样就可以保证其 具有通用性。

1.常用的语义化标签

标签	语义
`<nav>`	导航
`<header>`	页眉
`<footer>`	页脚
`<section>`	区块
`<article>`	文章
`<aside>`	侧边栏
`progress`	进度条

本质上新语义标签与 <div>、<span> 没有区别，只是其 具有语义性，使用时除了在 HTML 结构上需要注意外，其他和普通标签的使用无任何差别，可以理解成 <div class='nav'> 相当于 <nav>。

尽量避免全局使用 header、footer、aside等语义标签。

2.兼容性处理

在不支持 HTML5 新标签的浏览器里，会将这些新的标签解析成 行内元素(inline)对待，所以我们只需要将其转换成 块元素 (block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过 document.createElement('tagName') 创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过 document.createElement('tagName') 来创建一遍，这样IE低版本也能正常解析HTML5新标签了，但是在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题，这个库文件会帮自动通过 document.createElement('tagName') 创建所有HTML5的新标签。(html5shiv.min.js)

<!--[if lte IE 8]>
    <script src='./js/html5shiv.min.js'></script>
<![endif]-->

3.微数据

微数据是在如 span、div 的标签内添加属性，让机器（如搜索引擎）识别其含义，某些特定类型的信息，例如评论、人物信息或事件都有相应的属性，用来描述其含义，可以理解成新语义标签的一种补充。(itemprop)

表单

1.输入类型

类型	使用示例	含义
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式
search	`<input type="search">`	搜索框
range	`<input type="range">`	自由拖动滑块
color	`<input type="color">`	拾色器
time	`<input type="time">`
date	`<input type="date">`
datetime	`<input type="datetime">`
month	`<input type="month">`
week	`<input type="week">`

部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中应选择性的使用。

2.表单元素

类型	含义
`<datalist>`	数据列表
`<keygen>`	生成加密字符串
`<output>`	输出结果
`<meter>`	度量器

3.表单属性

属性	用法	含义
placeholder	`<input type="text" placeholder="请输入用户名">`	占位符
autofocus	`<input type="text" autofocus>`	自动获得焦点
multiple	`<input type="file" multiple>`	多文件上传
autocomplete	`<input type="file" autocomplete>`	自动完成
form	`<input type="file" form="某表单ID">`
novalidate	`<form novalidate></form>`	关闭验证
required	`<input type="text" required>`	必填项
pattern	`<input type="text" pattern="\d">`	自定义验证

多媒体

在HTML5之前，在网页上播放视频/音频的通用方法是利用 Flash 来播放，但是大多情况下，并非所有用户的浏览器都安装了 Flash 插件，由此使得处理音频/视频播放变得非常复杂，并且移动设备的浏览器并不支持 Flash 插件。

1.音频

HTML5通过 <audio> 标签来解决音频播放的问题使用相当简单。

<audio src='../test.mp3'></audio>

并且可以通过附加属性可以更友好控制音频的播放，如：autoplay 自动播放 controls 是否显示默认播放控件 loop 循环播放。

由于版权等原因，不同浏览器可支持播放的格式是不一样的。

多浏览器支持方案：

<audio controls>
    <source src='../test.mp3'>
    <source src='../test.wav'>
    <source src='../test.ogg'>
</audio>

2.视频

HTML5 通过 <video> 标签来解决视频播放的问题。

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

同样，通过附加属性可以更友好的控制视频的播放。

autoplay 自动播放 controls 是否显示默认播放控件 loop 循环播放 width 设置播放窗口的宽度 height 设置播放窗口的高度由于版权等原因，不同的浏览器可支持播放的格式是不一样的。

多浏览器支持的方案

<video>
    <source src='../test.mp4'>
    <source src='../test.ogg'>
</video>

DOM扩展

1.获取元素

document.getElementByClassName('class') 通过类名获取元素，以 类数组 形式存在。
document.querySelector('selector') 通过 CSS 选择器获取元素，符合匹配条件的 第1个 元素。
document.querySelectorAll('selector') 通过 CSS 选择器获取元素，以 类数组 形式存在。

2.类名操作

Node.classList.add('class') 添加 class。
Node.classList.remove('class') 移除 class。
Node.classList.toggle('class') 切换 class，有则移除，无则添加。
Node.classLIst.contains('class') 检测是否存在 class。

Node 指一个有效的 DOM 节点，是一个通称。

3.自定义属性

在 HTML5 中我们可以自定义属性，其格式如下 data-*=""，例如 date-info="我是自定义属性"，通过 Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset 是以对象形式存在的，当我们为同一个 DOM 节点指定了多个自定义属性时，Node.dataset 则存储了所有的自定义属性值。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态，并将以不断告别和相遇的陈旧方式继续下去。

0 文章

0 评论

84961 人气

关注发私信

友情链接

文江博客