如果你经常使用互联网,可能知道有一种东西叫作Flash。
它是一种软件,用来制作网页游戏、动画,以及视频播放器。只要观看网络视频,基本都会用到它。
多年前,它是最热门的互联网技术之一。如果不安装Flash, 很多网站根本打不开。那时还流行用它制作动画,随便一个作品,就有几十万、上百万的浏览量。电视台甚至开辟栏目,播放网上流行的Flash 动画。各大互联网公司都有专的Flash工程师,还是属于那种比较抢手、收入较高的工程师。我记得那个时候,社会上也有大量的Flash培训班,它们的招生广告都写着保证就业。
后来,Flash 就不行了。2010年,乔布斯宣布,苹果手机不会使用Flash,因为影响手机性能。再后来,新的技术兴起,它就开始没落了。BBC发表一篇报道,名字就叫《Flash 还能活多久?》。话音刚落,一周后,这项技术的拥有者Adobe公司宣布,放弃Flash 这个名字,软件将重新定位,只用来制作动画。
我并不感叹Flash这项技术的没落,这也是很正常的事,而是感叹那些从事Flash开发的工程师,他们该怎么办呢?你在一个领域钻研多年,都成了专家,突然之间那个领域过时了,你的所学所长没人需要了,那将是怎样的处境?
当一种技术消亡的时候,与它相关的工作岗位也就消亡了。这种事情在技术行业特别多,因为技术的升级换代太快了。
——阮一峰《未来世界的幸存者》
没错,文章开头就是这么水文字才显得有水平。
假如前端面试是一场语文高考。那么html就是小学背过的古诗。考得少,但经常阴沟翻船。这不代表它不重要,正是因为它太基础了。毕竟恰饭的东西啊。
当人说起html,那是一个新手,2个钟头能够上手的东西。
当人说起"新时代的html",就是html5。实际上h5这个名词已经被滥用。人们总是跟哪些花哨的页面联系起来。实际上大多数人知道h5这个名词时,早就不新了。
前端是一个应用型的知识体系,不要拿它跟基础职业比。比如学个c,java可能够用10年。而全面更新一次个人知识体系,只能用两三年。
一定要注重编程思维的培养,不要让机械业务编程充斥自己的所谓“工作经历”中。
h5规范最初的目标就是取代过时的flash。
它包括如下新特性:
<font>
/<center>
/<s>
)buton
/calendar
/date
/time
/email
/search
)header
/nav
/aside
/article
/footer
/section
)audio
/video
)优点如下:
缺点:
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规范不推荐使用自闭合格式。
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');
多媒体无非是两个:一个是音频,一个是视频。
先来看音频:
<audio controls src="/music/青鸟.mp3"></audio>
就有了一个播放控件。
autoplay="autoplay"
:自动播放,但是谷歌现在不再支持。loop
,可重复播放。接下来看视频:
<video controls src="mov/1.mp4"></video>
muted
属性后谷歌可以静音播放。那就有了不同解决方法:
<video controls loop>
<source src="mov/xxx.mp4">
<source src="mov/xxx.ogg">
不好意思,我们实在支持不了你这破浏览器,请升级。
</video>
我会在另外一篇文章里阐述。
以一个简单的智能表单为例子:
<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了。
以下快速过一下常用属性
input在现代浏览器首次获得焦点时,通常有个下拉选择菜单。比如:
通常这是很好的事情。假设有人硬是要你去掉设置autocomplete
为off就好了:
<form autocomplete="off" action="" method="get">
...
加载form之后,关闭校验(不只是关闭校验提示)
类text的input(以下简称文本框
),可以加上autofocus
文本框的提示信息。
必填字段。
<form action="" method="get" id="aaa">
<!-- ... -->
<input type="submit" value="提交">
</form>
<input type="text" name='bbb' form="aa" >
form
作为一个表单元素的属性,设置为form标签的id之后,即便它在表单之外,也都能提交!
观察以下实现:
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<datalist>
标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
<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类似。
document.querySelector('#btn1').addEventListener('',function(e){
document.querySelector('#aaa').classList.add('text');
})
document.querySelector('#btn2').addEventListener('',function(e){
document.querySelector('#aaa').classList.remove('text');
})
document.querySelector('#btn3').addEventListener('',function(e){
document.querySelector('#aaa').classList.toggle('text');
})
返回的是一个布尔值
document.querySelector('#btn4').addEventListener('',function(e){
document.querySelector('#aaa').classList.contains('text');
})
非常像jq。非常像jq。
所谓自定义属性,就是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
旧时代的前端只做一件傻事:写页面。但是在新时代,有了FileReader这个对象,他们至少能读取文件了,甚至还能创造文件。
先看:
<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提供的事件模型:
上面用的是readAsText,实际上还支持多种读取方式。
有个很常见的功能,就是图片上传前压缩并显示。原生怎么做?
我会在另外一篇文章里阐述。
window.avigator.onLine //布尔值,设备端是否联网
window.ononline=function(){
alert(`联网了`)
}
window.onoffline=function(){
alert('掉线了')
}