h5 补白(1)

如果你经常使用互联网,可能知道有一种东西叫作Flash。

它是一种软件,用来制作网页游戏、动画,以及视频播放器。只要观看网络视频,基本都会用到它。

多年前,它是最热门的互联网技术之一。如果不安装Flash, 很多网站根本打不开。那时还流行用它制作动画,随便一个作品,就有几十万、上百万的浏览量。电视台甚至开辟栏目,播放网上流行的Flash 动画。各大互联网公司都有专的Flash工程师,还是属于那种比较抢手、收入较高的工程师。我记得那个时候,社会上也有大量的Flash培训班,它们的招生广告都写着保证就业。

后来,Flash 就不行了。2010年,乔布斯宣布,苹果手机不会使用Flash,因为影响手机性能。再后来,新的技术兴起,它就开始没落了。BBC发表一篇报道,名字就叫《Flash 还能活多久?》。话音刚落,一周后,这项技术的拥有者Adobe公司宣布,放弃Flash 这个名字,软件将重新定位,只用来制作动画。

我并不感叹Flash这项技术的没落,这也是很正常的事,而是感叹那些从事Flash开发的工程师,他们该怎么办呢?你在一个领域钻研多年,都成了专家,突然之间那个领域过时了,你的所学所长没人需要了,那将是怎样的处境?

当一种技术消亡的时候,与它相关的工作岗位也就消亡了。这种事情在技术行业特别多,因为技术的升级换代太快了。

——阮一峰《未来世界的幸存者》


没错,文章开头就是这么水文字才显得有水平。

假如前端面试是一场语文高考。那么html就是小学背过的古诗。考得少,但经常阴沟翻船。这不代表它不重要,正是因为它太基础了。毕竟恰饭的东西啊。

当人说起html,那是一个新手,2个钟头能够上手的东西。

当人说起"新时代的html",就是html5。实际上h5这个名词已经被滥用。人们总是跟哪些花哨的页面联系起来。实际上大多数人知道h5这个名词时,早就不新了。

前端是一个应用型的知识体系,不要拿它跟基础职业比。比如学个c,java可能够用10年。而全面更新一次个人知识体系,只能用两三年。

一定要注重编程思维的培养,不要让机械业务编程充斥自己的所谓“工作经历”中。

1. H5的新特性

h5规范最初的目标就是取代过时的flash。

