您的位置: 首页  >  文章  >  HTML5简单笔记

HTML5简单笔记

分类: 文章 • 2024-04-01 21:17:22

HTML5新标签与特性

w3c 手册中文官网 : http://w3school.com.cn/

语义标签

注意：在IE9及以上才支持，但可能解析为行内元素，需转换为块级元素。IE8及以下可以引入第三方插件html5shiv.js来达到兼容。

  • header：定义文档的页眉 头部
  • nav：定义导航链接的部分
  • main：定义主要内容
  • footer：定义文档或节的页脚 底部
  • article：定义文章。
  • section：定义文档中的节（section、区段）
  • aside：定义其所处内容之外的内容 侧边
<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<main> 语义：主要内容</main>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>

新增表单元素

  • datalist 标签定义选项列表。请与 input 元素配合使用该元素**(各浏览器略有不同，少用)**
<input type="text" value="输入明星" list="star"/><!-- input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
      <option value="刘德华" label="提示信息（辅助）"></option>
      <option value="刘若英" label="提示信息（辅助）"></option>
      <option value="刘晓庆" label="提示信息（辅助）"></option>
      <option value="郭富城" label="提示信息（辅助）"></option>
      <option value="张学友" label="提示信息（辅助）"></option>
      <option value="郭郭" label="提示信息（辅助）"></option>
</datalist>
  • fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用
  <fieldset>
      		<legend>用户登录</legend>  <!-- 标题 -->
      		用户名: <input type="text"><br /><br />
      		密　码: <input type="password">
  </fieldset>

新增的input type属性值：

类型 使用示例 含义
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”> *拖动滑块
time <input type=“time”> 小时分钟
date <input type=“date”> 年月日
datetime <input type=“datetime”> 时间
month <input type=“month”> 月年
week <input type=“week”> 星期 年
color <input type=“color”> 拾色器

新增的input属性

