HTML5

最新推荐文章于 2022-01-18 11:31:42 发布

lu900618

最新推荐文章于 2022-01-18 11:31:42 发布

阅读量608

点赞数 1

分类专栏： HTML 文章标签： html web html5

本文链接：https://blog.csdn.net/lu900618/article/details/75268509

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML5

了解HTML5

HTML5 是 HTML 标记语言的一个最新版本
HTML5 制定了web应用开发的一系列标准, 成为第一个将web作为应用开发平台的HTML语言
日常所得H5其实是一个泛称, 他指的是由HTML5 + css3 + javascript等技术组合而成的应用开发平台.
HTML5 新增了一些元素, 如语义化的标签, 智能表单, 多媒体标签等.
HTML5 提供了javascript API: 地理位置, 重力感应, 硬件访问, 结合css3制作动画等等.
HTML5 默认的编码是utf-8, 可以大小写混写(不推荐)
HTML5 是跨平台的

语法规范

较之前相比更简洁, 更宽松

HTML5 的优点:
- 提高可用性和改进用户的友好体验.
- 新增的标签有益于开发人员定义重要的内容
- 可以给站点带来更多的多媒体元素(音频和视频)
- 可以很好的代替FLASH和silverlight
- 涉及到网站抓取和索引的时候, 对SEO友好
- 将被大量应用于移动应用程序和游戏
- 可移植性好
HTML5 的缺点
低版本的浏览器不支持, 很多标签浏览器支持效果不好, 也有安全漏洞.

语义化

语义化标签: 语义元素清楚地向浏览器和开发者描述其意义.
传统的做法是添加语义化类名, 如class="header", class="footer"等.
HTML5 则是通过标签语义化来解决这个问题.

常用语义化标签

标签	语义	备注
`<nav>`	导航
`<header>`	页眉
`<footer>`	页脚
`<section>`	区块
`<article>`	文章
`<aside>`	侧边栏
`<progress>`	进度条
`<figure>`	图形	与`<figcaption>`配合使用
`<figcaption>`	元素的标题	与`<figure>`配合使用

本质上与<div>, <span>没有区别, 但是其具有语义性
尽量避免全局使用header, footer, aside等语义标签.

兼容性

IE8以及以下版本, HTML5新增的标签会被解析成inline, 所以在 css 中要将其转换为块级元素(block), 在js代码中创建自定义的标签document.createElement('tagName').

<style>
 header{
   height: 100px;
   background-color: orangered;
   /*在低版本的ie中,如果想要显示h5的新语义标签,需要设置为block*/
   display: block;
 }
</style>
<script type="text/javascript">
 // 使用代码创建header标签
 document.createElement("header");
</script>

在实际开发中, 使用第三方js库 cc:ie6 (webstrom快捷键)

html5shiv.min.js 下载地址
```

```

微数据

在span, div等标签内添加属性, 让搜索引擎识别其含义.

itemscope：声明你所要添加的属性的作用域，加在最外层的元素。
itemtype：声明所使用的词汇表，加在最外层的元素中。
itemprop：声明属性名，具体的内容要参加所引用的词汇表。
html  <div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="reviewer">猪猪</span> <span itemprop="dtreviewed" datatime="2017-07-17T16:20:21">2017年7月17日16:20:48</span> <span itemprop="description"> 评论内容</span> </div>
WAI-ARIA: 针对残障人士开发应用

表单 form

表单分组: fieldset
分组名: legend

输入类型

类型	使用示例	含义	备注
email	`<input type="email">`	输入邮箱格式	提交时会验证格式, 但不会验证内容是否为空
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式	step 步长
search	`<input type="search">`	搜索框（体现语义化）	手机端会显示键盘
range	`<input type="range">`	自由拖动滑块
color	`<input type="color">`	拾色器
time	`<input type="time">`
date	`<input type="date">`
datetime	`<input type="datetime">`
month	`<input type="month">`
week	`<input type="week">`

input 表单验证

email 标签: 自带格式验证

提交时会验证格式, 做出提示. 但是不会验证空文本
required 属性: 非空验证

直接添加 required 即可, 无需赋值
```
<input type="tel" required>
```
pattern 自定义验证规则
- 在需要添加自定义的标签中添加 required
- 使用 pattern 后的正则表达式编写验证规则
```
<input type="tel" required pattern="[0-9]{3}">
```

自定义验证信息: 系统的提示信息只能够提示格式错误, 如果需要更为详细的提示内容则需要通过 javascript 自定义

注册事件
oninput 输入时
oninvalid 验证失败时
设置提示信息 setCustomValidity("这里输入提示信息")

<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>

<script>
    var telInput = document.getElementById("telInput");
    // 正在输入时
    telInput.oninput=function () {
        this.setCustomValidity("请正确输入您的手机号码");
    }
    // 验证失败时
    telInput.oninvalid=function(){
        this.setCustomValidity("您输入的手机号码不正确，请重新输入");
    };

</script>

表单元素