它包括如下新特性:

  • 不再推荐过时的标签(<font>/<center>/<s>
  • 表单控件新标签的引入(buton/calendar/date/time/email/search
  • 语义化标签的引入,主要是布局相关:(header/nav/aside/article/footer/section
  • 视频/音频的api:(audio/video
  • 离线储存(sessionStorage/localStorage/本地数据库)
  • Canvas画布api
  • 其它api:svg,history

2. h5优缺点

优点如下:

  • Canvas丰富了网页的内容,充分利用了客户端性能
  • 多媒体api出色地替代了flash
  • 语义化标签对seo友好。
  • 离线储存,history api等等支持衍生了大量跨平台移动端应用:

缺点:

  • 浏览器规范不统一。表现不尽相同。比如安卓和ios浏览器,uc和自带的浏览器,ie支持等等。

3. 一些规范

vscode输入html:5回车,就是一个标准的html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

标签可以大写。标签属性名可以大写,属性可以不带引号。

<p>这是一p</p>
<P>大写是可以的</P>
<p CLASS=class>我也是可以的</p>

<!--推荐-->
<p class="class">这是一个有类的p</p>

此外h5规范不推荐使用自闭合格式。

4.语义化标签

h5引入:(header/nav/aside/article/footer/section

良好的可读性,不但对人友好,对搜索引擎也友好。

语义化标签的兼容性:

你可以直接引入一个小命令cc:ie6

html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。

以下不只是注释,而且会在ie 8以下浏览器生效

<!--[if IE 8]>
<script src=”hhttps://cdn.bootcss.com/html5shiv/r29/html5.js”></script>
<![endif]-->

当然你可以通过js自己定义一个:

document.createElement('header');

5. 多媒体api

5.1 音频和视频

多媒体无非是两个:一个是音频,一个是视频。

先来看音频:

<audio controls src="/music/青鸟.mp3"></audio>

就有了一个播放控件。

  • controls:在页面里显示控件
  • autoplay="autoplay":自动播放,但是谷歌现在不再支持。
  • loop,可重复播放。

接下来看视频:

<video controls src="mov/1.mp4"></video>
  • autoplay依然不支持谷歌,但支持其它浏览器:加入muted属性后谷歌可以静音播放。
  • 不同浏览器对同一个格式/编码视频不一定全支持。

那就有了不同解决方法:

<video controls loop>
  <source src="mov/xxx.mp4">
  <source src="mov/xxx.ogg">
  不好意思,我们实在支持不了你这破浏览器,请升级。
</video>
5.2 实例:基于vue的自定义播放器

我会在另外一篇文章里阐述。

6. 表单

6.1 智能表单

以一个简单的智能表单为例子:

<form action="" method="get">
    请输入邮箱:<input type="email" name="email" id="email" value=""><br>
    请输入数字:<input type="number" name="number" id="number" value=""><br>
    请输入url:<input type="url" name="url" id="url" value=""><br>
    请输入滑块:<input type="range" name="range" id="range" value=""><br>
    请输入颜色:<input type="color" name="color" id="color" value=""><br>
    请输入时间:<input type="time" name="time" id="time" value=""><br>
    请输入日历:<input type="date" name="date" id="date" value=""><br>

    <input type="submit" value="提交"><br>
</form>

出现结果,厉害了:

部分input还自带的正则校验功能

表单校验,正则表达式都免了。

所以,说起表单,不要只知道说什么button了。

6.2 智能表单常用属性

以下快速过一下常用属性

  • autocomplete

input在现代浏览器首次获得焦点时,通常有个下拉选择菜单。比如:

通常这是很好的事情。假设有人硬是要你去掉设置autocomplete为off就好了:

<form  autocomplete="off" action="" method="get">
  ...
  • novalidate

加载form之后,关闭校验(不只是关闭校验提示)

  • autofocus

类text的input(以下简称文本框),可以加上autofocus

  • placeholder

文本框的提示信息。

  • required

必填字段。

  • form
<form action="" method="get" id="aaa">
  <!-- ... -->
  <input type="submit" value="提交">
</form>
<input type="text" name='bbb' form="aa" >

form作为一个表单元素的属性,设置为form标签的id之后,即便它在表单之外,也都能提交!

  • list

观察以下实现:

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

<datalist>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

7. h5中一些js-api

7.1 选择器
    <div>
        <p>这是div中的一个p</p>
    </div>

    <ul>
        <li><p>这是ul-li中的一个p</p></li>
        <li>这是一个li</li>
    </ul>
document.querySelector('div p') //选择的是div下第一个p
document.querySelectorAll('div p') //选择的是div下所有p

跟jq类似。

7.2 类(classList)管理
  • 添加类样式(add)
document.querySelector('#btn1').addEventListener('',function(e){
  document.querySelector('#aaa').classList.add('text');
})
  • 移除类样式(remove)
document.querySelector('#btn2').addEventListener('',function(e){
  document.querySelector('#aaa').classList.remove('text');
})
  • 切换类样式(toggle)
document.querySelector('#btn3').addEventListener('',function(e){
  document.querySelector('#aaa').classList.toggle('text');
})
  • 是否包含一个class(contains)

返回的是一个布尔值

document.querySelector('#btn4').addEventListener('',function(e){
  document.querySelector('#aaa').classList.contains('text');
})

非常像jq。非常像jq。

8.自定义属性

所谓自定义属性,就是html中没有的。

<div id="aaa" data-id="aaa" data-name="djtao" data-user-sex="female">123</div>

你固然可以用document.querySelector('#aaa').getAttribute('data-id')拿到data-id,同理还有setAttribute方法设置它的data-id。

不过那都是xhtml时代的旧方法了。作为"h5时代的新人",应该这么写:

let data=document.querySelector('#aaa').dataset;
console.log(data)
/*
{
    id:'aaa',
    name:'djtao',
    userSex:'female'
}
*/
data.name='dangjingtao'; // <div ... data-name="dangjingtao">
data.userAge='30';// <div ... data-user-age="30">

非常轻松。

注意,data-user-sex属性变成了userSex

9.FIle-API

旧时代的前端只做一件傻事:写页面。但是在新时代,有了FileReader这个对象,他们至少能读取文件了,甚至还能创造文件。

9.1 文件读取

先看:

<input type="file" name="file1" id="file1"><br>
<div id="text"></div>

我要求:这个文件上传控件,在上传之前能够读取html文件内容。

let f1=document.querySelector('#file1');
    // 上传文件,出发时间
f1.addEventListener('change',(e)=>{
    // 读取文件对象
    let tar=e.currentTarget;
    let file=tar.files[0]
    // 创建文件读取对象。
    let reader=new FileReader();
    reader.readAsText(file);
    //开始读取文件加载事件
    reader.addEventListener('load',(_e)=>{
        // console.log(_e.currentTarget.result)
        let text=_e.currentTarget.result;
        document.querySelector('#text').innerHTML=text;
    });
});

当你选择一个*.html文件在div#text中,就拿到了这个html文件的内容。

同理,你如果读取一个js,你还可以创建一个script标签,加载上去。

// ...
reader.addEventListener('load',(_e)=>{
    // console.log(_e.currentTarget.result)
    let text=_e.currentTarget.result;
    const script=document.createElement('script');
    script.innerText=text;
    document.querySelector('body').appendChild(script);
});

等你选择一个js文件后,网页就会执行你选择的js代码了。同样还适合执行css文件。

FileReader提供的事件模型:

  • abort 中断时触发
  • error 报错时触发
  • loadend 读取完成时触发,无论成功失败
  • loadstart 读取开始时触发
  • progress 读取中

上面用的是readAsText,实际上还支持多种读取方式。

  • readAsBunaryString
  • readAsDataURL
9.2 文件创建实例:

有个很常见的功能,就是图片上传前压缩并显示。原生怎么做?

我会在另外一篇文章里阐述。

10. 网络状态监测

window.avigator.onLine //布尔值,设备端是否联网
window.ononline=function(){
  alert(`联网了`)
}
window.onoffline=function(){
  alert('掉线了')
}

原文发布于微信公众号 - 一Li小麦(gh_c88159ec1309)

原文发表时间:2019-08-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券