HTML5

小咪咪 2022-06-12 06:18 307阅读 0赞

HTML5

了解HTML5

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

语法规范

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

  • HTML5 的优点: 
  1.  *  提高可用性和改进用户的友好体验.
  2.  *  新增的标签有益于开发人员定义重要的内容
  3.  *  可以给站点带来更多的多媒体元素(音频和视频)
  4.  *  可以很好的代替`FLASH`和`silverlight`
  5.  *  涉及到网站抓取和索引的时候, 对SEO友好
  6.  *  将被大量应用于移动应用程序和游戏
  7.  *  可移植性好
  • 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').

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

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

    html5shiv.min.js 下载地址

    1. <!--[if lte IE 8]> <script src="html5shiv.min.js"></script> <![endif]-->

微数据

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

itemscope：声明你所要添加的属性的作用域，加在最外层的元素。
itemtype：声明所使用的词汇表，加在最外层的元素中。
itemprop：声明属性名，具体的内容要参加所引用的词汇表。
html <!--微数据,就是为div和span添加属性,浏览器识别的时候具有语义化的意义--> <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 即可, 无需赋值

    1. <input type="tel" required>

  • pattern 自定义验证规则

    • 在需要添加自定义的标签中添加 required

    • 使用 pattern 后的正则表达式编写验证规则

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

    • 注册事件
    • oninput 输入时
    • oninvalid 验证失败时

    • 设置提示信息 setCustomValidity("这里输入提示信息")


      email:


      tel:



表单元素































元素 含义 备注
<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 开始

    1. 网址:<input type="url" list="url_list" name="link"/>
    2. <datalist id="url_list">
    3.   <option label="W3School" value="http://www.W3School.com.cn"/>
    4.   <option label="Google" value="http://www.google.com"/>
    5.   <option label="Microsoft" value="http://www.microsoft.com"/>
    6. </datalist>
    8. 电话: <input type="tel" list="tel_list">
    9. <datalist id="tel_list">
    10.   <option value="186xxx" label="移动">移动</option>
    11.   <option value="187xxx" label="联通">联通</option>
    12.   <option value="135xxx" label="天翼">天翼</option>
    13. </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 的各种问题推出了多媒体标签
  • 由于格式问题, 不同浏览器对视频的格式支持不同, 需要准备多份视频
  • 无法对视频提供很好的版权保护, 用户可以直接对视频进行另存为

音频

  1. <!-- controls: 显示播放的相关控件 autoplay: 自动播放 -->
  2. <audio [src=""] [autoplay][controls][loop]></audio>
  4. <audio width="300" hight="200" controls autoplay>
  5.   <!--解决兼容问题-->
  6.   <source src="music/1.mp3">
  7.   <source src="music/1.wav">
  8.   <source src="music/1.wma">
  9.   您的浏览器不支持HTML音频播放
  10. </audio>

视频

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

常见多媒体事件
























































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

案例

进度条

progress

用来显示任务的进度

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

  • 属性 
  1.  *  max: 总工作量
  2.  *  value: 已完成工作量

meter

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

  • 属性 
  1.  *  high
  2.  *  low
  3.  *  max
  4.  *  min
  5.  *  value
  7. <meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
  8.   <br/>
  9.   <meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
  10.   <br/>
  11.   <meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
  12.   <br/>
  13.   <meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
  14.   <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

  1. //自定义属性的属性名为data-my-name
  2. box.dataset["myName"]; // 需要遵循驼峰命名
  4. var dvObj=document.getElementById("dv");
  5. 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(“发送失败了”);
}
“`

全屏

  • 开启全屏显示

    1. Node.requestFullScreen()
    2. Node.webkitRequestFullScreen()
    3. Node.mozRequestFullScreen()

  • 关闭全屏显示

    1. Node.cancelFullScreen()
    2. Node.webkitCancelFullScreen()
    3. Node.mozCancelFullScreen()

  • 检测全屏显示

    1. document.fullScreen
    2. document.webkitIsFullScreen
    3. 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);

  1. fReader.onload = function () {

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

  1. var dv = document.createElement("div");
  2.   dv.innerHTML = result;
  3.   document.querySelector("body").appendChild(dv);
  5. };

};
“`

  1. var file = document.querySelector("#fl");
  2.   file.onchange = function () { 
  3.     var fl = file.files[0];
  4.     var fReader = new FileReader;
  5.     fReader.readAsDataURL(fl);
  7.     fReader.onload = function () { 
  8.       // console.log(fReader.result);
  9.       var result = fReader.result;
  11.       console.log(result);
  12.       var img = document.createElement("img");
  13.       img.src = result;
  14.       document.querySelector("body").appendChild(img);
  16.     };
  17.   };

