HTML基础常识问答（四）

html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题
新特性：

语义化更好的内容标签：

<header>标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。
<footer>标签一般配合address标签(显示地址)，包含作者信息、相关链接等。
<nav>标签一般包含多个a标签，构建导航组件。
<aside>标签主要装载广告、侧边栏。
<article>标签包含文章，一般内嵌header、footer、h1、p标签。
<section>标签可以用在以上任一一个标签中划分组件。
<hgroup>顾名思义是h1~h6的集合。
<time>定义日期或者时间，或者两者
<main>规定文档的主要内容（不能出现一个以上的main元素）
<figure>标签包含独立的媒体内容，图像、图标、照片等
<figcaption>标签定义figure的元素标题
<details>描述文档某个部分细节，而这个细节并不需要文档加载时就展示，而是可以折叠
<summary>默认显示的details元素的标题
<datalist>输入框提示列表（input的list属性值为datalist的id）
<progress>进度条。max 进度完成值，min 定义当前值
<mark>标记需要突出显示的文本

这些标签就是div标签的语义化的转化，过去我们使用div来包裹某块或组件，现在可以使用这些语义化标签，有利于代码的可读性和SEO
语义化标签在IE6-8有兼容问题，可以使用：

document.createElement('header')
document.createElement('nav')

这样js创建的标签没有样式，需要在css中定义，或者只用插件html5shiv来解决。

本地离线存储

localStorage长期存储数据，浏览器关闭后数据不丢失，相同浏览器的不同页面间可以共享相同的 localStorage，除非主动删除数据

sessionStorage数据存储在关闭浏览器之前，浏览器关闭后数据自动删除。

1.相同的使用方法,API基本是一样的
(1) localStorage API:
a.使用setItem设置储存内容:
localStorage.setItem(“name”,“123”)
localStorage.name = “123”;
localStorage[‘name’] = “123”
b.使用getItem获取储存内容:
localStorage.getItem(“name”)
localStorage.name
c.使用removeItem删除储存内容(删除指定key):
localStorage.removeItem(“name”)
d.使用clear方法清除储存内容(清除所有key):
localStorage.clear();
e.使用length属性,获取储存的key个数
localStorage.length
(2) sessionStorage API:基本和localStorage差不多

使用本地储存注意点:

存储容量超出限制,会抛出QuotaExceededError异常. 解决:储存时应使用try catch 避免异常未捕获

储存类型的限制,只能储存字符串

sessionStorage同一个url路径下,不同标签页不能共用储存内容.

如:我在a.html页面储存name,我打开另一个新标签,输入a.html的地址,则获取不到储存的name

存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。
以下是它的常用应用场景：
   var userData = {name : '张三',age: 24}localStorage.setItem('userDate', JSON.stringify(userData));var newUserData = JSON.parse(localStorage.getItem('userData'));
另外，浏览器提供了storage事件来监听存储,
  window.addEventListener('storage', showStorageEvent, true)
详细案例点这里

表单新增的属性控件
以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定如下：
<form id="testform"><input type="text" />
</form>
<input form=testform />
placeholder屬性
<input type="text" placeholder="请输入密码" />
autofocus属性，页面只能有一个
<input type="text" autofocus />
还有calendar、date、time、email、url、search 、tel、file、number等，这里就不提了

4.音频和视频

4.1: 以下属性可以直接写在video标签中
<video controls loop muted poster="res/x.png"><source src="res/x.mp4">您的浏览器版本太低请升级
</video>
成员属性：
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
poster 在播放第一帧画面之前广告(图片)
preload 视频加载策略

auto: 预加载一定时长视频和元数

metadata: 仅预加载元素数(尺寸，时长，第一帧画面)

none: 不加载任何内容

4.2 以下属性需要借助js才能使用:
对象属性:
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1）音量
playbackRate: 回放速率: 大于1快播小于1慢放
成员方法:
play() 播放视频
pause() 暂停视频播放
事件:
onplay 当视频开始播放触发事件
onpause 当视频暂停播放触发事件

4.3:以下属性可以直接写在audio标签中
成员属性
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
preload 视频加载策略
auto: 预加载一定时长视频和元数据
metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
none: 不加载任何内容

以下属性需要借助js才能使用:
##js对象属性
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1）音量
playbackRate: 回放速率: 大于1快播小于1慢放
#js 成员方法
play() 播放音频
pause() 暂停音频播放
#js 事件
onplay 当音频开始播放触发事件
onpause 当音频暂停播放触发事件

详细案例点这里

5.画布（Canvas）

canvas是什么？–> 画布

使用方法：
js获取画布–>获取笔（2d || 3d）–>开始画–>起点–>中间点–>绘制–>关闭绘制环境
var myCanvas = document.querySelector("#myCanvas");//获取canvas的上下文(整个画布中的内容)var ctx = myCanvas.getContext("2d");      ctx.lineWidth=4;//设置绘制的样式ctx.strokeStyle="aqua";//绘制ctx.fillStyle="yellow";//我要开始绘制ctx.beginPath();//起点ctx.moveTo(10,20);ctx.lineTo(210,20);ctx.lineTo(210,120);ctx.lineTo(10,120);//关闭路径ctx.closePath();ctx.fill();ctx.stroke();
能干什么？
色块、文字、阴影、图形、圆形arc、图片、视频–>优点是速度块

