为了账号安全,请及时绑定邮箱和手机立即绑定

[前端学习]HTML5部分学习笔记,第一天

标签:
Html5

HTML5介绍

  • H5并不是新语言,而是HTML的第五次重大修改(版本),移动端支持优于PC端

  • 所有主流浏览器都支持H5,但IE8及其以下不支持

  • 改变了用户与网页的交互方式:各种新型的多媒体标签代替了flash

  • 新增的重要特性:语义化特性、本地存储特性、多媒体、二维三维、特效动画等

  • 相对于H4的进步:

    • 抛弃了一些不合理的旧属性标签

    • 新增了一些标签和属性

    • 机构代码更加的简洁易读

新增的语义化标签

  • H5中新增了非常多的语义化标签,这里只介绍几个常见的,更多的自己去翻手册

    • header 页眉

    • nav 导航

    • main 页面主要内容

    • article 文章

    • aside 主题内容之外

    • footer 页脚

  • 注意,这几个语义化标签本质上与div是没有区别的,只是现在通过标签名就能更加直观的知道它代表的是网页哪个部分

  • 另外,关于headerfooter在语法规则中它们不是只针对与网页头部和网页底部,也可以用作页面中某块区域的头部和底部。但是这里建议,一张网页里最好只用一次,让结构更加清晰

语义化标签的兼容性

  • 说到兼容性,肯定就跟IE有关系,只有IE10以上才完全支持H5

  • IE9虽然支持了H5,但是它不是全部支持,而是选择性支持。不支持的语义化标签,会默认为行内元素。解决方法就是将其不认识的转换为块级元素

  • IE8及其以下不支持H5,所以完全不认识语义化标签,目前有两种解决方法:

    • 1.在JS中动态创建语义化标签元素,这样IE8就能识别了。但是JS中动态创建新元素,默认也是行内元素,也要转换元素模式

    • 2.外部引入html5shiv.js文件,这是一个js库。它的目的就是解决IE8及其以下版本能够正常识别语义化标签

HTML5表单新增内容

新增表单input控件type类型

  • H5中增加了大量的input控件type类型,让很多以前需要js来配合实现的功能,现在只需要一个type就能解决:

    • type="email"邮箱类型,自带了邮箱格式的验证,点击提交时如果邮箱格式不正确会阻止提交,并提示错误

    • type="tel"电话类型,没有验证功能,作用是移动端点击输入框时自动弹出数字键盘

    • type="url"网址类型,自带验证网址的功能,格式不正确也会阻止提交并提示,注意格式中必须有http://

    • type="number"数字类型,在输入框中不能输入非数字和点以外的任何字符,自带上下键,还可以通过maxmin来控制最大值和最小值

    • type="search"搜索类型,自带了清除一键所有内容按钮,注意匹配提示涉及到后台数据获取,表单做不到还是要js来实现

    • type="range"范围类型,样式为可拖动的条,可以设置默认值和最大最小值

    • type="color"颜色拾取器,点击可以选取颜色,我们可以通过value值来获取用户选择的颜色

    • type="time"时间类型,样式为时分秒的输入框

    • type="date"日期类型,样式为年月日的输入框,只要涉及到日期的都自带日期选择插件

    • type="datetime-local"时间日期类型,样式为年月日 时分秒的输入框,与datetime功能相同(只有safari支持)

    • type="month"月份类型,样式为年月的输入框

    • type="week"周类型,样式为年星期的输入框

新增表单input控件属性

  • 新增的属性都是非常实用的,要多练习牢记

    • 比如某些情况下,表单控件因为限制不能写form表单中,但是又想跟随form表单一起提交

    • 那么就可以给form表单设置id值,并给在form外的控件设置form属性,值就是对应的id。当对应id的form提交时,这个控件会归属于对应form一起提交

    • 必须提交过数据,提交过才会自动记录输入值

    • 输入框必须有name属性,有了才能识别记录的哪个输入框

    • placeholder="默认文字"默认提示文字,有点类似value值,但是只有在内容为空时才显示,输入值会自动消失

    • autofocus自动让输入框获取焦点

    • autocomplete="on|off"自动记录输入值,在下次输入时自动匹配并提示。on是开启off是关闭。注意这个属性要实现功能必须有两个前提:

    • required自动验证输入框是否为空,为空阻止提交并提示

    • pattern="正则表达式"提供在html中的正则验证功能,如果不满足会阻止提交并提示,注意这个属性中写正则表达式,不用加//。另外如果输入值错误后,就算修改成正确的也不能通过,必须刷新页面才可以,目前是一个BUG

    • multiple该属性在不同类型控件中,作用不一样。在file文件提交控件,作用是可以提交多个文件;在邮箱控件中,作用是可以输入多个邮箱地址,以逗号分隔。还有更多作用去翻阅手册

    • form="表单id值"这个属性可以让控件指定归属表单

