HTML - HTML5 - 《计算机 | computer》

input 属性
表单
- 表单元素
- 表单事件
  - oninvalid
  - setCustomValidity
兼容
DOM 元素对象
- classList
自定义属性
API 接口

笔记视频：https://www.bilibili.com/video/BV1xv411q7vD?p=1

input 属性

autocomplate

提示完整信息

默认值为 on 启用自动完成功能，off 禁用自动完成功能

前提条件是必须成功提交过，并且当前元素必须有 name 属性/

<input type="text" name="userName" placeholder="请输入用户名" autocomplate="on">

multiple

属性规定允许用户输入到元素的多个值。

在 type=”file” 中可以选择多个文件

在 type=”email” 中允许输入多个邮箱，以逗号分隔

<input type="file" multiple>

form

form 属性规定元素所属的一个或多个表单。

form 可以指定一个表单 id，当 id 的表单提交时，也会将当前表单元素的数据进行提交

<form action="" id="myForm"> 
    <input type="text" name="userName"> 
    <input type="submit"> 
</form> 
<input type="text" name="address" form="myForm">

表单

表单元素

datalist

注意：

大多数浏览器不兼容或显示效果不一致

如果 input 类型是 url 时，那么 value 的值必须添加 http://

与标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

<form action="demo_keygen.asp" method="get"> 
  用户名: <input type="text" name="usr_name"><br> 
  加密: <keygen name="security"><br> 
  <input type="submit"> 
</form>

output

标签定义不同类型的输出，比如脚本的输出。

没有实际作用，语义化标签

表单事件

oninvalid

当提交元素无效时，会发生 oninvalid 事件。

当想要改变浏览器默认的提示信息时，可以使用 setCustomValidity

<input type="text" oninvalid="alert('You must fill out the form!');" required>

setCustomValidity

用于自定义错误提示信息的内容。

<input type="text" oninvalid="this.setCustomValidity('请输入内容')" required>

兼容

HTML5 定了 8 个新的 HTML 语义元素。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

<script>
  document.createElement("header");
  ...
</script>

header, section, footer, aside, nav, article, figure
{
    display: block;
}

还可以使用 HTML5 Shiv Javascript 脚本来解决 IE 的兼容问题。

下载后，将以下代码放入到网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

DOM 元素对象

classList

MDN文档

返回元素的类名，作为 DOMTokenList 对象。

与 className 相比，classList 通过 add() 方法添加的类不会覆盖原有的类

还能通过 getAttribute() 方法获取指定属性的值

自定义属性

全局属性MDN文档 dataset的MDN文档

data-开头
data-后必须至少有一个字符，多个单词使用 - 连接
使用 dataset 获取自定义属性值(参数必须使用 camel 命名法)

建议：

名称应该都使用小写
名称中不要有任何的特殊符号
名称不要使用纯数字

<p data-school-name="test">测试</p>

<script>
  window.onload = function () {
    var p = document.querySelector("p");
    // data-后面的单词使用 camel 命名法连接
    var value = p.dataset["schoolName"];
  }
</script>

API 接口

全屏接口

MDN文档

requestFullScreen()：开户全屏显示
- 该方法是一个 element 对象
cancelFullScreen()：退出全屏显示
- exitFullScreen() ??
- 该方法是一个 document 对象
fullScreenElement：是否是全屏状态

注意：

不同浏览器需要为每个方法添加不同的前缀

chrome: webkit
firefox：moz
ie：ms
opera：o

将浏览器前缀兼容封装成函数：

function toFullVideo(){

  if(videoDom.requestFullscreen){

    return videoDom.requestFullscreen();

  }else if(videoDom.webkitRequestFullScreen){

    return videoDom.webkitRequestFullScreen();

  }else if(videoDom.mozRequestFullScreen){

    return videoDom.mozRequestFullScreen();

  }else{

    return videoDom.msRequestFullscreen();

  }

}

读取文件

FileReader的MDN文档 FileList的MDN文档

FileReader 对象（FileReader 是一个构造函数）允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

方法：

abort()
中断读取
readAsBinaryString()
读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件（例如传给服务器进行存储）。
readAsDataURL()
读取文件后 result 属性中包含一段以 data: 开头的字符串（base64编码），这段字符串的本质就是 DataURL 格式
readAsText()
读取文本文件（可以使用 Txt 打开的文件），返回文本字符串，默认编码是 UTF-8

事件：