echarts底层就是canvas

canvas本身难点在于数学计算

布局:
一般就是行列布局使用for嵌套

详细案例点这里

6.地理定位（Geolocation）
html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找，地图应用，导航等功能。
地理位置定位基本原理
GPS, WIFI, IP, 手机信号基站
核心对象
Geolocation是window.navigator下面的一个对象，该对象提供了实现地理位置定位的接口。
要用该功能需先判断浏览器是否支持navigator.geolocation对象。

详细了解点这里

7.拖拽释放 (Drag and drop)
本章内容过大，不在本章详细叙述点击下方链接了解更多
属性和方法的详解
详细案例

8.离线缓存（applicationCache ）
简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载，用在静态数据的网页或游戏比较好用，这些文件包括html、js、css、img等文件。当然，Html5新的特性都不是所有浏览器都能支持的，离线缓存也一样。反正IE9（包括）及IE9以下的浏览器目前是不支持的。如果用在移动端，应该都能支持。
其实在有网络的时候，浏览器也会优先使用已离线存储的文件。而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。
详细了解点击这里

总结：
H5新特性：

新增选择器 document.querySelector、document.querySelectorAll

拖拽释放(Drag and drop) API

媒体播放的 video 和 audio

本地存储 localStorage 和 sessionStorage

离线应用 manifest

桌面通知 Notifications

语意化标签 article、footer、header、nav、section

增强表单控件 calendar、date、time、email、url、search

地理位置 Geolocation

多任务 webworker

全双工通信协议 websocket

历史管理 history

跨域资源共享(CORS) Access-Control-Allow-Origin

页面可见性改变事件 visibilitychange

跨窗口通信 PostMessage

Form Data 对象

绘画 canvas

H5移除的元素：
纯表现的元素：basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：frame、frameset、noframes

兼容问题
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架）：

HTML基础常识问答（四）相关推荐

十四个关于ASP.NET基础知识问答(C#版)
本文转自:乐猪网十四个关于ASP.NET基础知识问答(C#版) 这是一些ASP.NET很基础的东西,希望对ASP.NET爱好者特别是刚刚入门的朋友有所帮助虽然示例代码是C#.NET,但是不影响VB. ...
论文浅尝 | 通过知识到文本的转换进行知识增强的常识问答
笔记整理:陈卓,浙江大学在读博士,主要研究方向为低资源学习和知识图谱论文链接:https://www.aaai.org/AAAI21Papers/AAAI-10252.BianN.pdf 发表会议: ...
计算机奥林匹克竞赛基础知识,竞赛考什么？五大学科竞赛基础常识盘点
原标题:竞赛考什么?五大学科竞赛基础常识盘点继高校自主招生/综合评价认可奖项后,本文对五大学科竞赛进行盘点,从竞赛主办方.竞赛进程.竞赛考试范围.竞赛作用等方面进行分析,供家长和考生参考. 五大学科 ...
【Java开发语言 01】第一章 Java语言概述（基础常识+Java语言概述+Java程序运行机制及运行过程+Java语言环境的搭建+开发体验hello world+错误：编码GBK的不可映射字符)
java入门-第一章Java语言概述 1基础常识软件开发人机交互方式常用的DOS命令(win系统,有一些直接通过命令执行的) 2 Java语言概述什么是计算机语言关于面向对象和面向过程 Ja ...
北斗/GPS芯片/模块基本常识问答:
北斗/GPS芯片/模块基本常识问答: 1.什么叫双模芯片?有单独北斗芯片? 答: 北斗 GPS两用为双模.目前,没有单独北斗芯片的产品,单独北斗芯片都是测试实验.目前双模的芯片都可以设置成单独的北斗或 ...
论文浅尝 | 常识问答中的忠诚知识图解释
笔记整理:邹铭辉,天津大学硕士,研究方向为知识图谱链接:https://aclanthology.org/2022.emnlp-main.743 动机知识图谱通常被用作常识问答的信息来源,同时也可 ...
（一）PPC的基础常识
(一)PPC的基础常识一.什么是PDA PDA是Personal Digital Assistant的缩写,照中文翻译称为"个人数位助理",它只是个概念 ,大体上就是一个能更有效 ...
端口基础常识大全+常用端口对照
端口基础常识大全+常用端口对照 [color=Red][size=4][b]端口基础常识大全[/b][/size][/color] [color=Green]1) 公认端口(Well Known Po ...
常识知识确能被捕获，西湖大学博士探究BERT如何做常识问答
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达来自:机器之心 BERT 是通过常识知识来解决常识任务的吗? 预训练上下文化语言模型( ...
一级计算机基础第四套,《计算机应用基础》第四套考试与答案.doc
<计算机应用基础>第四套考试与答案 -------------------------------- 作者: -------------------------------- 日期: &l ...

HTML基础常识问答（四）

HTML基础常识问答（四）相关推荐

最新文章

热门文章