新增表单元素

  • 三个表单的新增元素,几乎都很少用,现在只做一个了解即可

  • datalist下拉选择框

    • datalist的结构与select相似,内部都是嵌套option标签。但是他们的功能却不一样,datalist的存在为了让用户既能够输入,也能选择

    • datalist不能单独使用,它必须和input控件关联起来使用。在input控件中添加list属性,值就是datalist的id,这样它们就关联起来。鼠标经过输入框可以看到一个下拉的三角符号,点击就是可选择项,不点击仍然可以输入

    • 另外有一个特列,就是在type="url"输入框,option的value值中,网址前面必须加上http://才能正常显示

    • 而且它的兼容性很差,在火狐浏览器中不支持这个标签

  • keygen加密标签

    • 在表单中加入keygen标签后,当点击提交按钮时,它会自动生成两个钥匙。私钥存储在客户端,公钥连同用户输入的信息,一起发给服务器。下次在操作时会进行钥匙比对,通过才能进行操作

  • output输出标签

    • 就是一个单纯输出内容标签,与span功能相似,相对而言更语义化一些

表单新增事件

  • oninput这个事件在DOM中已经学过了,就是在input控件内容发生改变的时候会触发,包括增加内容和删除内容

  • oninvalid这个事件会在input控件内容验证不通过的时候触发,经常会配合patternsetCustomValidity()一起使用,方法的作用是修改默认的错误提示信息

进度条

  • progress标签会显示进度条,有两个属性:value表示当前值,max表示最大值

  • meter标签会显示度量器,有五个属性:value表示当前值,low表示较小值,high表示较大值,min表示最小值,max表示最大值

  • 这两个标签的样式都是进度条的形式,但是显示的效果会有区别,具体可以去写写看

多媒体标签

  • audio音频标签,在页面中插入音乐文件,有几个重要属性

    • class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="url"音频文件地址,必须写的属性

    • controls播放器控制面板,如果不写此属性是看不到控制面板的

    • autoplay自动播放,打开页面就自动播放,不需要手动点

    • loop循环播放

  • video视频标签,在页面中插入视频文件,有几个重要属性

    • class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="url"视频文件地址,必须写的属性

    • controls播放器控制面板,如果不写此属性是看不到控制面板的,每个浏览器的控制面板会有不同

    • autoplay自动播放,打开页面就自动播放,不需要手动点

    • loop循环播放

    • height="xx"视频高度

    • width="xx"视频宽度,注意设置时只写宽或者高其中一个就行,它会自动等比例缩放,不要同时都写

    • poster="url"视频封面,将地址图片作为视频没播放时的封面,如果不写此属性那么默认封面是视频的第一帧

  • source标签,因为兼容问题,每个浏览器支持的视频格式都不一样,为了解决兼容问题用到它,代码如下:
    <video controls>
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="url" type="video/视频格式1">
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="url" type="video/视频格式1">
    视频格式不支持
    </video>

    • 可以看到source标签包裹在video标签中,如果用到source,那么src属性写在source标签中,并且还要写type属性注明视频格式

    • 当浏览器加载视频时会自动判断,如果支持第一个source的视频直接显示,如果不支持判断第二个source的视频,支持就显示。多个都不支持时提示视频格式不支持

  • 多媒体还有很多其他事件和方法,在自定义播放器案例中查看

H5新增的JSDOM操作方法

  • querySelector()查询选择器方法,它可以通过传入的参数来找到某个元素,它的参数支持类名、id名、标签名。注意参数的写法和jquery有点像,类名前加点,id名前加井号。另外如果找到多个满足条件的元素,默认返回第一个

  • querySelectorAll()这个使用方法可以上面一个一样,不过它会找到全部满足条件的元素,并以数组的方式返回它们

  • classList属性可以获取到元素的样式类名列表,返回的是一个数组。它完全可以代替以前className的作用。并且使用classList.item[索引值],可以获取该元素具体的某项类名

  • add()方法配合classList可以为元素添加一个类名

  • remove()方法配合classList可以为元素移除一个类名

  • toggle()方法配合classList可以为元素切换一个类名,有就删除,没有就添加

  • contains()方法配合classList可以判断元素中是否有这个类名,返回布尔值

