前言
做了个纯html实现引导页加网课视频答题demo的小项目，总结一下技术要点，太久不写html基础语法都不记得了。
1 jq入口函数以及js入口函数
没有用入口函数可能导致一些功能失效报错。
jQuery 入口函数:1
2
3
4
5$(document).ready(function(){
// 开始写 jQuery 代码...
});
或者1
2
3
4
5$(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
JavaScript 入口函数:1
2
3window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别：
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
- JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
2 jQuery选择器1
2
3
4
5
6
7
8
9
10
11
12
13
14
15$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("p").css("background-color","red"); //css选择器
3 html页面中的路径问题1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 相对路径写法 -->
<!-- ./ 表示当前文件所在目录，即404.html所在目录，即G:/testworkspace/ -->
<!-- ./可省略 -->
<img src = "logo.png"/>
<img src = "./logo.png"/>
<!-- ../ 表示当前文件所在目录的上级目录，即G:/ -->
<img src = "../testworkspace/logo.png"/>
<!-- /表示根路径，即G:/ -->
<img src = "/testworkspace/logo.png"/>
<!-- 绝对路径写法 -->
<img src = "G:/testworkspace/logo.png"/>
</body>
</html>
一般能用相对不要用绝对
4 实现视频播到一半弹出答题界面
主要用currentTime和duration属性，在当前进度达到视频总长的一半时，用js操作弹出界面，
我是采用jq隐藏加显示的方式。
HTML5音视频相关DOM链接在这：https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
5 引导页加载自动播放和把video铺满全屏的方式
这里我只说chrome可以使用的方法，因为objectfill貌似很多浏览器不兼容。
先说把视频铺满屏幕，下面是html文件中的代码：1
2
3
4
5
6<div class = 'prevideo'>
<button type="button" id="bt" onclick="skip()">开始学习</button>
<video class ="video" id ="video" autoplay muted>
<source src="src/insec.mp4" type="video/mp4" />
</video>
</div>
然后是css：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36*{
margin: 0;
padding: 0;
}
.prevideo{
width:100%;
height: 100%;
position: absolute;
}
.video{
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
object-fit: fill;/*这里是关键*/
width: auto;
height: auto;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
#bt{
top: 50%;
left: 45%;
right: 45%;
bottom: 50%;
text-align: center;
position: absolute;
z-index: 102;
width: 180px;
height: 50px;
opacity: 0.6;
}
然后是自动播放，chrome从某个版本后禁止了交互前自动播放视频，如果非要自动播放需要在video标签
加静音属性，即上面html代码中：1
<video class ="video" id ="video" autoplay muted>
6 js页面跳转1
window.location.href='hello.html';
7 video标签的controls属性
controls 属性是一个 boolean(布尔) 属性。
controls 属性规定浏览器应该为视频提供播放控件。
如果设置了该属性，则规定不存在作者设置的脚本控件。
浏览器控件应该包括：
- 播放
- 暂停
- 定位
- 音量
- 全屏切换
- 字幕（如果可用）
- 音轨（如果可用）
用法如下:1
<video controls></video>
8 解决html页面在浏览器中乱码
在html标签下面添加：1
2
3<html>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8">
<head>
扩展资料：1
2
3
4
5
6<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="author" content="" />
<meta name="Copyright" content="" />
<meta name="description" content="" />
<meta content="" name="keywords" />
第一行说明了他的文字编码
第二行说明了他采用的语言
第三行说明了他的作者
第四行说明了他的版权
第五行是对网站的简单描述
第六行是说明了本网站的关键字
