边学边做网页篇-初识HTML

什么学习HTML？

理解HTML代码是制作网页的基本技能。在互联网高度发达的今天，网页制作技术开始变的和修图、处理视频一样重要。

第一，学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看，无论是文字、照片还是视频都可以通过浏览器观看，甚至是分享自己制作的小游戏。

第二，理解网页运行的基本原理后可以更好的浏览他人的网页，寻找有用信息，更合理的使用第三方工具，简单高效的制作自己的网页。

HTML学习难度与重要性

HTML代码本身非常容易理解，使用也非常简单，但是单纯使用HTML代码写出的网页效果和我们平时看到的网页相差甚远。要想做出一个漂亮的页面，我们还需要CSS和JavaScript的帮助。

HTML、CSS、JavaScript这些不同的代码都有什么作用呢？简单来说，HTML代码可以为网页提供基本内容，比如文字、图片、音乐、视频等。CSS代码可以为页面安排布局，比如标题的位置、字体、颜色、大小等，笼统的说就是为HTML代码添加的内容增加样式信息，例如修改位置、尺寸、颜色等属性。JavaScript代码可以为页面提供交互（互动）功能，例如通过按钮控制页面内容的隐藏、出现，或者为多张图片添加轮播功能等。

对比起来，HTML的学习难度最低，但作用是最重要的，因为一切页面的基础是内容，没有内容，样式与交互都不存在。

认识HTML基本结构

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

以上七行代码是一个网页文件的HTML代码的基本结构。

大家观察一下可以发现一个规律，每一行的内容都是写在“<>”里面的。原因说来话长，先记住就行。每个写在“<>”里面的内容叫做“标签”。以后“标签”这个词会经常出现。

第一行<!DOCTYPE HTML>标签指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令（这句话可以暂时不必理解）。重要的是这句傲娇的代码只能存在在HTML代码的第一行！

第二行<html>标签与第七行的</html>标签是一对，“<html>”叫做开始标签，“</html>”叫做结束标签。他们之间的区别在于结束标签比开始标签多一个“/”。这是HTML代码的一个重要规律，以后我将要学到的大部分标签都是这样的，可能浏览器有些强迫症吧，如果没有结束标签它会很不舒服，有可能会消极怠工而产生麻烦（不能正常显示）。不过遗憾的是<!DOCTYPE HTML>太傲娇，至今没有另一半。<html> 与 </html> 标签限定了文档的开始点和结束点。

第三行与第四行组成一对，叫做“head”标签。顾名思义，这个“头”标签里的内容统领全局，比如控制布局与样式的CSS代码文件和添加互动功能的JavaScript代码文件在这里添加或导入；搜索页面用的关键词信息在这里添加；页面信息的编码方式也是由此指定；浏览器窗口的标题也在这里显示。

第五行与第六行组成一对，叫做“body”标签。用来显示所有的页面内容信息。

画个图来表示一下这四个标签的层级关系（就是谁包含谁的意思，或者谁在谁的势力范围内出现）：

边学边练------写一个最简单的页面

正所谓万丈高楼平地起，下面我们就动手做我们的第一个网页文件。

工具：电脑，安装一个浏览器（IE 火狐谷歌浏览器都可以），确定“记事本”工具可用。

有了以上工具我们就可以写了。

Step1 新建一个.txt文件。

操作如下：

（1）选择合适的磁盘，比如D盘或F盘新建一个文件夹，命名为“网页”。点击进入。

（2）在空白处点击鼠标右键新建一个文本文件，命名为“第一个页面”。这时我们就有了一个“第一个页面.txt”文件了。

如果你的电脑不显示“.txt”这样的文件后缀，可以在屏幕左上方寻找“查看”菜单，如图2

图 2

点击后，出现如下菜单如图3，点击“选项”。

图 3

点击“查看”，去掉“隐藏已知文件类型的扩展名”选项前的“对号”，如图4所示。这时就能显示或修改文件后缀了。

图 4

Step2 添加内容

（1）双击打开“第一个页面.txt”文件，把HTML基本结构共七行代码输入进去。

（2）保存，关闭文件，在“第一个页面.txt”文件上点击鼠标右键，选择“重命名”，将“.txt”修改为“.html”。这时，系统会提示，如图1，大胆点“是”。

图 1

这时我们的文件就变成了html网页文件了。

