邊學邊做網頁篇-初識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小時內與您取得聯系。