HTML5与CSS3知识点总结
HTML常用标签总结
手摸手带你学CSS
好好学习，天天向上
本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
原文链接：https://blog.csdn.net/weixin_43461520/article/details/113201713
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
HTML5新增标签
HTML5针对以前的不足，新增了一些新的标 ...
超酷！！HTML5 Canvas 水流样式 Loading 动画
今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画，这款Loading动画在加载时会呈现液体流动的动画效果，并且由于和背景颜色的对比，也略微呈现发光的动画效果。
效果预览
代码实现
HTML代码
接下来我们讲讲实现这个加载动画的大致思路和实现过程。
首先在页面上定义一个canvas元素，用来承载这个Load ...
基于 HTML5 和 WebGL 的地铁站 3D 可视化系统
前言
工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场 ...
HTML5测试（二）
HTML5测试（四）
1、input 元素中，下列哪个类型属性定义了输入电话号码的控件？
A、mob
B、tel
C、mobile
D、telephone
答案：B
具有 type 属性的 input 元素，其值为 “tel”，表示用于输入电话号码的单行纯文本编辑控件
2、哪个元素表示用于生成公钥-私钥对的控件？
A、ins
B、keygen
C、key
D、command
答 ...
html5 播放 rtsp
目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 html 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的，因此也不能直接播放 RTSP 流。
在借助一定工具的情况下，可以实现在 Web 页面上播放 ...
HTML5中的document.visibilityState
在 HTML5 中，文档对象（即 document 对象）具有一个 visibilityState 属性，该属性表示当前文档对象的可见性状态。
visibilityState 可能的取值有以下三种：
- visible ：表示文档当前处于激活状态，即当前选项卡处于前台或当前窗口处于屏幕最上层。- hidden ：表示文档当前处于非激活状态，即当前选项卡处于后台或当 ...
HTML5 - 3D 旋转相册
前一段时间，突然看到一个炫酷的3D旋转相册，这里记录一下，先看效果图：
HTML5 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 3D旋转图片相册 可鼠标悬停</title>
<style text="text/css">
* {
padding: 0;
mar ...
html5调用摄像头截图
关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，我觉得软硬结合的时机已经成熟。那我们就提前熟悉下怎么操作这些多媒体硬件吧，首先图像识别是其中最热门的应用场景，首先实现调用摄像头以及截图。
demo的效果请看：摄像头截图
API兼 ...
HTML5调用摄像头录制视频
HTML5调用摄像头录制视频不支持ie，ie下不支持webrtc，无法使用navigator.getUserMedia调用摄像头
<!DOCTYPE html>
<html>
<head>
<title>video recoder</title>
<script src="fileSaver.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
...
HTML5测试（一）
HTML5测试一
1. 问题：HTML5 之前的 HTML 版本是什么？
A、HTML 4.01
B、HTML 4
C、HTML 4.1
D、HTML 4.9
答案：A
HTML5 是 HTML 最新的修订版本，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。目标是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准。
2、问题：HTML5 的正确 doctype 是？
A、 <!DOCTYPE ...
快速开发 HTML5 交互式地铁线路图
前言
前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获（毕竟我还是个菜鸟）以及代码的实现，希望能够帮到一些朋友。当然，如 ...
HTML5中的视频播放
HTML5 留给我印象最深的之一就是 Video 标签了，毕竟之前在被 Flash 统治下确实非常难受，现在使用 HTML5 播放器别提多爽了。
但是，我对视频这块了解真的并不是很深，于是稍微研究了下。
预备知识
最近几年 HTML5 这个词越来越流行，但是别以为 HTML5 最近几年才开始出现，引用 WIKI 上的话：
HTML 5 草案的前身名为 Web ...
HTML5介绍
HTML5介绍
H5的特点
1）更简洁、但是在实际开发中要注意书写规范，利于后期维护
2）标签的语义化
扩展：语义化的重要性：
① 当页面加载失败的时候，还能够呈现出清晰的结构
② 有利于SEO优化，利于被搜索引擎收录（即便于网络爬虫的识别）
③ 在项目开发及维护时，语义化的也很大程度 ...
基于HTML5 WebGL的工业化3D电子围栏
前言
现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个现代化工厂的现实场景，包括工厂工人的实时位置、电子围栏的 ...
简单介绍HTML5 Landmark
最近在进行无障碍相关文档翻译的时候遇到了 landmark 的概念，在网上搜了下发现没有相关的中文资料，因此写一篇博客简单介绍一下。
什么是 Landmark
Landmark 是一种用来表示网页组织结构的方法。通常一个网页可以被切分成几个大块
以一个视频网站为例，网页的最上方是一条banner，左侧是一个导航栏，右侧显示视频。网页可 ...
基于 HTML5 WebGL 的发动机 3D 可视化系统
前言
工业机械产品大多体积庞大、运输成本高，在参加行业展会或向海外客户销售时，如果没有实物展示，仅凭静态、简单的图片说明书介绍，无法让客户全面了解产品，不仅工作人员制作麻烦，客户看得也费力。如果能在 Web 上做 3D 设备展示，销售人员可以不限平台随时给客户介绍演示。还可以不受现实条件限制，演示设备拆分和组 ...
五分钟学会HTML5的WebSocket协议
1、背景
很多网站为了实现推送技术，所用的技术都是Ajax轮询。轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分， ...
HTML5拖放排序
最近在项目中遇到了拖动排序的需求，所以就学习了一下H5的新属性，写篇博客记录一下。
draggable属性是指定当前元素可以被拖动的属性；我们要为需要拖动的元素设置该属性
<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header ...
HTML5 视频流行插件之video.js
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。
（要支持ie低版本请下载5.4.3版 ）点击进入官网
下载地址：http://www.jq22.com/jquery-info404
也可以使用cdn
<link href="//cdn.bootcss.com/video.js/7.0. ...
HTML5新特性——自定义滑动条（input[type="range"]）
HTML 4.01 与 HTML5之间的差异
以下 input 的 type属性值是 HTML5 中新增的：
color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。
input的type属性
设置input的type="range"即可得到滑动条控件，如下：
<input id="range" type="range" value="5" onchange="changeV( ...
