一、html标签的类型

head：头部元素

body：文档内容

!Doctype：浏览器对当前页面采用哪个html版本进行编写

二、HTML5的新特性

1.1 新增语义化标签

article、footer、header、nav、section、aside

主要针对搜索引擎

在ie9中，需要转换为块级元素

1.2 多媒体标签

1.2.1 视频标签-video

<video src='视频地址' >
    <source src="...mp4" type="video/mp4"></source>
</video>

常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放 (谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	摇放完是否继续插放该视频，循环摇放
preload	auto(预先加载视频) none (不应加载视频)	规定是否预加载视频（如果有了autoplay 就忽略该属性）
src	url	视频url地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音摇放

1.2.2 音频标签

1.2.2.1 音频标签——

语法：

<audio src='音频地址'></audio>

浏览器	MP3	Wav	Ogg
Intemnet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

1.2.2.2 音频标签——常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的 URL。

谷歌默认把视频和音频的自动播放禁止了

1.3 增强表单控件

1.3.1 新增input表单类型

属性值	描述
type="email“	限制用户输入必须为Email类型
type="url"	限制用户输入必须为URL类型
type="date"	限制用户输入必须为日期类型
type="time”	限制用户输入必须为时间类型
type="month“	限制用户输入必须为月类型
type="week"	限制用户输入必须为周类型
type="number"	限制用户输入必须为数字类型
type="tel"	手机号码
type="search"	搜索框
type="color"	生成一个颜色选择表单

重点记住：number、tel、search

<input type='search'>

1.3.2 新增input表单属性

属性	值	描述
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单提示信息，存在默认值不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=”on“，关闭 autocomplete =”off"。需要放在表单内，同时加上 name 属性，同时成功提交
multiple	multiple	可以多选文件提交

/* 表单内容不为空 */
<input type='text' required>

/* 关闭提交过的表单信息显示 默认开启*/
<input type='text' autocomplete='off'>

/* 提示信息*/
<input type='text' placeholder='提示信息'>

/* 多文件提交 */
<input type='file' multiple='multiple'>

可以通过伪元素来修改placeholder的字体颜色

input::placeholder{
    color:pink;
}

1.4 新增选择器

document.querySelector、document.querySelectorAll

1.5 离线应用 (manifest)

首先manifest是一个后缀名为minifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。

当我们第一次正确配置app cache后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的app cache，如果没有变动，就会直接把app cache的资源返回，基本流程是这样的。

特点:

离线浏览: 用户可以在离线状态下浏览网站内容。

更快的速度: 因为数据被存储在本地，所以速度会更快.

减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

1.5.1 .manifest文件构成

CACHE MANIFEST
#version 1.3
 
CACHE:
    test.css
 
NETWORK:

1.5.2 清除浏览器缓存

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
<meta http-equiv="expires" content="0">

1.5.3 自动化工具

安装

npm install grunt-manifest --save-dev

配置

grunt.loadNpmTasks('grunt-manifest');


grunt.initConfig({
  manifest: {
    generate: {
      options: {
        basePath: "../",		// 设置出入文件的根目录
        cache: ["js/app.js", "css/style.css"] // 手动添加缓存文件
        network: ["http://*", "https://*"], // 手动添加网络文件
        fallback: ["/ /offline.html"], //  手动添加后备文件
        exclude: ["js/jquery.min.js"], // 设置不添加到cache的文件
        preferOnline: true, 
        verbose: true, // 是否添加版权信息
        timestamp: true // 是否添加时间戳
      },
      src: [
            "some_files/*.html",
          "js/*.min.js",
          "css/*.css"
      ],
      dest: "index.manifest"
    }
  }
});

1.6 桌面通知(Notifications)

(function notifyMe() {
    // 先检查浏览器是否支持
    if (!("Notification" in window)) {
        alert("抱歉，此浏览器不支持桌面通知！");
    }

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47c6f86fb2e64118ab9029b88b100237~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1245&h=314&s=136932&e=png&b=ffffff)
    // 检查用户是否同意接受通知
    else if (Notification.permission === "granted") {
        let notification = new Notification('你好', {
            icon: './1.jpg', //  一个图片的 URL，将被用于显示通知的图标。
            tag: 'info', // 赋予通知一个 ID，以便在必要的时候对通知进行刷新、替换或移除。
            body: '你有xxx条新消息',    //  通知中额外显示的字符串
            dir: "ltr", // 文字的方向；它的值可以是 auto(自动),ltr(从左到右),or rtl(从右到左)
            requireInteraction: true
        });
    }

    // 否则我们需要向用户获取权限
    else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(permission => {
            // 如果用户同意，就可以向他们发送通知
            if (permission === "granted") {
                // 调上边
            }
        });
    }
})()