元素	含义	备注
`<datalist>`	数据列表	datalist的id匹配input的list属性, 子元素是option
`<keygen>`	生成加密字符串	表单需要定义name属性
`<output>`	输出结果
`<meter>`	度量器	low, high, value, min,max

+ datalist

id 属性, 匹配 input 的list , 即要指定 input的list=datalist的id

option:

value: 指定具体的值

label: 提示信息

如果 input 的 type 为 url , option 中对应的 value 需要使用 http 开始

网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
  <option label="W3School" value="http://www.W3School.com.cn"/>
  <option label="Google" value="http://www.google.com"/>
  <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
  <option value="186xxx" label="移动">移动</option>
  <option value="187xxx" label="联通">联通</option>
  <option value="135xxx" label="天翼">天翼</option>
</datalist>

~~Keygen: 有兼容问题, 在chrome59 失败~~

表单属性

属性	使用示例	含义	备注
placeholder	`<input type="text" placeholder="请输入用户名">`	占位符
autofocus	`<input type="text" autofocus>`	自动获得焦点	页面中设置多个, 只有最后一个会获取焦点
multiple	`<input type="file" multiple>`	多文件上传	多选
autocomplete	`<input type="text" autocomplete="off">`	自动完成	on/off, 提交过一次后才会出现
form	`<input type="text" form="某表单ID">`
novalidate	`<form novalidate></form>`	关闭验证
required	`<input type="text" required>`	必填项
pattern	`<input type="text" pattern="\d">`	自定义验证	正则

多媒体

HTML5 为解决使用 flash 的各种问题推出了多媒体标签
由于格式问题, 不同浏览器对视频的格式支持不同, 需要准备多份视频
无法对视频提供很好的版权保护, 用户可以直接对视频进行另存为

音频

<!--
  controls: 显示播放的相关控件
  autoplay: 自动播放
-->
<audio [src=""] [autoplay][controls][loop]></audio>

<audio width="300" hight="200" controls autoplay>
  <!--解决兼容问题-->
  <source src="music/1.mp3">
  <source src="music/1.wav">
  <source src="music/1.wma">
  您的浏览器不支持HTML音频播放
</audio>

视频

<video [src=""] [autoplay][controls][loop]></video>

<video width="300" [hight="200"] controls autoplay><!--一般宽高只会给一个, 让其等比例缩放-->
  <!--解决兼容问题-->
  <source src="mov/cz.mp4">
  <source src="mov/cz.ogg">
  您的浏览器不支持HTML视频播放
</video>

常见多媒体事件

属性	值	描述
`oncanplay`	script	当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
`onended`	script	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
`onerror`	script	当在文件加载期间发生错误时运行的脚本。
`onpause`	script	当媒介被用户或程序暂停时运行的脚本。
`onplay`	script	当媒介已就绪可以开始播放时运行的脚本。
`onplaying`	script	当媒介已开始播放时运行的脚本。
`ontimeupdate`	script	当播放进度改变时运行的脚本。
`onvolumechange`	script	每当音量改变时（包括将音量设置为静音）时运行的脚本。
`onwaiting`	script	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本

案例

进度条

progress

用来显示任务的进度

如果想用来显示 度量值 请使用meter 标签

属性
- max: 总工作量
- value: 已完成工作量

meter

通过属性的值搭配能够显示出多种不同的变化

属性
- high
- low
- max
- min
- value

  <meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
  <br/>
  <meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
  <br/>
  <meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
  <br/>
  <meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
  <br/>

DOM扩展

获取元素

document.getElementsByClassName ('class')
document.querySelector('selector') 通过css选择器获取元素, 返回符合条件的第一个元素
document.querySelectorAll('selector') 通过css选择器获取元素, 返回符合条件的伪数组

类名操作

Node.classList.add('class')添加class
Node.classList.remove('class')移除class
Node.classList.toggle('class')切换class, 有则删除, 无则添加
Node.classList.contains('class') 检测是否含有class

自定义属性

必须以data-开头, 如data-name

//自定义属性的属性名为data-my-name
box.dataset["myName"]; // 需要遵循驼峰命名

var dvObj=document.getElementById("dv");
console.log(dvObj.dataset);//所有的自定义属性及值

其他API

网络状态

属性: navigator.online用户当前的网络状况, 返回值: true|false
事件: window.online用户网络连接时被调用; window.offline用户网络断开时被调用
“`js
window.addEventlistener(“online”, function(){
alert(“网络已连接”);
});
window.addEventlistener(“offline”, function(){
alert(“网络已断开”);
});

var online=window.navigator.online;
if(online){
alert(“发送请求”);
}else{
alert(“发送失败了”);
}
“`

全屏

开启全屏显示

Node.requestFullScreen()
Node.webkitRequestFullScreen()
Node.mozRequestFullScreen()

关闭全屏显示

Node.cancelFullScreen()
Node.webkitCancelFullScreen()
Node.mozCancelFullScreen()

检测全屏显示

