【前端】之HTML5基础知识

HTML5 文件格式

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

    </head>

    <body>

        <!-- 我的HTML5代码 -->

    </body>

</html>

HTML5 对浏览器的支持

HTML5支持Chrome、Firefox和IE9及以上的浏览器。

如果需要考虑IE8及以下的浏览器，可以加入html5shiv.js的引用。方法如下：

<!--[if lt IE 9]>

<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>

<![endif]-->

HTML5 语义性标签

<header>：头部
<nav>：导航栏
<section>：内容区域
<aside>：侧边栏
<article>：文章（详细内容区域）
<footer>：底部

注：以上所有标签的作用和<div>标签的作用完全相同，但增强了语义性（可读性）。

HTML5 <input>标签

type="email"：邮箱（123456@qq.com）
type="url"：网址（http://www.baidu.com）
type="number"：数字，可以通过点击加减
type="tel"：电话号码
type="search"：搜索框，框的最后有一个叉，可以清空内容
type="range"：范围，可以拖动的条
type="color"：颜色选择器
type="date"：日期选择器

注：HTML5中的input标签，如果输入不合法，会自动弹出提示信息。
input标签中新增的属性：
- placeholder属性：input标签中的提示信息，相当于Android中的hint属性
- autofocus属性：页面加载之后让表单自动获取焦点，不需要写值
- autocomplete属性：值on/off，on时可以自动显示以前输入的数据
- required属性：指示是否必填，不需要写值
- multiple属性：用于文件上传表单，可以选择多个文件，不需要写值
- novalidate属性：关闭H5表单默认的验证功能，只能加在标签上，不需要写值
- pattern属性：自定义正则验证

表单验证事件：

oninput：当用户输入的时候触发的事件，示例代码如下：

document.getElementById("username").oninput = function() {

    // 每当用户在表单中输入一个字符，就会触发一次这个事件

}

oninvalid：当验证不通过时触发的事件，示例代码如下：

document.getElementById("email").oninvalid = function() {

    this.setCustomValidity("您输入的邮箱不正确！");

}

HTML5 其他标签简介

<datalist>标签：可以输入数据的下拉菜单，需要结合input>text使用，代码如下：

<!-- text表单右侧有一个下拉箭头，可以直接下拉；输入时可以模糊匹配 -->

<input type="text" list="cars" />

<datalist id="cars">

  <option>宝马</option>

  <option>宝骏</option>

  <option>宝宝</option>

</datalist>

<fieldset>标签：表单框，盛放多个表单的容器，代码如下：

<form action="">

  <fieldset>

      <legend>用户验证表单</legend> <!-- 标题 -->

      <!-- 这里写其他标签代码 -->

  </fieldset>

</form>

<label>标签：点击该标签中的文本，可以触发该标签中的表单的焦点，代码如下：
```
<label>

  姓名：<input type="text"/>

</label>
```
<keygen>标签：加密标签，保证数据传输安全，可以选择不同强度的加密，代码如下：
```


加密：<keygen/>
```

<meter>标签：度量器，类似温度计，根据在不同的值区间显示不同的颜色，代码如下：

<!-- 当在low和high之间时显示绿色，否则显示黄色 -->

<meter max="100" min="0" low="30" high="70" value="50"></meter>

<progress>标签：进度条，代码如下：

<progress max="100" min="0" value="40"></progress>

<audio>标签：音频播放标签，H5播放音频不依赖于任何插件，代码如下：

<!-- controls：显示控制条；autoplay：自动播放；loop：自动循环播放 -->

<audio controls autoplay loop>

  <source src="music/fireworks.ogg" />

  <source src="music/fireworks.mp3" />

  <source src="music/fireworks.wav" />

  抱歉，当前浏览器不支持播放此音频！

</audio>

<!-- 注：audio标签目前只支持.ogg、.mp3、.wav三种音频格式 -->

<!-- 不同浏览器支持的音频格式不同，因此需要在服务端保存三种格式的音频文件 -->

<video>标签：视频播放标签，H5播放音频不依赖与任何插件，代码如下：

<video controls autoplay loop>

  <source src="music/movie.ogg" />

  <source src="music/movie.mp4" />

  <source src="music/movie.webm" />

  抱歉，当前浏览器不支持播放此视频！

</video>

<!-- 注：video标签目前只支持.ogg、.mp4、.webm三种音频格式 -->

<figure>标签：多媒体标签（图片、音频、视频等），代码如下：

<figure>

  <figcaption>多媒体标题</figcaption>

  <!-- 这里可以写多媒体代码或其他代码 -->

</figure>

HTML5 DOM拓展

获取文档元素：H5新增了对元素的统一获取方法，代码如下：

var box01 = document.querySelector(".box1"); // 只会选择符合条件的第一个元素

var boxes = document.querySelectorAll("div"); // 获取所有符合条件的元素的数组

类名操作：H5新增了对元素类的添加、删除、切换、查找操作，代码如下：

document.querySelector("box").classList.add("box1"); // 添加

document.querySelector("box").classList.remove("box1"); // 删除

var flag = document.querySelector("box").classList.contains("box1"); // 查询

