html 5 - yaokun123/php-wiki GitHub Wiki

HTML5

一、认识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在语法规范上的特点：

1、更简洁

2、更宽松

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

三、语义化

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

对于语义化标签我们并不陌生，如

表示一个段落、

    表示一个无序列表、

    ~

    表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。

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

    HTML5则是通过增加语义化标签的形式来解决这个问题，例如

    、等，这样就可以保证其具有通用性。

    1.常用的语义化标签

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

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

    相当于。

    尽量避免全局使用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
    date
    datetime
    month
    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> 关闭验证
    required <input type="text" required> 必填项
    pattern <input type="text" pattern="\d"> 自定义验证

    五、多媒体

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

    1.音频

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

    <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 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则存储了所有的自定义属性值。

⚠️ **GitHub.com Fallback** ⚠️