属性 用法 含义
placeholder <input type=“text” placeholder=“请输入用户名”> 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus <input type=“text” autofocus> 规定当页面加载时 input 元素应该自动获得焦点
multiple <input type=“file” multiple> 多文件上传，多邮件
autocomplete <input type=“text” autocomplete=“off”> 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮
2.这个表单必须有name
required <input type=“text” required> 必填项 内容不能为空
accesskey <input type=“text” accesskey=“s”> 规定**（使元素获得焦点）元素的快捷键 采用 alt + s的形式
pattern <input type=“text” pattern=“正则表达式”> 使用正则表达式
form <input type=“text” form=“form表单id”> 指定id表单进行数据提交
accept <input type =“file” accept=“image/*”> 限制上传文件的文件类型（不是新增属性）

新增进度条（较少用，一般div自定义）

  • 进度条
    属性：max最大值，value当前进度
  • 度量器
    属性：
    high规定较高的值
    low规定的较低的值
    max最大值
    min最小值
    value当前值

多媒体标签

  • embed：标签定义嵌入的内容
  • audio：播放音频
  • video：播放视频

多媒体 embed（会使用就行）

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。有兼容性问题。
本质是调用本机上已经安装的软件。

多媒体 audio

通过<audio>标签来解决音频播放的问题。
如下图所示
HTML5简单笔记
并且可以通过附加属性可以更友好控制音频的播放，如：

  • autoplay 自动播放
  • controls 是否显不默认播放控件
  • loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考
HTML5简单笔记
多浏览器支持的方案，如下
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<audio controls>
    <!-- 通过source标签指定多格式音频文件 -->
	<source src="./music/See You Again.mp3">
    <source src="./music/See You Again.wav">
    <source src="./music/See You Again.ogg">
    您的浏览器不支持HTML音频播放功能
</audio>

多媒体 video

通过<vudio>标签来解决音频播放的问题。
HTML5简单笔记
同样，通过附加属性可以更友好的控制视频的播放

  • autoplay 自动播放
  • controls 是否显示默认播放控件
  • loop 循环播放
  • width 设置播放窗口宽度
  • height 设置播放窗口的高度
  • poster当视频还没有完全下载，或者用户还没有点击播放时的封面

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考
HTML5简单笔记
多浏览器支持的方案与audio一样。

网络状态改变事件（了解，与元素无关，与页面window有关）

  • ononline()：网络连通的时候触发。
  • onoffline()：网络断开时触发。

全屏接口

主要方法和属性（兼容操作(if判断)）

描述
requestFullScreen() 开启全屏显示
cancelFullScreen() 退出全屏显示
fullScreenElement 判断是否是全屏状态

注意：

  1. 不同浏览器要添加不同的前缀。
    • chrome：webkit
    • firefox：moz
    • ie：ms
    • opera：o
   document.webkitCancelFullScreen();
  1. 退出全屏和判断是否全屏只能用document来实现。

文件读取接口FileReader

属性和方法 描述
readAsText() 读取文本文件(即可使用Txt打开的文件)，返回文本字符串，默认utf-8
readAsBinaryString() 读取任意类型文件，返回二进制字符串，一般用于存储文件
readAsDataURL() 读取文件获取一般以data开头的字符串，这段字符串的本质就是DataURL。接收一个参数Blob二进制大对象，没有返回值，但读取完之后会把结果存储在文件读取对象的result中。
abort() 中断读取
onabort 读取文件中断时触发
onerror 读取错误时触发
onload 读取成功完成时触发
onloadend 读取完成时触发，无论成功还是失败
onloadstart 开始读取时触发
onprogress 读取文件过程中持续触发

DataURL是一种将文件（一般指图像或能够嵌入到文件的文件格式）嵌入到文档的方案。将资源转换为base64编码的字符串形式，并且将这些内容之间存储在url中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
即时预览
即时，当用户选择完图片后立即进行预览的处理
预览：通过玩家读取图像的readdAsDataURL()完成
-->
<form action="">
    文件：<input type="file" id="myFile" onchange="getFileContent()"><br>
    <img src="">
    <input type="submit">
</form>
<script>
    function getFileContent() {
        // 创建文件读取对象
        var reader = new FileReader();
        // 读取文件
        var file = document.getElementById("myFile").files;//返回一个数组
        reader.readAsDataURL(file[0]);
        reader.onload= function () {
            // console.log(reader.result);
            document.querySelector("img").src=reader.result;
        };
    }
</script>
</body>
</html>

拖拽接口

想要拖拽元素，就必须为元素添加draggable=“true”，图片和超链接默认就可以拖拽。
浏览器默认阻止ondrop事件，需在ondragover中利用e.preventDefault()阻止此默认行为。
一般利用document来添加拖拽事件，再利用添加节点来添加拖拽元素到目标元素。

方法 描述
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
ondragenter 应用用目标元素，当拖拽元素进入时调用
ondragleave 应用用目标元素，当鼠标离开目标元素时调用
ondragover 应用用目标元素，当停留在目标元素上时调用
ondrop 应用用目标元素，当在目标元素上松开鼠标时调用

在进行拖放操作时，**DataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。**它可以保存一项或多项数据、一种或者多种数据类型。通过setData(数据类型，字符串值)设置，数据类型有text/html, text/uri-list。只能在ondrop中取值。

	 e.dataTransfer.setData("text/html",e.target.id)；
	 e.dataTransfer.getData("text/html");

地理位置接口（少用，大多利用第三方接口）

浏览器是自己选择最优定位方式。

HTML5简单笔记

地理位置属于私密信息，所以浏览器会弹出提示框请求，同意才可获取。
navigator.geolocation首先if判断浏览器是否支持地理定位。它有一个getCurrentPosition()方法来获取当前定位。
getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息。

  • successCallback获取地理信息成功之后回调，并返回一个包含位置信息的对象position给回调函数。
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
  • errorCallback获取地理信息失败之后回调，并返回错误信息error给回调函数。
error.PERMISSION_DENIED用户拒绝请求
error.POSITION_UNAVAILABLE定位信息不可用
error.TIMEOUT请求超时
error.UNKNOWN_ERROR未知错误
  • options调整获取当前地理位置方式（少用）
enableHighAccuracy:true/false是否使用高精度
timeout:设置超时时间，单位ms
maximumAge:重新获取时间间隔，单位ms

**第三方接口：**去打开某一地图，进入其开发平台，获取JavaScript的API。

web存储

  1. sessionStorage存储数据到本地，容量5mb左右，本质存储在当前页面的内存中，声明周期为关闭当前页面，关闭后会自动清除。
  2. localStorage存储大概20mb，不同浏览器不能共享数据，永久生效，存储在硬盘上，不会随页面关闭而清除。
    都含有一下方法（用法一样）：
    | 方法 | 描述 |
    | ------------------- | -------------------- |
    | setItem(key, value) | 以键值对方式存储数据 |
    | getItem(key) | 获取数据 |
    | removeItem(key) | 删除数据 |
    | clear() | 清空所有存储内容 |
例：window.localStorage.setItem("name","张三");

应用缓存（了解）

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
优势：
1. 可配置需要缓存的资源
2. 网络无连接应用仍可用
3. 本地读取缓存资源，提升访问速度，增强用户体验
4. 减少请求，缓解服务器负担

Cache Manifest 基础：

  1. 如需启用应用程序缓存，在文档的 标签中包含 manifest:缓存文件名。建议扩展名为.appcache。
    注意:manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置
  2. Manifest 文件编辑
    • CACHE MANIFEST 开始，必须在第一行
    • CACHE: 在此标题下列出的文件将在首次下载后进行缓存
    • NETWORK: 在此标题下列出的文件需要与服务器的连接，且不会被缓存
    • FALLBACK: 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
#需要缓存的文件清单列表
CACHE:
../images/1.jpg
# *代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/3.jpg
#配置如果文件无法获取则使用指定的文件代替
FALLBACK:
../images/4.jpg ../images/2.jpg
# /代表所有文件

说明：更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

自定义播放器

w3school：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

常用属性/方法 描述
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
load() 重新加载音频/视频元素
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
duration 返回当前音频/视频的长度（以秒计）
paused 设置或返回音频/视频是否暂停
事件 描述
oncanplay 当浏览器可以播放音频/视频时
timeupdate 当目前的播放位置已更改时
onended 当目前的播放列表已结束时

相关推荐