1.7 拖拽释放(Drag and drop) API

draggable 属性：

设置元素的 draggable 属性为 "true"，使元素变得可拖动。

ondragstart：

当用户开始拖动元素时触发此事件。在此事件处理器中，通常会使用 event.dataTransfer 对象来设置要拖动的数据，通过 event.dataTransfer.setData(format, data) 方法定义数据格式和内容。

ondrag：

拖动过程中持续触发的事件，主要用于更新拖动状态或显示反馈。

ondragend：

用户完成拖动操作（释放鼠标按键）时触发，常用于清理拖放操作后的状态。

ondragenter / ondragover：

当拖动元素进入目标元素上方时触发。ondragover 事件中通常需要调用 event.preventDefault() 阻止默认行为，以便允许元素接收被拖动的数据。

ondrop：

当拖动元素在可放置的目标元素上释放时触发。在这个事件处理器中，可以调用 event.dataTransfer.getData(format) 获取之前设置的数据，并执行实际的放置逻辑。

DataTransfer 对象：

这是一个关键的对象，用于在拖放过程中传输数据，包含数据项以及拖放图像等功能。

通过组合使用这些API，开发者能够轻松地实现网页元素之间的拖放功能，如文件上传、布局调整、卡片拖拽排序等多种交互场景。

1.8 本地存储 localStorage 和 sessionStorage

localStorage

持久性：数据在用户访问网站期间持久保存，即使浏览器关闭后重新打开，存储的数据依然存在，直到明确通过代码删除或者用户清理浏览器缓存和数据。

容量：提供大约5MB的空间（具体取决于浏览器实现），可用于存储键值对形式的数据。

数据类型：虽然API仅支持存储字符串，但可以通过JSON.stringify()序列化对象或其他复杂数据类型，然后JSON.parse()反序列化以读取。

作用域：同一源（协议、主机名和端口相同）下的所有页面都可以访问同一份localStorage数据。

安全性和隐私：数据不会随HTTP请求发送到服务器，只保留在用户的本地环境中。

sessionStorage

生命周期：数据仅在当前浏览器会话期间有效，当浏览器窗口或标签页关闭后，存储的数据会被清除。

作用域：类似于localStorage，同源策略同样适用，但每个标签页或窗口有自己的独立sessionStorage实例，也就是说，同一个源的不同窗口之间无法共享sessionStorage中的数据。

其它属性：其他特性与localStorage相似，包括存储空间限制、数据类型处理方式等。

1.9 地理位置 Geolocation

function errorHandler(err) {
    if (err.code == 1) {
        alert("Error: Access is denied!");
    } else if (err.code == 2) {
        alert("Error: Position is unavailable!");
    }
}

// 获取用户当前位置
navigator.geolocation.getCurrentPosition(position => {
    const { latitude, longitude } = position.coords;
    // console.log(latitude, longitude);
    alert("Latitude : " + latitude + " Longitude: " + longitude);
}, errorHandler, {timeout: 60000});

// 持续获取用户位置
const watchId = navigator.geolocation.watchPosition(position => {
    const { latitude, longitude } = position.coords;
    console.log(latitude, longitude);
});

// 停止持续获取用户位置
navigator.geolocation.clearWatch(watchId);

1.10 多任务 webworker

// main.js
const myWorker = new Worker('/worker.js');
const first = document.querySelector('input#number1');
const second = document.querySelector('input#number2');

first.onchange = () => {
    // myWorker.postMessage([first.value, second.value]);
    myWorker.postMessage('From Main Thread');
    console.log('Message posted to worker');
}
myWorker.addEventListener('message', event => {
    console.log(event.data);
})

// worker.js  <=== new Worker("/worker.js")
this.addEventListener("message", (event) => {
    console.log(event.data);
    this.postMessage('From Worker Thread');
})

1.11 历史管理 history