新增自定义属性的操作

  • 在h5结构中添加自定义属性规范:

    • 必须是data-开头,且后面至少有一个字符,如果有多个单词用-连接

    • 命名建议:

    • 都应该使用小写

    • 不要带特殊符号

    • 不要是纯数字

  • jsDom获取自定义属性值的方法:

    • 元素.dataset[属性名]使用dataset方法,注意这里属性名不包括data-,只写后面的部分。并且不要写-链接,用驼峰式命名法

    • 例如:有一个自定属性data-get-value=xxx,那么在js获取时应该写元素.dataset['getValue']

新增API

网络监听接口

  • ononline当网络连接时,触发这个事件

  • onoffline当网络断开时,触发这个事件

全屏接口

  • 元素.requestFullScreen()让元素全屏显示

  • document.cancelFullScreen()退出全屏显示

  • document.fullScreenElement判断是否全屏

  • 注意事项:退出全屏和判断全屏只能使用document来调用。另外每个浏览器兼容不同,需要加上不同的前缀才能正常识别。谷歌前缀webkit;火狐前缀moz;IE前缀ms;oprea前缀o

FileReader读取文件接口

  • 使用下面方法是需要先创建一个读取文件对象,才能调用,new FileReader()

    • 什么是DataURL呢?

    • 正常情况下,如果想展示一张图片那么就使用img标签,并在src属性写上图片ulr地址,当页面加载时会向服务区发送请求,加载外部图片到页面后展示。但是这样就涉及到请求的过程,是要占用服务器资源的

    • DataURL就是为了解决这个问题,它会将文件资源(一般是图像或者能够嵌入到文档的文件),转换为Base64位编码形式的字符串,然后将字符串直接保存在url中,当页面加载时直接就显示了文件资源,省去向服务器发送请求的一步。这样做节省服务器资源占用,提高了网页加载速度和执行效率

    • 很直观的例子就是qq换头像,当你选择头像图片后,并没有点击提交就能直接预览到头像图片

    • readAsText()读取文本文件(只要是能用txt打开的就是文本文件),并返回文本字符串,默认是UTF-8编码

    • readAsBinaryString()读取任意类型的字符串,返回二进制字符串。因为用户肯定看不懂二进制字符串,所以这个一般是用来存储文件。该方法将文件读取后,把返回的二进制字符发送给服务器存储起来

    • readAsDataURL()读取文件获取一段data开头的字符串,这段字符串本质就是DataUrl。注意:该方法没有返回值,它会把获取的字符编码存储在文件读取对象的result中

    • abort()直接中断文件的读取

  • 读取文件的相关事件

    • onabort读取文件中断时触发

    • 读取文件错误时触发

    • 读取文件完成时触发

    • end读取文件结束时触发,不管是否读取成功

    • start读取文件开始时触发

    • onprogress读取过程中持续触发

  • 文件读取一般都需要一些时间,所以要用异步回调的方式来通知结果

拖拽接口

  • 如果想要拖拽某个元素,那么首先要给元素添加draggable="ture"属性才可以。当然图片和超链接默认自带了拖拽属性不用加

    • ondragenter当拖拽元素的鼠标进入目标时触发

    • ondragover当拖拽元素的鼠标停留在目标内时触发

    • ondrop当拖拽元素在目标内,鼠标松开时触发,注意这个事件是被浏览器默认禁止的,要在ondragover事件中调用e.preventDefault()方法,阻止默认行为

    • ondragleave当拖拽元素的鼠标离开目标时触发

    • ondrag元素被拖拽的过程中会持续触发

    • ondragstart当元素被拖拽开始的瞬间触发

    • ondragleave当鼠标离开被拖拽元素时触发

    • ondragend当拖拽结束时触发,就是鼠标松开

    • 拖拽事件:

    • 应用于被拖拽元素:

    • 应用于目标元素:

  • 如果只为具体的某个元素注册拖拽事件,那么局限性太大了。为了时拖拽事件能够应用于任何元素,一般是使用document来注册拖拽事件,通过事件对象的target属性来获取具体的事件源对象

  • 另外要成功拖拽元素,肯定要在ondrop中把被拖拽的元素追加到目标元素中,就会涉及到被拖拽元素的存取,正常情况下不推荐使用全局变量来存值,这样会有内存泄漏的风险,下面介绍一种事件对象存值的方法:

    • event.dataTransfer.setData("数据类型",数据)这样就可以把数据存储在事件对象的dataTransfer属性中,然后在再通过event.dataTransfer.getData('数据类型')来获取

    • 这个方法有两个局限性,第一是只能存储字符类型的数据;第二是获取数据只能在ondrop事件中,其他事件中获取不到