文件拖拽

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

事件:

  • 拖拽元素

    • ondrag：整个拖拽过程都会调用。
    • ondragstart：当拖拽开始时调用。
    • ondragend：当拖拽结束时调用。
    • ondragleave：当鼠标离开拖拽元素时调用。

  • 目标元素

    • ondrop：当在目标元素上松开鼠标时调用。
    • ondragover：当停留在目标元素上时调用
    • ondragenter：当拖拽元素进入时调用。
    • ondragleave：当鼠标离开目标元素时调用。

  • 注意事项

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

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

  • 数据传递

    • 配合事件对象的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, 手机信号等

    ![Image 1][]

  • 获取当前地理信息
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

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

    其他参数:

    1. position.coords.latitude  //纬度
    2. position.coords.longitude  //经度
    3. position.coords.accuracy  //精度
    4. position.coords.altitude  //海拔高度
    6. navigator.geolocation.getCurrentPosition(function(){ 
    7.   console.log("可以定位");
    8. }, function(){ 
    9.   console.log("不可以定位");
    10. });
    12. navigator.geolocation.getCurrentPosition(function(position){ 
    13.   console.log(position.coords.latitude);
    14.   console.log(position.coords.longitude);
    15. }, function(error){ 
    16.   console.log(error);
    17. });

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

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

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();

json转换字符串

js JSON.stringify // 序列化->字符串 JSON.parse // 反序列化->对象

[Image 1]:

发表评论

表情：
评论列表 （有 0 条评论，307人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML5

    正在上传…重新上传取消 知识总结 ctrl + / 表示注释行快捷键，table 快速生成整体标签 body 网页主体 head 网页搜索标题 meta

    ﹏ヽ暗。殇╰゛Y﹏ヽ暗。殇╰゛Y/ 0 赞/ 95 阅读

    相关 HTML5

    HTML5入门（一） HTML5中的新特性 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 新的特殊内容元素，比

    柔情只为你懂柔情只为你懂/ 0 赞/ 57 阅读

    相关 HTML5

    HTML5 常用的语义化标签 \`\`视频标签 常见属性 \`\`音频标签 常见属性 \`\`表单的新增

    冷不防冷不防/ 0 赞/ 232 阅读

    相关 HTML5

    HTML5是什么 HTML5 是继HTML4.01 和XHTML1.0 之后的超文本标记语言的最新版本。它是由一群 自由思想者组成的团队设计出来，并最终实现多媒体支持

    灰太狼灰太狼/ 0 赞/ 214 阅读

    相关 HTML5

    HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 一、新特性 拖拽释放(Drag and d

    ╰半夏微凉°╰半夏微凉°/ 0 赞/ 227 阅读

    相关 HTML5

    HTML5 了解HTML5 HTML5 是 HTML 标记语言的一个最新版本 HTML5 制定了web应用开发的一系列标准, 成为第一个将web作为应用

    小咪咪小咪咪/ 0 赞/ 308 阅读

    相关 HTML&HTML5

    HTML&HTML5 学习笔记 职坐标网上视频课程 ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] ![这里写图片描述

    梦里梦外;梦里梦外;/ 0 赞/ 503 阅读