history.pushState(state, title, url):

这个方法允许开发者在浏览器的历史记录栈中添加一个新的状态，并且改变当前URL，而不需要重新加载页面。state 参数可以是任何类型的JavaScript对象，用来存储与当前状态相关联的数据；title 参数虽然可以设置，但在现代浏览器中已经不再使用；url 参数是希望更新到的新URL，它可以是相对URL。

history.replaceState(state, title, url):

类似于 pushState，但它不是添加一个新的历史记录，而是替换当前历史记录的状态。这意味着当用户点击后退按钮时，不会回到使用 replaceState 更改前的那个URL状态。

history.go(delta):

使用整数值 delta 来前进或后退指定数量的历史记录。例如，history.go(-1) 相当于点击后退按钮，而 history.go(1) 相当于点击前进按钮。

history.back():

返回到上一个历史记录位置，相当于后退一个页面。

history.forward():

前进到下一个历史记录位置，相当于前进一个页面。

history.length:

表示当前历史记录栈中的项目数量，可以用来检查是否有前进或后退的历史记录。

通过History API，开发者可以构建SPA（Single Page Application）这样的应用，实现页面内容的动态切换，而无需实际发生页面刷新，同时还能保持良好的导航历史记录，让用户能够通过浏览器的前进/后退按钮正常地浏览这些“虚拟”的页面跳转。

三、伪类和伪元素

伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。

例如，我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。

四、html5语义化标签

<title>      <!--：页面主体内容。-->
<hn>         <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>         <!--：无序列表。-->
<li>         <!--：有序列表。-->
<header>     <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>        <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>       <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article>    <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>    <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>      <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer>     <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small>      <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>     <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>         <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>       <!--：使用黄色突出显示部分文本。-->
<figure>     <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption> <!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite>       <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>          <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>       <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr>       <!--：简称或缩写。-->
<dfn>        <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>    <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>        <!--：移除的内容。-->
<ins>        <!--：添加的内容。-->
<code>       <!--：标记代码。-->
<meter>      <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress>   <!--：定义运行中的进度（进程）。-->

五、audio 标签的api

5.1 常用属性

属性	属性值	注释
src	url	播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持）
preload	preload	预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。
loop	loop	循环播放
controls	controls	是否显示默认控制条（控制按钮）
autoplay	autoplay	自动播放

5.2 属性

属性	注释
duration	获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN
paused	如果媒体文件被暂停，那么paused属性返回true，反之则返回false
ended	如果媒体文件播放完毕返回true
muted	用来获取或设置静音状态。值为boolean
volume	控制音量的属性值为0-1;0为音量最小，1为音量最大
startTime	返回起始播放时间
error	返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码： 1.用户终止 2.网络错误 3.解码错误 4.URL无效
currentTime	用来获取或控制当前播放的时间，单位为s。
currentSrc	以字符串形式返回正在播放或已加载的文件

5.3 常用事件

事件名称	事件作用
loadstart	客户端开始请求数据
progress	客户端正在请求数据（或者说正在缓冲）
play	play()和autoplay播放时
pause	pause()方法促发时
ended	当前播放结束
timeupdate	当前播放时间发生改变的时候。播放中常用的时间处理哦
canplaythrough	歌曲已经载入完全完成
canplay	缓冲至目前可播放状态。

HTML5 新特性 基础知识笔记分享

一、html标签的类型

二、HTML5的新特性

1.1 新增语义化标签

1.2 多媒体标签

1.2.1 视频标签-video

1.2.2 音频标签

1.2.2.1 音频标签——

1.2.2.2 音频标签——常见属性

1.3 增强表单控件

1.3.1 新增input表单类型

1.3.2 新增input表单属性

1.4 新增选择器

1.5 离线应用 (manifest)

1.5.1 .manifest文件构成

1.5.2 清除浏览器缓存

1.5.3 自动化工具

1.6 桌面通知(Notifications)

1.7 拖拽释放(Drag and drop) API

1.8 本地存储 localStorage 和 sessionStorage

1.9 地理位置 Geolocation

1.10 多任务 webworker

1.11 历史管理 history

三、伪类和伪元素

四、html5语义化标签

五、audio 标签的api

5.1 常用属性

5.2 属性

5.3 常用事件

HTML5 新特性基础知识笔记分享