我们双击这个文件发现浏览器内一片空白，这就好比我们在桌子上摆了个碟子，里面并没有放美食。浏览器中的一片白就是空碟子的颜色，而HTML基本结构就是这个碟子。

下面我们往碟子里加点东西。

Step3 添加内容

（1）在“第一个页面.html”文件上点击鼠标右键，选择“打开方式”，选择“记事本”，如果没有“记事本”选项，请点击“选择其他应用”，点击选择最下面的“更多应用”，选择“记事本”。下一次选择“打开方式”时，“记事本”就会出现了。

（2）在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h1>第一个网页</h1>”；“<p>随着学的内容越来越多，网页就会越来越漂亮了！</p>”完成如图5

图 5

（3）保存，关闭，双击打开！效果如图6

图6

今天的边学边做就到这里，下一次会详细解释<head>标签、<body>标签中常出现的子标签以及它们各自的作用。

第二篇《边学边做网页篇——<head>标签里装点啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479

avaScript奇淫技巧：20行代码，实现屏幕录像

本文展示一个技巧，可以给任何网站、网页实现屏幕录像功能。

即使你不是网站的管理者，也可以给它添加录制功能。

方法如下：

第一步：

复制一段JS代码，这段代码是实现录像功能的：

var body = document.body;
body.addEventListener("click",async function(){
var stream = await navigator.mediaDevices.getDisplayMedia({video: true});

var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});

//录制
var chunks = [];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})

//停止
mediaRecorder.addEventListener('stop', function(){
var blob = new Blob(chunks, {type: chunks[0].type});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
})
//手动启动
mediaRecorder.start()
});

第二步：

打开任意网站，比如JShaman官网：

然后调出“Web开发者工具”，并切换到“控制台”。

第三步：

粘贴上面复制的JS代码，并按下回车。

回车后会显示出“undefined”：

第四步：

在网页任意地方点击鼠标，即可进行录屏操作。

这时会弹出一个窗口，供选择录制范围。

之后便开始录制了。

当需要停止录像时，点击”停止共享”就可以了。

停止录制后，刚刚录制的内容会自动保存成一个视频文件：

打开便可播放：

在这整个过程中，最重要的是第一步中的JS代码。

代码可自行阅读理解，大意是给document.body添加点击事件，当点击时，进行屏幕录像。

所以，只要保存那段代码，便可给任意网站添加录像功能。

如果想要修改触发条件，比如把鼠标点击改为鼠标双击，只需修改addEventListener中的事件名称即可。

例：改为双击：

var body = document.body;
body.addEventListener("dblclick",async function(){
var stream = await navigator.mediaDevices.getDisplayMedia({video: true});

var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});

//录制
var chunks = [];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})

//停止
mediaRecorder.addEventListener('stop', function(){
var blob = new Blob(chunks, {type: chunks[0].type});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
})
//手动启动
mediaRecorder.start()
});

如果在复制粘贴代码时，不想让别人看出你的代码是什么意思，还可以对以上代码进行混淆加密。

用JShaman对代码进行加密：

得到加密代码：

复制并使用这段代码，使用跟之前一样，但别人是无法理解代码功能的。

使用：

最后，给出加密后的代码，复制即可用，可用于任何网页。