document.fullScreen
document.webkitIsFullScreen
document.mozFullScreen

文件本地读取

通过FileReader对象可以读取本地储存的文件, 使用File对象来指定要读取的文件或数据.
FileReader是HTML5 内置对象.
属性: result 文件读取的结果.
事件: onload 文件读取结束
方法: readAsDataURL(), readAsText()
“`js
var file = document.querySelector(“#fl”);
file.onchange = function () {
var fl = file.files[0];
var fReader = new FileReader;
fReader.readAsText(fl);

fReader.onload = function () {

// console.log(fReader.result);
var result = fReader.result;

  var dv = document.createElement("div");
  dv.innerHTML = result;
  document.querySelector("body").appendChild(dv);

};

};
“`

var file = document.querySelector("#fl");
  file.onchange = function () {
    var fl = file.files[0];
    var fReader = new FileReader;
    fReader.readAsDataURL(fl);

    fReader.onload = function () {
      //      console.log(fReader.result);
      var result = fReader.result;

      console.log(result);
      var img = document.createElement("img");
      img.src = result;
      document.querySelector("body").appendChild(img);

    };
  };

文件拖拽

在HTML5的规范中，可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

事件:

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

注意事项

如果想要调用ondrop事件，必须在ondragover中使用事件参数阻止浏览器的默认行为。

thirdBox.ondragover = function (argument) {
  // 在 ondragover时 必须阻止默认行为 才能够 看到拖放效果
  argument.preventDefault();
}

数据传递

配合事件对象的dataTransfor 可以实现数据的传递。
setData(key,value) 设置数据。
getData(key) 获取数据。

dom1.ondragstart = function (argument) {
  argument.dataTransfer.setData("fox",this.id);
}

//dom2为拖放的目标元素
dom2.ondrop = function (argument) {
  console.log(argument);
  var fromBoxID =argument.dataTransfer.getData("fox");
}

地理定位

地理定位: LBS: Location Base Service

获取方式: IP地址, 三维坐标, GPS, WIFI, 手机信号等
获取当前地理信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

获取实时地理位置
navigator.geolocation.watchPosition(successCallback, errorCallback)获取成功后会调用successCallback, 获取失败后会调用errorCallback

其他参数:

position.coords.latitude  //纬度
position.coords.longitude  //经度
position.coords.accuracy  //精度
position.coords.altitude  //海拔高度

navigator.geolocation.getCurrentPosition(function(){
  console.log("可以定位");
}, function(){
  console.log("不可以定位");
});

navigator.geolocation.getCurrentPosition(function(position){
  console.log(position.coords.latitude);
  console.log(position.coords.longitude);
}, function(error){
  console.log(error);
});

百度地图的调用: http://lbsyun.baidu.com/

window.navigator.geolocation.getCurrentPosition(function (position) {
// position.coords.latitude纬度
//position.coords.longitude经度
//纬度
var latitude=position.coords.latitude;
//经度
var longitude=position.coords.longitude;
// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(longitude, latitude), 11);
// 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
},function (error) {
});

WEB存储

以文件的方式进行储存, 储存大小4kb
cookie中的数据是字符串(键值对, 使用;隔开)

例如: __jdv=122270672|direct|-|none|-|1500348678727; o2-webp=true; __jda=122270672.15003486787262104419343.1500348679.1500348679.1500348679.1; __jdb=122270672.2.15003486787262104419343|1.1500348679; __jdc=122270672; __jdu=15003486787262104419343

jQuery对cookie操作做了很好的封装, https://plugins.jquery.com/cookie/
“`js

if (typeof $.cookie(“_name”) != “undefined”) {$ ("#sp").text( $.cookie(“_name”)); }else {$ (“#sp”).text(“菜鸟”);
}

$(“#btn”).click(function () { // 设置过期时间$ .cookie("_name", $(“#txt”).val(),{expires:7});
location.reload();
});

“`

Web Storage

存储大小5M
仅支持IE8以上版本
只能操作字符串, 所以json对象要进行转换
明文储存, 没有隐私性可言, 不能存储重要信息
会使浏览器加载速度在一定程度上变慢
无法被爬虫程序爬取
判断浏览器对Web Storage的支持性

if(window.localStorage){//或者window.sessionStorage
  alert("浏览器支持localStorage")
  //主逻辑业务
}else{
  alert("浏览不支持localStorage")
  //替代方法
}

localStorage

永久储存, 除非手动删除不过期,
方法: getItem读取, setItem设置, removeItem移除, key(index)索引, clear清空
js window.localStorage.setItem(key, value); window.localStorage.getItem(key); window.localStorage.removeItem(key); window.localStorage.clear(); var k = window.localStorage.key(0);

sessionStorage

在重启浏览器, 关闭页面时失效
方法: getItem读取, setItem设置, removeItem移除, key索引, clear清空
js window.sessionStorage.setItem(key, value); window.sessionStorage.getItem(key); window.sessionStorage.removeItem(key); window.sessionStorage.clear();