html5新增

HTML5

分析：

拖拽释放(Drap and drop)API ondrop拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
画布 canvas；getContext()方法返回一个用于在画布上绘图的环境Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
- cxt.stroke() 如果没有这一步线条是不会显示在画布上的
- canvas 和 image 在处理图片的时候有什么区别?
  
  image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.

自定义属性 data-id

dataset来实现存取

// h5的自定义属性data- 实现一些简单数据的存取
let div = document.createElement('div')
document.body.appendChild(div)
div.dataset.fru = 'djaisof'

用于媒介播放的 video 和 audio，如果浏览器不支持自动播放怎么办？在属性中添加 autoplay
新的语义化标签：article，header，nav，section，footer, aside；
新的本地存储：localStorage（长期存储浏览器关闭后数据不丢失），sessionStorage；
新的表单控件：calendar , date , time , email , url , search , tel , file ,number;
新的技术：websocket，web worker，geoloacation（基于地理位置的应用）。

结构标签

<header>定义网页的头部</header>
<nav>定义网页导航区域</nav>
<section>定义网页的区段</section>
<article>定义网页独立区域内容</article>
<aside>定义网页侧边栏内容</aside>
<footer>定义网页的底部</footer>

vedio标签

video视频标签有兼容问题

属性

muted:静音播放
autoplay:自动播放,但要加上muted
loop:循环播放
controls:显示播放控件
preload:auto(预先加载) none(不预先加载视频) metadata(加载一部分信息，每个浏览器不同),如果有autoplay则忽略
poster:加载等待的画面图片
width:宽
height:高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        video {
            margin: 100px auto;
            height: 600px;
            width: 1076px;
        }
    </style>
</head>
<body>
<video src='http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_e69987bb8934400eb786a159f45985ce.f0.mp4?vkey=8AD9E63253276CEA6F778A11794E90D81B116C587318D0AF7379FAF8E2D3F9B7A48CED0D9B1177804922DE9F96C0281A3AE2FAA580CCA98141522BCCF3FF3B307F54E2AEB4A86AB8C04631D21869AD25FB600EA0009A3F9C&sha=0' autoplay='autoplay' muted='muted' loop='loop' controls='controls'></video>
</body>
</html>

注意：谷歌浏览器的autoplay要用加上muted来解决

视频格式兼容问题

<vedio controls>
    <source src='..mp4'>
    <source src='..mp3'>
    <source src='..webm'>
</vedio>

embed标签

已弃用，会插入文档片段，不安全

<embed src=''>

audio标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
       
    </style>
</head>
<body>
    <audio src="C:\Users\DELL\Documents\Tencent Files\2826696712\FileRecv\MyKey - Why Baby Why.mp3" controls='controls'></audio>
</body>
</html>

注意：浏览器把自动播放功能禁用了

audio 同样也有兼容性问题

src:加载音频资源地址
autoplay：音频在就绪后马上播放（被禁用了）
controls:显示空间，如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
muted:静音播放
loop:loop 循坏播放

兼容问题

<audio controls>
    <source src='..mp4'>
    <source src='..mp3'>
    <source src='..ogg'>
</audio>

如果还有问题，则表示浏览器不支持audio标签

input类型

input新增type值

    <form action="">
        邮箱：<input type="email" name="" id="">
        url: <input type="url" name="" id="">
        日期：<input type="date" name="" id="">
        时间：<input type="time" name="" id="">
        年月：<input type="month" name="" id="">
        年周：<input type="week" name="" id="">
        数字：<input type="number" name="" id="">
        // 数字e可以显示 因为有科学计数法e
        手机号码：<input type="tel" name="" id="">
        搜索框：<input type="search" name="" id="">
        颜色：<input type="color" name="" id="">
        显示：<input type="show">
        隐藏：<input type="hidden" name="">
        滑块：<input type="range" name="" id="">
    </form>

注意：当我们要验证时要在form表单域中

input新增属性

    <form action="">
        accesskey: <input type="text" accesskey="m"> <br>   // 快捷键 alt + accuesskey的值 聚焦
        autofocus <input type="text" autofocus='autofocus'> <br>    //自动聚焦
        required: <input type="text" required='required'> <br>  // 必须填写，不然不能提交
        placeholder <input type="text" placeholder="默认信息"> <br> //默认信息
        multiple <input type="file" multiple='multiple'> <br>   // 文件多选
        autocomplete <input type="text" autocomplete="off" name="names"> //默认为 On 需要在表单内，同时加上name属性，同时成功提交 <hr>
        <input type="submit" value="提交">
    </form>

datalist标签

<!-- input使用list属性-->
    <input type="text" value="输入明显" list='star'>
    <!-- datalist使用id属性，list属性和id属性为一致，表示input完成链接 -->
    <!-- 如果value有值，优先显示value的值 -->
    <datalist id="star">
        <option value="01">小红</option>
        <option value="02">小路</option>
        <option>小明</option>
    </datalist>>

filedset标签

和form标签一起使用，对表单进行分组，分组之后每一组大概描述信息legend标签

<form action="">
        <fieldset>
            <legend>账户信息</legend>
            用户名：<input type="text" name="" id="">
            密码: <input type="password" name="" id="">
        </fieldset>
        <br>
        <br>
        <fieldset>
            其他: <input type="text">
        </fieldset>
        
    </form>

mark标签

对与定义带有记号的文本，在需要显示的时候可以使用meter标签

<p>对与定义带有<mark> 记号的文本</mark>>>，在需要显示的时候可以使用meter标签</p>

meter标签

定义度量衡

<meter min="0" value="30" max="100" low="15" high="80"></meter>

注意：ie浏览器不支持meter标签

progress标签

<label for='file'>file progress:</label>
<progress value='70' max='100' id='file'></progress>
<-- js一起使用
    max:描述一个需要完成多少任务
    value:表示已近完成的任务-->

posted @ 2022-05-06 20:19 a立方阅读(42) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Web API

· html基础

· HTML5新特性

· html5的新特性

· h5和css3新特性

公告

昵称： a立方
园龄： 4年4个月
粉丝： 1
关注： 4

+加关注

2025年3月

日

一

二

三

四

五

六