地理位置接口

  • navigator.geolocation.getCurrentPosition(success,error,position),使用这个方法就可以调用浏览器获取用户的地理位置,当然需要用户先选择是否允许才可以,下面是对几个参数的解释,这三个参数命名可以自定义:

    • enableHighAccuracy:true|false是否使用高精度

    • timeout:xx 设置超时时间毫秒

    • maximumAge:xx  设置获取失败后,浏览器重新获取的间隔时间,毫秒

    • error.PERMISSION_DENIDE用户拒绝共享位置

    • error.POSITION_UNAVAILABLE获取不到位置信息

    • error.TIMEOUT超时

    • error.UNKNOWN_ERROR未知错误

    • position.coords.latitu纬度

    • position.coords.longitude经度

    • position.coords.accuracy精度

    • position.coords.altitude海拔高度

    • success参数是一个回调函数,当成功获取到地理位置后,就会执行这个回调函数,并将获取的信息以参数的形式传给它,所以该函数需要一个形参来接受,接受到的参数介绍(假如形参变量名是position):

    • error参数也是一个回调函数,它正好与success相反,当获取地理位置失败会调用这个回调函数,并将失败的类型以参数的形式传给它,参数介绍(假如形参变量名是error):

    • option是一个可以选参数,它是一个对象用来设置获取地理位置的方式,参数介绍:

  • 当然因为国情限制,浏览器基本无法获取到地理位置,所有大部分情况下都是使用第三方软件的提供的API,比如百度地图、高德地图等

  • 有空多研究以下现成的三方软件地图API,功能强大丰富,只要拿过来稍作修改就能用了

web存储接口

  • window.sessionStorage将数据存储到本地,存储空间在5M左右。注意这个方法数据是存储在当前页面内存中,就是说换个浏览器或者换个页面都不能获取到存储的值。它的生命周期也在当前页面,当前页面关闭后数据就自动清除了。所以一般用来存储一些临时的值

    • window.sessionStorage.setItem(键,值)存储数据,以键值对的形式

    • window.sessionStorage.getItem(键)获取值,通过存储值时设置的键来获取,如果获取不存在的值返回空

    • window.seesionStorage.removeItem(键)删除值,通过存储值时设置的键来获取,如果删除不存在的值,不会报错也没有任何操作

    • window.sessionStorage.clear()清空所有存储的值

  • window.localStorage同样是将数据存储到本地,存储空间在20M左右。这个方法是将数据存储在硬盘中,同一个浏览器的不同页面可以共享数据,并且该数据只要你不用方法来清除它,那么它是永久存在的。所以一般用来保存一些常用的值

    • window.localStorage.setItem(键,值)存储数据,以键值对的形式

    • window.localStorage.getItem(键)获取值,通过存储值时设置的键来获取,如果获取不存在的值返回空

    • window.localStorage.removeItem(键)删除值,通过存储值时设置的键来获取,如果删除不存在的值,不会报错也没有任何操作

    • window.localStorage.clear()清空所有存储的值

  • 应用程序缓存CACHE MAINFEST,如果在浏览网页的时候,突然断网了,你会发现之前打开过的页面还是能继续访问。这就是浏览器的默认缓存,但是它的缺点是不可控,要么页面全部缓存要么就不缓存

    • CACHE MAINFEST第一行必须是这个字段,标记这是一个缓存清单文件

    • CACHE:缓存文件清单列表,在下面写上你想要缓存的文件路径即可,*代表缓存所有文件

    • NETWORK:每次都必须向服务器重新请求的文件,写在这个下面的文件,不能缓存必须每次重新向服务器发送请求加载

    • FALLBACK:这个字段表示找不到的文件用另外的文件来代替,所以写在它下面的是两个为一组,用空格隔开,左边的文件如果找不到就用右边的文件来代替。/表示所有找不到的文件

    • 另外如果服务器是IIS类型的可能会不识别appcache文件格式,需要给其配置MIME-type,即text/cache-mainfest才可以,运行inetmgr快捷打开配置面板

    • 为了解决这个问题H5增加了应用程序缓存,要使用它首先得在html标签加上mainfest="缓存清单文件路径",缓存清单文件建议以.appcache作为扩展名

    • 缓存清单文件书写格式:

  • 关于cookie、storage、session之间的区别现在还不清楚,不过没具体用到也不做过多深入,等用到详细解释



作者:印象rcj
链接:https://www.jianshu.com/p/da49b13e15d4


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消