onabort 读取文件中断片时触发
onerror 读取错误时触发
onload 文件读取成功完成时触发
onloadend 读取完成时触发，无论成功还是失败
onloadstart 开始读取时触发
onpropress 读取文件过程中持续触发

<input type="file" onchange="getFileContent()" name="" id="myFile">
<img src="" alt="预览">

<script>
  function getFileContent() {
    // 创建文件读取对象
    var reader = new FileReader();
    var file = document.querySelector("input");
    // 获取的文件会存储在 FileList 数组中
    // 可以通过 input 的 files 属性来获取
    var fileData = file.files;
    reader.readAsDataURL(fileData[0])
    // 读取后的结果将存储在文件读取对象的 result 属性中
    // 通过 onload 事件才可以获取
    reader.onload = function () {
      // 实现预览
      document.querySelector("img").src = reader.result;
    }
  }
</script>

拖放对象

事件：

拖拽元素
- ondrag 整个拖拽过程都会调用
- ondragstart 当拖拽开始时调用
- ondragleave 当鼠标与拖拽元素脱离元素时调用
- ondragend 当拖拽结束时调用
目标元素
- ondragenter 当鼠标与拖拽元素进入时调用
- ondragover 当停留在目标元素上时调用
- ondrop 当在目标元素上松开鼠标时调用
- ondragleave 当鼠标离开目标元素时调用

浏览器默认会阻止 ondrop 事件，必须在 ondragover 中阻止浏览器默认行为才会触发
e.prevenDefault

event.preventDefault 文档 DataTransfer 文档

<div class="div1" id="div1">
  <p id="p" class="p" draggable="true">试着把我拖过去</p>
</div>
<div class="div2" id="div2"></div>

<script>
  var obj = null;
  var p = document.querySelector("#p");

  document.ondragstart = function (e) {
    // 通过 dataTransfer 的 setData() 方法来存储数据
    // setData(format, data)
    e.dataTransfer.setData("text/html", e.target.id);
  }

  // 清除默认事件
  document.ondragover = function (e) {
    e.preventDefault();
  }

  document.ondrop = function (e) {
    // 获取 dataTransfer 中存储的数据
    var id = e.dataTransfer.getData("text/html");
    e.target.appendChild(document.getElementById(id));
  }
</script>

地理定位

菜鸟教程文档 Navigator.geolocation 文档 getCurrentPosition 方法文档 positionOptions 对象文档

Geolocation.getCurrentPosition() 方法用来获取设备当前位置。

语法

navigator.geolocation.getCurrentPosition(success, error, options)

参数

success

成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数。

error

获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数，这是一个可选项。

option

一个可选的PositionOptions 对象。

var options = {
  enableHighAccuracy: true,  // 是否使用高精度
  timeout: 5000,  // 设置超时时间
  maximumAge: 0  // 设置重新获取地理信息的时间间隔
};

// 获取成功
function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log('Latitude : ' + crd.latitude);  // 纬度
  console.log('Longitude: ' + crd.longitude);  // 经度
  console.log('More or less ' + crd.accuracy + ' meters.');  // 精度
  console.log('More or less ' + crd.altitude + '.');  // 海拔高度 
};

// 获取失败
function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

// 获取地理位置
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(success, error, options);
    }
    else
    {
        console.log("该浏览器不支持定位");
    }
}

使用第三方 API

百度地图开放平台

web 存储

sessionStorage 文档 localStorage 文档菜鸟教程文档

sessionStorage

用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

语法：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
// 在删除的时候如果 key 值错误，不会报错
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

localStorage

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动删除。

语法：

// 保存数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据
// 在删除的时候如果 key 值错误，不会报错
localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据
localStorage.clear();

注意：存储在 sessionStorage 或 localStorage 中的数据特定于页面的协议。也就
是说 **http**://example.com 与 **https**://example.com 的 sessionStorage 相互隔离。

应用程序缓存

MDN文档菜鸟教程

浏览器会默认缓存文件，一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件

如需启用应用程序缓存，请在文档的标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Manifest 文件

manifest 文件的建议的文件扩展名是：”.appcache”。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接(实时更新的内容)，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

注意：manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

实例：
**

# CACHE MANIFEST 必须是第一句
CACHE MANIFEST
/theme.css
/logo.gif
/main.js

# 每一次都需要从服务器重新获取
NETWORK:
login.php

# 文件无法获取时使用指定的文件进行替代
#  第一个 URI 是资源，第二个是替补
FALLBACK:
/html/ /offline.html

可以使用星号(*)来指示所有其他资源/文件都需要因特网连接或缓存

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存