(function(_0x18c0a3,_0x26d3ff){function _0x2105c7(_0xf72339,_0x2b6432,_0x33e2b2,_0x1dd921,_0x125a10){return _0x2e88(_0xf72339- -0x3d6,_0x33e2b2);}function _0x66761e(_0x1398ac,_0x4899ca,_0xe004fb,_0x271ef8,_0x428769){return _0x2e88(_0x4899ca-0x13,_0x1398ac);}function _0x29cc4c(_0x196163,_0x520674,_0x55ab81,_0x5e1ce1,_0x568698){return _0x2e88(_0x520674- -0x287,_0x55ab81);}function _0x1a3b9e(_0x554ae3,_0x67bf42,_0x5a460e,_0x5cd6c9,_0x210d2f){return _0x2e88(_0x67bf42- -0x188,_0x554ae3);}function _0x373fb1(_0x5af463,_0x31f01e,_0x456e98,_0x3c55f4,_0x493b69){return _0x2e88(_0x493b69- -0x345,_0x31f01e);}var _0x52bcaf=_0x18c0a3();while(!![]){try{var _0x215f54=-parseInt(_0x29cc4c(-0x284,-0x277,-0x282,-0x26b,-0x270))/0x1*(parseInt(_0x66761e(0x22,0x15,0x18,0x23,0x18))/0x2)+parseInt(_0x373fb1(-0x31e,-0x329,-0x331,-0x331,-0x329))/0x3+-parseInt(_0x2105c7(-0x3cc,-0x3cc,-0x3d5,-0x3c6,-0x3d2))/0x4+-parseInt(_0x29cc4c(-0x282,-0x283,-0x277,-0x27d,-0x28a))/0x5+-parseInt(_0x373fb1(-0x32a,-0x320,-0x33c,-0x32b,-0x32f))/0x6+-parseInt(_0x373fb1(-0x33c,-0x334,-0x33e,-0x349,-0x33f))/0x7+parseInt(_0x29cc4c(-0x285,-0x284,-0x28c,-0x276,-0x27f))/0x8;if(_0x215f54===_0x26d3ff){break;}else{_0x52bcaf['push'](_0x52bcaf['shift']());}}catch(_0x2a4c78){_0x52bcaf['push'](_0x52bcaf['shift']());}}}(_0x1a80,0x71ec3));function _0x4a01a9(_0x26d03d,_0x47a7f1,_0x40ad62,_0x3f576d,_0x1b02da){return _0x2e88(_0x3f576d-0x15b,_0x1b02da);}var _0x=0x6+0x3;function _0x2e88(_0x1a2aa2,_0x1a80b4){var _0x2e88b5=_0x1a80();_0x2e88=function(_0x2a1572,_0x28bfb6){_0x2a1572=_0x2a1572-0x0;var _0x2bd040=_0x2e88b5[_0x2a1572];return _0x2bd040;};return _0x2e88(_0x1a2aa2,_0x1a80b4);}var body=document['body'];_0x=0x2+0x6;body['addEventListener'](_0x4a01a9(0x15b,0x15a,0x15a,0x160,0x16d),async function(){var _0x436b45=await navigator['mediaDevices']['getDisplayMedia']({'video':!![]});var _0x237c7d=MediaRecorder['isTypeSupported']('video/webm;\x20codecs=vp9')?'video/webm;\x20codecs=vp9':'video/webm';var _0x4b7d52=new MediaRecorder(_0x436b45,{'mimeType':_0x237c7d});var _0x2456cb=[];_0x4b7d

更多精彩文章：

JS奇淫技巧：数值的七种写法

JavaScript奇淫技巧：隐写术

JS奇淫技巧：alert有几种写法？

JavaScript奇淫技巧：变速齿轮

JavaScript奇淫技巧：收缩控制流

JavaScript奇淫技巧：按键精灵

JS奇淫技巧：一行赋值语句，能玩出多少花样？

JavaScript奇淫技巧：命令行语法高亮

JavaScript奇淫技巧：清理无效的垃圾代码

JavaScript奇淫技巧：利用数组加密并压缩代码

JavaScript奇淫技巧：压缩并加密图片

JavaScript奇淫技巧：把JS编译成exe

JavaScript奇淫技巧：用try、catch实现JS代码加密解密

JS小技巧：制作一个密码保护的网页

JavaScript黑暗技巧：变异的Eval

JS代码混淆加密：JSON数据加密技巧

JS加密技术：平展控制流

奇思妙想之：用JS给图片加口令

JavaScript黑暗技巧：禁止浏览器点击“后退”按钮

视频采集和管理是多模态大数据应用场景必不可少的环节，在基于Vue2前端框架实现的Web界面如何进行视频的展示和播放是开发人员会遇到的一个主要技术问题。本文提供基于Vue2+video.js实现视频的预览的方案。

采集的视频数据在前端视频管理模块列表中展示，然后用弹窗查看视频详情并预览播放。最开始使用 vue-mini-player 组件，可轻松实现视频在编辑界面的弹窗中播放，但是遇到两个问题：1）弹窗中播放着视频，关闭窗口后，视频流不会停止。2）关闭窗口，重新打开新的视频编辑窗口后，依旧是继续播放之前的视频。其原因应该是关闭旧的窗口后，视频播放的控件没有销毁，导致新打开的控件其实还是旧控件的实例。查了很多关于vue-mini-player的文档和使用样例，没有找到如何销毁vue-mini-player控件。

视频列表

单条视频数据编辑界面

video.js 是一个通用的可嵌入网页的视频播放器JS库，在Vue2中引用video.js可以创建播放组件对象，关闭视频时能进行操作。基于Vue2使用video.js方法如下。

安装video.js：

npm install video.js@6.13.0

main.js注册

import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.videoJs = videoJs //注册

vue代码文件中使用组件

创建<video>组件，可放在弹窗中任何需要的地方。重点是给出id值，设置属性时需要用到。

<template>
  <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <video id="casvideoplayer" ref="videoPlayerRef" class="video-js">
          <source :src="playUrl" type="video/mp4">
      </video>
      ...
      <div slot="footer" class="dialog-footer">
        	<el-button type="primary" @click="submitForm">确 定</el-button>
        	<el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</template>

export default {
data() {
    return {
    // 使用video.js播放视频配置
    videoJsPlayer: null,
    playUrl:"", 			//视频文件链接
    videoPlayerOption: {
        controls: true, 			//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        // url: "", 							//要嵌入的视频资源url（不起作用？）
        poster: '',   					//封面
         autoplay: false, 	//自动播放属性, true/false/"muted"(静音播放)
        muted: false, 				//静音播放
        preload: 'none', 		//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        fluid: false, 					//是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
        width: "850px", 		//视频播放器的显示宽度（以像素为单位）（fluid=false时起作用）
        height: "600px", 		//视频播放器的显示高度（以像素为单位）（fluid=false时起作用）
     },
};

methods: {
   // 视频列表的“修改”按钮，点击后显示修改弹窗
   handleUpdate(row) {
        // 从后台获取视频信息
        getVedio(row.id).then(response => {
            this.form = response.data;    //修改弹窗其他字段信息赋值
            this.title = "修改视频管理";
            this.open = true;    								// 显示修改弹窗

            // video.js组件播放视频
            this.videoPlayerOption.poster = response.data.avator;
            this.playUrl = response.data.contentsOrg;
            this.showVideoWindow();   //设置视频播放控件
        });
     },
       
    //（重点是这里）
    // 使用video.js组件播放视频
     showVideoWindow(){
        // 如果视频播放控件已经存在，切换视频url，重新播放；如果控件不存在，创建
        if(this.videoJsPlayer){
            this.videoJsPlayer.src([
                 {
                    src: this.playUrl,
                    type: "video/mp4"
                 }
             ]);
            // 如何图片不为空，设置视频封面
            if(this.videoPlayerOption.poster != null && this.videoPlayerOption.poster != ""){
            		this.videoJsPlayer.poster(this.videoPlayerOption.poster);
             }
            this.videoJsPlayer.load(this.playUrl);
            // this.videoJsPlayer.play();      //自动播放（打开后，切换视频后需自动播放）
         }else{
            // 最开始创建一次视频播放组件
            this.$nextTick(() => {
                this.videoJsPlayer = this.videoJs(
                    "casvideoplayer", 				//播放器控件id
                    this.videoPlayerOption //播放器设置项（这里设置的poster属性不生效，需要在后面单独设置）
                 );
                this.videoJsPlayer.poster(this.videoPlayerOption.poster);  //貌似不生效？
             })
         }
     },
       
    // 编辑弹窗页面的“取消”按钮
    cancel() {
        // 重置视频控件数据（video.js组件）
        if(this.videoJsPlayer){
            this.videoJsPlayer.reset();
         }
					this.reset();
 		},
｝

以上代码实现了在Vue2弹窗中播放视频组件的功能，注意关闭弹窗时要使用“取消”按钮。如果通过点击弹窗右上角X关闭弹窗，视频还可以在后台继续播放，但是打开一个新的视频修改弹窗后，播放的视频会终止，并切换到新视频播放界面。即使这样，目前的功能已经不影响用户正常使用。

video.js还有一个强大功能，看到喜欢的画面点击右键可以保存视频帧，另外支持画中画、设备投放等功能。

video.js右键功能

后续优化改进工作包括：1）把video.js视频播放功能做成Vue组件，方便在不同的Vue代码文件中调用。2）捕获窗口关闭的事件（如点击X关闭，或者鼠标失焦点后关闭），关闭视频流。

video.js

Vue

【参考材料】

video.js官方网站：https://videojs.com/

其他编码材料：

https://blog.csdn.net/qq_60533482/article/details/128015308

https://blog.csdn.net/Uookic/article/details/116131535

https://www.cnblogs.com/DL-CODER/p/16833222.html

在线咨询

上一篇：分享web前端8款最主流的HTML5开发工具
下一篇：海淀准新人，520、521结婚登记注意事项，请看这里

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。