HTML5笔记
943学前端
这个作者很懒,什么都没留下…
展开
-
H5-自定义属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 定义原创 2020-08-07 00:13:43 · 128 阅读 · 0 评论 -
HTML5-类样式操作
add:为元素添加指定名称的样式,一次只能添加一个样式remove:为元素移除指定名称的样式(不是移动class属性),一次也只能移除一个toggle:切换元素的样式:如果元素之前没有指定名称的样式则添加。如果有则移除contains:判断元素是否包含指定名称的样式,返回true/false<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n原创 2020-08-07 00:12:13 · 279 阅读 · 0 评论 -
HTML5-dom操作
<!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> .red {原创 2020-08-07 00:10:24 · 221 阅读 · 0 评论 -
HTML5-多媒体标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- emb原创 2020-08-07 00:08:48 · 98 阅读 · 0 评论 -
HTML5-表单案列
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../css/原创 2020-08-07 00:07:04 · 140 阅读 · 0 评论 -
HTML5-进度条
<body> <!-- max:最大值 value:当前的进度值 --> <progress max="100" value="100"></progress> <!-- 度量器:衡量当前进度值 --> <!-- high:规定的较高的值 low:规定的较低的值 max:最大值 min:最小值 value:当前度量值 --> <meter max=".原创 2020-08-07 00:05:34 · 115 阅读 · 0 评论 -
HTML5-表单新增事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form ac原创 2020-08-07 00:03:35 · 290 阅读 · 0 评论 -
HTML5中新增的表单元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form ac原创 2020-08-07 00:02:06 · 106 阅读 · 0 评论 -
HTML5-表单中新增的其它属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form ac原创 2020-08-07 00:00:52 · 90 阅读 · 0 评论 -
HTML5-新增type属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form ac原创 2020-08-06 23:59:18 · 801 阅读 · 0 评论 -
HTML5中语义标签的兼容性
<!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> * { m原创 2020-08-06 23:49:18 · 136 阅读 · 0 评论 -
HTML5中的语义标签
<body> <header>头部</header> <nav>导航</nav> <main> <article>左边</article> <aside>右边</aside> </main> <footer>底部</footer></body>...原创 2020-08-06 23:44:02 · 88 阅读 · 0 评论 -
HTML5-网络接口
1.ononline:网络连通的时候触发这个事件2.onoffline:网络断开时触发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-08-06 23:34:49 · 196 阅读 · 0 评论 -
HTML5-全屏接口-使用
全屏操作的主要方法和属性1.requestFullScreen():开启全屏显示不同浏览器需要添加不同的前缀chrome:webkit firefox:moz ie:ms opera:o2.cancelFullScreen():退出全屏显示 :也要添加前缀,在不同的浏览器下,退出全屏只能使用document来实现3.fullScreenElement:是否是全屏状态 ,也只能使用document进行判断<!DOCTYPE html><html lang="原创 2020-08-06 23:32:41 · 196 阅读 · 0 评论 -
HTML5-FileReader的使用
FileEea:读取文件内容 1.readAsText():读取文本文件(可以使用Txt打开`在这里插入代码片`的文件),返回文本字符串,默认编码是UTF-8 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看的,而是存储文件。例如:读取文件的内容,获取二进制数据,传递给后台,后台接收了数据之后,再将数据存在 3.readAsDataURL():读取文件获取一段以data开头的字符串,这段字符串的本质就是DataU原创 2020-08-06 23:27:34 · 171 阅读 · 1 评论 -
HTML5-拖拽-通用
HTML5拖拽 在h5中。如果想拖拽元素,就必须为元素添加draggable="true".图片和超链接默认就可以拖拽 ondrag 应用于拖拽元素,整个拖拽过程都会调用--持续触发 ondragstart 应用于拖拽元素,当拖拽开始调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素,当拖拽结束时调用 ondragenter 应用于目标元素,当拖拽元素进入时原创 2020-08-06 23:11:49 · 114 阅读 · 0 评论