![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 115 阅读 · 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 · 267 阅读 · 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 · 215 阅读 · 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 · 92 阅读 · 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 · 130 阅读 · 0 评论 -
HTML5-进度条
<body> <!-- max:最大值 value:当前的进度值 --> <progress max="100" value="100"></progress> <!-- 度量器:衡量当前进度值 --> <!-- high:规定的较高的值 low:规定的较低的值 max:最大值 min:最小值 value:当前度量值 --> <meter max=".原创 2020-08-07 00:05:34 · 109 阅读 · 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 · 285 阅读 · 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 · 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> </head> <body> <form ac原创 2020-08-07 00:00:52 · 85 阅读 · 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 · 769 阅读 · 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 · 133 阅读 · 0 评论 -
HTML5中的语义标签
<body> <header>头部</header> <nav>导航</nav> <main> <article>左边</article> <aside>右边</aside> </main> <footer>底部</footer> </body> ...原创 2020-08-06 23:44:02 · 81 阅读 · 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 · 185 阅读 · 0 评论 -
HTML5-全屏接口-使用
全屏操作的主要方法和属性 1.requestFullScreen():开启全屏显示 不同浏览器需要添加不同的前缀 chrome:webkit firefox:moz ie:ms opera:o 2.cancelFullScreen():退出全屏显示 :也要添加前缀,在不同的浏览器下,退出全屏只能使用document来实现 3.fullScreenElement:是否是全屏状态 ,也只能使用document进行判断 <!DOCTYPE html> <html lang="原创 2020-08-06 23:32:41 · 171 阅读 · 0 评论 -
HTML5-FileReader的使用
FileEea:读取文件内容 1.readAsText():读取文本文件(可以使用Txt打开`在这里插入代码片`的文件),返回文本字符串,默认编码是UTF-8 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看的,而是存储文件。例如:读取文件的内容,获取二进制数据,传递给后台,后台接收了数据之后,再将数据存在 3.readAsDataURL():读取文件获取一段以data开头的字符串,这段字符串的本质就是DataU原创 2020-08-06 23:27:34 · 147 阅读 · 1 评论 -
HTML5-拖拽-通用
HTML5拖拽 在h5中。如果想拖拽元素,就必须为元素添加draggable="true".图片和超链接默认就可以拖拽 ondrag 应用于拖拽元素,整个拖拽过程都会调用--持续触发 ondragstart 应用于拖拽元素,当拖拽开始调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素,当拖拽结束时调用 ondragenter 应用于目标元素,当拖拽元素进入时原创 2020-08-06 23:11:49 · 104 阅读 · 0 评论