document.querySelector("box").classList.toggle("box1"); // 切换

自定义属性：H5支持自定义属性，但属性名必须以“data-”开头，代码如下：

<div id="mydiv" data-name="myname" data-my-content="mycontent"></div>

<script>

  console.log(document.querySelector("#mydiv").dataset["name"]);

  console.log(document.querySelector("#mydiv").dataset["myContent"]);

</script>

HTML5 元素拖拽

拖拽元素：要想让一个元素可以拖拽，需要设置元素的draggable属性为true
目标元素：页面中的所有元素都一个作为拖拽的目标元素
拖拽事件：
- ondragstart：应用于拖拽元素，当拖拽开始时被回调
- ondrag：应用于拖拽元素，整个拖拽过程都会不断回调这个方法
- ondragleave：应用与拖拽元素，当鼠标离开拖拽元素时被回调
- ondragend：应用于拖拽元素，当拖拽结束时被回调
- ondragenter：应用于目标元素，当拖拽元素进入目标元素区域时被回调
- ondragover：应用于目标元素，当拖拽元素停留在目标元素上时会不断回调这个方法
- ondrop：应用于目标元素，当在目标元素上松开鼠标时被回调
- ondragleave：应用于目标元素，当鼠标离开目标元素区域时被回调
当拖拽元素悬浮在目标元素上方时，可以设置鼠标样式，代码如下：
```
target.ondragover = function(event) {

    event.preventDefault();

};
```

HTML5 全屏

HTML5允许用户自定义网页上的任意元素全屏显示，代码如下：

// 请求全屏代码：

if (elem.requestFullscreen) { // 可以默认请求全屏，screen小写

    elem.requestFullscreen();

} else if (elem.mozRequestFullScreen) { // 可以火狐请求全屏，Screen大写

    elem.mozRequestFullScreen();

} else if (elem.webkitRequestFullScreen) {  // 可以webkit请求全屏，Screen大写

    elem.webkitRequestFullScreen();

}

// 取消全屏代码：

if (elem.cancelFullscreen) {

    elem.cancelFullscreen();

} else if (elem.mozCancelFullScreen) {

    elem.mozCancelFullScreen();

} else if (elem.webkitCancelFullScreen) {

    elem.webkitCancelFullScreen();

}

HTML5 WEB存储

传统的WEB存储方式：使用document.cookie存储。
- 缺陷一：存储大小只有4K左右，太小
- 缺陷二：需要使用截取字符串的方式解析，麻烦
HTML5提出的WEB存储方案：Storage存储，这种方式存储，可能存储在浏览器内存里面（window.sessionStorage），也有可能存储在计算机硬盘里面（window.localStorage）。使用这种方式存储数据的特性有：
- 设置、读取方便
- 容量较大：sessionStorage约5M，localStorage约20M
- 只能存储字符串，如果是对象，可以先转化成字符串（JSON.stringify），然后存储
浏览器存储：window.sessionStorage
- 生命周期到管理浏览器窗口为止
- 在同一个窗口下，数据可以共享
本地存储：window.localStorage
- 永久存储，除非手动删除
- 可以多窗口共享

使用方法（方法相同，这里以sessionStorage为例）：

window.sessionStorage.setItem("username", "zhangsan"); // 存储数据

var value = window.sessionStorage.getItem("username"); // 获取数据

window.sessionStorage.setItem("username", "lisi"); // 修改数据

window.sessionStorage.removeItem("username"); // 删除数据

window.sessionStorage.clear(); // 清空数据

查看存储位置方法：浏览器->F12打开开发者工具->Resource->local/session storage

HTML5 检测网络状态

// 当用户网络连接后回调的事件：

window.addEventListener("online", function() {

    alert("网络已连接！");

});

// 当用户断开网络连接后回调的事件：

window.addEventListener("offline", function() {

    alert("网络已断开！");

});

HTML5 应用缓存

HTML5支持应用缓存，需要创建一个cache manifest（缓存清单）文件
HTML5应用缓存的优势：
- 可配置需要缓存的资源
- 网络无连接时，应用仍可用
- 本地读取缓存资源，提升访问速度，增强用户体验
- 减少请求，缓解服务器负担

操作流程：

创建缓存清单文件：创建一个文件，以.appcache为后缀名，如my.appcache
在HTML页面中添加如下代码：
```
<html manifest="my.appcache">
```

appcache文件结构如下所示：

CACHE MANIFEST

# .appcache文件以“#”开启注释

# 可以缓存网络文件，也可以缓存本地文件，本地文件用相对路径

CACHE:  # 指定需要缓存的静态资源：

    http://...........jpg

NETWORK:  # 指定要在线能访问的资源：

    http://...........jpg

FALLBACK:  # 当页面无法访问时，跳转到的页面：

    404.html

HTML5 地理定位

HTML5新增了获取用户地理信息的API

简单代码如下：

if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(onSuccess, onError);

} else {

    alert("你的浏览器不支持地理定位！");

}

function onSuccess (position) {

    var latitude = position.coords.latitude; // 获取维度

    var langitude = position.coords.longitude; // 获取经度

}

function onError (error) {

    alert(error);

}