HTML5新标签与javaScript新方法

Stella981
• 阅读 669

HTML5 (0106)

1、文档声明
    <!DOCTYPE html>

2、字符编码设置
    <meta charset="UTF-8">

3、验证    (http://validator.w3.org/)

HTML5新增的语义化标签

1、语义化标签:说明页面内容,便于搜索引擎寻找该内容;

优点:根据内容的结构化,选择合适的标签便于开发者阅读和写出更优雅的代码,
同时让浏览器的搜索引擎更好的解析和收录。

    <article></article>        定义文章
    <header></header>        头部
    <nav></nav>                导航
    <main></main>            主要区域
    <section></section>        文档中的段落,某一区块
    <aside></aside>            和section类似
    <footer></footer>        底部,页脚

        tips:section和aside可以归属为main的子标签

    <mark></mark>            标记(很少用)

    <progress></progress>    进度条(很少用)
            该标签具有属性:max,min,value;

    <figure>                        表示单元(没见过,很少用)
        <figcaption></figcaption>    表示单元的标题
    </figure>

2、ie8以下的浏览器不识别H5标签

解决方法:引入一个js插件,放在head标签中;
    <!--[if It IE 8]-->
        <script src="html5shiv.js"></script>
    <!--[endif]-->

    tips:该段代码这样设置只有在IE8内才会识别,其余版本会解析成注释;

表单输入类型

1、效果如下图所示
<fieldset>
    <legend>标题</legend>
    //下面写表单元素input等    
</fieldset>

HTML5新标签与javaScript新方法

2、input系列新属性

<input type="email">    邮箱输入框,会对输入的内容进行自动验证;
    type="url"        网址输入框,需要加http或https协议名;
    type="search"    输入框,带有清空内容的按钮;
    type="tel"        电话号码,在移动端将会自动弹出数字键盘;

    type="number"    很少用,表示数字,有加减按钮,有max,min,value,step属性;
    type="range"    很少用,表示滑块,有min,max,step;

    type="time"        时间,显示时与分,有上下按钮,如下图;    

HTML5新标签与javaScript新方法

    type="datetime-local"    本地时间,可以调整年月日时分;
    type="date"        带有年月日,带有日历选择框,value:xxxx-xx-xx;
    type="color"    value="#666666",必须是六位十六进制;

    type="file"        上传文件,加入了multiple属性则可以多文件上传;

3、datalist数据列表

    <input type="text" list="course">
    <datalist id="course">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </datalist>

tips:input中用list,datalist用id,二者名称相同即进行关联;
    option中存放了关联字,当在input中输入数据时,将会显示关联字;

4、input属性

    placeholder="",作为初始显示值;
    autofocus        自动获取焦点,没有值;
    autocomplete="on"    自动完成,值为on或off,默认为on;
    pattern="[a-z]{3}"    指定了输入框的验证方式,其值为正则表达式;

    required    拥有该属性的input内容不能为空,否则无法提交;

5、新事件

    oninput        用户输入内容时触发
    oninvalid    验证不通过时触发

6、新方法

    this.setCustomValidity    修改验证提示;

多媒体

    <audio controls="controls" autoplay="autoplay" loop="loop">
        <source src="xxx.mp3">
        <source src="xxx.ogg">
        <source src="xxx.wmv">
    </audio>

tips:在source中提供多种格式的资源,多种资源便于兼容不同浏览器。
<video></video>标签与之类似。

DOM新增属性

获取元素:
    document.querySelector();
    document.querySelectorAll();

类名操作:
    node.classList.add();
    node.classList.remove();
    node.classList.contains();
    node.classList.toggle()

自定义属性

data-*;
data-*-*;

node.dataset.*;
    eg:document.querySelector("a").dataset.cont="world";

tips:data-*的属性形式在一些插件使用较多,例如bootstrap;

Review_正则表达式

1、元字符

    .        除以\n之外的所有单个字符;
    \        转义字符;

    |        左右表达式出现一次即true,为了避免歧义需要加();
        eg:1a||b32,写成1(a||b)32;

    ()        优先级,分组

2、量词

    ?        某个字符出现0-1次;
    +        一次或多次;
    *        0-n次;
    {n}        n为正整数,出现n次;
    {n, }    
    {n,m}    

3、范围

    [0-9]    
    [a-z]
    [A-Z]    (支持连写)

    \d        数字,digital;
    \D        非数字;
    \s        空白字符,space;
    \S        非空白字符;
    \w        单词,word;
    \W        非单词;

    ^        开头;
    $        结尾;

    汉字编码    [\u4e00-\u9fa5];

HTML5_JS新方法 (0112)

网络状态监测

window.online        用户连接时触发该事件;
window.offline        用户断开连接时触发该事件;

文件读取

FileReader对象
    <body>
            //页面结构很简单,一个img用于显示图片,一个file用于上传图片,一个button用来点击;
        <input type="file">
        <button>显示图片</button>
        <img src="" alt="">

        <script>

            //获取元素
            var file=document.querySelector('input');
            var button=document.querySelector('button');
            var img=document.querySelector('img');

            //点击按钮后触发事件
            button.onclick=function(){
                var reader=new FileReader();            //创建一个fileReader对象;
                
                reader.readAsDataURL(file.files[0]);    //获取元素中上传的文件,
                                        //file.files是一个数组,包含了上传的文件的全部信息;

                reader.onload=function(){            //文件读取完成之后触发事件;
                     console.log(reader.result);    
                     img.src=reader.result;            //读取的内容保存在了reader.result属性里,赋值给img.src;
                }
            }
        </script>
    </body>

参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

视频API

方法:    load() 加载;
        play() 播放;
        pause() 暂停;

属性:    currentTime 视频播放的当前进度;
        duration:视频的总时间;

事件:
    oncanplay:         事件在用户可以开始播放视频/音频(audio/video)时触发;
    ontimeupdate:    通过该事件来报告当前的播放进度,视频播放时不断的触发;
    onended:        播放完时触发;

全屏:    video.webkitRequestFullScreen();

拖拽事件

分为两种,
第一种是拖拽元素,在元素中添加属性draggable="true",即可成为拖拽元素;
第二种是目标元素;

1、对于拖拽元素
    ondrag         应用于拖拽元素,整个拖拽过程都会调用;
    ondragstart    应用于拖拽元素,当拖拽开始时调用;
    ondragleave    应用于拖拽元素,当鼠标离开拖拽元素时调用;
    ondragend    应用于拖拽元素,当拖拽结束时调用;

2、对于目标元素
    ondragenter    应用于目标元素,当拖拽元素进入时调用;
    ondragover    应用于目标元素,当停留在目标元素上时调用;
    ondrop        应用于目标元素,当在目标元素上松开鼠标时调用;
    ondragleave    应用于目标元素,当鼠标离开目标元素时调用;

Web存储

大致分为三种:cookie、sessionStorage、localStorage;
    1、cookie存储;
        缺点:存储量较小,仅4K,存储数据时进行了加密,解析复杂;

    2、sessionStorage,会话存储,打开一个URL——→关闭页面    ——→即为一个会话;
        生命周期:从打开浏览器开始到关闭浏览器结束;
        主要存放一些小容量的临时数据,同一窗口下数据共享;
        容量:5M;

    3、localStorage,本地存储;
        永久存在,除非手动删除;
        可以多个窗口共享数据;
        容量:20M;

方法:
    setItem(key, value) 设置存储内容
    getItem(key) 读取存储内容
    removeItem(key) 删除键值为key的存储内容
    clear() 清空所有存储内容
    key(n) 以索引值来获取存储内容

        eg:    window.sessionStorage.setItem('name','张飞');
            window.sessionStorage.clear();

缓存清单CACHE

离线存储,HTML5中我们可以轻松的构建一个离线(无网络状态)应用,
只需要创建一个cache manifest文件。

manifest格式:新建文件,名称为demo.appcache,以下为格式;

    CACHE MANIFEST
    CACHE: 
    img1.jpg
        #指定我们需要缓存的静态资源,如.css、image、js等

    NETWORK: 
    *
        #指定需要在线访问的资源,可使用通配符

    FALLBACK: 
    one.css        two.css
        #当前页面无法访问时退回的页面(回退;后退),
        #在这里,找不到one.css将会使用two.css取代;

优势:
    1、可配置需要缓存的资源;
    2、网络无连接时应用仍然可用;
    3、本地读取缓存资源,提升访问速度,增强用户体验;
    4、减少请求,缓解服务器负担;

tips:chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存

地理定位

window.navigator.geolocation

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息;
                            获取成功时调用的函数,失败时的函数,用options可调整位置信息数据收集方式;

navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息;

position.coords.latitude纬度;
position.coords.longitude经度;

speedNaN    速度;
accuracy    精度,98;

关于视频音频的属性和方法
    http://blog.poetries.top/2016/12/30/video-audio/
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这