【前端】之HTML5基础知识

时间 2019-11-13

标签前端 html5 html 基础知识栏目 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的引用。方法以下：javascript

<!--[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使用，代码以下：html

<!-- text表单右侧有一个下拉箭头，能够直接下拉；输入时能够模糊匹配 -->
<input type="text" list="cars" />
<datalist id="cars">
  <option>宝马</option>
  <option>宝骏</option>
  <option>宝宝</option>
</datalist>

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

<form action="">
  <fieldset>
      <legend>用户验证表单</legend> <!-- 标题 -->
      <!-- 这里写其余标签代码 -->
  </fieldset>
</form>

<label>标签：点击该标签中的文本，能够触发该标签中的表单的焦点，代码以下：java
```
<label>
  姓名：<input type="text"/>
</label>
```
<keygen>标签：加密标签，保证数据传输安全，能够选择不一样强度的加密，代码以下：jquery
```

加密：<keygen/>
```

<meter>标签：度量器，相似温度计，根据在不一样的值区间显示不一样的颜色，代码以下：git

<!-- 当在low和high之间时显示绿色，不然显示黄色 -->
<meter max="100" min="0" low="30" high="70" value="50"></meter>

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

<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、.mp三、.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、.mp四、.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);
}